GeoJason

Open source geo, web maps, etc.

A Quick Hack With Google Fusion Tables and Geolocation

My wife was recently tasked with putting out signs for a consignment sale at our son’s preschool. Lots of them.

She showed me what they’d used in the past - A document with step-by-step directions from one location to the next and what kind of sign to place there. While this would have worked fine, it made it very hard to split up groups of folks to go and place specific types of signs.

So, thinking there had to be a better way, I sat down to see what I could to do make this easier for her. In just an hour or so I was able to come up with what seemed like a much better solution.

I used Google Fusion Tables to create a row for each sign location. Fusion tables is great because it will automatically geocode most things you throw at it - in my case cross streets (Pierce & Chatfield).

With just a few lines of code I could easily see all of the places where signs needed to be.

That was good, but what she really needed was a way to show only certain types of signs on the map for a specific group to place. I added a simple select element that changed the query parameters sent to the Fusion Tables API which automatically updated the overly. Stupid Easy.

<select id="sign-select">
    <option value="arrow=1">Arrow</option>
    <option value="info_arrow=1">Info Arrow</option>
    <option value="info=1">Info</option>
    <option value="">All</option>
</select>

$('#sign-select').on('change', function () {
    var options = {
        query: {
            select: 'Location',
            from: '1hSKp4BbrAUikm8H5k_deWghrrmaYupYE4phdAks',
            where: $('#sign-select').val()
        }
    };
    my_fusion_tables_layer.setOptions(options);
});

Cool, now we know where the locations are and what we need to place there, but where am I? With the native geolocation capabilties now found on most mobile browsers I could easily tap in and get a very precise location and show it on the map.

Still, this could be better. Instead of using the getCurrentPosition method, I opted to use the lesser known watchPosition. This constantly polls the device for an accurate location (at the cost of battery life) so that a moving marker could be shown on the map to help the navigator.

watching = navigator.geolocation.watchPosition(locateSuccess, locateError, {
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 0
});

The final product is here. I’ve also made the source code available. It’s pretty sloppy and probably has a few bugs, but for a last minute project I was happy with the outcome.

Leaflet Vector Layers Version 1.4.0 Released

Thanks to contributions from Bryan McBride and others an updated version of Leaflet Vector Layers is out, 1.4.0.

Updates in this release:

  • Utilize the OOP capabilities from Leaflet itself rather than duplicating the code
  • Ability to use CircleMarkers, not just simple markers, to represent points
  • Ability to add clickEvent handlers to let you hook into when map objects are clicked
  • Fixed busted base maps on a couple of demos
  • Ability to pass a precision parameter to a PostGIS RESTful Web Service Framework endpoint
  • Ability to pass a title to vectorOptions so that a standard HTML title is shown when a map feature is hovered

Leaflet Vector Layers Version 1.3.0 Released

That took a really long time. Sorry.

But an updated version of Leaflet Vector Layers is out with support for Leaflet version 0.4.x.

Also in this release:

  • Fixed a bug where GeoIQ was returning JSON wrapped in single quotes, then they didn’t, then this layer type broke.
  • Reduce file size by 6k because I was dumb and duplicating some code. There’s probably still some room for improvement here.
  • Added code examples for GISCloud.

GeoJSON Validation via geojsonlint.com

Here at MapMyFitness we’ve been increasing our usage of the GeoJSON format over the last few months. Whether it’s displaying routes on a Google Map or processing data between subsystems, GeoJSON has proven to be a simple dialect for describing various geo features in our systems.

One thing I’ve been wanting to do for quite some time is build a GeoJSON validator. While the spec is very simple, it’s easy to get tripped up when you’re first getting started with the format.

So, I built http://geojsonlint.com. It’s a very simple django app that validates your GeoJSON and shows your feature(s) on a map if everything checks out ok. It works by POSTing your data to the /validate endpoint and returning a JSON object that signifies success or an error.

Valid:

{"status": "ok"}

Invalid:

{"status": "error", "message": "Required field 'coordinates' is missing"}

There are still a few rough edges but the code is available at https://github.com/JasonSanford/geojsonlint.com if you want to check it out or fix something I could be doing better. I’m using the Validictory python library to do most of the heavy lifting.

Future Work

  • Break it down into its own python library
  • Allow for pasting a URL to a GeoJSON resource to validate
  • Better error messages - Give the exact line number for something that didn’t validate (kind of like http://jsonlint.com)

Denver Open Data

A few weeks back Brian Timoney tweeted about some recent Denver/Colorado open data efforts. OpenColorado hosts over 400 data sets from DRCOG, the City and County of Denver, Boulder and a handful of others.

I decided to see what data was available and what I could do with it. The Public Art data set seemed interesting and small enough to do create something without too much effort.

I downloaded the shapefile and uploaded to my hosted geo service of choice, CartoDB. I use CartoDB because, with the exposed SQL API, my options are almost endless.

Within a few hours (over a few days) I put together a quick “Denver Art Finder” application. It uses Leaflet for the web mapping API and Handlebars as a simple templating engine. The application works by checking your location (you can fake it if you’re not in Denver) and searching for public art within 1km of you via CartoDB’s SQL API. If we find some, we throw some pins on the map that you can click (tap) to find the title of the piece, the artist’s name, and how far away it is. Very simple stuff.

You can grab the source code or view the application at the links below: