Major League Hacking & Developer Student Community

What it does

A Progressive Web App (PWA) that leverages modern browser technology for viewing custom maps, even when offline.

How we built it

With simplicity in mind, I wanted to include as few dependencies as possible. Everything is written in vanilla JavaScript, HTML, and CSS, referencing the minified vendor files separately without any build tooling. These are the open source vendor libraries used:

  • Leaflet - open-source JavaScript library for mobile-friendly interactive maps
  • Leaflet.Locate - leaflet control to geolocate the user (plugin)
  • Leaflet.TileLayer.MBTiles - leaflet plugin for loading raster tilesets in MBTiles format
  • SQL.js - a port of SQLite to WebAssembly for use in JavaScript (required for reading MBTiles) toGeoJSON - helper script for converting KML & GPX to GeoJSON
  • Turf.js - modular geospatial engine written in JavaScript (custom build limited to area & length modules)
  • Font Awesome - web font icon set, used for control button icons

Challenges we ran into


Accomplishments that we're proud of

Successfully works!

What we learned

Really leant a lot from this challenege :D, real-time development

What's next for Use GPS or Maps Technology

  • View your GPS position on a custom map without having to pre-build a custom app or website
  • Leverage commonly used, freely available basemap services (OpenStreetMap, USGS Topo & Imagery, NOAA Navigation Charts)
  • Load custom raster maps (MBTiles) and vector features (GeoJSON, KML, GPX) directly from the device or common cloud storage providers (iCloud, Dropbox, GDrive)

Built With

Share this project: