GeoJason

Leaflet Vector Layers

2012-01-24T15:23:00-07:00

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.

Google Vector Layers

2011-12-20T09:02:00-07:00

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 but it’s worth showing a few examples to see how things work.

Examples

Light Rail Lines

This very simple example shows RTD’s Light Rail Lines as a simple green line. There’s also a string based infoWindowTemplate so clicking features gets you more info. Also, we’re using the showAll option because there are only a hanful of features so there’s no sense re-fetching features with each map pan or zoom.

ags_light_rail = new gvector.AGS({
    url: "http://maps.rtd-denver.com/ArcGIS/rest/services/SystemMapLiteGoogleVectors/MapServer/1",
    fields: "*",
    scaleRange: [13, 20],
    showAll: true,
    symbology: {
        type: "single",
        vectorOptions: {
            strokeWeight: 4,
            strokeOpacity: 0.8,
            strokeColor: "#004a00"
        }
    },
    infoWindowTemplate: '<div class="iw-content"><h3>Light Rail Line</h3><table><tr><th>Route: </th><td>{ROUTE}</td></tr></table></div>'
});

Flood Zones

This example pulls data from CartoDB. Here we’re using a unique symbology type to show different Flood Zone Types. You’ll also see that we pass a ST_Simplify function to the PostGIS powered back end at CartoDB.

cartodb_flood_zones = new gvector.CartoDB({
    user: "geojason",
    table: "flood_zones",
    fields: "cartodb_id,label,st_simplify(the_geom,0.000008) the_geom",
    scaleRange: [14, 20],
    symbology: {
        type: "unique",
        property: "label",
        values: [
            {
                value: "AE",
                vectorOptions: {
                    fillColor: "#2f952f",
                    fillOpacity: 0.6,
                    strokeWeight: 1,
                    strokeColor: "#fff",
                    strokeOpacity: 0
                }
            },
            {
                value: "AE-FW",
                vectorOptions: {
                    fillColor: "#004a00",
                    fillOpacity: 0.6,
                    strokeWeight: 1,
                    strokeColor: "#fff",
                    strokeOpacity: 0
                }
            },
            {
                value: "0.2% Annual Chance",
                vectorOptions: {
                    fillColor: "#aaff7a",
                    fillOpacity: 0.6,
                    strokeWeight: 1,
                    strokeColor: "#fff",
                    strokeOpacity: 0
                }
            }
        ],
    },
    infoWindowTemplate: '<div class="iw-content"><h3>Flood Zone</h3><table class="condensed-table"><tr><th>Type</th><td>{label}</td></tr></table></div>',
    singleInfoWindow: true
});

The Open Streets Style for TileMill

2011-10-08T09:02:00-06:00

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.

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.

config.py

#!/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.

./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.

The 2011 FOSS4G Map - Mobile Edition

2011-09-10T15:30:00-06:00

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.

The 2011 FOSS4G Map

2011-09-07T15:04:00-06:00

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.

Bike to Work Day

2011-06-22T15:01:00-06:00

Today is Bike to Work Day so I thought I’d finally take a stab at biking in. I’m happy to report I made it ~~sweaty~~ safely to work.

More importantly, I thought I’d share an awesome site I’ve been using lately, RideWithGPS. A coworker recommended it and I’ve been really impressed. You can upload your tracks in multiple formats (kml, tcx, gpx) or trace your route on Google Maps. Word on the street is soon they’ll have even more options for base maps like OpenStreetMap and ArcGIS Online (or ArcGIS for the internets, or whatever …). You can also very easily embed maps like the one below.

GeoJSON Tiles With MapFish

2011-05-19T14:35:00-06:00

Polymaps

When SimpleGeo announced Polymaps back in August the geo community was quick to notice the potential of this modern web mapping library. We could now visualize our vector-based datasets with complex geometry without the need for generating tile sets with staggering numbers of images, only to have to re-generate these tiles as the geometry behind them changes. But this announcement also prompted a few folks to ask the question, “How do I generate these GeoJSON tiles?”

