How to build your own Story Map
Esri style story map made with Leaflet, Mapbox and a bit of coding
The idea of this project was to recreate the functionality of the Esri story maps using free and open source software. Here are the key features we wanted to have on our map:
- A base map layer with a custom style.
- A layer with custom markers representing each “story”. In our case it were the projects of our company.
- A sidebar with projects thumbnails, dynamically loaded respectively to the markers currently visible on the map.
- Some essential behavior like zooming to the clicked project, hiding the sidebar, etc.
We decided to build the map using Leaflet, as it is one of the most popular mapping libraries and offers flexibility along with a great number of plugins. Creating a map and adding layers to it is easy with Leaflet and there are plenty examples and tutorials on the official site.
For the custom styling without any hesitation we picked the Mapbox Studio as it has a great number of styling options and renders pretty fast too.
It appeared, that there is a sidebar plugin for Leaflet, which suits our needs perfectly. Dont be surprised, but it is called “leaflet-sidebar”. In addition to these main blocks we used jquery, bootstrap and font-awesome.
The marker layer is generated from a GeoJson file, which stores project coordinates and attribute information such as name, description and even the path to the pictures. The data from the GeoJson file are used to populate the tooltips as well as the sidebar description. The following code shows how we dynamicaly set the content of the sidebar, when marker is clicked.
As for the list of markers currently on the screen into the sidebar, it was implemented based on this example. The only difference is that instead of just coordinates we apply some html markup.
You are welcome to check out the final map here. Sorry it is only in russian at this point.
Recently we discovered Mapbox GL JS for ourselves and decided to experiment with it. As our map was built on Leaflet we cant just add mapbox-gl.js to it and enjoy all the goodies it offers. There is a workaround for it — a “mapbox-gl-leaflet” plugin. With its help we were able to add a mapbox GL layer as simple as this:
It works, looks the same, but acts a bit different when panning the map. You may play with it here. Mapbox GL has many interesting features we would like to experiment with. In order to do this we will have to migrate from Leaflet. It cant be done in a blink of an eye, but a meantime we where able to implement a heatmap example with our map style and a subset of projects data.
The life heat map is hiding on our sandbox server here.
It is likely we are going to stick with Mapbox GL for the next version of our story map. But migration from leaflet and implementing new features is a whole another story…