Category Archives: gis

by

Leaving GeoIQ/Esri. Retrospective and future plans.

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.

Continue reading →

by

Pubs in England – geographical distribution of names with cardinal points.

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…

by

268 Different Colourful Tiles – Plain Tile Maker

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.

by

Why companies are moving away from Google Maps to OpenStreetMap – switch2osm.org

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.

LSxCafe Swtich2OSM.org talk
View more presentations from chippy

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.

by

Pubs in England: How to do it with Polymaps and GeoCommons Filters

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.

GeoCommons Filters

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.

 

Green Map pubs in England

Filtered GeoCommons features on polymaps.

 

 

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.

Adding More Functionality

Search for any pub name, click on point gives the name.

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.

by

JSON prettifier for gedit

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"
}

How to

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

 

 

 

 

by

Some stuff I’ve been working on with new GeoCommons 2.0

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

  • The flash map has been overhauled and re-written, mainly by Andrei – and it can handle hundreds of thousands numbers of points quite happily
  • Analytics library is completed, but not currently accessible to normal users of GeoCommons – hopefully it will be soon, if people want it.
  • Behind the scenes, the system uses a number of distributed workers and tasks to offload processing intensive or long processing tasks
  • Datasets and Maps get given nice overview images, and the attributes of datasets have histograms generated for them
  • Data can be edited in the system, and filtered, and saved either to replace itself or as a new dataset
  • Animation of temporal data is much nicer now
  • Polymaps for HTML5 non-flash map support
  • Filters can be applied to the map, so that attributes can be filtered out.
  • Thematic maps can be made with categories now
  • Acetate is used as standard
  • Custom markers can be added to a map, and even animated ones work too!
The GeoIQ developer blog has a developer orientated review of wha’ts new and there is a good overview of GeoCommons on the main GeoIQ blog too.
Keep your eyes peeled on the GeoIQ Developer Blog over the next few days as the team adds some more posts about some of the technology behind it.