There are only a few solutions that I know of. TileStache is a python-based web application that can stream and cache (I think) GeoJSON tiles among other formats. Arc2Earth supports streaming GeoJSON tiles from any datasource in an Arc2Earth or Arc2Cloud instance by using the “tiles” endpoint (http://my-a2e-instance.appspot.com/a2e/data/datasources/myDatasource/tiles/{Z}/{X}/{Y}?f=gjson).

A few projects I’ve been working on recently have been using MapFish, which is an open source framework for creating web mapping applications. MapFish is built on the Pylons web framework and integrates tightly with a number of other open source projects (SQLAlchemy, GeoAlchemy, Shapely). It’s got two core components:

a RIA-oriented JavaScript toolset for the client side (of which I have admittedly zero experience)
a server framework for creating web services to Create, Read, Update and Delete features (CRUD) via HTTP POST, GET, PUT and DELETEs

While pondering home-grown solutions to stream GeoJSON tiles to the client, I realized that MapFish had all of the components needed to perform the conversion of a typical map tile request (http://my-geo-app.com/parcels/14/4516/6477) into a GeoJSON FeatureCollection, which is what Polymaps needs to display features.

The Solution

What we need to do is take a layer request that contains a zoom level, an X and a Y coordinate and then somehow create a bounding box in our layer’s coordinate system (SRID 4326). The first step is to properly route the request to its appropriate controller and action. We can easily do this by editing the routing.py in our MapFish config directory.

A vector tile request might look like: http://my-mapfish-app.com/my_layer/geojson/14/4516/6477

Our tile requests should now be forwarded to the “geojson” controller. The controller simply takes the request and related variables (Z, X and Y in our case) and calls geojson method of the controller class.

@geojsonify def geojson(self, z=False, x=False, y=False): """GET /{z}/{x}/{y} return features within tile bounds.""" return self.protocol.geojson(request, response, z=z, x=x, y=y)

Protocol’s geojson method is really where all of the magic happens. Here we pass our x, y and z variables and, with the help of Shapely, create a Polygon (line 46). This is the bounding box of the requested tile. Now we convert the Shapely polygon into the well known binary geometry we need for the geometry filter (lines 48 - 50). Lastly we combine the attribute and geometry filter, add the “Access-Control-Allow-Origin: *” header required for Polymaps and return to MapFish’s read method that create GeoJSON FeatureCollections from spatial and attribute queries (lines 52 - 58). Most of the code to convert tiled map requests to Lat/Lng bounding boxes comes from maptiler.org.

# Imports import math # Functions def TileBounds(tx, ty, zoom): # Returns bounds of the given tile in EPSG:4326 coordinates ty = ((1 << zoom) - ty - 1) # Pixels to Meters # Converts pixel coordinates in given zoom level of pyramid to EPSG:900913 originShift = 20037508.342789244 # resolution = (meters/pixel) for given zoom level (measured at Equator) resolution = 156543.03392804062 / (2**zoom) minx_meters = ( tx * 256 ) * resolution - originShift miny_meters = ( ty * 256 ) * resolution - originShift maxx_meters = ( ( tx + 1 ) * 256 ) * resolution - originShift maxy_meters = ( ( ty + 1 ) * 256 ) * resolution - originShift # Meters to Lat/Lon # Converts XY point from Spherical Mercator EPSG:900913 to lat/lon in WGS84 Datum minx_ll = (minx_meters / originShift) * 180.0 miny_ll = (miny_meters / originShift) * 180.0 maxx_ll = (maxx_meters / originShift) * 180.0 maxy_ll = (maxy_meters / originShift) * 180.0 miny_ll = 180 / math.pi * (2 * math.atan( math.exp( miny_ll * math.pi / 180.0)) - math.pi / 2.0) maxy_ll = 180 / math.pi * (2 * math.atan( math.exp( maxy_ll * math.pi / 180.0)) - math.pi / 2.0) return Polygon(((minx_ll, miny_ll), (minx_ll, maxy_ll), (maxx_ll, maxy_ll), (maxx_ll, miny_ll),(minx_ll, miny_ll))) # Action - This is in the Protocol class def geojson(self, request, response, x=None, y=None, z=None): """ Return features in X/Y/Z tile bounds. """ if not x and y and z: abort(404) x = int(x) y = int(y) z = int(z) geom_column = self.mapped_class.geometry_column() geometry = TileBounds(x, y, z) wkb_geometry = WKBSpatialElement(buffer(geometry.wkb), 4326) geom_filter = within_distance(geom_column, wkb_geometry, 0) attr_filter = create_attr_filter(request, self.mapped_class) filter = and_(attr_filter, geom_filter) # Important for Polymaps response.headers["Access-Control-Allow-Origin"] = "*" return self.read(request, filter)

The Fine Print

Since I’m creating a bounding box with Lat/Lng values, your MapFish layer needs to support SRID 4326. There’s probably an easy work around for this that someone can figure out. But for me this worked as my data was already in SRID 4326.

Also, we’re not caching any of these results so that future requests to the same vector tile don’t require as much overhead. If we were to cache the tiles we’d lose the ability to add query parameters to further filter our requests.

Performance Notes

Streaming GeoJSON tiles to the client can produce some pretty nice visualizations, but there are a few things to think about. Lots of bytes are traveling from the server to your web app and you’ll want to shave off every 1 or 0 you can.

By default MapFish returns not only the GeoJSON geometry for a feature, but also a bounding box. For me it made sense to alter the source code to omit this extra (unnecessary in my case) geometry.

You’d also do yourself a favor to eliminate as many feature properties as you can. You might not think removing a handful of properties would make much of a difference, but when you’re returning scores of features within each map tile, these start to add up quickly.

The real beauty behind streaming these vector tiles is that you can simplify the geometry at the lower zoom levels but return to the full detailed geometry at the higher zoom levels. This makes sure we remove as many vertices we can when dealing with large numbers of features. I’ve left out the code for the zoom-dependent geometry simplification in this blog post to keep things as simple as possible, but feel free to contact me to get more information.

OK, Show Me

Check out the ~~Tiled GeoJSON demo~~* to see things in action. Remember that since we can still pass url parameters to the MapFish back-end, you can adjust the range for a few of the layer attributes.

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

CharlotteJS Meetup Slides, Demos and Code

2011-04-21T14:15:00-06:00

I had a great time tonight at the CharlotteJS Meetup. Working from home for the last few months has made me appreciate opportunities to connect with developers face to face. I’ll have to try to make it to as many of these meetups that I can before the big move.

I thought I’d share my slides and link to the demos I showed at my talk.

CharlotteJS Meetup Slides (warning: each slide is a 1024x768 png, so be patient)

Demo Links

Code

Open Data Day Hack
GeoJSON to Google Maps
GeoPortal front end, GeoPortal back end (written by Tobin Bradley)

Resources

My NC GIS Slides

2011-02-21T14:05:00-07:00

The 2011 North Carolina GIS Conference was last Thursday and Friday in Raleigh, NC. It was a great conference with a well-balanced program of technical and non-technical talks. I spoke about using the Google Maps API in local government. Feel free to view my slides but don’t get too excited as a lot of them are simple images and lack context. It might take some time for each slide to load over a slow connection as each one is a 1024x768 png, so click once and be patient. Enjoy!

NC GIS 2011 slides

Open Data Day Hack

2010-12-13T13:35:00-07:00

Dec 4^th was Open Data Day and coders across the globe were pushing, pulling, analyzing and scraping open data. Spare time has been hard to come by recently so I’m a little late to the party, but I’m happy with the outcome. I thought I’d share what I came up with and how it all came together.

So, what is it?

I created a Google Maps based application that lets users query Mecklenburg County, NC (Charlotte) building permits by location and a number of other parameters. Want to know how many building permits were pulled around 2319 Providence Rd? Sure. Only concerned with permits pulled in 2009? Filter by date. Only interested in finding the new McMansions in the neighborhood? Filter by square footage.

How does it work?

Users determine their search location by either entering an address or clicking the map. Setting the search location drops a marker on the map surrounded by a circular search area. This circle size can be easily changed to query a smaller or larger area. I limit the search area to a maximum radius of 2.5 km to keep the number of results from getting out of hand. My original design adjusted the search area with another slider in the left panel but I found that adjusting the size on the map was much more intuitive.

Once results are visible, we can narrow these down by a number of different parameters found on the left panel of the application. Currently you can filter by a range of square footage, project cost or permit issue date. I find that using sliders is much simpler that typing discrete values of upper and lower bounds. I can also limit the input range for parameters to keep users from searching for project costs with negative numbers. I made sure to style the “active” filters with a bolder look and a drop shadow (sorry IE) to let users know what filters they were using.

To get project details, users can click a marker and the results on the right side of the page should scroll to the corresponding building permit and highlight it. For now I’m showing fairly limited information but this could be easily expanded to show more or a link could be added to show full building permit information (I’m not sure if Mecklenburg County exposes this).

Under the hood

So it’s obvious I’m using Google Maps, nothing new here. With the latest release Google now allows you to animate your markers as they are added to the map. This is how I’m dropping/bouncing them onto the page. It took me a while to decide if this was tacky or cool. I chose cool.

This distance widget came from a Fun with MVC Objects article written by Luke Mahe from the Google Geo team. This is really where a lot of the magic happens. If I would have had to write this myself it would have taken much longer to push out this quick hack.

I’m sure a lot of you will notice right off the bat that I’m using jQuery UI for the sliders. It’s too easy not to.

As far as the “Open Data” goes, I’m pulling everything from Mecklenburg County’s DataPortal which was recently released to easily share spatial data. From here users can connect to WMS services, download KML, or link into the GIS Data Center to download data in other formats. But I prefer to pull straight from a series of RESTful Web Services that are powered by a great open source project.

Ok, show me.

View the application live at http://open-data-day.geojason.info

I also created a short screen cast showing it in action.

GeoJSON to Google Maps Utility

2010-10-04T13:29:00-06:00

A few months back I posted code on my demo page for converting GeoJSON polygons to Google Maps polygons. Since then I’ve needed to create similar code for points and lines as well. I’ve pulled all of them together and pushed them to GitHub. This should work for most (all?) GeoJSON types.

A quick example

var geojson = {
  "type": "LineString",
  "coordinates": [
        [-80.661983228058659, 35.042968081213758],
        [-80.662076494242413, 35.042749414542243],
        [-80.662196794397431, 35.042626481357232],
        [-80.664238981504525, 35.041175532632963]
    ]
};

var googleOptions = {
    strokeColor: "#FFFF00",
    strokeWeight: 7,
    strokeOpacity: 0.75
};

googleVector = new GeoJSON(geojson, googleOptions);

googleVector.setMap(map);

See my GeoJSON to Google Maps GitHub repository for “full” documentation and a demo page. I’m sure there’s room for improvement so feel free to fork it and notify me of any changes.

Line Length and Polygon Area in Google Maps API V3

2010-07-06T13:08:00-06:00

This post used to show a way to measure length and area with the Google Maps API before there was support for such a thing. This involved much the same method of creating line and polygon shapes on the map for measuring length and area, but used a web service to do the measuring. Very clunky. Very unnecessary now.

Now that this is part of the API, I’m simply linking to demo of how to create a quick and easy measuring tool for Google Maps. Click the image below to view the demo.

Stack Overflow for GIS

2010-06-02T13:00:00-06:00

Out of Office

After posting a response to a question on a local GIS Listserv and getting ten or so out of office emails, I thought to myself “There’s got to be a better way.” Coincidently, a few minutes later I stumbled on a proposal for a Stack Overflow site for GIS.

If you’re not familiar with Stack Overflow it’s basically a free, community driven site for programmers to ask and answer programming related questions.

Why do programmers get to have all the fun?

The creators of Stack Overflow have started Stack Exchange which allows a group of people to create their own question and answer site about any topic from horses to handbags if there is enough interest.

Really? Another GIS forum?

You might be thinking, “Aren’t there already dozens of GIS help forums out there now?” Yes, there are. But if you’ve ever used Stack Overflow you’ve probably noticed the high quality of questions and answers on the site. Stack Overflow rewards users who visit often, ask questions and propose answers with “reputation.” The more reputation you have the more rights you have to edit the site’s content, questions, answers, etc.

Do it!

If this interests you I encourage you to visit the proposed GIS Stack Exchange and get involved.

Overlay Map Management With Google Maps API V3

2010-05-11T12:27:00-06:00

Google Maps API v3 is a complete overhaul of the API v2 and is specifically designed to be faster and more applicable to mobile devices. Because of this some of the functionality from v2 isn’t available. For example with v2 removing all overlays from your map was as simple as calling the clearOverlays() method on your GMap object. At v3 developers are required to keep track of map overlays which includes Markers, Polygons, ImageMapTypes, etc. Gone are the days of creating random markers and using clearOverlays() to clean things up.

I have a project that deals specifically with ImageMapTypes being served from GeoWebCache. I needed a way to control layer visibility but with v3 there is no clearOverlays() method to hide these. My solution was to create an array to store the ImageMapTypeOptions for each layer.

overlayMaps = [
    {
        getTileUrl: function(coord, zoom){
            return 'http://gisapps.co.union.nc.us:8080/geoserver/gwc/service/gmaps?layers=uc%3Afema_flood_zones&zoom=' + zoom + '&x=' + coord.x + '&y=' + coord.y + '&format=image/png8';
        },
        tileSize: new google.maps.Size(256, 256),
        opacity: 0.7,
        isPng: true
    }, {
        getTileUrl: function(coord, zoom){
            return 'http://gisapps.co.union.nc.us:8080/geoserver/gwc/service/gmaps?layers=uc%3Asubdivisions&zoom=' + zoom + '&x=' + coord.x + '&y=' + coord.y + '&format=image/png8';
        },
        tileSize: new google.maps.Size(256, 256),
        isPng: true
    }
];

Once the page is loaded I loop through my overlayMaps array and push a null object into the map’s overlayMapTypes array for each item. These serve as placeholders for my ImageMapTypes.

for (i = 0; i < overlayMaps.length; i++){
    map.overlayMapTypes.push(null);
}

So, we’ve got our placeholders for our overlay maps. How do we create the ImageMapTypes and toggle their visibility? I have some checkboxes with ids that correspond to the order of objects in our overlayMaps array.

<input type="checkbox" id="0" class="layer" /><label for="0">Flood Zones</label>
<input type="checkbox" id="1" class="layer" /><label for="1">Subdivisions</label>

With some help from jQuery we handle the click events from these checkboxes and determine if they were checked or unchecked. If checked, we create a new ImageMapType. Otherwise, we remove it by setting the value to null.

$('.layer').click(function(){
    var layerID = parseInt($(this).attr('id'));
    if ($(this).attr('checked')){
        var overlayMap = new google.maps.ImageMapType(overlayMaps[layerID]);
        map.overlayMapTypes.setAt(layerID, overlayMap);
    } else {
        if (map.overlayMapTypes.getLength() > 0){
            map.overlayMapTypes.setAt(layerID, null);
        }
    }
});

I set up a demo so you can see it all come together. There’s a little more code documentation there in case what I’m doing here doesn’t make sense.

I’m sure this probably isn’t the most efficient way of managing overlays but it worked for me. I welcome any comments or suggestions.

Moving From ArcGIS Server to Google Maps API

2010-04-21T16:46:00-06:00

As mentioned in a previous post I have been converting Union County’s Community Mapper application from ArcGIS Server to the Google Maps API.

Why?

Do I have anything against an ArcGIS Server solution? Not at all. ArcGIS Server still takes up a lot of room in my tool chest. I just wanted to freshen up the look and feel of a stale application and take a deep dive into the ever-changing API v3.

Benefits

Let Google handle the base map and related traffic. Forget scheduling a map caching job to run for hours (and hours, and hours) every week.

Users are comfortable with Google Maps. Web mapping trends show Google Maps continues to catch (surely have surpassed by now) MapQuest.

The Google Maps API is powerful and has an active community developing applications with it. Got a question? Send it to the group and you’ll get replies within hours, maybe minutes.

Disadvantages

The biggest downer that I see is that you lose complete control over your base map. Sure Google lets your report a problem but there is no guarantee when, or even if, they’ll get around to fixing it. Luckily the Street View crew made it around to a good third or so of Union County so our base map isn’t in bad shape.

With Google there’s always a chance of advertisements popping in at some point in the future. Personally, I have no problem with spatially relevant advertising. That’s the price we pay for someone hosting and updating your web map services. Although, end users might not like the idea of an ad for Jim’s Tire and Lube appearing near their parcel ownership information.

How does it work?

Users select one or many parcels by either clicking the map or using a single search text box. This eliminates the need for having a text box for every type of search a user might use (owner name, parcel number, subdivision, address, etc). With some simple logic on the back end we can query only the tables whose data matches what the user entered. For example: if a user types “8620 Elmsworth” we can be almost certain they are searching for an address. In this case only one table is queried. Alternatively if a user types “Poplin” they could be searching for Poplin Elementary School, the Poplin Farms subdivision, or Poplin Rd. In this scenario more tables are queried for potential results but I haven’t heard any complaining from Postgres yet.

Once parcels are selected a user can uncover lots of spatial data by clicking various tabs within an info window. Questions like “What school district am I in?”, “What flood zones are on my property?” and “Where are my closest parks, libraries and bus stops located?” are just a few mouse clicks away.

On the front end mapping is handled by the Google Maps API (obviously). I’m using a few JavaScript libraries as well. jQuery makes coding by browser unnecessary and makes HTTP requests a breeze. jQuery Tools helps out with some simple tabs and modal overlays and is a much lighter weight UI tool than jQuery UI. For all that autocomplete goodness, the folks over at Devbridge have put together a powerful, yet very simple jQuery autocomplete plugin. jQuery Layout keeps things orderly and helps with some nice collapsible panels. Okay, maybe I went a little overkill on the JS libraries.

On the back end I’m using Union County’s GeoData API to do all of my spatial analysis. These are a series of RESTful web services that allow you to execute spatial queries on a PostgreSQL/PostGIS database through simple HTTP requests. I won’t go into detail here but feel free to check out the documentation for a better explanation.

A few other new features to note:

parcel export in kml, csv and xml formats
add to your current parcel selection by holding ctrl and clicking the map

Where’s it at?

The old Community Mapper is actually still live but users can choose to try out the new application while I work out a few kinks with the newer version.

Community Mapper ^1.0 - http://gisapps.co.union.nc.us/cm

Community Mapper ^2.0 - http://gisapps.co.union.nc.us/community-mapper

If you have any questions or comments about the application or you get some errors feel free to let me know. Styling and documentation are lacking as these are the last things I’ll be working on.

Refcardz, Get your Refcardz

2010-04-12T16:38:00-06:00

For those that haven’t found them yet, DZone’s Refcardz can be an extremely helpful tool for developers. Each Refcard gives a brief overview of a particular piece of technology whether it’s a broad topic like Getting Started with Cloud Computing or one of my favorites Essential PostgreSQL. I plan on reading up on the Getting Started with Git Refcard, which came out today.

Now that Google Docs can take almost any file type I just upload the Refcardz I use the most. This way I can always get to them if I’m in a bind and don’t want to log in to DZone to download them again or share them with friends.

Map and Polygon Click Events in Google Maps API v3

2010-04-10T14:36:00-06:00

A little Background

I’ve been working on a project at work converting our Community Mapper application from an ArcGIS API for JavaScript front end to a Google Maps API v3 front end. One of the requirements of the project was that both the map and dynamically drawn polygons respond to click events.

Registering these events is easy enough:

mapClick = google.maps.event.addListener( map, "click", function( evt ) {
    myIdentifyFunction( evt );
} );

polygonClick = google.maps.event.addListener( polygon, "click", function( evt ) {
    ShowInfoWindow();
} );

The Problem

Little did I know that when I click a polygon the map ‘click’ event is also triggered. This is not the case with markers.

The Solution

What I needed to do was to un-register the map’s ‘click’ event when I click a polygon. I quickly figured out that I wouldn’t be able to do this with the polygon’s click event but would have to listen for the ‘mousedown’ event, show my infowindow, then remove the map ‘click’ listener, then re-attach the map ‘click’ listener when the user ‘mouseup’s on the polygon. Actually in the code below you’ll see that I delayed the re-attachment of the map ‘click’ event by 200 milliseconds to ensure that the function called in the polygon ‘click’ event has been triggered.

mapClick = google.maps.event.addListener( map, "click", function( evt ) {
    MyIdentifyFunction( evt );
} );

polygonMousedown = google.maps.event.addListener( polygon, "mousedown", function( evt ) {
    ShowInfoWindow();
    google.maps.event.removeListener( mapClick );
} );

polygonMouseup = google.maps.event.addListener( polygon, "mouseup", function( evt ) {
    setTimeout(function(){
        mapClick = google.maps.event.addListener( map, "click", function( evt ) {
            MyIdentifyFunction( evt );
        } );
    }, 200 );
} );

The problem with this solution is that because I show the infowindow on mousedown this could be triggered if a user is trying to pan the map by clicking and dragging within a polygon.

Update (2010-07-22) - The API has changed so that the polygons capture the click event. You shouldn’t have to use this solution any longer