はじめに
ArcGISを使って地図を表示する方法をまとめた
環境
エディタ：おまかせ（CodePenが楽）
言語：HTML、CSS、JavaScript
手順
※手順2以降は追加行を☆で表す
1.Webブラウザウィンドウの全幅と高さのマップを作成します。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
2.headタグにCSSファイルとJSライブラリへの参照を追加します。
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
☆ <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
☆ <script src="https://js.arcgis.com/4.24/"></script>
3.ArcGISのモジュールを追加
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.24/"></script>
☆ <script>
☆ require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
☆
☆ });
☆ </script>
4.開発者ダッシュボード画面からAPIキーを取得します
5.APIキーを記載します
<script>
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
☆ esriConfig.apiKey = "ここにAPIキーを記載する";
☆
☆ const map = new Map({
☆ basemap: "arcgis-topographic" // Basemap layer service
☆ });
6.地図を表示させます
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
☆ const view = new MapView({
☆ map: map,
☆ center: [-118.805, 34.027], // Longitude, latitude
☆ zoom: 13, // Zoom level
☆ container: "viewDiv" // Div element
☆ });
以上です