[GIS] Using local mbtiles in openlayers

openlayers-2web-mapping

–The problem–
I've successfully added mbtiles from Mapbox free online source to OpenLayers, but cannot figure out how to get the mbtiles I've created/stored locally to show up in OpenLayers.

–The process–
Style data in Tilemill, export mbtiles, add mbtiles to Tilestream running on localhost, then add to openlayers using the localhost:8888 url.

–The code–

This works:

// Add mapbox mbtiles from web
map.addLayer(new OpenLayers.Layer.TMS('geography-class',
'http://a.tiles.mapbox.com/mapbox/', {
maxResolution: 156543.0339,
type: 'png',
layername: 'geography-class',
isBaseLayer: true
}));

This doesn't work:

// Add tilestream mbtiles local data layer
map.addLayer(new OpenLayers.Layer.TMS('overlayWorld',
'http://localhost:8888/2.0.0/overlay_62ee43/{z}/{x}/{y}.png', {
maxResolution: 156543.0339,
type: 'png',
layername: 'overlayWorld',
isBaseLayer: false
}));

That localhost url comes from the 'TILE URL' field in Tilestream. I've tried multiple different edits to the localhost url but cannot get it right.

Any help is appreciated.

Best Answer

For the benefit of people who have the same question:

OpenLayers can't use MBTiles directly. You'll have to extract the tiles as @maning has commented. Luckily there's a tool called MBUtil that exactly does that. With it, you can extract all the images from the MBTiles and serve them directly from image folders.

For example, if you have an an MBTiles file named geography-class, you can extract the images by using the following command:

mb-util geography-class.mbtiles tiles/geography-class

The extracted tiles will be stored in z and x subdirectories such that they have a filesystem path like 0/0/0.png which should play nicely with most web mapping clients.

Related Question