 outside references but I am going to talk which is maps so one of the goals for this session I'm gonna introduce myself a little bit about me about who I am brief history of mapping current technology and getting started with mapping in ember best practices patterns testing strategies I'll leave you with one very important thought so I'll leave you with one very important thought so a little bit about who I am I first of all I am from Tulsa, Oklahoma who here in the room is from Tulsa so yeah from Tulsa, Oklahoma there I studied social science political science I did start off in computer science I thought I wanted to be a programmer and then I you know my mother was horrified when I switched to political science but here we are although it ends well so I moved to Boston actually to earn a master's in studying urban planning with emphasis in GIS so there I really discovered that I can combine my two favorite things technology and social science and urban policy so I was able to you know more specifically look at using maps as these sort of this is really powerful political rhetorical tools for conveying and communicating about social issues so this mapping technology using that to really to advance the social cause or policy sort of change so I then moved to New York New York so where we are now I took a job with the city planning department and I'm still mapping so the end that's all we have for today thank you for it I'm kidding so what is the city planning department a very simple mission although it's very simple sounding to plan for the future of New York City and surprisingly the city planning department is responsible for the future so what is this what this means is any new developments any new buildings any desired zoning change for example maybe I want to open up a cat cafe down the street but it's own for you know I don't know something else like residential so I want to tear down you know someone's house and open a cat cafe so I probably have to like go through city planning or whatever to do that I'm not doing that so right so the team I work with is the only city planning labs and we do software we're a software development team we have two two main missions build great technology and modernize the way government does technology so we are we are changing expectations about how government delivers digital services we like to think that we are what does this mean so agile agile if you will yeah this means a lot of different things to a lot of different people but to us really it it's a stark philosophical contrast to what is typical in government's just a waterfall approach which is all of your specs are asked for upfront required upfront and then you that you know sort of you're building something for someone you get the specs and then you're later you come back and you have something that you hate so that's not good agile to us it's really simply thinking more iteratively not just about the technology but about the relationship between with the customer so you know instead of this sort of super prescriptive and kind of anti-social way of building a technology solution for a human business problem we really work closely with the customer we really we iterate we learn I mean we react to those learnings week after week after week demos every week design sessions etc open source so government has a weird kind of it depends on who you talk to but there's there's some fear around open source there's a lack of understanding really about using open source not so much creating it and providing it although that's still there too but using it sometimes there's a you know this is can we trust this why are we using the enterprise solution we've always used that before you know who are these github people whatever that's the attitude that we're trying to change our team is fully embraced bill you'd be using open source and also open sourcing our own products so we create software as a public resource all right so this presentation is not about planning laps but if you are interested there is a qr code on the screen I just learned about qr technology maybe last year it's very cool it's I don't know I just think it's cool you can open your camera up and you can get a link but literally just learn how to use that so here we are so our planners use maps every day so there's a reason for that there's you know something is being built in the city you need to know the spatial context of it you need to know what what is this change in the in the in the built environment how might it impact business how I impact traffic how I impact you know zoning or housing in the area so there's a lot of contextual information that planners really need in order to ask the right questions in order to sort of follow along with with the guidelines and policies around zoning so our flagship application Zola 1000 New Yorkers use it every day okay that's not Facebook but you know it's quite a lot I think for a small team we build this application city planners use it advocates lawyers a lot of people use it a lot of different use cases so some people are you know maybe one for one example you know where can we build housing you so allowed to look at where all of the residential zoning is and where can I build in a particular neighborhood is my property in a flood zone good question we can show you if a property is in a flood zone 30 years from now or 60 years from now there is that that available that data is publicly available to you you can also look at property information okay I want to who owns the building across the street you know what what are the other sort of associated city records for that property you know what else can I learn about that property so all of this is publicly available so here we are QR code again Zola you know is a way of really sharing information online making data easy so there's a big talk about you know open data and data is available you know everywhere one can access data but knowing how to actually have the tools to do anything with data is a totally different question we hope that Zola is solving is solving that problem so give the app a try and hopefully it doesn't break so just a brief history of maps so there's a rich historical context behind maps so it starts with John Snow not that guy sorry right so John Snow was an H in 19th century English physician a leader in development anesthesia epidemiology and public health you know just as exciting as Game of Thrones also vegetarian right so he has a whole biography worth reading another time but what is he known for so this is probably a little too familiar sounding but he is mapping he mapped there was a cholera outbreak in in Soho London in the mid part of the 19th century and people didn't understand what was happening what was coming from so John Snow mapped the outbreaks and correlated those outbreaks with the water pumps now it's interesting because at the time he actually his sort of findings were suppressed by the water company so it's a bit scandalous because the water company had its own sort of interest in protecting us you know business whatever to the detriment of public health but John Snow was able to use maps to prove his case so what about mapping beyond sociopolitical sorry what about mapping sociopolitical issues what about going beyond you know public health or even just like geology and these sorts of things so think he face guy what's he thinking about Florence Kelly I love Florence Kelly because she's a pioneer in mapping technology she was a late 19th century to 20th century reformer she was commissioned to study urban slums and factories so she was a she was a labor activist and she used mapping to illustrate the sort of the issues in wealth income disparity and to really provide a visual kind of lesson and wealth inequality so what you're looking here is an income map by block in Chicago by residential block so these are streets these little buildings the black squares are you know what is that under five dollars or something five or less and then the blue is five to ten orange and so on so what this is actually called technically is a core plethora but Florence Kelly was one of the first people to actually use this technology mapping technology to really advance social political cause so it's technically brilliant mapping tools so don't let John Snow get all the credit not kidding but if you want to learn more about women in mapping which you should you can follow this QR code because I love QR codes so you know nothing John Snow whatever okay so mapping tech from print to the web so what is a web map composed of well first we have a base map which is stat maps always present it's sort of a contextualizer it orients the viewer to you know where it is in space so streets you know streets and bridges and rivers and bodies of water and parks and things like that so these are all this typically what it based on these are just sort of general terms but then you have sort of you know everything else on top of this you have data layers so these are these are the sort of maybe focal points of your map polygons lines points yeah so it's what you're seeing was all so in Zola you have you know the light gray and blue sort of like contextual map like this is actually Manhattan just to orient you but then you can turn on these data layers it's always like colorful kind of looks like a bowl of fruit loops a bit it's a little too colorful um that's that so recent technologies we have RGS digital maps and RGS RGS was is still around still widely used but I would say maybe in the 90s it was pioneer in providing wide widespread commercial access to to digital mapping but you can put it on the web so that was a problem so in 1996 that quest launched its web service you know it's great because you can actually you know look at directions online and all that stuff but the problem was it wasn't very user friendly so every sort of pan every zoom every time you need to move around the map trigger to full page reload okay so here we go enter the tile so what are we looking at here finally you didn't you could finally use a map using tile based technology you can finally use a map without a triggering full page reload which is exciting because it's a much better user experience that's my very cool technology so how does this work so there's all sorts of like we call these like slippy maps so Google maps you know these are these are this is a typical colloquial term for it so Google maps is one example you know there's open street map there's ember map wait sorry that doesn't count so alright so how does this actually work like I was saying tiles these are really just images they're just images that JavaScript sort of you know deal like it coordinates mouse gestures and mouse events with positioning of these small images on the screen so if you actually inspect a slippy map you can see these all just tiles they're associated these all just images on a grid cats whatever everyone likes that so image based tiles have limitations so what does that mean so you know sometimes you know images tile it must be generated a server it you know it's it has limited interactivity so you can't actually do on this on the fly styling there are some approaches that get around that they're a little esoteric now I'm gonna do that so it's as a sort of solution to that you can now serve tile information as vector data that means we have dynamic interactions we can change you know coloring of things and style and zoom and suddenly in the Jeff you're seeing here we're actually switching between a point representation of data and a polygon representation of data you can also notice that it using vector tile things we're rendering this using something called Mapbox GL which actually hooks into the the metal of the graphics processing computer so it's very fast rendering this is actually what Google Maps the web app uses now so in addition to just being able to do the styling the vector tiles also include all the data so you know what you're looking at here is probably a core path of percent foreign born or percent sorry percent population under 60 I'm switching between here the different sort of different core path mappings of different statistics the reason that these can be rendered and styled on the fly is that all the data is actually present inside the vector tile itself so how are tiles made so we go we have here our sorry we have a three cylindrical map projection this is a little yes so through a cylindrical map projection we are able to project a you know globe onto a flat surface so this leads to obvious distortion you can all remember middle school geography class problems so there are lots of different ways of projecting things and but for our purposes we use a projection called when our cater good to know but to break it down a little bit assume that in the tiling and tiling something assume that the world is a square we feel that way sometimes it's really not so for zoom level zero we have one tile for the world but zoom level one there are four tiles so you close the service if you're if you're trying to zoom in you kind of you get more tiles so zoom zero one two you get more tiles so that's the I like to think about that sort of a pyramid good visual so that's all it all good to know another common format probably I don't this time in another common format is it's actually probably what most people should use for most problems I would think geojson so geojson is good for smaller data sets it's good for just being able to sorry that's my uber no so geojson it's it's good for smaller data sets it's good for really quick quick and easy things basically basically the full full spatial data is is downloaded into the browser so you know if you have a very large data set it's not gonna work but for most use cases you can really get away to geojson it's fine so what is geojson it's just opinionated JSON format for for storing spatial data so think of it as JSON API but geography map data so kind of putting it all together whoa okay a lot of stuff going on here all of this really to just do mapping well not always but I would say that for most most use cases the geojson approach mapping simple geojson is gonna work just fine but for more complicated map mapping technologies this is how it works and I would say for Zola this is how this is pretty much exactly how we kind of deal with rendering and storing and maintaining all of that data so that's a lot of stuff but we don't just build it from the ground up there are these things called cloud services Carto is is one of them I really like Carto because it is truly open source we actually did run Carto power source backing up a bit like what does it actually do it takes care of everything you see in the red red circle there takes care of all of that so the reason I like it so much is that like I was saying you can run it you're on infrastructure it's truly open source and we actually did do that you know there's a lot of companies that talk big talk about you know like it's open source you can run it this we actually delivered live services on top of it for over a year and we just did we just didn't want to maintain you know upgrades to it so you know let's pay for it but really like kind of shows how it's like the opposite like instead of paying for a service and then figuring out oh it's open source I'm just gonna run this myself we actually have the opposite experience we were running it ourselves if we prove the value of it and then you know we run a lot of applications on it still so sorry backing up but I would say Carto is great but it's not you don't if you're just trying to show a point on a map you don't necessarily need to use Carto Carto would be overkill for that although it was very cool accessibility alright so yes maps are obviously intended as a sort of visual tools that doesn't mean that they can't be described it doesn't mean that persons who depend on accessibility tooling or visually impaired doesn't mean that they can't also be enjoying and using maps so we can still we can still work on this we can still do a lot better so one thing to consider when doing accessibility is use leaflet JS the reason for that is it's all SVG based so you know some of the maps I was showing you earlier a WebGL based what that means is that there is a little canvas element and that's all there's just a canvas element you don't get you don't get all these nodes in the DOM so you can actually you can't actually put aria information on them so with SCG base mapping like leaflet you can you can put the aria information on there because you get all those dom nodes it's really nice I'll just say MapxGL this canvas base you just get a canvas really hard to make that accessible that said there is an add-on called MapxGL accessibility which I work which you know I didn't build that I'm trying to contribute more to you I encourage everyone to to take a look at this really cool problem to work on yeah so basically the way it works is you have your sort of canvas based DOM node there and then on the other side you you know you can have sort of a shadow representation of what's happening in in the map and it's all invisible but it has its all sort of DOM representation of you know maybe I have like five points or six points or something I'll have six dom nodes for those things and I'll put some information on them so that you know and then you keep these two things in sync and then it really really makes things a lot nicer there's still a lot of work to be done so if you're really interested I would check out MapxGL accessibility it's a pretty cool problem to work on we should we should make these awesome maps accessible right so case study Zola back to Zola I talk about that a lot not the marriage up wedding app sorry basic features many many many data layers map state preserved in URL layer styles shared costs other apps monthly data updates yeah so we need all of these things so so what does that mean these way the easiest way to jump in for us was to use ember not on ember mapx GL right so what is this it's simply a bindings layer on top of the core map box GL JS library so it provides you know a really nice declarative developer experience so kind of breaking down what we're looking at here on lines on line three we have the sort of outer or map box component this is what's actually building that canvas element it's initializing all the map stuff it's you know nothing's really in it yet unless you've told it so a base map will be in it but nothing else is really in it no data layers are quite in it just yet but that's what four and lines four and five do so line four you pass in again you see this geo JSON type and then you pass in the actual geo JSON data so that's what the model is going to be this is geo JSON data yeah I mean this you know if you look at the geo JSON specification any any geo JSON you pass into this map box GL I was going to understand it and then you have this other contextual component on line five called source dot layer and that's you know that's more responsible for the visual sort of styling of that data so mapped out source is all the data behind behind the stuff source on layer is the styling and stuff in the sort of paint property you see there it here's to map box geo's own styling specification so it's you know all of this is pretty the ember map box geo add-on tries to of course get as close to whatever the underlying map box base API is happening right so so problem two sibling components who depend on you know the same state of something so for example I want to turn on that zoning districts layer there so there's information about zoning districts such as its state such as whether it's on that the map needs to know about in that this meant many to know about so when we got around this is how do we you know so yeah stairs sharing state across sibling components so what we've got around with this is passing in the layer passing down a sort of layer configuration model so multiple models for each layer pass down to both components since these are data models they they have their own internal state and the menu can reference it and then the map component can reference it keeps the UI state in sync we don't have a bunch of weird like you know event buses and stuff like that you know this is one way of doing it so anatomy of the map component so you know when we first started this you know you notice that there are several widgets there are several things going on you have a print button you have a measure tool you have a draw tool you know all sorts of stuff going on so our first draft of the map component was very very very very long I think this Jeff goes to like maybe 400 or 500 lines which probably isn't that bad in the grand scheme of things but it actually it was actually interesting because in this case instead of you know reaching for what could have been the wrong obstruction meaning assuming that we know the future and that we're going to need this thing because it feels like we're probably that'll be cool and can be needed to have that thing instead of reaching for that we really allowed this sort of component this class or ripen a little more before we jumped into kind of refactoring it so so finally after it was ready kind of it was getting too long and a wieldy we need to refactor so we really knew what the problem was now we can start grouping these together so highlighted feature highlighted highlighted visual feedback so whenever the mouse hovers over a part of the map and you want that visual feedback all those concerns can be grouped together put it in a component you know the draw tool so being able to you know draw and measure stuff so all the handling for putting the things on the map when you draw a lot of mouse events all of the you know little calculations and text and being able to switch between the unit take it put in a component you know visual feedback for whenever you select something so again component so one thing I think to take from this is when in doubt make a new component you know when it's it's always scary to kind of you know start creating a new class for something but I do think you know you could really easily clean up a lot of a lot of code and a lot of complexity by simply down okay so line two for example we have here is the measurement widget we simply pass down the map into that layer widget and all the layer concerns happen there line for measurement which passed on the map it's really just sort of separating concerns and just giving things their dependencies that they really need understanding what those dependencies are all these things depend on a map instance so makes it easier to test makes it easier to sort of split out things lesson here don't abstract too soon and well this is the next session next section tests it's really hard to test maps if you were how do you even acceptance test of jail canvas you don't I mean I've tried it's scary right so you you know you have all these click events you you have all these hover events you want to make sure that visual feedbacks happening you want to make sure that you know you're not going backwards on certain behavior that things are turning on and they shouldn't be you know this is this is all really hard to deal with WebGL canvas but what you can do is use elaborate stuff so what is a stub stub is sort of a mock it's these are all sort of loosey-poosey terms I think some people have tried to really define them probably computer science journal articles can you know very clearly talk about what that means we're really a stub is just a fake class that you are using to mock certain behaviors so instead of using a real map you could use a fake class and just assume that the underlying thing works so how do you step a map dependency injection another probably pattern all that means all that means is because we've broken things out a little bit more we have our map box basic map component line one here and our testing environment through some of ember's test tooling we can stub in a yeah we can we can we can stub in the map instance so instead of that component yielding out a real map box you know map like it just you yield an instance we can stub it and then hand it a kind of dummy object and all of these methods here add layer add source get source these are all actually map box GL API methods I have seen some map box GL add-ons use elaborate stubs for this reason it's not always the best thing in the world but it has worked really well for us another tricky part is a map box GL is event driven so you know how do you simulate a mouse move event an underlying map box GL detects math mouse move and then it you know it triggers the callback for your apps handling for what happens when a mouse moves you know I was what something has worked for us is to use something like what we're seeing here which is just manually within your test actually trigger that behavior and give the callback signature that you know is needed for whatever your your own apps callback function is so you know this way you're actually triggering the behavior in your app and testing it but real talk you know this has worked really well for us but you're really not supposed to mock what you don't own so you know I don't love I don't love this solution but it has it has you know in the absence of any testing this is working really well I think ideally in the future we go back to map box GL accessibility actually in building out that add-on will really help us deal with using real mouse events using real clicks to actually test behavior on the map so but we need to build that out first but also yeah seriously so like don't mock what you don't own is is the general advice but let's you know it can be reasonable so no more aggressions we hope right so a great power comes maps how to lie with maps so I'm kind of this is the very important message I wanted to end with which is maps are very powerful rhetorical tools they are things that everyone sort of identifies with we identify with place you can point where you live where you been on the map and you know what I like this quote a lot is it's you know map users you know we we kind of just we kind of just assume and trust the map we trust maps exist every trust map is a representation of reality so this is an example this is a great example of how you know how easy it is to rhetorically misinterpret a map so what you're seeing on the left there is recent presidential election so these are how people voted sorry this is how people voted yeah so on the left there you're looking at the election results by county but if you normalize the election results by population distribution you actually get a totally different picture actually looks much closer than you could understand and the other and the other one and there was one map in this slide that you're seeing that was shared a lot by one party and this is a great X X K CD or something I guess really just my biggest pet peeve also is you know you can't just spatial correlation doesn't mean that there's actually a real relationship between these things most of it's just a function of population so we can see for example in Twitter data tweet you know this is in 2013 there's a lot of excitement about web mapping much more accessible possible to use mapping mapping tools a lot of that hashtag map thing so a lot of McDonald's being mapped but you will see that they these are largely just functions of population density so on the Twitter data's map there is tweets during the election and the right is population density so I mean I love looking at cool map but it's you know it's it's between rhetorically dishonest or just not that interesting that's okay you know another thing is augmenting a message through maps there's obviously graphic design choices that could be made you know you have this on the left we're talking about you know gun death you know raging epidemic it's black and red and the crosshair on it and and then bottom left actually what you see is these sort of granular bins so it creates a lot more like kind of I don't know visual no not yeah a little bit more visual noise I guess makes it just look kind of grizzlier on the right you kind of the opposite rhetorical angle you know the title fewer bins on the bottom left you know and you're describing not describing as violent deaths you're describing as incidents incidents per you know hundred thousand or something these are choices that you can make so yeah so thank you all for joining me my apartment I the city I'm learning is a lot of us are working from home now I never thought that would happen but yeah thank you so much please reach out on discord if you have any questions yeah thank you