Geographic Information in the Browser
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.
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 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.
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.
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!