Map mock up
The other major technology that we used was Mapbox. I’ve used this in the past and I knew this would be a great choice for quickly mocking a map together. Mapbox provides an online studio where it is possible to upload GIS data in a variety of formats CSVs, GeoJSON, KML or shape files. Mapbox then handles converting this to a tileset which can then be added as a layer to a map.
Using Mapbox Studio it is then possible to style the map add filters and add criteria to the map styling, such as changing a marker’s colour based on an incident’s priority. Using Mapbox I managed to create the data visualisation without writing a single line of code.
The only task left to do was to pull the map in using an access token and unique Mapbox style URL and then program and design the interactions and popups. Mapbox uses WebGL to render and process the map data so it performs a lot better than a lot of legacy map frameworks that rely on DOM manipulation to display and move markers. It is worth noting that this may not work on older browsers.
It’s possible to change the map parameters quite easily using a bespoke query language which you can also use in Mapbox studio but for the purposes of the demo this wasn’t necessary. If I had to point out one annoyance I had with Mapbox it is that it uses the format LngLat instead of LatLng which caught me out when I was trying to centre the map around Newcastle and ended up in northern Brazil to my own confusion!