2

i am trying to display my own created vector tiles(.pbf), they are not getting displayed with no error on console of inspect element. I am dispaying them by using a simple example html file at: here

I just have changed the url to look for vector tiles on the local server instead of mapbox server.

When i try to display the pbf files from mapbox server: , it gets displayed. Also i have downloaded these mapbox pbf files and served same files from local server they get displayed.

But the pbf files which i have created from geojson file using tippecanoe cant be displayed by openlayers.The generated pbf files are correct as i am able to dislay them using mapbox js script. I have cors on,server's content encoding is also gzip. Sample pbf file which is not getting displayed by the attached code but by tileserver-gl(mapbox script) can be downloaded from here

code:

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox Vector Tiles</title>
    <link rel="stylesheet"href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
    <script src="https://openlayers.org/en/v4.5.0/examples/resources/mapbox-streets-v6-style.js"></script>
    <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
    <style>
        .map {
            background: #f8f4f0;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';

    var map = new ol.Map({
        layers: [
            new ol.layer.VectorTile({
                declutter: true,
                source: new ol.source.VectorTile({
                    attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
                    '© <a href="https://www.openstreetmap.org/copyright">' +
                    'OpenStreetMap contributors</a>',
                    format: new ol.format.MVT(),

                    url: 'http://localhost:8000/tippecanoe_tiles/' + '{z}/{x}/{y}.pbf'
                    //url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
                    //          '{z}/{x}/{y}.vector.pbf?access_token=' + key

                }),
                style: createMapboxStreetsV6Style(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>
</body>
</html>
unibasil
  • 488
  • 8
  • 18
shivam_b
  • 21
  • 6
  • Maybe you should define your own style (in Openlayers way) to display tippecanoed data? – unibasil Dec 27 '17 at 07:21
  • Hi unibasil,i have tried that too.I commented the line style: and it works(maps get displayed without style) with their pbf tiles but not with mine.So that means i have taken out the possibility that style might be an issue thats causing tiles not to be displayed.If thats what you are talking about – shivam_b Dec 27 '17 at 14:29
  • You need to create ol style objects, you don't need any mapbox client scripts at all. – SalientBrain Dec 28 '18 at 10:37

1 Answers1

0

You're using OpenLayers 4.5 instead of OpenLayers 5.X, try uploading your OpenLayers version.

Hadrien Patricola
  • 37
  • 1
  • 10
Luis Hidalgo de Tena
  • 16
  • 4
  • 2
    I think this can be a comment instead of an answer – kboul Nov 15 '18 at 13:47
  • Your right, still that is the fault, I had that same issue last week, vector tiles is an openlayers5 feature, I will do it in a comment next time. – Luis Hidalgo de Tena Nov 15 '18 at 14:03
  • 1
    *Why* should he update to 5.X? Why does this solve the issue? This would go a long way to improving this post for future readers. – Blue Nov 17 '18 at 01:01