Geo-Dashboards with Leaflet!

TL;DR: I’m rambling about a dashboard that I built using Leaflet.js, Charts.js and ESRI-Leaflt.js which fetch data from a live RESTful ArcGIS API. Check the link at the end of the article!

In these hard days (I’m talking about COVID-19 if you made it to the future) more attention has been brought to live-data-driven geo-visualizations as means of tracking the affected regions. Usually these visualizations are presented as dashboards with some maps, charts, lists, indicators and selectors. I’m quite sure that you have seen the two examples below. Otherwise, you deferentially live under the rock.

COVID-19 Map – Johns Hopkins Coronavirus Resource Center
Coronavirus disease (COVID-19) – World Health Organization

Of course these dashboards (and others) defer in performance and design. I personally like the design of ArcGIS dashboards (the one used by Johns Hopkins above), but I like working with Leaflet.js (the map component in the one used by WHO above).

In addition to ArcGIS dashboard cool look, setting it up is very easy and fun, and you can build a slick one without one line of code which is mind blowing! However, this comes with the cost of ‘the low degree of freedom’ if we want to customize it. Don’t get me wrong, they are highly customizable out-of-the-box, but I like to be in a full control.

And as you might guess, having a full control requires hitting the keyboard with some code! I happened to like JavaScript, so I don’t really mind!

So I thought why not to design a dashboard that have the cool look of ArcGIS dashboards but with Leaflet! Yes, this what I did.. I designed a dashboard (image below) using CSS Grid and used Leaflet.js for the mapping! For the chart, I used Chart.js. and for the data As a data source, I used ArcGIS REST API (thanks to ESRI-Leaflet plug-in) and it reads from a live RESTful ArcGIS API.

Geo-dashboard with Leaflet.js

Dashboard Features:

  • Maybe the unique feature that you won’t find in ArcGIS dashboards is the research bar. Here, I’m searching for the all the unique values which then I use to filter the pulled data.
  • All the elements (list, charts, search, etc) are responsive to the zoomed extent.
  • Hovering on the chart highlights the marker on the map.
  • The Search results update the rest of the elements.
  • Clicking on the list, zooms to the corresponding marker. 
  • Hovering over the marker shows the Tree id as a tool tip.
  • The markers size are based on the tree diameter.

Feel free to explore it here https://mohdhabboub.netlify.app and let me know what you think!

Summary: I have designed and built a dashboard using Leaflet.js, Charts.js and ESRI-Leaflt.js which fetch data from a live RESTful ArcGIS API.

Published by Mohammed Habboub

I’m a Data scientist working at Ramboll – UK. I’m interested in solving geospatial problems using data, optimization and machine learning algorithms. Beside that, I like reading about big ideas in philosophy and history, daydreaming, Netflixing, eating pizza and chocolate (not together, of course 😀 ) and drinking coffee (loads of coffee).

One thought on “Geo-Dashboards with Leaflet!”

  1. Hello Mohammed,
    Dashboard web app looks great yet is there any possibility to have a working demo which uses geojson integration instead of ArcGIS REST API? Thank you for the effort.

    Like

Leave a comment