[GIS] How to get data from TileMill tileLayer properties in Mapbox for click/hover

geojsonjavascriptleafletmapboxtilemill

I've successfully used Leaflet to load a geoJSON polygon-shapefile with data, and added click and hover interactivity to the layer. For a large dataset, I switched to mapbox.js 1.6.1, used TileMill to export a tiles, used infostream's mbtiles-php (https://github.com/infostreams/mbtiles-php) to serve the data.

I'm very confused, now, how to use mapbox.js to access show the polygon attributes in the tile layer? I have successfully loaded the tiles onto a page using mapbox.js – but don't know where to start to pull in the attribute table.

I did not find an appropriate Mapbox example on the example page, and the Mapbox support links are all directed to their contact page. Did I misunderstand how the purpose of Mapbox/TileMill?

Best Answer

Use a UTFGrid - https://www.mapbox.com/developers/utfgrid/

Your tiles no longer contain the attribute table data that you seek.

Map tiles are used for displaying data that is too complex for vector (geojson) display; however, converting your data to map tiles is actually converting your data to image files, and these image files lack any information from your attribute table.

The solution is to add another, non-visible, tiled layer that contains the feature specific information on top of your map tiles.

You can then use the UTFGrid to trigger the desired hover and click interactivity.

Here's a link to the Leaflet UTFGrid plugin - https://github.com/danzel/Leaflet.utfgrid

And a link to an example from that same page - http://danzel.github.io/Leaflet.utfgrid/example/map.html

Related Solutions

[GIS] Fixing the OpenLayers MBTiles Example

It ends up that it was all a projection problem. When I created the map object, I just needed to specify the projections, and then my MBTiles layer was positioned correctly.

var options = {
  projection: "EPSG:900913",
  displayProjection: new OpenLayers.Projection("EPSG:4326")
};

map = new OpenLayers.Map('map', options);

var layer = new OpenLayers.Layer.WMS(
  "OpenLayers WMS",
  "http://vmap0.tiles.osgeo.org/wms/vmap0",
  {layers: 'basic'}
);

map.addLayer(layer);

[GIS] reusing cached tiles with leaflet, mbtiles and mbtiles-php

I was able to fix this in mbtiles-php tileserver.php by adding this call:

header('Cache-Control: max-age=3600');

when serving out the image tiles. I have no idea of the wisdom of this, although I did notice that in both the Leaflet and Mapbox examples that I point to above, they have similar 'Cache-Control' HTTP headers on the PNG tiles they serve. Here is the relevant diff:

244a245
>         header('Cache-Control: max-age=3600');
259a261
>         header('Cache-Control: max-age=3600');

Please let me know if this is a bad idea.

Best Answer

Related Solutions

[GIS] Fixing the OpenLayers MBTiles Example

[GIS] reusing cached tiles with leaflet, mbtiles and mbtiles-php

Related Question