Mapbox

前提条件

こちらから入手した JavaScript ライブラリ
サービスにアクセスするための資格情報。詳細については「IDとアクセス管理の開発者ガイド」を参照してください。

コード

適切なライブラリとスタイルシートがリンクされていることを確認します。

    <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' />

CSS ファイルには、少なくとも次のものが含まれています

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

次に、必要なJavaScriptコードを追加します。

<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>

map_style.json定義では、次のサービスに接続する必要があります。

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