前回のチュートリアルでHEREが提供しているAPIやサービスの概要、アカウントの作り方について紹介しましたが、今回ではHEREが提供している背景地図をWebページで表示する方法について紹介します。
今回はJavascriptのフレームワークを使用せずにHEREの背景地図を表示する方法について紹介します。
HTMLを使った一般的なWebページ、またはJQueryを使用したアプリケーションにHEREの背景地図を組み込みたい方はぜひこのまま読み続けてください。
また、この記事の前半ではHERE Maps API for Javascriptを使ってHEREの地図を直接HTMLで表示する方法について紹介しますが、後半ではOpenlayersやLeafletなどの地図ライブラリでHEREの背景地図を使う方法について紹介します。
Webページに新しく地図を組み込みたい方は、ぜひ外部の地図ライブラリを利用しなくても地図を表示できるHERE Maps API for Javascriptの実装方法を、Webページにはすでに地図ライブラリが導入されているんですが、背景地図をさがしている、または背景地図を変えたい方はぜひ後半の実装方法をご覧ください。
なお、今回はVueやReactといったフレームワークは利用せず、いわゆるVanillaの実装例を示します。本連載の後半にはより実践的な、Reactを利用したチュートリアルがあります。
前提条件
今回のチュートリアルの前提条件としては、第一回チュートリアルで紹介したHEREアカウントをすでに作成していることです。
まだHEREアカウントを作成されていない方は、第一回チュートリアルの紹介に沿って、アカウントを作成してください。
APIキーの取得
背景地図を表示できる前に、ユーザーはまずHEREの開発者用ページからAPIキーを取得する必要があります。
まずは、HEREのログインページにアクセスし、一回目のチュートリアルで作成したHEREアカウントにログインしてください。
ログインできましたら、HEREの管理画面で新しいプロジェクトとアプリケーションを作成し、地図を表示するためのAPIキーを管理画面で発行します。
まずは、新しいプロジェクトの作成ですが、管理画面右上のアイコンをクリックし、その後「プロジェクトマネージャー」をクリックしてください。
続いては、右上の「プロジェクトを作成」ボタンで新しいプロジェクトを作成します。
プロジェクト作成画面では、プロジェクト名とプロジェクトIDを決定する必要があります。
プロジェクト名には日本語も含めた名称を利用することができますが、
プロジェクトIDには日本語を利用できないので、気をつけましょう。
また、プロジェクト作成画面ではプロジェクト一覧で表示される説明を設定することもできます。
プロジェクト名とIDを決定しましたら、「保存」ボタンでプロジェクトを保存しましょう。
プロジェクトの作成作業が終わりましたが、プロジェクトの概要を表示した画面が表示されます。
プロジェクト概要画面では左側の「サービス」をクリックし、このプロジェクトに紐づかれたAPIが利用できるAPIを設定していきます。
初期状態ではサービスをクリックしても「このプロジェクトにリンクされているサービスはありません」と表示されますが、このまま設定を進め、サービスを追加していきます。
まずは右側の「サービスをリンク」ボタンで今回利用するHERE Vector Tile APIを使用する権限をプロジェクトに付与します。
API一覧画面が表示されますが、検索欄で「Vector」と入力して、今回利用するHERE Vector Tile APIを検索します。
一覧画面に「HERE Vector Tile」が表示されましたら、右側の「リンク」をクリックすると、サービスが利用できる状態になります。
サービスが利用できる状態になりましたら、再度右上のボタンでメニューを開く、今度は「アクセスマネージャー」を開きます。
アクセスマネージャーでは、先ほどのプロジェクトに紐づいた「アプリケーション」を作り、WebページからHEREのサービスにアクセスする際に利用するAPIキーを発行します。
アプリを作るために、まずは「新しいアプリを登録」をクリックします。
続いてはアプリ名を決定し、「プロジェクトへのデフォルトアクセス」部分で先ほど作成したプロジェクトを選択します。
アプリ名には日本語を利用できないので、英語のアプリ名を設定するようにしましょう。
アプリが作成されましたら、アプリ管理画面が表示されます。
地図を表示するためのAPIを発行するためには、まず左側の「APIキー」メニューをクリックし、APIキー管理画面を開きます。
APIキー管理画面では「APIキーを作成」をクリックして、新しいAPIキーを作成します。
APIキーが発行されましたら、HEREの地図表示APIを利用する準備ができましたので、一旦実装作業に入ります。
しかし、実装ではAPIキーを利用するので、APIキー管理画面は閉じないでください。
背景地図の表示
今回のチュートリアルでは、まずはごく一般的なHTML形式のWebページにHEREの背景地図を表示する方法について紹介します。
準備として、まずはまっさらなHTMLドキュメントを用意します
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>チュートリアル</title>
</head>
<body></body>
</html>
続きましては、こちらの公式ドキュメントの指示に沿って、地図表示用の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>
導入後のヘッド部
<head>
<meta charset="utf-8" />
<title>チュートリアル</title>
<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>
</head>
続きましては、地図をレンダリングするためのスタイル設定をします。
地図がWebページで表示されるサイズやページ全体の見た目の調整するためにこちらのコードをスタイル部分に導入していきます。
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
スタイル設定後のヘッド部が以下のようになっていると、地図を本格的に導入する準備ができています。
<head>
<meta charset="utf-8" />
<title>チュートリアル</title>
<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>
<style>
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
続きましては、地図を本格的に表示するために、Body部分に地図を表示するためのコードを導入します。
<body>
<div id="map"></div>
<script>
const platform = new H.service.Platform({
apikey: {Your-api-key},
});
// HEREのプラットフォームよりデフォルトの地図レイヤを取得
const defaultLayers = platform.createDefaultLayers();
// 地図表示を実装
let map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
zoom: 14,
center: { lat: 35.6, lng: 139.7 },
}
);
// 地図のズームイン・ズームアウトを実装
const behavior = new H.mapevents.Behavior(
new H.mapevents.MapEvents(map)
);
</script>
</body>
HTMLドキュメント全体のコードは以下のようになっているはずです。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>チュートリアル</title>
<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>
<style>
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<body>
<div id="map"></div>
<script>
const platform = new H.service.Platform({
apikey: {Your-api-key},
});
// HEREのプラットフォームよりデフォルトの地図レイヤを取得
const defaultLayers = platform.createDefaultLayers();
// 地図表示を実装
let map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
zoom: 10,
center: { lat: 35.6, lng: 139.7 },
}
);
// 地図のズームイン・ズームアウトを実装
const behavior = new H.mapevents.Behavior(
new H.mapevents.MapEvents(map)
);
</script>
</body>
</body>
</html>
{Your-api-key}の部分は先ほどのAPIキー管理ページに戻り、発行されたAPIキーをコピして、利用してください。
APIキーの差し替えが終わりましたら、HTMLドキュメントをChromeなどのブラウザーで開きますと、東京駅を中心とする簡単に地図が表示されます。
HERE Maps APIで日本国内のデータを含めた地図を表示する方法
先ほどはHERE Maps APIを使って、一般的な地図を表示する方法について紹介しましたが、次は日本国内のデータを含めた地図を表示する方法について紹介します。
先ほど紹介したHERE Maps APIではHEREがデフォルトで提供している地図データを利用しておりますが、デフォルトの地図ではかなり縮小した際での利用を想定しており、地図で表示される情報がかなり簡略化されています。
これから紹介する日本国内のデータでは、路地裏をも含む全国の細かい道路、鉄道や施設等の細かい情報が含まれており、地図をかなり拡大した際も快適に利用できるものになっています。
また、これから紹介するデータは日本国内での使用を想定してデザインされた地図スタイルが使われており、地図上には地下鉄がそれぞれの路線カラーで表示されていたりと、馴染みやすいデザインになっています。
Script部分では、 まず以下のコードで日本国内の地図データを地図画面に追加します。
let omvService = platform.getOMVService({
path: 'v2/vectortiles/core/mc',
});
const baseUrl = 'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
// 日本専用の地図スタイルを導入
let style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);
// 背景地図として日本の地図データでレイヤを作成
let omvProvider = new H.service.omv.Provider(omvService, style);
let omvlayer = new H.map.layer.TileLayer(omvProvider, {
max: 22,
});
続きまして、地図表示を実装する部分では defaultLayers.vector.normal.map, の部分、元のコードではデフォルトの地図データを表示するためのコードを、日本国内のデータを表示するためのものに差し替えます。
// 地図表示を実装
let map = new H.Map(document.getElementById('map'), omvlayer, {
zoom: 10,
center: { lat: 35.6, lng: 139.7 },
});
最後にはデフォルトの地図データを地図画面に追加するためのコード、 const defaultLayers = platform.createDefaultLayers(); を削除してください。
Script部分全体的には以下のように変わります。
const platform = new H.service.Platform({
apikey: {Your-api-key},
});
let omvService = platform.getOMVService({
path: 'v2/vectortiles/core/mc',
});
const baseUrl =
'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
// 日本専用の地図スタイルを導入
let style = new H.map.Style(
`${baseUrl}normal.day.yaml`,
baseUrl
);
// 背景地図として日本の地図データでレイヤを作成
let omvProvider = new H.service.omv.Provider(omvService, style);
let omvlayer = new H.map.layer.TileLayer(omvProvider, {
max: 22,
});
// 地図表示を実装
let map = new H.Map(
document.getElementById('map'),
omvlayer,
{
zoom: 10,
center: { lat: 35.6, lng: 139.7 },
}
);
// 地図のズームイン・ズームアウトを実装
const behavior = new H.mapevents.Behavior(
new H.mapevents.MapEvents(map)
);
地図表示が正しく実装されていると、以下のように東京駅を中心とした地図が表示されます。
地図上に静的なマーカーを表示する方法
続きましては、地図上にマーカーを立てる方法について紹介します。
HEREの地図APIでは、SVGやPNGなどの画像を用意すると地図上に画像を使ったマーカーを載せることができます。
SVGマーカーの実装
まずは、SVG形式のマーカーを実装する方法について紹介します。
エディタで先ほどのHTMLドキュメントを開き、地図表示部分に表示するSVGマーカーのスタイル設定を行います。
// 地図上に表示するSVGマーカーを設定
const svgMarkup =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
その後はマーカーを表示する場所を設定します。
coords内では、 latの値として緯度を、そしてlngの値として経度を指定してください。
サンプルコードでは東京駅付近の座標を指定します。
// マーカーと、マーカーを表示する位置を座標を格納する変数
let icon = new H.map.Icon(svgMarkup),
coords = { lat: 35.69, lng: 139.76 },
marker = new H.map.Marker(coords, { icon: icon });
そして、以下のコードで地図上にSVGマーカーを追加してください。
// マーカーを地図上に追加
map.addObject(marker);
// マーカーの位置を設定
map.setCenter(coords);
SVG形式で静的なマーカーを表示するコードを表示するコードを実装した後の scriptタグ内は以下のようになっているはずです。
const platform = new H.service.Platform({
apikey: {Your-api-key},
});
let omvService = platform.getOMVService({
path: 'v2/vectortiles/core/mc',
});
const baseUrl =
'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
// 日本専用の地図スタイルを導入
let style = new H.map.Style(
`${baseUrl}normal.day.yaml`,
baseUrl
);
// 背景地図として日本の地図データでレイヤを作成
let omvProvider = new H.service.omv.Provider(omvService, style);
let omvlayer = new H.map.layer.TileLayer(omvProvider, {
max: 22,
});
// 地図表示を実装
let map = new H.Map(
document.getElementById('map'),
omvlayer,
{
zoom: 10,
center: { lat: 35.6, lng: 139.7 },
}
);
// 地図のズームイン・ズームアウトを実装
const behavior = new H.mapevents.Behavior(
new H.mapevents.MapEvents(map)
);
// 地図上に表示するSVGマーカーを設定
const svgMarkup =
'<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
'height="22" /><text x="12" y="18" font-size="12pt" ' +
'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
'fill="white">H</text></svg>';
// マーカーと、マーカーを表示する位置を座標を格納する変数
let icon = new H.map.Icon(svgMarkup),
coords = { lat: 35.69, lng: 139.76 },
marker = new H.map.Marker(coords, { icon: icon });
// マーカーを地図上に追加
map.addObject(marker);
// マーカーの位置を設定
map.setCenter(coords);
そして、このコードを実装したHTMLドキュメントをブラウザーで開きますと、以下のように東京駅付近で「H」のマークのマーカーが実装されているのが確認できます。
PNGマーカーの実装
SVG形式ではなく、PNG形式のマーカーを実装される場合は、以下のコードでPNGファイルを読み込んでください。
const icon = new H.map.Icon('graphics/marker.png');
let marker = new H.map.Marker({ lat: 52.5, lng: 13.4 }, { icon: icon });
map.addObject(marker);
PNG形式のマーカーを追加する場合は、
scriptタグ内の内容は全体的に以下のようになります。
const platform = new H.service.Platform({
apikey: {Your-api-key},
});
let omvService = platform.getOMVService({
path: 'v2/vectortiles/core/mc',
});
const baseUrl =
'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
// 日本専用の地図スタイルを導入
let style = new H.map.Style(
`${baseUrl}normal.day.yaml`,
baseUrl
);
// 背景地図として日本の地図データでレイヤを作成
let omvProvider = new H.service.omv.Provider(omvService, style);
let omvlayer = new H.map.layer.TileLayer(omvProvider, {
max: 22,
});
// 地図表示を実装
let map = new H.Map(
document.getElementById('map'),
omvlayer,
{
zoom: 10,
center: { lat: 35.6, lng: 139.7 },
}
);
// 地図のズームイン・ズームアウトを実装
const behavior = new H.mapevents.Behavior(
new H.mapevents.MapEvents(map)
);
const icon = new H.map.Icon('graphics/marker.png');
let marker = new H.map.Marker({ lat: 52.5, lng: 13.4 }, { icon: icon });
map.addObject(marker);
地図上に動的なマーカーを表示する方法
HEREの地図APIではPNGやSVGの他に、動的なマーカーを表示することもできます。
動的なマーカーを表示する場合、HEREの地図APIではSVG形式のマーカーをHTML記法で指定することができます。
以下のサンプルでは跳ねるアニメーションをつけた円形のマーカーを東京駅付近で表示する実装例になります。
まずは、以下のコードで今回利用するマーカーをSVG記法、そしてアニメーションをHTML記法で指定します。
const animatedSvg =
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" ' +
'y="0px" style="margin:-112px 0 0 -32px" width="136px"' +
'height="150px" viewBox="0 0 136 150"><ellipse fill="#000" ' +
'cx="32" cy="128" rx="36" ry="4"><animate attributeName="cx" ' +
'from="32" to="32" begin="0s" dur="1.5s" values="96;32;96" ' +
'keySplines=".6 .1 .8 .1; .1 .8 .1 1" keyTimes="0;0.4;1"' +
'calcMode="spline" repeatCount="indefinite"/>' +
'<animate attributeName="rx" from="36" to="36" begin="0s"' +
'dur="1.5s" values="36;10;36" keySplines=".6 .0 .8 .0; .0 .8 .0 1"' +
'keyTimes="0;0.4;1" calcMode="spline" repeatCount="indefinite"/>' +
'<animate attributeName="opacity" from=".2" to=".2" begin="0s" ' +
' dur="1.5s" values=".1;.7;.1" keySplines=" .6.0 .8 .0; .0 .8 .0 1" ' +
'keyTimes=" 0;0.4;1" calcMode="spline" ' +
'repeatCount="indefinite"/></ellipse><ellipse fill="#1b468d" ' +
'cx="26" cy="20" rx="16" ry="12"><animate attributeName="cy" ' +
'from="20" to="20" begin="0s" dur="1.5s" values="20;112;20" ' +
'keySplines=".6 .1 .8 .1; .1 .8 .1 1" keyTimes=" 0;0.4;1" ' +
'calcMode="spline" repeatCount="indefinite"/> ' +
'<animate attributeName="ry" from="16" to="16" begin="0s" ' +
'dur="1.5s" values="16;12;16" keySplines=".6 .0 .8 .0; .0 .8 .0 1" ' +
'keyTimes="0;0.4;1" calcMode="spline" ' +
'repeatCount="indefinite"/></ellipse></svg>';
そして、以下のコードで指定した動的マーカーを地図に追加していきます。
気をつけなければいけない点として、静的マーカーを追加する際には map.Marker のオブジェクトを地図上に追加していましたが、動的マーカーを追加する場合は map.DomMarker の追加になるなどと、追加するオブジェクトの名称が若干異なります。
let icon = new H.map.DomIcon(animatedSvg),
coords = { lat: 35.69, lng: 139.76 },
marker = new H.map.DomMarker(coords, { icon: icon });
動的マーカーを追加する場合、
地図表示のHTMLドキュメントの script 部分は、全体的に以下のようになります。
const platform = new H.service.Platform({
apikey: {Your-api-key},
});
let omvService = platform.getOMVService({
path: 'v2/vectortiles/core/mc',
});
const baseUrl =
'https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';
// 日本専用の地図スタイルを導入
let style = new H.map.Style(
`${baseUrl}normal.day.yaml`,
baseUrl
);
// 背景地図として日本の地図データでレイヤを作成
let omvProvider = new H.service.omv.Provider(omvService, style);
let omvlayer = new H.map.layer.TileLayer(omvProvider, {
max: 22,
});
// 地図表示を実装
let map = new H.Map(
document.getElementById('map'),
omvlayer,
{
zoom: 10,
center: { lat: 35.6, lng: 139.7 },
}
);
// 地図のズームイン・ズームアウトを実装
const behavior = new H.mapevents.Behavior(
new H.mapevents.MapEvents(map)
);
const animatedSvg =
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" ' +
'y="0px" style="margin:-112px 0 0 -32px" width="136px"' +
'height="150px" viewBox="0 0 136 150"><ellipse fill="#000" ' +
'cx="32" cy="128" rx="36" ry="4"><animate attributeName="cx" ' +
'from="32" to="32" begin="0s" dur="1.5s" values="96;32;96" ' +
'keySplines=".6 .1 .8 .1; .1 .8 .1 1" keyTimes="0;0.4;1"' +
'calcMode="spline" repeatCount="indefinite"/>' +
'<animate attributeName="rx" from="36" to="36" begin="0s"' +
'dur="1.5s" values="36;10;36" keySplines=".6 .0 .8 .0; .0 .8 .0 1"' +
'keyTimes="0;0.4;1" calcMode="spline" repeatCount="indefinite"/>' +
'<animate attributeName="opacity" from=".2" to=".2" begin="0s" ' +
' dur="1.5s" values=".1;.7;.1" keySplines=" .6.0 .8 .0; .0 .8 .0 1" ' +
'keyTimes=" 0;0.4;1" calcMode="spline" ' +
'repeatCount="indefinite"/></ellipse><ellipse fill="#1b468d" ' +
'cx="26" cy="20" rx="16" ry="12"><animate attributeName="cy" ' +
'from="20" to="20" begin="0s" dur="1.5s" values="20;112;20" ' +
'keySplines=".6 .1 .8 .1; .1 .8 .1 1" keyTimes=" 0;0.4;1" ' +
'calcMode="spline" repeatCount="indefinite"/> ' +
'<animate attributeName="ry" from="16" to="16" begin="0s" ' +
'dur="1.5s" values="16;12;16" keySplines=".6 .0 .8 .0; .0 .8 .0 1" ' +
'keyTimes="0;0.4;1" calcMode="spline" ' +
'repeatCount="indefinite"/></ellipse></svg>';
let icon = new H.map.DomIcon(animatedSvg),
coords = { lat: 35.69, lng: 139.76 },
marker = new H.map.DomMarker(coords, { icon: icon });
map.addObject(marker);
map.setCenter(coords);
動くアイコンの実装は一見難しそうですが、今回の実装例でも示しているように、実はHEREの地図APIを利用することで、簡単にアニメーションをつけたマーカーを地図上に追加することができます。
HERE Maps API以外の地図ライブラリでHEREの背景地図を使用する例
続きましては、OpenLayersやLeafletでHEREの背景地図を利用する方法について紹介します。
また、HEREの地図APIを直接利用する場合、HERE Vector Maps APIで提供されているベクター形式の地図が表示されますが、OpenLayersとLeafletではライブラリの仕様上、HERE Raster Maps APIで提供される画像形式の地図を利用することになりますので、ご注意ください。
MapLibre GL JSでのベクター形式の地図の実装例についてはチュートリアル４をご覧ください。
OpenLayersでHEREの背景地図を利用する
OpenLayersでHEREの背景地図を利用する方法について紹介します。
OpenLayersは2006年にリリースされたオープンソースの地図ライブラリであり、豊富な地図機能を提供していることで知られています。
OpenLayersはいろんな種類の地図を表示できるライブラリですが、今回では動作の安定性を優先して、ライブラリでラスター形式の地図を実装する方法について紹介します。
今回はHERE Raster Tiles APIを利用するので、「APIキーを発行する」の部分で紹介している方法で、HERE PlatformでアプリケーションにHERE Raster Maps APIを利用する権限を付与してください。
まずは、OpenLayersをHTMLページに導入してください。
<!doctype html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css"
/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<style>
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<title>OpenLayersを使った地図</title>
</head>
<body>
<div id="map"></div>
<script></script>
</body>
</html>
続いては、Script部分に、HEREのAPIキーとHERE Raster Maps APIから背景地図を導入するためのコードを載せます。
const key = {Your-api-key};
const source = new ol.source.XYZ({
url: `https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/png?apikey=${key}`,
tileSize: 256,
attributions: ['©︎ 1987 - 2023 HERE'],
});
続いてはOpenLayersの地図を載せることで完成です。
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: source,
}),
],
target: 'map',
view: new ol.View({
constrainResolution: true,
center: ol.proj.fromLonLat([139.7, 35.6]),
controls: ol.control.defaults.defaults({
attribution: true,
zoom: true,
}),
zoom: 8,
}),
});
出来上がったHTMLは全体的な以下のようになります。
<!doctype html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css"
/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<style>
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<title>OpenLayersを使った地図</title>
</head>
<body>
<div id="map"></div>
<script>
const key = {Your-api-key};
const source = new ol.source.XYZ({
url: `https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/png?apikey=${key}`,
tileSize: 256,
attributions: ['©︎ 1987 - 2023 HERE'],
});
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: source,
}),
],
target: 'map',
view: new ol.View({
constrainResolution: true,
center: ol.proj.fromLonLat([139.7, 35.6]),
controls: ol.control.defaults.defaults({
attribution: true,
zoom: true,
}),
zoom: 8,
}),
});
</script>
</body>
</html>
以上のコードで、OpenLayersを使った地図に東京付近を中心としてHEREの背景地図が表示されます。
LeafletでHEREの背景地図を利用する
次はLeafletを使ったウェブページにHEREの背景地図を利用する方法について紹介します。
Leaflet JSはウェブ上で地図を表示するためのJavascriptライブラリで、現在はGoogle Maps APIの次に多くのウェブサイトに導入されております。[1]
Leaflet JSの一つの特徴としては、画像形式になっているラスター形式の地図に主に対応していることです。
なお、HEREではベクター形式の地図データのほかにLeafletでも使用できるラスター形式のウェブ地図も提供しておりますので、Leaflet JSでもHEREが提供している背景地図を利用することができます。
まずは、Leafletを利用するために、Leafletをドキュメントに導入します。
<!doctype html>
<head>
<title>Leafletを使った地図</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<style>
#map {
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script></script>
</body>
続いては、OpenLayersの例と同じように、
Script部分でHEREのAPIを利用するためのAPIキーを導入し、HEREの背景地図をソースとしたレイヤを追加します。
const key = {Your-api-key};
let map = L.map('map').setView([35.6, 139.7], 13);
L.tileLayer(
`https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/png?apikey=${key}`,
{
maxZoom: 18,
attribution: '©︎ 1987 - 2023 HERE',
}
).addTo(map);
HTML全体的には以下のようになります。
<!doctype html>
<head>
<title>Leafletを使った地図</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<style>
#map {
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const key = {Your-api-key};
let map = L.map('map').setView([35.6, 139.7], 13);
L.tileLayer(
`https://maps.hereapi.com/v3/base/mc/{z}/{x}/{y}/png?apikey=${key}`,
{
maxZoom: 18,
attribution: '©︎ 1987 - 2023 HERE',
}
).addTo(map);
</script>
</body>
以上の手順で、Leafletの地図で東京都大田区付近を中心とする地図が表示されます。
まとめ
今回では、HTMLドキュメントにHEREの地図APIを導入する方法や、OpenLayers、Leaflet等のウェブ地図APIを使ってHEREの背景地図を利用する方法について紹介しました。
次回ではもう一歩踏み込んで、HERE Geocoding APIで住所検索を実装する方法や、HERE Routing APIで経路検索を実装する方法について紹介します。