このチュートリアルでは、MapLibre GL JS と ベースマップ レイヤー サービスを使用して、マップを表示する方法を紹介します。
ベースマップ レイヤー サービスのベクター タイル ベースマップ レイヤーを使用して、MapLibre GL JS にマップを表示できます。ベクター タイル ベースマップレイヤーは、ソース、レイヤー、フォントグリフ(Font Glyphs)、およびレイヤーをレンダリングするためのアイコンを含む MapLibre GL スタイルです。
このチュートリアルでは、ベースマップ レイヤー サービスの地形ベースマップ レイヤーを使用して、富士山周辺の地図を表示します。
マップとレイヤーの詳細については、Mapping APIs and servicesのガイドのDisplay maps, scenes, and layersにアクセスしてください。
この機能を使うには、ArcGIS アカウントが必要です。アカウントの作成手順については「開発者アカウントの作成」を参照してください。
CodePen にアクセスして、マッピング アプリケーション用の新しい Pen を作成します。
HTML ページを定義して、Web ブラウザの幅と高さにあわせたマップを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>MapLibre GL JS Tutorials: Display a map</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<head>
タグで、MapLibre GL JS CSS および JS ライブラリへの参照を追加します。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>MapLibre GL JS Tutorials: Display a map</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<!-- maplibre gl js のライブラリと css ファイルを指定 -->
<script src=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.js></script>
<link href=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.css rel="stylesheet" />
</head>
<body>
<div id="map"></div>
</body>
</html>
ロケーションサービスにアクセスするには、API キーまたは OAuth2.0 アクセストークンが必要です。API キーの作成手順については「API キーの取得」を参照してください。
認証方法とアクセストークンの取得方法の詳細については、「セキュリティと認証」を参照してください。
Map クラスを使用して、指定したベースマップを使用してマップを追加します。 Map クラスは、map の HTML 要素 を使用して、マップのコンテンツを表示し、対話するためのユーザーインターフェイスを提供します。地図のクリック、ズーム、パン、回転、視点の変更をサポートします。また、マウスがクリックされた場所のフィーチャの検索など、マップデータに関する情報を操作および検出することもできます。また、新しいソースを追加したり、レイヤープロパティを変更したりして、表示されるデータを変更することもできます。 詳細については、MapLibre GL JS のドキュメントを参照してください。
<body>
タグ内に<script>
タグを追加します。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>MapLibre GL JS Tutorials: Display a map</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<!-- maplibre gl js のライブラリと css ファイルを指定 -->
<script src=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.js></script>
<link href=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.css rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<!--script のタグを追加-->
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>MapLibre GL JS Tutorials: Display a map</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<!-- maplibre gl js のライブラリと css ファイルを指定 -->
<script src=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.js></script>
<link href=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.css rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<!--script のタグを追加-->
<script>
// API キーの追加
const apiKey = "YOUR_API_KEY";
// ベースマップの指定
const basemapEnum = "arcgis/topographic";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>MapLibre GL JS Tutorials: Display a map</title>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
<!-- maplibre gl js のライブラリと css ファイルを指定 -->
<script src=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.js></script>
<link href=https://unpkg.com/maplibre-gl@3.2.1/dist/maplibre-gl.css rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<!--script 要素を追加-->
<script>
// API キーの追加
const apiKey = "YOUR_API_KEY";
// ベースマップの指定
const basemapEnum = "arcgis/topographic";
const map = new maplibregl.Map({
container: "map", // div 要素内の id を指定
style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${apiKey}&language=${language}`,
zoom: 12, // マップ初期表示時点でのズームレベル
center: [138.729858, 35.362752] // マップ初期表示時の位置
});
</script>
</body>
</html>
CodePen で、作成したコードを実行して地図を表示します。
地図には、日本の富士山のエリアの地形ベースマップ レイヤーが表示されています。