I have managed to build a great web mapping application using tiles created from GeoWebCache and a custom gridset, but I now need to add an overlay to the base maps. The only interactivity I need is a simple pop-up info window that comes from only one of the attributes.

As default the overlay dataset is an ESRI Shapefile which is 180Mb, I have since managed to simplify the dataset using ST_SimplifyPreserverTopology which has dropped the ESRI Shapefile size to 28Mb. However, as a GeoJSON file this is still 78Mb which is just too big.

I then tried CartoDB and loaded the data into a table and then added the vectorlayer in openlayers but the volume of data is still too big and the HTML page crashes.

I then tried GIS Cloud and an external WMS but that is restricted to WGS84 and has no getfeature info option.

I then started looking at Topojson which I think would work really well on my dataset but I dont think there is a way to load a topojson onto a map in OpenLayers 2.12 that I need to use.

My other option was UTF-Grid, so I loaded the data into tilemill and exported a MbTiles which I can extract using mbutil. But of course UTF-Grid only supports EPSG:3857 (web mercator) which is different from my projection, EPSG:27700. So all the .json files are named differently from my underlying cached tiles from geowebcache.

Is there a way to create a UTF-Grid but in a different projection?

So that is the background and feel that I have tried most options that I know about.

So simply I need an interactive overlay layer in an OpenLayers 2.12 map but I cannot use any server like GeoServer/Mapserver or TileStache etc and I cannot have any server side scripting like PHP.

Can anyone offer any other advice??


  • topojson would work fine with openlayers 2.10 (you actually convert topojson to geojson prior to using it). But it would not solve your problem as it would still be too big to process in most browsers.
    – johanvdw
    Commented Nov 12, 2013 at 20:14
  • try d3js bl.ocks.org/mbostock/4965422 797M shapefile for national zip code tabulation areas. Simplified using TopoJSON (with -q 1e5 -s 3e-7)
    – Mapperz
    Commented Nov 12, 2013 at 20:38
  • @Mapperz that is an impressive reduction in size. Can topojson be in a different projection than spherical mercator?
    – tjmgis
    Commented Nov 12, 2013 at 20:46
  • @johanvdw do you have an example of topojson loaded into openlayers?
    – tjmgis
    Commented Nov 12, 2013 at 20:49
  • Projection TopoJSON bl.ocks.org/mbostock/5557726
    – Mapperz
    Commented Nov 12, 2013 at 20:51

3 Answers 3


Expanding my original comment:

Topojson can work fine with openlayers 2.10 (you actually convert topojson to geojson prior to using it). But I'm not sure it would solve your problem as it may still be too big to process in most browsers. An example on using topojson in openlayers 2, based on the openlayers geojson example and some data I used in a blog post.


The actual bit that is important is just the second line:

    $.getJSON('http://www.gisky.be/cyclists/f.json', function (data) {
        fusiegem = topojson.feature(data, data.objects.fusie);
        var geojson_format = new OpenLayers.Format.GeoJSON();
        var vector_layer = new OpenLayers.Layer.Vector();

This line builds a geojson object (fusiegem) from the data object which is topojson.

  • @johanvwd having failed at using D3 and topojson am going to give your example a go. Many thanks for adding the code
    – tjmgis
    Commented Nov 13, 2013 at 16:52
  • @johanvwd I amended your code and successfully got it working but it is awfully slow even on a topojson of 1.4Mb, let alone the one is need to use which is 8Mb. Any other thoughts??
    – tjmgis
    Commented Nov 13, 2013 at 18:11
  • I guess the only things left to do is doing more generalization on overview scales and working with tiles for lower scales. However, I know no tools for doing that job. I'm sure they will appear in the near future or perhaps already exist.
    – johanvdw
    Commented Nov 13, 2013 at 19:25

This sounds like a job for D3 - http://bl.ocks.org/mbertrand/5218300

  • How would D3 help solving the problem?
    – johanvdw
    Commented Nov 13, 2013 at 8:17
  • @ChrisInCambo - many thanks for the example which does exactly what I am after but have struggled to get D3 and my topojson working, so have posted a different question
    – tjmgis
    Commented Nov 13, 2013 at 16:53
  • The common mistake with TopoJSON is to not look inside the JSON and understand it's structure when using it with D3. If you copy the example code and replace the their TopoJSON with yours you need to make sure that objects referenced in the TopoJSON actually exist in your JSON also. Commented Nov 14, 2013 at 1:24

You could split the data in to GeoJSON files and name them according to tile. Once the map loads, you could query for the visible tiles and use their names/urls/coordinates to request the appropriate GeoJSON files, matching one file per tile.

The hard part is creating the files. For this, you definitely need to use a tool. Once the files are created, they're loaded as they're needed and in such small chunks that they won't overwhelm the browser. Another pain here is dealing with zoom levels. You'll have to decide which features are visible from which levels and create your files accordingly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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