Mapbox

Pre-requirements

  • JavaScript library from here
  • Credentials to access the service, see here

Code

Make sure the right libraries and stylesheets are linked:

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

Your CSS file would include at least

        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

Then add the needed Javascript code:

Bearer token
| Apikey
<body>
  <div id='map'></div>
<script>
  var map = new mapboxgl.Map({
      container: 'map',
      style: "map_style.json", // you should use your own style
      zoom: 12,
      minZoom: 1,
      center: [13.404954, 52.520008],
      transformRequest: function(url, resourceType) {
        if(url.match('vector.*.hereapi.com')) {
          return {
            url: url,
            headers: { 'Authorization': 'Bearer ' + getAuthToken() } // this function returns your authentication token
          }
        }
      }
  });
</script>
</body>
<body>
    <div id='map'></div>

    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: "map_style.json", // You should use your own style or You may use 'https://assets.vector.hereapi.com/styles/berlin/day/mapbox/tilezen?apikey=API_KEY_HERE' as a starting example
            zoom: 12,
            minZoom: 1,
            center: [13.404954, 52.520008],
        });
    </script>
</body>

In your map_style.json definition you would need to connect to the service:

Bearer token
| Apikey
"sources":{
        "composite":{
           "tiles": ["https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv"],
           "minzoom": 1,
           "maxzoom": 17,
           "type":"vector"
        }
     },
"sources":{
        "composite":{
           "tiles": ["https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=APIKEY_HERE"],
           "minzoom": 1,
           "maxzoom": 17,
           "type":"vector"
        }
     },

results matching ""

    No results matching ""