• JavaScript
  • HTML
                  
                  
const map = new mapboxgl.Map({
   container: 'map',
   style: 'https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey=' + apikey,
   center: [-122.431297, 37.773972], //Longitude, Latitude
   zoom: 11
});

                  
                
                  
                  
<html>

<head>
   <title>HERE Vector Tile & Mapbox example</title>
   <script src="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
   <link href="https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel='stylesheet' />
   <script src="../test-credentials.js"></script>
   <link href="demo.css" rel='stylesheet' />
   <link href="../template.css" rel='stylesheet' />
<script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script></head>

<body id="mapbox-example">
   <div class="page-header">
      <h1>Mapbox with HERE Vector Tile</h1>
      <p>Mapbox renderer with HERE Vector Tile as source data</p>
   </div>
   <p>This example displays how to render HERE Vector Tile with Mapbox libraries</p>
   <div id="map"></div>
   <script type="text/javascript" src="demo.js"></script>
</body>

</html>