Mapbox

Pre-requirements

JavaScript library from here
Credentials to access the service. For more information, see the Identity & Access Management Developer Guide.

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:

<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/base/mapbox/tilezen?apikey=API_KEY_HERE' as a starting example
      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>

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

    "sources":{
        "composite":{
          "tiles": ["https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv"],
          "minzoom": 0,
          "maxzoom": 17,
          "type":"vector"
        }
    },