Navigating Towards Stronger App Architecture Using Maps

Like the cities they represent, interactive maps are complicated feats of engineering. They are resource-intensive microcosms of state management, requiring special data formats and styling specifications. When the needs of an application go beyond showing points on a map, cartographic applications can quickly grow unwieldy and unsustainable. Throw moving targets, messy data, and squeezed timelines into the mix, and you've got an enormous component that does everything – poorly. This talk discusses the latest mapping technology and approaches to building better components - map-based or otherwise.

Transcript

1. Navigating Towards Stronger App Architecture Using Maps
2. Goals for this Session - About me - Brief history of mapping - Current technology - Getting started with mapping in Ember - Best practices, patterns, & testing strategies - One Very Important Thought
3. Who am I…?
4. Tulsa, Oklahoma
5. Boston, Massachusetts
6. New York, New York
7. The End! The End!
8. “To plan for the future of New York City”
9. • Software development team in city planning • Modernization in tech and process
10. We’re trying to change changing expectations about how government delivers digital services.
11. Agile
12. Open Source
13. planninglabs.nyc (because this presentation is not about planning labs!)
14. We use maps every day
15. Where can we build housing?
16. Is my property in a flood zone?
17. Look up property information
18. zola.planning.nyc.gov
19. A Brief History of Maps
20. Jon Snow!
21. Not that guy :(
22. John Snow!
23. (Also, a vegetarian!)
24. John Snow was one of the first physicians to study and calculate dosages for the use of ether and chloroform as surgical anaesthetics, allowing patients to undergo surgical and obstetric procedures without the distress and pain they would otherwise experience. He designed the apparatus to safely administer ether to the patients and also designed a mask to administer chloroform.[17] He personally administered chloroform to Queen Victoria when she gave birth to the last two of her nine children, Leopold in 1853 and Beatrice in 1857 and was still not yet knighted,[18] leading to wider public acceptance of obstetric anaesthesia. Snow published an article on ether in 1847 entitled On the Inhalation of the Vapor of Ether.[19] A longer version entitled On Chloroform and Other Anaesthetics and Their Action and Administration was published posthumously in 1858.[20] After finishing his medical studies in the University of London, he earned his MD in 1844. Snow set up his practice at 54 Frith Street in Soho as a surgeon and general practitioner. John Snow contributed to a wide range of medical concerns including anaesthesiology. He was a member of the Westminster Medical Society, an organisation dedicated to clinical and scientific demonstrations. Snow gained prestige and recognition all the while being able to experiment and pursue many of his scientific ideas. He was a speaker multiple times at the society’s meetings and he also wrote and published articles. He was especially interested in patients with respiratory diseases and tested his hypothesis through animal studies. In 1841, he wrote, On Asphyxiation, and on the Resuscitation of Still-Born Children, which is an article that discusses his discoveries on the physiology of neonatal respiration, oxygen consumption and the effects of body temperature change.[21] Therefore, his interest in anaesthesia and breathing was evident since 1841 and beginning in 1843, Snow experimented with ether to see its effects on respiration.[5] Only a year after ether was introduced to Britain, in 1847, he published a short work titled, On the Inhalation of the Vapor of Ether, which served as a guide for its use. At the same time, he worked on various papers that reported his clinical experience with anaesthesia, noting reactions, procedures and experiments. Though he thoroughly worked with ether as an anaesthetic, he never attempted to patent it; instead he continued to work and publish written works on his observations and research. Within two years after ether was introduced, Snow was the most accomplished anaesthetist in Britain. London’s principal surgeons suddenly wanted his assistance.[5] John Snow studied chloroform as much as he studied ether, which was introduced in 1847 by James Young Simpson, a Scottish obstetrician. He realised that chloroform was much more potent and required more attention and precision when administering it. Snow first realised this with Hannah Greener, a 15-year-old patient who died on 28 January 1848 after a surgical procedure that required the cutting of her toenail. She was administered chloroform by covering her face with a cloth dipped in the substance. However, she quickly
26. What about mapping socio-political issues?
27. Florence Kelley
29. Don’t let John Snow get all the credit! You know nothin’, John Snow………...
30. Mapping tech: from print to the web
31. What is a web map composed of?
32. - Basemap - Static data that is always present
33. - Basemap - Static data that is always present - Data Layers - Polygons
34. - Basemap - Static data that is always present - Data Layers - Polygons - Lines
35. - Basemap - Static data that is always present - Data Layers - Polygons - Lines - Points!
37. Recent Technologies
38. Digital Maps in ArcGIS
39. lyzidiamond
40. Enter… the TILE
41. Tiles Load Way Faster
42. Google Maps
43. OpenStreetMap
44. EmberMap!
46. They’re just images
48. (Obligatory cat-related GIF)
49. Image-based tiles have limitations...
50. Serve tile information as vector data
51. Dynamic interactions
52. Data Now Included!
53. How are tiles made?
56. assume that the world is a square:
57. 1 tile for the world! Zoom Level 0
58. Zoom Level 1 4 tile for the world!
61. Another common format: GeoJSON
63. Putting it all together
64. Source: http://joeyklee.github.io/
67. Accessibility!
68. Consider LeafletJS (see: ember-leaflet)
69. SVG-based!
70. MapboxGL is canvas-based!
71. mapbox-gl-accessibility
72. There’s still a lot of work to be done :(
73. Case Study: ZoLa
74. Basic Features - Many, many data layers - Map state preserved in URL - Layer styles shared across other apps - Monthly data updates
75. ember-mapbox-gl
76. Declarative!
78. State across sibling components?
79. [{ Layer Configuration Objects }, ...]
80. Anatomy of the map component
81. WIDGETS!!!
82. Our first draft of the map component
86. When in doubt, make a new component
87. The lesson here: Don’t abstract too soon
88. Tests!
89. How do you acceptance test a WebGL canvas?
90. You kinda don’t...
91. -
92. Use an... Elaborate Stub
93. How to stub a map?
94. Dependency Injection!
96. It just yields the instance...
98. One tricky part: MapboxGL is event-driven...
99. Control the callback’s function signature Some test:
100. Real talk: don’t mock what you don’t own (...but this worked rly well for us)
101. No more regressions! (we hope)
102. “But with great power...
103. ...comes rly cool maps??/
104. How to LIE With Maps
106. “Map users seldom, if ever, question these authorities, and they often fail to appreciate the map's power as a tool of deliberate falsification or subtle propaganda.”
110. Or Augment a Message
111. Thank you!