Skip to main content

Command Palette

Search for a command to run...

Geographic Information in the Browser

Published
2 min read
N

The perfect storm of AI/ML, Data Science, DevOps, Infrastructure, Agile/Lean Product Management all for the purpose of delivering enterprise intelligence solutions and operational value to clients. Today, I'm doing this for Defense and Intelligence clients through Harness.

When I'm not working or studying I'm likely doing design projects, spending time at the gym, reading/discussing anthropology, or mentoring others who are pursuing non-traditional entries into a technology-driven career.

Opinions expressed here are my own.

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!

Conclusion

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!