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"
           }
       },