6

Here's a very basic question for you all.

I've got 17,000 polygons in a GeoDjango database. How do I create a slippy web map that can display these polygons?

In other words, do I:

  • load a GMap, get the boundaries, each time the map moves, make an Ajax call to the Django db, load the polygons...
  • make my own map tiles in advance (if so, how?)
  • something else?

I'd like users to be able to view the polygons on the map. I'd also like users to be able to search for a point, using GMaps geocoder or something similar, and load up the polygons within the borders of the map.

What client-side technology should I be using?

Thanks.

AP257
  • 243
  • 4
  • 7

5 Answers5

5

On client side I recommend OpenLayers. It is a client-side, pure JavaScript library used to display interactive maps on web browsers. On the web page you will find many examples with its source code.

OpenLayers is capable of drawing polygons, and it can consume data in GeoJSON format (among others), as show in the OpenLayers' "GeoJSON Example". OpenLayers can also request features in the current viewport by using the BBOX strategy, as show in "BBOX Strategy Example".

By using these OpenLayers capabilities (vector layers + GeoJSON + BBOX strategy), you would have to configure GeoDjango to answer the OpenLayers requests via HTTP in GeoJSON format.

dariapra
  • 2,290
  • 14
  • 11
  • Thanks. But can't both Google Maps and Open Street Map draw polygons, consume GeoJSON, and make requests from the bounding box in exactly the same way? – AP257 Sep 22 '10 at 22:17
  • One question I have is: what happens if the user zooms out to display all 1700 polygons at once - won't the client-side map, whatever it is, just crash? – AP257 Sep 22 '10 at 22:18
  • My experience with Google Maps is very limited and null with Open Street Map, so I cannot give you an answer. About displaying 1700 polygons at once, likely client's web browser will hang. In my opinion it is not OpenLayers fault, but current web browsers poor rendering capabilities. I have used OpenLayers + WFS + GML to draw vector layers, and with much less work the web browser hangs. The altenative is displaying these polygons as raster data using WMS (Web Map Service). The web browser will only have to show a set of pictures, no rendering work. Both MapServer and GeoServer provide WMS. – dariapra Sep 22 '10 at 22:40
  • I have found OpenLayers to be effective but I have noticed that it starts to bog down as the data set gets larger and can quickly get to the point where the script stops responding. It's been a while since I've examined it but the problem seemed to arise in the code that converted the GeoJSON to the geometry objects native to OpenLayers. This may have been improved in recent releases so it bears some testing. – Bill Dollins Sep 23 '10 at 13:59
4

With 17,000 polygons you are going to want to use a server side renderer as the browser will crash/die slowly which ever mapping technology you choose (Google, OpenLayers, whatever).

I'd recommend using a WMS server to render the polygons and OpenLayers to display them. There are various Tile Caches available to further speed things up if needed.

I don't know of a WMS server that can read from a GeoDjango database but I expect someone else can point to one, or you could import your data in PostGIS and then use MapServer or GeoServer to produce your maps. GeoServer can even output WMS layers as KML that can be displayed in Google Maps directly if you really need.

Ian Turton
  • 81,417
  • 6
  • 84
  • 185
3

Have you considered using Google Maps API v3's new KmlLayer? Essentially what happens here is Google acts as a proxy for grabbing any publicly available KML layer, and automatically breaks it up into tiles. This tiled layer can also respond to click events very similar to how a vector layer would.

Jason
  • 698
  • 2
  • 8
  • 12
3

I'm not sure what browser support is like (since it uses SVG, I think IE users will have to wait for IE9 unless there's a fallback), but http://polymaps.org/ is (a) very pretty, and (b) supports GeoJSON layers out of the box.

In particular, I believe you can break your GeoJSON up into small tiles & it will support incremental, tiled, loading. Since you have 17,000 polygons, that will be important.

Its documentation doesn't seem complete, but I think you break it up into consistently-named smaller geoJSON files with the tile X, Y, and zoom as part of their path.

Dan S.
  • 3,549
  • 17
  • 20
  • Polymaps is great and I believe its ability to tile GeoJSON is unique. It does require SVG and there's no fallback. Works great in every browser but IE. It should work in IE9 but I'm not sure how well tested it is yet. – Nelson Nov 19 '10 at 17:39
0

I've just started using Mapstraction. It's a javascript library that provides an abstraction layer between your code and the APIs for Google, Bing, Openlayers, Multimap and more. This way you can code it once and then switch the base maps on the fly. The documentation is a little on the sparse side and it is still being actively developed but I haven't had any problems with it and it seems to work well.

It doesn't support GeoJSON by default but there is a patch out there somewhere.

In answer to your question about what happens if you zoom all the way out - you should be able to limit the amount of records that the ajax returns by putting a limit in the SQL command. I know that Mapstraction provides some functionality to simplify shapes and thin out sets of points but you'd probably want to do that on the server side. I've not touched GeoDjango, so I'll leave that to you!

Edit: Mapstraction demo

Edit 2 2012-03-20: I have since started using Leaflet for all my web maps. It's much smoother in appearance than OpenLayers and even Google maps. It's also very lightweight and easy to work with. Here's a tutorial on how to use geoJSON with Leaflet.

Mr_Chimp
  • 3,773
  • 6
  • 37
  • 51