[GIS] Create interactive map with no server

openlayers-2overlayutfgridvectorweb-mapping

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

Best Answer

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.

Related Question