Mapbox

2019

Network Tracing with Turf JS

A Client Side Solution for Simple Upstream and Downstream Linear Network Analysis

Posted

Network Tracing with Turf JS

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.

Continue Reading...

Mapping with Vector Tiles

Query Features Outside the Viewport

Posted | Updated

Mapping with Vector Tiles

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.

Continue Reading...

Leaflet Store Locator

A Leaflet Version of the Original Mapbox JS Store Locator Example

Posted

Leaflet Store Locator

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.

Continue Reading...

2018

2017