Create interactive map with no server

Question

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??

Thanks

Answer 1

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.

http://www.gisky.be/cyclists/ol-topojson.html

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();
        map.addLayer(vector_layer);
        vector_layer.addFeatures(geojson_format.read(fusiegem));
    });

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

Answer 2

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

Answer 3

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.