A few weeks back I posted about Google Vector Layers which helps you create interactive layers with the Google Maps API and data from common providers like ArcGIS Server, Arc2Earth, CartoDB and GeoCommons. I’m a big fan of the Google Maps API but lately there have been lots of folks swtiching to web mapping alternatives, like Leaflet.

So, I made Leaflet Vector Layers.

Leaflet Vector Layers is Google Vector Layers’ twin brother. The API is nearly identical (new gvector.AGS({...}) vs. new lvector.AGS({...})) and the library works exactly the same – fetching features as the user pans and zooms the map, or fetching all features at once for smaller data sets.

It’s also great for use behind the firewall where the Google Maps terms or pricing can be prohibitive for some organizations.

Leaflet Vector Layers has all of the features of the Google Maps flavor like multi-provider support, popup (InfoWindow) templating, simple symbology definitions, support for dynamic data and scale dependent rendering.

So, check out the links below for an overview of the library, documentation and demos.

Links

• The Main Page (Start Here) - This will link you to the source code, demos and documentation
• The GitHub Repo - Please send issues, feature requests and code contributions here
• Documentation - Go here when you get console errors
• Demos - Some good code to get you started

There’s no shortage of geo data providers these days. It’s quite easy to publish data and make it available to the world in minutes using software like ArcGIS Server, Geocommons, Arc2Earth and CartoDB.

What’s sometimes not easy as it could be, is taking data from these providers and showing them on your slippy map of choice, Google Maps.

For the past few months in my downtime I’ve been working on a library that makes it much easier to view and interact with your data in these services – Google Vector Layers.

With just a few lines of code you can view data from a number of geo web services, symbolize it based on property values and create highly customized InfoWindows using the feature data.

The library works by listening to map events (pan and zoom) and then fetching features within the map’s extent after each event. This method works great for data sets with lots of features that you want to interact with, but not load all at once. But you can also load all data initially if you’ve only got a handful of features and prefer a less chatty approach.

Features

There are number of things that make this library quite handy:

• Multi-Provider Support - Current support for ArcGIS Server, Arc2Earth, Geocommons and CartoDB (with more in mind)
• Easy InfoWindow Templating - Create InfoWindow templates with a simple string with property names {mustached} or with a function that gets passed feature properties, and should return valid HTML for the InfoWindow
• Dynamic Data Support - Easily visualize live data that auto-updates at an interval that you set (and makes sense for your data’s update frequency)
• Simple, Powerful Symbology - Style your layers with a single symbology, a unique symbol for specific attribute values or set symbols to display if a feature’s attibutes are within a specific range. Or …
• Use Your Current Styles - If you’re using an ArcGIS Server layer you can use the styles you’ve already spent time creating in ArcMap
• Scale Dependent Rendering - You wouldn’t want to show lots of features with complex geometries at lower zoom levels - Using scaleRange lets you set the minimum and maximum scales a layer should be visible

The documentation and demo pages have much more detail about all of these features.

Links

• The Main Page (Start Here) - This will link you to the source code, demos and documentation
• The GitHub Repo - Please send issues, feature requests and code contributions here
• Documentation - Go here when you get console errors
• Demos - Some good code to get you started

If you need a base map or two for your web mapping application, you’ve got quite a few options to choose from these days.

You can use the Google Maps API which provides street, aerial and a hybrid flavors. Unfortunately the terms prevent the use of map tiles outside of Google Maps API.

MapQuest, as part of their Open MapQuest efforts, offers an OSM-based street map as well as an aerial map available for free, provided you credit MapQuest and OSM contributors where necessary.

Cloudmade serves highly customizable base map tiles also based on OpenStreetMap data.

But what if you need a base map for offline use or behind the firewall? You can spend a lot of time creating a tweaking a style to make it look as good as some of the commercial providers, or you can check out the Open Streets Style for TileMill. This style is designed to work with a PostGIS database populated with OpenStreetMap data via the osm2pgsql command. There are just a few steps you need to follow to get up and running:

• Download planet.osm in whole or in an aggregate form. I often use the OSM downloads from geofabrik which, in the US, provide OSM data down to the state level.

• Run the osm2pgsql command to populate your PostGIS database with OpenStreetMap data.

1

osm2pgsql -U user_name -P 5432 -d db_name planet.osm

• Download the open streets style from MapBox’ GitHub.

• Edit the configuration script (configure.py) with your database connection settings.

1
2
3
4
5
6
7
8
9
10

#!/usr/bin/env python

## OPEN STREETS CONFIGURATION OPTIONS ##

# PostGIS connection setup
host     = "localhost"
port     = "5432"
dbname   = "geo"
user     = "postgres"
password = "Pa$$w0rD"

• Run the configuration python script.

1

./configure.py

• The style definitions in the open-streets subdirectory have been changed to point to the database declared above. Copy this directory to your TileMill projects directory (/Users/JohnDoe/Documents/MapBox/project on a Mac) and start TileMill.

The first time you open the open-streets project it will take a while for the map to appear as hundreds of MBs of shapefiles are being downloaded. These include water body and administrative boundaries. You can store these locally to work around this.

