Paul-Henri Chombart de Lauwe, map of a young woman’s movements in Paris, 1957
I’ve been with GeoIQ (the folks behind GeoCommons) since the Summer of 2010, and I’ve loved it. Earlier this year GeoIQ joined with Esri and we were hugely excited to change things from the inside and coming up with plans for the new Esri DC Dev team.. However, that’s all behind me now, alas, as it was time to move on. I have left GeoIQ/Esri to be a freelancer and to join the Topomancy coop. This post will take a quick look back at time well spent, and will touch upon what I will be doing in the future.
This image shows 4 maps of pubs in England where the pub names have a cardinal direction in the name. North, South, East and West. You can try searching for any pub name here. For example, West = “The Great Western”, “The Westbourne”. North = “Northcote Arms”, “The North Pole”
There appears to be more North pubs in London than anywhere else, and more West pubs in the north (and north west?) of England…
Mapwarper.net is moving to a faster better server, as a result, please expect a bit of downtime as the migration is taking place. All data, logins should work as before afterwards, fingers crossed!

Plain Tile Maker was my weekend project – a mapping tile service that serves one colour tiles as a tile basemap.
There are about 268 colours to choose from – basically anything that the underlying library (Imagemagick) supports.
It was developed for me to play around on the Heroku platform, and as a response to a GeoCommons.com user question, where the user wanted a way to show just a plain one colour background.
This solution is more flexible, and really easy.
The format is
http://plaintiles.herokuapp.com/colorname/X/Y/Z.png
So for example,
http://plaintiles.herokuapp.com/DodgerBlue/0/0/0.png
http://plaintiles.herokuapp.com/bisque/12/3/32.png
And in return you get a 256×256 sized image of that colour.

DodgerBlue

