HERE Maps for JavaScript
事前要件
ライブデモ
ここで包括的なサンプルセットを参照できます。
コード
基本的な例では、ライブラリコンポーネントをページに追加します。
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
この例の CSS は次のようになります。
body { width: 100%; height: 100%; position: absolute; margin: 0px; padding: 0px; overflow: hidden;}
#map { position:absolute; top:0; bottom:0; width:100%; height: 100%;}
次の JavaScript スニペットは、提供されたコンテナ内でマップをレンダリングし、マップの対話を有効にします。
<body>
<div id="map"></div>
<script>
const platform = new H.service.Platform({
'apikey': '{YOUR_APIKEY}'
});
// Obtain the default map types from the platform object:
const defaultLayers = platform.createDefaultLayers();
// Instantiate (and display) a map:
var map = new H.Map(
document.getElementById("map"),
defaultLayers.vector.normal.map, {
zoom: 14,
center: { lat: 52.5, lng: 13.4 }
});
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
</script>
</body>
カスタム設定
ライブラリ は、デフォルトとは異なるパスを使用するように 設定できます。 次の例は、このようなユースケースを示しています。
var platform = new H.service.Platform({
apikey: '<API_KEY>'
});
var service = platform.getOMVService({path: 'v2/vectortiles/core/mc'});
var provider = new H.service.omv.Provider(service,
new H.map.Style('https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.yaml'));
var layer = new H.map.layer.TileLayer(provider, {max: 22});
var map = new H.Map(
document.getElementById("map"),
layer, {
zoom: 14,
center: { lat: 52.5, lng: 13.4 }
});