Map Box

事前要件

コード

完全なコード例については、 こちらを参照してください。 適切なライブラリとスタイルシートがリンクされていることを確認します。

    <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 コードを追加します。

ベアラートークン
| apiKey
<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>
<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: 0,
            center: [13.404954, 52.520008],
        });
    </script>
</body>

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

ベアラートークン
| apiKey
"sources":{
        "composite":{
           "tiles": ["https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv"],
           "minzoom": 0,
           "maxzoom": 17,
           "type":"vector"
        }
     },
"sources":{
        "composite":{
           "tiles": ["https://vector.hereapi.com/v2/vectortiles/base/mc/{z}/{x}/{y}/omv?apikey=APIKEY_HERE"],
           "minzoom": 0,
           "maxzoom": 17,
           "type":"vector"
        }
     },

「」に一致する結果は 件です

    「」に一致する結果はありません