Blog

A primary focus of my day job is managing utility datasets for a small municipality. I am currently in the process of taking a simple database of lines and points and turning it into a true utility network. One of the benefits of having this new seamless database is to perform network traces. This is possible using a variety of desktop and server tools including geometric networks in ArcGIS Desktop, the ArcGIS Utility Network Management extension for ArcGIS Server/Enterprise, pgRouting, and via various QGIS plugins. However, the utility field crews and managers only have access to our web maps, so I wondered if I could program a Mapbox GL JS plugin to do some simple network tracing directly in the browser. Fortunately in my case the entire database is less than 3MB, so all the data can be loaded into the browser via GeoJSON. This data can then be visualized and analyzed using client-side libraries, in this instance Mapbox GL and Turf JS.

The GitHub repository with all the code needed to follow along with this presentation can be found at github.com/reyemtm/pwa-maps. The live demo is available at pwa-trails.netlify.com.

The goal of my original post on client-side web mapping for large datasets was to create an inexpensive, robust county-wide parcel viewer web application. The base functionality would include the ability to both identify and search the parcel data. The result of this effort was the Open Parcel Viewer. That project consists of a Leaflet map with Leaflet.VectorGrid cutting GeoJSON into vector-tiles on-the-fly. The app is performant, with the drawback being a potentially large file loaded directly into the browser. This method works well for small datasets, but breaks down when the size and complexity of the data exceeds device or network capabilities. For example, load time for a typical 70k polygon county parcel map on mobile might exceed 30 seconds.

One of the benefits of using the open source Leaflet mapping library is the wide variety of available community supported plugins. This simple map uses two great plugins - Leaflet Elevation and Leaflet Ajax. The ajax plugin provides a simple way to load data, while the elevation plugin shows elevation from a GeoJSON file in an interactive chart, added to the map as a Leaflet Control. The GeoJSON file must include coordinates.

The Open Parcel Viewer is a client-side application written in plain javascript and jquery. It is capable of rendering up to 50k polygons on desktop and mobile. The app uses Leaflet as the mapping api and Jekyll as a build tool. Color, initial map center/zoom and the search field can be defined in the yaml front matter, with minimal to zero extra coding needed. The polygons should be in topojson format.

This simple, responsive store locator is based on the original Mapbox JS example, tweaked to use Leaflet 1.0 and custom icons. The sidebar uses a jQuery filter function (thanks jsfiddle). The nearest store function uses TurfJS, based loosely on this example. The production version uses surge.sh for deployment. This app was originnally created in collaboration with Nick Kroncke for Shagbark.