I’ve created a demo page showing what the style looks like working with OSM data from the Denver, Colorado area. Click the image below to see the style for yourself.

I’ve updated the 2011 FOSS4G map mentioned in my previous post to be a little more mobile friendly. You can even use some HTML5 geolocation to find where you’re at.

There’s a link to this map on FOSS4G’s interactive map page or the direct link is http://foss4g.geojason.info*.

I’m fairly new to mobile web development so give me a shout if you find some bugs.

* Sorry, no longer available. I’m tired of paying my AWS bill.

If you’re like me, at any given time you’ve got a number of new software products you’ve been hearing about, but just haven’t had time to tinker with. A few weeks back Peter Batty asked if I’d be interested in creating an interactive map for the upcoming FOSS4G conference that will be here in Denver. This sounded like the perfect opportunity to try out some new open source geo tools.

I’ll start with a link to the map (http://2011.foss4g.org/content/foss4g-map) and tell you a little about how it works and what was used to create it. Visiting the site above displays a slippy map that you can pan and zoom like any other. The initial map shows four FOSS4G Venues as well as some light rail lines and stops to help you get around. As you zoom into the map you’ll see more information about bars, cafes, restaurants and even bicycle rental stations. Clicking these icons will show varying amounts of information in either a popup window or a small panel in the bottom left corner of the map.

All the pieces

The mapping library I’m using is Leaflet, from CloudMade. This is a great library that is very lightweight, easy to use, works great on mobile and most importantly, is open source. The core developer is very responsive to bugs and feature requests which is encouraging for those just getting started with Leaflet. If you haven’t checked out Leaflet yet or haven’t in the last few months, do yourself a favor and take a look. It’s grown by leaps and bounds lately and bugs are squashed often.

As I mentioned before the map shows various local amenities in the downtown Denver area. These come from OpenStreetMap and are periodically updated to keep the map fresh with updates from you. I’m sure you’ve all heard about OpenStreetMap. It’s awesome. End of story.

The OSM data is stored in PostGIS where we reference it for tile creation and map feature selection. PostGIS (/post’-jis/) is a spatial extension of the open source PostgreSQL database. PostGIS essentially adds spatial data types (geometry and geography) and lots (no really, hundreds) of functions to interact with these data types. If your data has a geometry question, PostGIS has one or more functions to answer it. PostGIS has installers for Windows and Mac and even has install packages for various linux flavors. It’s also not terribly hard to compile the source yourself. Even I’ve done this, once without cursing.

I’m creating map tiles with TileMill from Development Seed. TileMill is a browser based map design studio that can read from various data sources including shapefiles, KML, GeoJSON, PostGIS and GeoTIFF. With TileMill you create your map styles with Carto, a CSS-like map styling language that translates to Mapnik styles (correct me if I’m wrong) for super-fast tile rendering. Creating beautiful maps is so easy you’ll forget all about SLD. Recent updates include easy installation for both Mac OS X and Ubuntu (time to fire up the VMs windows users).

The product of a TileMill export is an mbtiles file which is an open spec for storing tiled map data in a SQLite database. This makes it much easier to transfer millions of map tiles to different locations as a single file, not the z/x/y.png directory hell that is the end result of most tiling jobs. I once vowed to quit map tiling efforts. Then I found TileMill. Anyway, we need a way to serve these tiles in this mbtiles format. Development Seed has another piece of open software for serving these, TileStream. You can download the source code for TileStream and build your own service or use a hosted solution for a fee and have your map tiles on a globally distributed CDN. Another solution, and the one I chose, is TileStache which python-based web application written by Michal Migurski that can serve and cache map tiles. With just a few lines of code you can tell TileStache where to find your mbtiles file, what URL to serve them from and where to cache the generated tiles.

Last but certainly not least is MapFish. MapFish is a Pylons (python) based application that lets you Create, Read, Update and Delete (CRUD) geographic features via HTTP POST, GET, PUT and DELETEs. For this application, I’ve extended MapFish to create a select service that simply runs multiple spatial queries against a few layers (bars, cafes, restaurants, bicycle rentals) with just one HTTP request. I’ve been using MapFish for a while now for a number of projects and highly recommend it.

Credit where credit is due

In addition to the projects above, there were a number of other resources used that deserve mention.

The OpenStreetMap data was downloaded from Geofabrik who graciously provide OSM data downloads to the state level updated daily. In my case it was very simple (and fast) to download just the data for Colorado. What an effort! Thanks Geofabrik.

The base map tiles come from MapQuest, who recently as part of their Open MapQuest efforts have released both street and aerial maps free for use, with pretty generous terms. Thanks MapQuest!

Speaking of OSM, our local Denver OSM Meetup Group have had a few recent efforts to help create a more accurate and complete map of downtown Denver. Thanks.

A note to local Denver folks: If you see a missing or incorrect bar, cafe, restaurant, etc in the map, update it in OpenStreetMap. I’ll be pulling fresh OSM data a time or two more before the conference.