3

I've downloaded .mbtiles file from https://openmaptiles.com/downloads and want to show the map in localhost. I've used following code but it did not show anything.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Local Map</title>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<script src="build/ol.js"></script>
</head>
<body onload="init();">
<a href="#mapDiv">Go to map</a>
<div id="mapDiv" class="map" tabindex="0"></div>
<script>

var map;

function init() {
    map = new ol.Map ({
        target: 'mapDiv' });

    var newLayer = new ol.layer.Tile({
        source: new ol.source.OSM({
            url: 'http://localhost/map/${z}/${x}/${y}.png'

                }) 
    });

    map.addLayer(newLayer);
}

</script>
</body>
</html>

Following scenarios were tested and non of them were successful

  • putting .mbtiles file and referring to it as url: 'pathtofolder/file.mbtiles'

  • putting .mbtiles file and referring to its parent folder as url: 'pathtoparentfolder'

  • extracting .mbtiles with mbutil and obtaining many many numbered folders with metadata.json file and referring to it as url: 'pathtoparentfolder'

  • extracting .mbtiles with mbutil and obtaining many many numbered folders with metadata.json file and referring to it as url: 'pathtoparentfolder/{z}/{x}/{y}.png'

What is the problem and how can I debug OpenLayers? In fact I hesitate between using ol.source.OSM and ol.source.XYZ.

It's noteworthy to mention I have many .png files extracted in that folders but they can not be displayed.

Improve this question
2

5 Answers 5

Reset to default
6

First, the .mbtiles files are not served directly to the browser. You'll need a WMS server that understands mbtiles format like Geoserver, which is made by Boundless, who is a major contributor to Openlayers, and also a former employer. If that WMS Server bit doesn't make sense to you, let's focus on serving up those PNGs.

So this bit of code-

source: new ol.source.OSM({
    url: 'http://localhost/map/${z}/${x}/${y}.png'
 })

is sort of doomed from the getgo. As you've noted, there are different types of sources in Openlayers, one of which is OSM (which is OpenStreetMap). That source is made specifically for serving tiles from OpenStreetMap servers, which you are not using. Let's forget that ol.source.OSM exists for now, because it's of no use to us.

What we need is a source that works for our use-case. As you said, your data is stashed in XYZ format on your hard drive. Let's let Openlayers know that:

source: new ol.source.XYZ({
    url: 'http://localhost/map/${z}/${x}/${y}.png'
 })

Now, in order for this to work, you need to have a folder structure that looks like

/path/to/webroot |--map |--0 (folder) |--1 (folder) | |--1.png |--2 (folder) |--1.png |--1 (folder) |--1 (folder) | |--1.png | |--2.png |--2 (folder) |--1.png |--2.png And so on. You can check your folder structure by pointing your web browser to http://localhost/map/0/1/1.png, for example.

Let's start there. Try using ol.source.XYZ - just change that one line and nothing else - and if that doesn't work, try going to the URL in the previous paragraph and see if that works.

Improve this answer
2
  • The requested website offers vector mbtiles, not png files.
    – AndreJ
    Commented Sep 8, 2017 at 5:49
  • Thanks @onwsk8r. I've tested tileserver-php. Is it kind of WMS server?
    – Mahdi
    Commented Sep 9, 2017 at 7:17
2

You can use mapbox-gl-js server offline example that has a good example to do this.

Improve this answer
1

you need a vector tile server try https://github.com/klokantech/tileserver-gl As well as style

Also mbutil extracts mbtiles but the PBF are gzipped. And it does not unzip them

Improve this answer
1
  • I've got tileserver-gl by npm but when I type tileserver-gl country.mbtiles it says command not found.
    – Mahdi
    Commented Sep 11, 2017 at 9:00
0

As mentioned by @GeospatialInformationTech TileServer would you be the best solution for your requirement.

Try the answer to Tileserver-gl getting started procedure for your 'command not found' issue

Improve this answer
0

You can natively read vector tiles with openlayers 4. Use MBTILES.is or something similar to connect directly to your vector PBF tiles

Improve this answer

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.