ArcGIS Platform のロケーションサービスを MapLibre GL JS で使ってみた。

ArcGIS Platform

はじめに

MapLibre GL JS から ArcGIS Platform のロケーションサービスを使用してみました。MapLibre GL JS では ArcGIS Platform のロケーションサービスとして背景地図を表示してみましたので紹介したいと思います。 MapLibre GL JS とは、WebGL を利用したオープンソースのマッピングクライアントライブラリです。オープンソースではなくなった、Mapbox GL JS の v1.13.0 を fork して更新されているライブラリになります。そのため、Mapbox GL JS とほぼ同じようなクラスやメソッドが使用できるため、ArcGIS Platform のロケーションサービスも使用することができます。

MapLibre GL JS の最新版は、v1.14.0 になり、今回は v1.14.0 を使用しました。

Our first re-branded MapLibre GL JS release is finally out! A huge thank you goes to @nyuriks @PetrPok43215519 @petrpridal @joxit @sethnickell @msb5014 and many other MapLibre community members. See https://t.co/Evl6brfvSM
— MapLibre (@maplibre) 2021年3月24日

MapLibre GL JS の紹介やドキュメント類は以下になります。 maplibre.org

docs.maptiler.com

MapLibre GL JS で ArcGIS Platform のロケーションサービスのベースマップを表示

全体のソースは、GitHub にもアップしました。 github.com

ArcGIS Platform のロケーションサービス

ArcGIS Platform は、市場をリードするマップとロケーションサービスを Platform as a Service（PaaS）として提供します。高品質なロケーションサービスを使用して、位置情報をアプリやビジネスシステムに統合できます。ArcGIS Platform は SDK、API、ローコードオプションの全て提供しています。さらに、オープンソース API や開発者が利用している Web フレームワークと連携して開発することができます。マップとロケーションサービスを製品、ソリューション、およびシステムに組み込む必要があるソフトウェア開発者、企業、および組織にとって、お手頃な価格でオープンな、位置情報にフォーカスした PaaS です。

www.esrij.com

developers.arcgis.com

MapLibre GL JS で背景地図を表示

MapLibre GL JS で背景地図を表示する部分については、以下のガイドを参考にしました。 developers.arcgis.com

Mapbox GL JS で呼んでいる箇所を MapLibre GL JS のクラスに置き換えただけです。もともと Mapbox GL JS がオープンソースなので、Mapbox GL JS の機能がそのまま使用できるのは便利ですね！

const apiKey = "AAPK07c4048cb3bb48d2a98ee544297631b918Z5mh7gBlBL6owpfjx6YzXq2gnRQzTZhhFiahyfSYojOmvFgnbBV-aaZT9S3nCb";
const basemapEnum = "ArcGIS:Streets";
const map = new maplibregl.Map({
    container: "map", // the id of the div element
    style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
    zoom: 9, // starting zoom
    center: [139.69167, 35.68944], // starting location [longitude, latitude]
    attributionControl: false,
    hash: true
}).addControl(
    new maplibregl.AttributionControl({
    compact: true // reduces the copyright attributions view
    })
);

map.addControl(new maplibregl.NavigationControl(), 'top-left');

全体のコードは以下になります。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>MapLibre GL JS Tutorials: Change the basemap layer</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="./dist/maplibre-gl.js"></script>
    <link href="./dist/maplibre-gl.css" rel="stylesheet" />
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }

      #basemaps-wrapper {
        position: absolute;
        top: 20px;
        right: 20px;
        background: rgba(255, 255, 255, 0);
      }
      #basemaps {
        font-size: 16px;
        padding: 4px 8px;
      }
    </style>
</head>

<body>
    <div id="map"></div>

    <div id="basemaps-wrapper">

      <select id="basemaps">
        <option value="ArcGIS:Streets">Streets</option>
        <option value="ArcGIS:Navigation">Navigation</option>
        <option value="ArcGIS:Topographic">Topographic</option>
        <option value="ArcGIS:LightGray">Light Gray</option>
        <option value="ArcGIS:DarkGray">Dark gray</option>
        <option value="ArcGIS:StreetsRelief">Streets Relief</option>
        <option value="ArcGIS:Imagery:Standard">Imagery</option>
        <option value="ArcGIS:ChartedTerritory">ChartedTerritory</option>
        <option value="ArcGIS:ColoredPencil">ColoredPencil</option>
        <option value="ArcGIS:Nova">Nova</option>
        <option value="ArcGIS:Midcentury">Midcentury</option>
        <option value="OSM:Standard">OSM</option>
        <option value="OSM:Streets">OSM:Streets</option>
      </select>

    </div>
    <script>

        const apiKey = "AAPK07c4048cb3bb48d2a98ee544297631b918Z5mh7gBlBL6owpfjx6YzXq2gnRQzTZhhFiahyfSYojOmvFgnbBV-aaZT9S3nCb";
        const basemapEnum = "ArcGIS:Streets";
        const map = new maplibregl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`,
            zoom: 9, // starting zoom
            center: [139.69167, 35.68944], // starting location [longitude, latitude]
            attributionControl: false,
            hash: true
        }).addControl(
            new maplibregl.AttributionControl({
            compact: true // reduces the copyright attributions view
            })
        );

        map.addControl(new maplibregl.NavigationControl(), 'top-left');

        const baseUrl = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles";
        const url = (name) => `${baseUrl}/${name}?type=style&token=${apiKey}`;

        const setBasemap = (name) => {
            // Instantiate the given basemap layer.
            map.setStyle(url(name));
        };

        setBasemap("ArcGIS:Streets");

        const basemapsSelectElement = document.querySelector("#basemaps");

        basemapsSelectElement.addEventListener("change", (e) => {
            setBasemap(e.target.value);
        });

    </script>

</body>

</html>