Privacy Geofencing

A question was posted yesterday on the Leaflet forum about doing geofencing with LeafletJS, so I posted this demo in response:

Screen shot of privacy geofence demo

Privacy Geofence Demo

My demo scenario is that there is a user who likes to share her runs with friends on social media but doesn’t want everybody to see exactly where she lives, so she creates a privacy geofence around her house. The starting and ending sections of her run polyline are hidden once they enter the geofenced area. If the middle section of the run passes through the geofenced area it remains visible.

Here is a shout out to Roadrunners of Kansas City. The geofence boundary in this demo is around Sport+Spine, home-base to many of the Roadrunner runs. Thanks, Coach Amy!

For my example, I turned once again to the Leaflet-pip library, as I did for Demo7 and Demo 8. I use it a couple of different ways in this demo. First, I use it to locate runs for this demo whose start point falls within the demo’s privacy geofenced area. Second, when the user displays a run (by clicking the numbered buttons on the bottom of the page) I use Leaflet-pip again to test which points at the beginning and end of the run fall within the privacy geofence.

In the real world, you would always do the privacy filtering server-side, using something like GeoTools or spatial database queries, so that only the public sections of the polyline are exposed in the GeoJSON. I did this demo on the browser-side because my site is an Amazon S3-hosted static website, and also because the forum question was about doing geofencing with Leaflet.

The code for this demo can all be found in RightSideView.js. The render method does the following things:

  1. Creates the L.featureGroup, geoFence, and adds a L.polygon defining the geofence boundaries.
  2. Displays the geofence on the map.
  3. Loads the running log GeoJSON file from Demo 5.
  4. Uses leafletPip.pointInLayer to find runs that start in the geofenced area, and then adds a paging div to the bottom of the page to open each matching run.
  5. Loads the first run.

The interesting part of the code is in the onActivityFetched function. The “hidden” parts of the polyline are shown in gray on the map, so I needed to define three polylines: the hidden start, the visible middle, and the hidden end.

I loop through the polyline coordinates and add the points to the “fencedStart” array until I hit a point falling outside the geofenced area. After that, all points are added to a “middle” array.

Screen shot of the code to find the hidden start of the run.

Find the Hidden Start of the Run and the Middle

Next, I loop backward over the points collected in the middle array looking for the points at the end of the run to be hidden.

Screen shot of the code to find the ending section of the run to be hidden.

Find the End Section of the Run to Hide

Finally, now that I have the points to hide at the start and the end of the run, I just need to find the points in between to draw on the map in red.

Screen shot of code to find the middle of the run to add to map.

Find the Visible Section of the Run to Display on Map

Go to the demo and click on a few of the runs to see how it works. Doing this demo I learned that “Leaflet.PIP” (point-in-polygon), only works on polygons (go figure). I started out trying to use a for the geofenced area. That didn’t work.

The other shortcoming of this demo is that sometimes the first point outside the privacy geofence is some distance away, causing the visible line to stop short. That could easily be fixed with point projection along the bearing of the line between the two points that span the geofence boundary.

Happy Geofencing.


Browser-side Geospatial Maps

If you know many marathon runners, then you probably know somebody in the Fifty States Marathon Club, like my friend Jennifer. Here is a post from Jennifer on Facebook:

Map of states run

Jennifer’s 50-States Progress Report

What if users could simply use their electronic running log to generate progress maps on-the-fly? And, what if that map could be generated without increasing the load on expensive geospatial database servers?

That is exactly what I’m demonstrating today with Tom McWright‘s Leaflet-pip library. See it live here: This demo reuses a personal running log GeoJSON file from demo 5. It combines my race data with a GeoJSON file containing shapes for the 50 states that I found at Frictionless Data.

The map flow is illustrated below. Keep in mind that I’m doing all of this with static files on my Amazon S3-hosted website.


First, RightSideView.js downloads the running log GeoJSON file and the States GeoJSON file. It passes the states GeoJSON feature collection to StatesMapLayerView.js which loads it into three maps: the mainland, Alaska, and Hawaii.

Next, RacesMapLayerView.js loads the running log GeoJSON feature collection into a Leaflet GeoJson Layer filtering by eventType = “Race” and totalMeters equals the selected race distance. As each point is added to the map, MapEventDispatcher.js is used to publish a RACE_ADDED event.

The RACE_ADDED event triggers the State Map Layer View to call the Leaflet-pip library to find the state polygon containing the race point and change that state’s background color from blue to red.

Image of code used to find the race start point.

Find State Containing Race Start Point

Above the map is the race selector. It uses the Map Event Dispatcher to fire the RACE_SELECTED event. The RACE_SELECTED event triggers the State Map Layer View to remove all state highlighting. It also triggers the Race Map Layer View to re-filter the running log GeoJSON file using the updated race distance. That, in turn, fires RACE_ADDED again, which re-triggers state highlighting.

That’s it. Pretty simple. The geospatial matching to produce this map, that might have been done, say, in Oracle Spatial, is successfully offloaded to the customer’s web browser instead. This leaves expensive servers to do the large-scale geospatial operations they do best.


Converting Garmin FIT activities into GeoJSON

My demo accomplished what I wanted to do with Leaflet regarding Bing, OSM, and Google base maps. The demo is at The only base map plumbing that remains is to figure out how to add Google’s bicycle path layer.

The next step is to display the activity polyline as a Leaflet layer instead of adding it directly to Google, Bing, or OSM maps via the vendors’ map APIs. With Leaflet, the base map is simply the background for the vector graphics displayed on a Leaflet map layer in the foreground.

