The world’s leading publication for data science, AI, and ML professionals.

Presenting Spatial Data Interactively with Story Maps #2

Telling stories and insights with interactive maps in pages.

Custom Story Maps by Sutan.co.uk (Author, 2023)
Custom Story Maps by Sutan.co.uk (Author, 2023)

Link to demo:

Commuting in Jakarta Story Maps

Link to repository:

GitHub – sutanmufti/story-maps

Previous Article:

Presenting Spatial Data Interactively by Scrolling

Spatial Data Science and Cartography

As a specialist in spatial data and data scientist, my job is to generate insights from (geo)spatial data. Of course, the end results are visualising these insights so that people understand what is the insight. It requires communication techniques. While ordinary data visualisation revolves around charts and graphs, spatial data visualisation revolves around maps. Cartographers, whose job is to make maps, are essentially the people who do this job.

However, I feel that the boundary between "cartography" and "Data Science" is fading; or merging. The prominence of GIS in the 1990’s propelled by ESRI (Environmental Systems Research Institute) has integrated information technology to the realm of cartography. This means that maps are not drawn by hands anymore; instead maps are drawn based on the tables you provide. This is a powerful novel paradigm! Every table can be converted into a map through sets of rules.

"Our definition of cartography describes it as the ‘art, science and technology’ of mapmaking, a definition which illustrates the breadth of the discipline." – British Cartography Society

What makes spatial data analysis to be different to data analysis? Spatial data analysis has what I call "spatial attribute"; a geometry column. Learn more about spatial data structure in my other article:

Spatial Data Science: Data Structures

From Static to Interactive Maps

Before the internet, the output of spatial data analysis is a static map. However, as IT technology progresses, our modern internet browsers are able to handle interactivity. This utilises Javascript, a programming language to make websites interactive. This also benefits mapping society; We can present maps as an interactive web-page. Take a look at Google Maps or Openstreetmap.

The good news is that in this open source and modern environment, everyone can access the tool to build such interactive maps.

This Article

I want to share how I produce spatial data visualisation with interactive maps. More than interactive, it is a story map; page-per-page contextualised map to the paragraphs. I hope that this inspires people to generate more interactive maps and as a beacon that sparks wild ideas towards novel spatial data visualisation.

I won’t go deep into the codes. I will, however, discuss the basic idea behind making things interactive and highlight the snippets of the code. You can see the code in the github repository right here.

Please note that I will limit the discussion to the scope of interactivity which is handled using javascript. I will not discuss the styling using CSS and layout using HTML.

Jakarta Story Maps (Source: Author, 2023)
Jakarta Story Maps (Source: Author, 2023)

Introducing Interactivity with Javascript

While Python is mainly used for GIS, data science and spatial data science, We develop websites using HTML, CSS, and Javascript. To learn more about these languages and their roles in spatial data science, please read more in my other article.

Spatial Data Science: Javascript & Python

The highlight of this article you are reading is taking the best out of Javascript. Handling user inputs or making our website change and active use javascript.

Using Mapping Libraries

We do not code from scratch; it is inevitable to not use modules/libraries. In mapping case, the classic mapping library is Leaflet (as also discussed in the previous article link). In the demo link above, I used leaflet to display and animate the maps.

Leaflet – an open-source JavaScript library for interactive maps

Please note that this is not the only library for mapping, for instance, Openlayers, Google Maps Javascript API, ArcGIS Javascript API, Mapbox, etc! But I like leaflet because this is light weight, very simple, and most likely solves 80% of my problems. Furthermore, their documentation is also straight forward with examples.

The Technical Idea

Before jumping into the code highlight, I want to first discuss the idea of what the code is trying to achieve. A code is just a tool to achieve a purpose; we must know the purpose first before we code.

Page per Page Map

Story maps consist of page with relevant maps to illustrate the page. Each page usually has different maps. This means that when a page is activated (emits an event), a function is invoked. This is what people usually learn when they learn Javascript.

Pages (Source: Author, 2023)
Pages (Source: Author, 2023)

This is the simplest pseudo-code for each page button

const pageButtonOne = document.querySelector('#pagebutton')
pageButtonOne.addEventListener('click',handlePageOne)

function handlePageOne(){
  // remove the map layers
  // adds the relevant layers
  // zoom to the view
}

This is how to handle events (such as users clicking); and each button has an event handler function. A simple example of such code in leaflet is in the following page (link to demo):

Page Reactivity Demo (Source: Author, 2023)
Page Reactivity Demo (Source: Author, 2023)

story-maps/pagebuttonexample.html at main · sutanmufti/story-maps

The actual Javascript code is in the following block:

let map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

const pageone = document.getElementById('pageone')
const pagetwo = document.getElementById('pagetwo')

pageone.addEventListener('click', ()=>{
    map.flyTo([51.510, -0.08], 10);
    // add or remove layers
})

pagetwo.addEventListener('click', ()=>{
    map.flyTo([52.545, -0.091], 8);
    // add or remove layers,
    // or other animation functions that reponse to the interactions
})

The code above captures the "click" event and runs the corresponding arrow function (this is a javascript thing).

Handling Geospatial Data

A map consists of layers of data. Each "layer" is a table that has a geometry column. This is how we display geospatial data. I have another article that discuss spatial data structure.

Spatial Data Science: Data Structures

I treat, analyse, draw, and do stuff to geospatial data with QGIS. It is a free open source software meant to provide access to GIS (Geographical Information System) to everyone. As a free software, it is surprisingly very powerful. It is very impressive that it is free!

User Interface of QGIS (Source: Author, 2023)
User Interface of QGIS (Source: Author, 2023)

What can you do with QGIS? You can do spatial data analysis and generate layers of maps. It can connect to an enterprise database such as Postgresql and manage the spatial data inside the system. Then, conduct spatial SQL and produce layers based on the SQL analysis.

Spatial Data Science: Spatial Queries

These analysis (whether it is from QGIS tool box or Spatial SQL analysis) is then exported into an appropriate format; most likely a GeoJSON format. It is a JSON format that conforms to GeoJSON standard that standardises geospatial data serialisation. This ensures interchangabe attribute to the data allowing multiple software such as ogr2ogr or Leaflet to handle spatial data.

Extending with Python

When you want to ensure reproducibility, then you might want to use the python console and produce your scripts. The QGIS api is straight forward to use and there is a cook book.

Python Console (QGIS)
Python Console (QGIS)

Integrating GeoJSON with Leaflet

These outputs is then added into leaflet like the following code illustrates. Do this for each layers.

async function loadGeojsonToMap(){
  // using http request to obtain the geojson file from qgis
  const resp = await fetch('./data.geojson')
  const geojsonfeature = await resp.json()

  const mapLayer = L.geoJSON(geojsonFeature)

  mapLayer.addTo(map) // map was instanciated in the previous code block
  return mapLayer
}

const mapLayer = await loadGeojsonToMap();

Conclusion

Cartography is product of visual art and data science. The advancement in computer technology allows cartography becomes interactive. This interactivity, if moulded in such a way, can produce a narrative with rich illustration and allows the readers to explore. First, we analyse and produce the layers using QGIS or any GIS software. Then we serve the analysis using Leaflet (HTML, Javascript, and CSS). The best thing about this is that it is free and everyone can do this. You can do this as well.

If you like spatial and network data science content, please follow me. I write advanced spatial data analysis content with urban planning, infrastructure development, and transportation context.


Related Articles