Telling tales and insights with interactive maps
This text is a few story map I produced:
…and this text is the story of how I constructed it.
A cartographer’s merchandise are maps. We work with shapefiles (which is the legacy of spatial knowledge storage), geodatabases, geojsons, and plenty of type of spatial knowledge and use GIS to supply maps out of them. These maps, nonetheless, are sometimes JPEGs, PNG, or PDF paperwork which aren’t interactive. For many instances, sure it really works, however I like telling and being advised tales the place I don’t need to do a lot of the work. With much less effort, how can I get advised tales?
Then I encountered Cuthbert Chow’s article about D3.js. D3.js is a javascript library to control parts and svg within the DOM (Doc Object Mannequin). Folks use D3.js to current knowledge, through which Chow has finished magnificant demonstration, extending Jim Vallandingham’s article. Have a look at his following article.
After which it got here all the way down to me: we will make this with maps too! The thought of scrolling and having the information being offered interactively is feasible utilizing javascript. This text tells the story of how I did it.
Yow will discover the stay demo right here:
Stacks
All knowledge and map sources are open sourced (openstreetmap). The next are the stacks I’ve used
- jquery and d3.js : doc manipulation
- leaflet.js : interactive web-map
I write about spatial knowledge science, and I wrote an article about presenting spatial knowledge within the following article. This text is the demonstration.
Basically the thought of the way it works is:
- Utilizing Python to accumulate and analyze spatial knowledge.
- Utilizing HTML to put out the paperwork, CSS to make issues stunning; presenting the content material.
- Utilizing Javacript to make issues interactive. On this case, change the maps after we scroll.
Moreover (not on this article/challenge), we will do one thing relating to the information sources:
- Storing knowledge in postgresql + postgis database server.
- Apache Airflow to orchestrate/robotically purchase knowledge and populate the database server.
- Utilizing geoserver as a backend map server.
Maybe for future initiatives.
I gained’t cowl the main points, or this text will turn out to be very lengthy. What I’ll clarify is the excessive stage thought for builders to… develop.
Many of the code comes from Jim’s article about javascript scroller. The demo primarily based on this code is accessible right here.
However on this article I’m discussing my demo. I’ll break it down primarily based on these parts:
- Structure
- Sections and Scrolling
- Information Storage
The Structure — Fixing the Map
The format is predicated on Bootstrap 5 css module. This can be a quite common module that beautifies HTML rapidly. It gives the important minimal UI parts.
Particularly, I made 2 columns, as colored by the next picture. Gray is the physique’s background, blue is the margin, and white/mild is the column’s background.
<div class="container">
<div class="row">
<div class="col-4">
the primary column, textual content contents / tales
</div>
<div class="col-8">
the second wider column the place the map goes to stay
</div>
</div>
</div>
I need the scroll to be interactive to the story/textual content, however to not the map. Which means that the map must be mounted no matter how a lot we scroll. That is the place css is available in. Every part that ignores scroll requires the place to be mounted, and so I created the keep css class.
.keep {
place: mounted;
peak: 100%;
width: 100%
}
and stick it within the div the place the map will stay.
<div class="col-8">
<!-- the second wider column the place the map goes to stay. -->
<div class="keep" id="mapcontainer">
<div id="map" ></div>
</div></div>
This fashion, the map div will likely be mounted.
Maps and Javascript
because the map div is created, we will now import leaflet javascript library to make our maps. Leaflet gives the map interactivity instruments that I would like. It’s a good package deal; so easy but it surely works!
var map = L.map('map').setView([51.505, -0.09], 13);L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A reasonably CSS3 popup.<br> Simply customizable.')
.openPopup();
Identical to Chow’s and Jim’s construction, the Arriving London web page additionally consists of sections with id step .
<div class="col-4 full ">
<part class="step ">
my first part
</part>
<part class="step ">
the second part
</part>
<part class="step ">
and so forth
</part>
<part class="step ">
...
</part>
</div>
Scroll Interactive
After the steps are outlined, the doc wants to trace the scrolling exercise from the consumer. The next code calls the trackPosition operate each time the consumer scrolls.
d3.choose(window)
.on("scroll.scroller", trackPosition);
The trackPosition is as the next:
// sectionsArray are the div step (s) from the HTML that we beforehand outlined
let activeSection;
let previousSection;
const trackPosition = ()=>{
let pos = window.pageYOffset - 140;
let sectionIndex = d3.bisect(sectionPositions, pos);
sectionIndex = Math.min(sections.dimension() - 1, sectionIndex);
activeIndex = sectionIndexif (sectionsArray[sectionIndex] !== activeSection){
previousSection = activeSection
activeSection = sectionsArray[sectionIndex]
d3.choose(`#${activeSection}`)
.transition()
.model("opacity", "1");
d3.choose(`#${previousSection}`)
.transition()
.model('opacity', '0.2')
;
positionMap(sectionIndex)
}
}
Please discover the positionMap operate! This operate is what makes the map adjustments.
// positionMap: adjustments the map primarily based on the lively stepconst positionMap = (sectionIndex) =>{
if (sectionIndex === 0){
map.flyTo([51.505404,-0.118658], 9,) // zoom in to coords
airportLayer.addTo(map) // leaflet layer
elizaebthLine_st.take away() // leaflet layer
popupairport() // popup the map
sights.take away() // leaflet layer
}
if (sectionIndex === 1){
map.flyTo([51.509687,-0.115464], 13,) // zoom in to coords
sights.addTo(map) // leaflet layer
sights.eachLayer((l)=>{l.openTooltip()}) // open the tooltips
// add one other if and manually code the interactivity. Learn the leaflet documentation.
}
In a schema-less knowledge construction, which is principally an array containing JSON objects, we will add arbitrary properties. I exhibit this within the knowledge construction article.
We will outline a spatial knowledge as minimal as this:
// minimal spatial knowledge
const berlin = {
"metropolis": "berlin",
"nation": "germany",
"location" : {
"sort" : "Level",
"coordinates": [52.507650, 13.410298]
}
}
However I confine to the GeoJSON spatial knowledge specification, so the spatial knowledge appears to be like like this:
const attractions_geojson = {
"sort": "FeatureCollection",
"options": [
{
// minimum spatial data but with geojson spec
"type": "Feature",
"properties": {
"name": "big ben"
},
"geometry": {
"coordinates": [
-0.12466064329075266,
51.50067738052945
],
"sort": "Level"
}
},
{
// minimal spatial knowledge however with geojson spec
"sort": "Characteristic",
"properties": {
"title": "leicester sq."
},
"geometry": {
"coordinates": [
-0.13047682089788282,
51.51079955591317
],
"sort": "Level"
}
}
]
}
The attractions_geojson.options containing our layers, within the code above, consists of two layers: Massive Ben, and Leicester Sq.. The geojson.options is a listing of the entire minimal spatial knowledge.
You’ll be able to view the spatial knowledge within the variable.js if you load the demo hyperlink in your browser.
Utilizing Javascript and HTML, we will make our knowledge interactive. As a cartographer which means that I could make my maps interactive and responsive! The difficult bit is to retailer the spatial knowledge as a javascript file as a substitute of a standard shapefile and geojson object.
