I've been playing with Bing Maps + Polymaps recently.

It has become apparent that Bing is the only mapping resource available to Polymaps that includes satellite imagery. Is this true?

I am trying to accomplish drawing many polygons of different sizes on a map, and filling them with different colors depending on what they represent. Furthermore, I want each of these polygons to be clickable.

I understand that to load geographical data onto a map with Polymaps, you either use .features() or .url() as part of the geoJSON object.

I have .features() working, but by using this function the polygon data must be embedded into the javascript file itself - as in:

      "geometry": {
        "coordinates": [[

        "type": "MultiPolygon"
      "type": "Feature",
      "id": "beat:05X",
      "properties": {"name": "05X"}


I want this data to actually come from a database and not lie statically within the javascript itself - which tells me I should use the .url() method instead - correct? And if I use the .url() method, I must pass a valid URL template that returns geoJSON... How do I go about this with my own private data? I'm familiar with PHP and mySQL - must I use a spatial database system instead?

And how does a map server like MapServer, GeoServer, and others fit into this? Could I not set up a PHP script to read these templates from the $_GET variable, query a database and return the proper geoJSON string?

I really just need some inspiration, a few pointers to set me on my way and kill some of the doubts I have. I've found myself just digging around the stackexchange and googling everything from map servers, to geo spatial databases - you name it, I've probably read about it, but I'm struggling putting the pieces together.

Long winded question but once these things are clarified, I should be in a much better position.

We can remove polymaps from the equation if there are substitutes.

In summary, I'm looking to take a large number of polygons from a database (PostGIS?) of all different shapes, sizes, colors, and transparencies, and plot them on a map. That's essentially it! Polymaps has vector graphics + I thought getting this on the go would be trivial given the above code... we can scrap it if you have other ideas. What is the best solution? My only business requirement is that Satellite Imagery be enabled...Which means we're working with Bing or Google.


If you're talking about GeoJSON you can use any kind of database, and backend server, you want so long as it:

1) Expects to receives TMS or /{zoom}/{x-coord}/{y-coord}.json style URLs and can convert Z/X/Y in to a bounding box.

(Take a look at something like Tilestache (.org) if you want/need to see the math involved in doing that.)

2) Returns GeoJSON.

For styling , and adding interactive bits, to the data results you'll want to define a "load" function using the layer's on() method. For example:

var l = org.polymaps.geoJson();
l.on("load", function(e){ ... });

The Polymaps site has lots of good documentation and example code, but I've also included the slides and sample code from a Polymaps workshop I did recently:




  • Thank you Aaron, the links you have posted are truly indispensable. I've downloaded the files for later review, I will be referring to them when I am at the interactivity stage. I'm not sure Tilestache is something I require because the actual tiling is being looked after by Bing, no? The custom data I will be serving up is polygon data, not any sort of .png, .jpg, etc imagery. Is there any chance I could take a peak at ./flickr.json? Missing link. Cheers and thanks again. – Jordan Arseno May 13 '11 at 2:42
  • I found it in the root of workshop/005-data/, thanks! – Jordan Arseno May 13 '11 at 2:45

Ok, so here's the deal - This Blog Post

Cleared EVERYTHING up. It's a must read for anybody playing with Polymaps. I found it via Henry on Reddit

Aaron mentioned using TileStache and indeed... That is the key, I just did not see how - The above blog post is quite informative in using TileStache. Big Win.

  • You noted that you wanted each element clickable, how did you accomplish that? I have my map running, but I'm up against a wall on making elements clickable in the map. – user3241 Jun 6 '11 at 22:34
  • hello Erik, if you download and extract the polymaps plugin to your web server then you can access a perfect example at: localhost/polymaps/examples/tipsy/tipsy.html - Check the source on this guy. Truth be told, I've put this mapping project into temporary hiatus mode and didn't achieve clickable datapoints yet, but this is exactly where I would start. All the best! – Jordan Arseno Jun 6 '11 at 23:56
  • @JordanArsenault the "this blog post" link isn't working anymore - did you happen to download the information? Thanks – Stephen Lead Dec 2 '11 at 5:55
  • hey Stephen, indeed, the Blog Post is now down and I do not have a downloaded copy. However, the creator of goalfinch can be found here: linkedin.com/in/hanskuder ... Please, if you find the content, let me know and I'll fix the links - or feel free to edit this post :) – Jordan Arseno Dec 3 '11 at 4:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.