Geographic Information in the Browser


2 min read

I took an introduction to GIS class through Grad School and it was pretty cool!

Even though a majority of what we learned was in ArcGIS, I made some cool maps using Leaflet.js that I wanted to share.

Tree Survey

The class collected data using a novel tool called Epicollect5 that I had never heard of before but I will definitely utilize for school in the future. In a nutshell, it is an easy-to-use platform that allows you to create simple data collection apps and surveys that you can distribute as web apps or even phone apps. If you’re a student learning front-end development, this is an excellent tool to survey and collect data to be retrieved via a JSON REST API.

The map!

The blue bounding box was a Leaflet polygon drawn by me to help direct my fellow students on where they were supposed to collect the data. Each green dot represents a tree for which data was collected. If you click on any individual green dot then a popup will provide you the information that was collected about each tree: Diameter of the trunk (in measured inches) Height (Categorized) Health (Categorized) Observable Damage (Binary) The blue marker was the location of our classroom.

Final Project

My final project was a Systems Engineering approach to various GIS systems to compare and contrast their capabilities and costs.

Another Leaflet Map I made was simply a mapping of the Capital BikeShare Dock API. This includes up-to-date information about the number of bikes that are currently available at each station as well (presumably you could include some clever JS/CSS filtering to use different icons based on availability, this is likely what nearly every major scooter/bikeshare app is using now.

The map!


Leaflet was super easy to use and I can’t wait to explore some other ways to use it. A couple ideas I have in mind already:

Volunteering geographic information through the browser’s underlying hardware integrations:

  • Average Wifi Speeds for Coffee Shops and Libraries
  • Some interesting heat maps and visualizations to sit on top of this data.
  • Geolocation Browser API for collecting additional location data
  • An interesting experiment in virality of objects, handing out QR code stickers at a conference and seeing where they end up geographically!

Did you find this article valuable?

Support Nic Acton by becoming a sponsor. Any amount is appreciated!