0

The OpenMapTiles example for display using Mapbox GL JS works nicely to display the map. However, when trying to add lines and features to the map using Mapbox GL JS functions like this:

map.on('load', function () { map.addLayer({ .... }) })

the desired added lines and features do not display on the map. The full example HTML is shown below.

Questions:

  • Is there something about the openmaptiles style osm-bright that makes it incompatible which the specified data as added below?
  • Could it be made to work by changing something in the code below?
  • Could it be made to work by changing something in the osm-bright style file?

The added code for geojson features are mapbox examples:

The features should appear in and around San Francisco.

Here is the whole HTML file:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>OpenMapTiles OSM Bright style</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json',
            center: [8.5456, 47.3739],
            zoom: 11
        });


      map.on('load', function () {

      map.addLayer({
      "id": "points",
      "type": "symbol",
      "source": {
      "type": "geojson",
      "data": {
      "type": "FeatureCollection",
      "features": [{
      "type": "Feature",
      "geometry": {
      "type": "Point",
      "coordinates": [-122.414, 37.776]
      },
      "properties": {
      "title": "Mapbox SF",
      "icon": "harbor"
      }
      }]
      }
      },
      "layout": {
      "icon-image": "{icon}-15",
      "text-field": "{title}",
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
      "text-offset": [0, 0.6],
      "text-anchor": "top"
      }
      });


      map.addLayer({
      "id": "route",
      "type": "line",
      "source": {
      "type": "geojson",
      "data": {
      "type": "Feature",
      "properties": {},
      "geometry": {
      "type": "LineString",
      "coordinates": [
      [-122.48369693756104, 37.83381888486939],
      [-122.48348236083984, 37.83317489144141],
      [-122.48339653015138, 37.83270036637107],
      [-122.48356819152832, 37.832056363179625],
      [-122.48404026031496, 37.83114119107971],
      [-122.48404026031496, 37.83049717427869],
      [-122.48348236083984, 37.829920943955045],
      [-122.48356819152832, 37.82954808664175],
      [-122.48507022857666, 37.82944639795659],
      [-122.48610019683838, 37.82880236636284],
      [-122.48695850372314, 37.82931081282506],
      [-122.48700141906738, 37.83080223556934],
      [-122.48751640319824, 37.83168351665737],
      [-122.48803138732912, 37.832158048267786],
      [-122.48888969421387, 37.83297152392784],
      [-122.48987674713133, 37.83263257682617],
      [-122.49043464660643, 37.832937629287755],
      [-122.49125003814696, 37.832429207817725],
      [-122.49163627624512, 37.832564787218985],
      [-122.49223709106445, 37.83337825839438],
      [-122.49378204345702, 37.83368330777276]
      ]
      }
      }
      },
      "layout": {
      "line-join": "round",
      "line-cap": "round"
      },
      "paint": {
      "line-color": "#888",
      "line-width": 8
      }
      });
      });


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

The mapbox-gl-js version number in the OpenMapTiles was too old. The OpenMapTiles example is using version 0.29.0. The current version is 0.45.0.

Changing

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />

to

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />

allowed the added geojson data to become visible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.