bisque
You can use it in your mapping libraries, for example: With OpenLayers:
var colourTile = new OpenLayers.Layer.XYZ(
"Plain Colour Tile",
"http://plaintiles.herokuapp.com/colourName/${z}/${x}/${y}.png",
{ sphericalMercator: true,
buffer: 1,
numZoomLevels: 17
}
);
And with Leaflet:
new L.TileLayer('http://plaintiles.herokuapp.com/colourName/{x}/{y}/{z}.png', {maxZoom: 18});
Or you can add them to GeoCommons quite easily. Add
http://plaintiles.herokuapp.com/colorName/{X}/{Y}/{Z}.png
in the Add a URL link, choosing Map Tile URL from the format, and then give it a nice name when prompted.
Here’s the Bisque tiles in GeoCommons.
I’ve used the in a map it to give a ghosting effect over the basemap, and to just show my own boundaries. http://geocommons.com/maps/181231 is a map made with some World Boundaries over the plain bisque map we had just added. I’ve also overlaid the Acetate Labels layer on top for context.
Want to know more? The code for this is on github.
At Leeds digitial networking event LSxCafe this Tuesday, I talked about how companies, such as Geocaching.com and Foursquare.com are moving away from Google Maps and choosing OpenStreetMap. The slides are below.
Today the twitterverse and blogosphere were abuzz with the discovery that Apple had made the switch to use OpenStreetMap in their iPhoto application. At the moment, it appears to be so, but there’s no attribution yet. Compare for yourselves : http://ivan.sanchezortega.es/leaflet-apple.php But take it from me, I have personally surveyed using a GPS unit and mapped paths in woods which are not on any map anywhere else (not legal footpaths) which appear on Apples map.
Having fun with Leaflet – the mapping api from Cloudmade.com Loading in polygons from OSM, via GeoCommons and shown on Leaflet as GeoJSON.
UPDATE: now using 27,416 pubs from Aug 2012 http://geocommons.com/overlays/270943
In this post I will show one way to display and interact with data from GeoCommons, using the powerful “filters”, and all on the mapping library, PolyMaps. It will show a basic example showing points on a map based on a filter and a more advanced example with changeable filters and some basic interaction on the points.
Few weeks ago, I wrote about how to display data from GeoCommons quickly on an OpenLayers map. The resulting little map was not that interactive, but it showed how easy it was to get started using GeoCommons as a data source. PolyMaps is a bit different than other libraries – it’s very lightweight, fast and powerful, but in terms of bells and whistles, you have to roll your own, like with Jquery core and all the plugins. It follows JQuery in another way, in that it uses method chaining. Anyhow, here is a map of Green Map named pubs in England. The base dataset, of all (24 thousand or so) pubs in England, was from OpenStreetMap, and the data is cc-by-sa. http://geocommons.com/overlays/136549/ England pubs OSM july 2011 I added the data from an extract from geofabrik.de.
The GeoCommons API gives more information, but the filter we are using looks like this:
http://geocommons.com/overlays/136549/features.json?filter[name][][like]=green%20man
filter[string_col][][operator] = text
We can use things like equals, min and max for numeric and date type attributes, and equals and like for string. We can also add more than one filter to the query.
Most of the gubbings is in the pubs.js file. Lets see what’s going on here.
The first section sets up the map, and adds the Acetate basemap to it, and adds a control to it. Notice the method chain: ”map.add(po.image().url(po.url ” pretty nice, eh?
var po = org.polymaps;
var map_div = document.getElementById("map");
var map = po.map()
.container(map_div.appendChild(po.svg("svg")))
.zoom(5)
.center({"lat":54, "lon":-3})
.add(po.interact());
map.add(po.image().url(po.url("http://acetate.geoiq.com/tiles/terrain/{Z}/{X}/{Y}.png")))
The second section gets json from GeoCommons, based on a filter. A filter is like a search parameter. Then we can see that a layer is created and the features from the json are added to it. We have to get the json outside of polymaps as the json is not quite valid GeoJSON yet – (it doesn’t wrap the features array in a featureCollection) – but no matter, polymaps can handle it.
var url = "http://geocommons.com/overlays/136549/features.json?limit=100000"+
"&filter[name][][like]=green%20man";
url = "/cgi-bin/proxy.cgi?url=" + escape(url);
j = jQuery.getJSON(url, function(data){
map.add(po.geoJson().features(data))
});
Pretty basic, really, and not clickable, and the points are black. The points are SVG – and are default formatted.
This example lives at http://geothings.net/geoiq/any_pubs.htm and the key part of the javascript lives in http://geothings.net/geoiq/any_pubs.js
We will be building upon the last example a bit.
We have refactored the adding layer bit, because this time we are making several requests. We give it a reasonably random and throwaway id, which we assign to a global variable of the currentLayerId, so we can delete it in the future.
function addLayer(filterText){
if (currentLayerId){
element = document.getElementById(currentLayerId);
if (element) {
var parent = element.parentNode;
parent.removeChild(element);
}
}
var guid = Math.floor(Math.random()*3000);
currentLayerId = guid;
var url = "http://geocommons.com/overlays/136549/features.json?limit=10000"+
"&filter[name][][like]="+escape(filterText);
url = "/cgi-bin/proxy.cgi?url=" + escape(url);
j = jQuery.getJSON(url,
function(data){
map.add(po.geoJson().id(guid).features(data).on("load", setFeatures))
});
}
When the features are added, there is a callback method (setFeatures) which stuffs the name of the pub into the point’s SVG, gives it a CSS class so we can style it with pubs_styles.css, and add a mousedown event
function setFeatures(e){
for (var i = 0; i < e.features.length; i++) {
var feature = e.features[i];
feature.element.setAttribute("feat_name", feature.data.name); //give the element an id
feature.element.setAttribute("class", "pub_point"); //set css class for colours
feature.element.setAttribute("r", "5"); //radius of svg circle.
feature.element.addEventListener("mousedown", function(e){
clickFeature(this, e);
}, false);
}
}
pub_styles.css - the fill is purple, the stroke, white and the opacity 0.6 – we style the features using CSS!
.pub_point {
fill:rgb(148,0,211);
stroke: #fff;
fill-opacity: 0.6;
}
The click / mousedown event function gets the SVG feature and the event, and displays a div whose contents is made up from the feat_name attribute from the featrure. function setFeatures(e){
function clickFeature(f, evt){
var blurb = "<div class='info_blurb'>" + f.getAttribute("feat_name") + "</div>";
var infowin = document.getElementById('infowin')
infowin.style.width = "200px";
infowin.style.maxHeight = "200px";
infowin.style.overflow = "auto";
infowin.style.left = evt.clientX + "px";
infowin.style.top = evt.clientY + "px";
infowin.style.position = 'absolute';
infowin.style.display = 'block';
infowin.innerHTML = blurb;
}
So, wastefully using just bit of JQuery to handle to form, when text is entered in the box and the button pressed, the current layer is removed, and a new one is requested, give it a go!
It’s basic, in that if you change layer, the text label may still be there, and the labels don’t move when the map is panned, but hopefully you can see that you would have to roll your won stuff on top of polymaps to do this.
Just a quick note for those of you that use gedit and want to format json so that it goes from something like this:
{"published":"2011-06-23T11:04:37-04:00","title":"TNC's Ecoregional Portfolio (public)","data_type":"WMS","calculation_params":null,"contributor":"jrfishe1","state":"complete","geometry_types":null,"permissions":[{"permissions":{"download":true,"view":true},"group_id":"everyone"}],"link":"http://geocommons.com/overlays/128841.json","feature_count":0,"icon_link":null,"name":"TNC's Ecoregional Portfolio (public)","extent":[-180.0,-85.0511,180.0,85.0511],"process_notes":"EPSG:4326,EPSG:3857","is_raster":true,"description":"The Nature Conservancy's Ecoregional Portfolio (public version) represents our priority areas for conservation.","short_classification":"Y","author":"The Nature Conservancy","source":"http://maps.tnc.org/","url":"http://maps.tnc.org/ecadpubprodanon/services/portfolio_anon_WM/MapServer/WMSServer?request=GetCapabilities&service=WMS","data_attributes":null,"tags":"conservation,priorities,the nature conservancy,tnc","id":128841,"pagination":{"total":0,"sort":null,"start":0,"limit":1000000},"url_type":"wms","classification":null}
ergh! To something like this
{
"short_classification": "Y",
"name": "TNC's Ecoregional Portfolio (public)",
"icon_link": null,
"author": "The Nature Conservancy",
"title": "TNC's Ecoregional Portfolio (public)",
"url_type": "wms",
"data_attributes": null,
"extent": [
-180.0,
-85.0511,
180.0,
85.0511
],
"published": "2011-06-23T11:04:37-04:00",
"url": "http://maps.tnc.org/ecadpubprodanon/services/portfolio_anon_WM/MapServer/WMSServer?request=GetCapabilities&service=WMS",
....
"source": "http://maps.tnc.org/",
"process_notes": "EPSG:4326,EPSG:3857",
"state": "complete"
}
Have Ruby. Install json gem.
Enable the external tool plugin in Gedit
Open up Manage External Tools
Create a new item
in the box type
#!/bin/sh ruby /usr/bin/prettify_json.rb
Voila!
To activate it, load up a json file, then select the new command under tools > external tools
Last weekend, if you were at WhereCampEU in Berlin (blog post to follow) , you may have caught my sneak peak into the new GeoCommons 2.0, which has been revealed just the other day. Here are some of the highlights of the new GeoCommons