Interactive office map in JS

The presentation can be useful for all JavaScript developers—from juniors to seniors.
It contains a roadmap for implementing a custom map in web, a toolset, tips & tricks =)

Transcript

1. Interactive office map in 1 JS
2. Agenda •fairytale •how to draw a map •how to find a … •which data to collect •godmode •one more thing •hosting •analytics 2
3. It all started with an idea Aleksandra Golubeva 3
4. Sad story 4
5. Poll StarWars meeting room 8% Gemini team 12% QA from the Setapp team 21% Napkins 26% Someone’s workplace 33% macOS 8% Android 10% iOS 35% Web 47% 5
6. Three Months Later… 6
7. Web app 7
8. Basic stack •node.js •express •mongo •react •react-bootstrap •redux •react-router •webpack 8
9. Authorization 9
10. leafletjs 10
11. react-leaflet 11
12. Tiles 12
13. Tiles svg + svg2png + image-tiler 13
14. Fuse.js A lightweight fuzzy-search, with zero dependencies. 14
15. react-autosuggest •WAI-ARIA compliant •full rendering control •keyboard events •active section highlight •any idea you want 15
16. Data entities Area •array of coordinates Room •coordinates •title •description •keywords Houseware •coordinates •title •description •keywords Employee •coordinates •BambooHR •Slack Table •array of coordinates 16
17. godmode •point-in-polygon •leaflet-draw •leaflet-path-transform 17
18. macOS & iOS apps 18
19. One more thing… Steve Jobs 19
20. Slack bot •ngrok •block kit builder 20 ➡What do you do when you see a spaceman? ➡Park your car, man!
21. Hosting heroku + mlab == ❤ $22/month 21
22. Analytics amplitude + amplitude-js 22
23. Q&A