Tangram

Pre-requirements

  • JavaScript library from here
  • Map style file, an example can be found here
  • Leaflet JavaScript library from here
  • Credentials to acces the service, see here

Code

Make sure you include the needed libraries:

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/tangram/dist/tangram.min.js"></script>

The CSS for this example would be similar to this:

        body {
            margin: 0px;
            border: 0px;
            padding: 0px;
        }
        #map {
            height: 100%;
            width: 100%;
            position: absolute;
        }

Then add the needed js code:

Bearer token
| Apikey
<body>
    <div id="map"></div>

    <script>
        var map = L.map('map');
        var layer = Tangram.leafletLayer({
            scene: 'map_style.yaml' // you should use your own file
        });
        var scene = layer.scene;
        scene.subscribe({
            load: function (e) {
                request_headers.Authorization = 'Bearer ' + getAuthToken(); // this function returns your authentication token
            }
        });
        layer.addTo(map);
    </script>
  </body>
<body>
    <div id="map"></div>

    <script>
        var map = L.map('map');
        var layer = Tangram.leafletLayer({
            scene: 'map_style.yaml' // You should use your own file. You may use use 'https://assets.vector.hereapi.com/styles/berlin/day/tangram/tilezen?apikey=API_KEY_HERE' as a starting example
        });
        layer.addTo(map);
        map.setView([52.5200, 13.4050], 2);
    </script>
  </body>
And in the map_style.yaml definition you would need to connect to the service.
Bearer token
| Apikey
sources:
    heremvt:
        type: MVT
        url: https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv
        request_headers:
            Authorization: Bearer XXXXXX
        max_zoom: 17
sources:
    heremvt:
        type: MVT
        url: https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=apikey_HERE
        max_zoom: 17

results matching ""

    No results matching ""