Using GeoJSON with Leaflet

First, I needed to produce GeoJSON as described here: GeoJSON is a JSON standard for geometry types (see The geometry types are:

  • Point
  • LineString
  • Polygon
  • MultiPoint
  • MultiLineString
  • MultiPolygon

Geometry types may be combined with additional properties using Feature or FeatureCollection. Leaflet has a map layer type that can consume Feature JSON or FeatureCollection JSON.

Garmin Activity FIT File in –> GeoJSON out

Modern Garmin fitness devices store data in a compressed binary format called the FIT protocol (see

My first task was to create a utility to read Garmin activity FIT files and produce Feature GeoJSON. The code is on GitHub:

I used my 2012 Little Rock Marathon activity to test the GeoJSON utility. The FIT SDK decodes the activity FIT file. The GeoTools FeatureJSON class outputs the GeoJSON.

There are two steps to creating GeoJSON using the GeoTools API:

  1. Define a feature type (schema) for the feature properties.
  2. Build the feature following the feature type definition.

Defining a Simple Feature Type

The SimpleFeatureTypeBuilder class is used to layout the schema for the Feature.

public SimpleFeatureType getFeatureSchema() {
    final SimpleFeatureTypeBuilder simpleFeatureType = new SimpleFeatureTypeBuilder();
    simpleFeatureType.add("geom", LineString.class, DefaultGeographicCRS.WGS84);
    simpleFeatureType.add("name", String.class);
    simpleFeatureType.add("activityId", Long.class);
    simpleFeatureType.add("activityName", String.class);
    simpleFeatureType.add("sport", String.class);
    simpleFeatureType.add("startTime", String.class);
    simpleFeatureType.add("totalMeters", Double.class);
    simpleFeatureType.add("totalSeconds", Double.class);
    simpleFeatureType.add("minLat", Double.class);
    simpleFeatureType.add("minLon", Double.class);
    simpleFeatureType.add("maxLat", Double.class);
    simpleFeatureType.add("maxLon", Double.class);
    return simpleFeatureType.buildFeatureType();

Building the Feature

The SimpleFeatureBuilder builds the SimpleFeature following the feature schema definition.

public SimpleFeature buildSimpleFeature(final FitActivity fitActivity) {
    final SimpleFeatureType featureSchema = getFeatureSchema();
    final SimpleFeatureBuilder builder = new SimpleFeatureBuilder(featureSchema);
    builder.set("activityId", fitActivity.getActivityId());
    builder.set("sport", fitActivity.getSport());
    builder.set("startTime", fitActivity.getStartTime());
    builder.set("totalMeters", fitActivity.getTotalMeters());
    builder.set("totalSeconds", fitActivity.getTotalSeconds());
    final Coordinate[] polyline = fitActivity.getPolyline().toArray(
        new Coordinate[fitActivity.getPolyline().size()]);
    final Geometry geometry = simplifyLineString(polyline);
    final Coordinate[] boundingBox = generateBoundingBox(geometry);
    builder.set("minLat", boundingBox[0].y);
    builder.set("minLon", boundingBox[0].x);
    builder.set("maxLat", boundingBox[1].y);
    builder.set("maxLon", boundingBox[1].x);
    return builder.buildFeature("0");

The final result, formatted for readability, can be found here:

This is a partial listing:

  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [

... many points omitted.

  "properties": {
    "activityId": 155155867,
    "sport": "RUNNING",
    "startTime": "2012-03-04T14:02Z",
    "totalMeters": 42453.58984375,
    "totalSeconds": 15162.140625,
    "minLat": 34.73176879808307,
    "minLon": -92.34434505924582,
    "maxLat": 34.78602569550276,
    "maxLon": -92.25817699916661
  "id": "0"

Now I’m ready to create a Leaflet GeoJSON layer to display the polyline!

Loading GPS Data into PostGIS


The next area I will explore is heat maps using 8 Mb of GPS data collected from fitness devices near Olathe, KS.  My data source is a CSV file with three columns: latitude, longitude, and intensity. Latitude and longitude were rounded to four decimal places and I kept track of how many rounded GPS locations fell into each rounded latitude/longitude cell. Intensity is a decimal number between zero and one reflecting the number of hits for each latitude/longitude cell.

The first step was to create a table with a column for intensity and a spatially enabled column to hold the rounded GPS location:

SELECT AddGeometryColumn('','gps_points','LOCATION', 4326, 'POINT', 2);
CREATE INDEX gps_points_location_idx ON gps_points USING GIST (location);
ALTER TABLE gps_points ADD CONSTRAINT gps_points_location_uniq UNIQUE (location);

The GPS_POINTS Table with Index and Constraints

The GPS_POINTS Table with Index and Constraints

Next, I set-up a Spring Batch project to import the data. The reason that I took the time to create a Spring Batch project is so that I can add more item writers to load the data set into other spatial repositories like Oracle Spatial and Graph or MySQL.

Here is the item reader and item writer definition from my Spring context:

Spring Batch Item Reader and Item Writer Definitions

Spring Batch Item Reader and Item Writer Definitions

I was not able to format the SQL correctly in the item writer bean in-line, so I implemented an ItemWriter class in Java.

Custom Item Writer to Insert PostGIS Points

Custom Item Writer to Insert PostGIS Points

The data and the code is available from github:

In my next post, I’ll take a look at the data with a PostGIS layer in QGIS 1.9.