Community

ArcGIS Maps SDK コンポーネントの Map コンポーネントについて

269
0
2 weeks ago

ArcGIS Maps SDK コンポーネントの Map コンポーネントについて

はじめに

ArcGIS Maps SDK for JavaScript のバージョン 4.28 ではフロント エンド Web 開発の生産性を最大化させる、 Web コンポーネント ライブラリとして Maps SDK コンポーネントが導入されました。詳細については、 「ArcGIS Maps SDK コンポーネントで Web アプリを構築」で紹介しています。

また、バージョン 4.29 では、新しくチャート コンポーネント ライブラリの追加と、コンポーネント API の強化、ドキュメントとサンプルの改良が行われ、多くの新機能が追加されています。最新バージョンの ArcGIS Maps SDK for JavaScript のバージョン 4.29 については、ArcGIS ブログの 「ArcGIS Maps SDK for JavaScript バージョン 4.29 をリリースしました！」をご確認ください。

今回は、そんな ArcGIS Maps SDK コンポーネントの Map コンポーネントを使ってみましたので紹介したいと思います。

 

Map コンポーネント を使ってみる

Map コンポーネント は、ArcGIS Maps SDK for JavaScript の  Introduction - components  (beta)  から始めることができます。各コンポーネントの使い方として、チュートリアルなども提供されています。2024-04-23_11h05_02.png

また、Component API として、以下の ArcGIS Maps SDK for JavaScript components (beta) のガイドも公開されており、ドキュメントは、多く提供されています。

2024-04-09_17h35_02.png

Map コンポーネント は、Get started の Templates に、フレームワークや Webpack などのサンプルが GitHub にも公開されていますので、すぐにお試しいただくことができるようになっています。

2024-04-09_20h39_46.png

 

それではさっそく Map コンポーネント を使っていきたいと思います。一番ベーシックな方法は Script tags (AMD) による方法で、HTML の <arcgis-map/> タグなどを使用する方法です。JavaScript によるコーディングは必要としないため、HTML などの知識があれば 簡単に Web サイトに地図を組み込むことができます。

手順としては、はじめに ArcGIS Maps for JavaScript の API ライブラリ、CSS を CDN から参照するように指定します。

 

<!-- Load the ArcGIS Maps SDK for JavaScript -->
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/dark/main.css" />
<script src="https://js.arcgis.com/4.29/"></script>

 

そして、Map コンポーネント を CDN から参照するように指定します。

 

<!-- Load the Map Components -->
<script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script>

 

HTML の要素として、<arcgis-map/> タグを使用して、地図を表示しています。凡例表示や住所・目標物検索などの機能も追加しています。地図で使用できる機能は、HTML タグとして定義することで簡単に地図機能を作成することができます。ここでは、<arcgis-expand/>、<arcgis-search/>、<arcgis-legend/> タグを使用しています。

 

<div class="map-container">
    <arcgis-map item-id="2436023590ed4bbd901a7f5d563cc005">
        <arcgis-expand position="top-right">
        <arcgis-search></arcgis-search>
        </arcgis-expand>
        <arcgis-legend position="bottom-left"></arcgis-legend>
    </arcgis-map>
</div>

 

Map コンポーネントで提供されている各コンポーネントの内容や使い方の詳細については、以下の COMPONENT REFERENCE で確認することができます。各コンポーネントのプロパティ、イベント、メソッドについても確認することができます。多くの Map コンポーネント の機能が提供されています。

2024-04-09_21h40_02.png

よく利用されるシーンとして、例えば、コーヒーショップを紹介する Web サイトに店舗の場所を地図上で表示してみたいなどがあるかと思います。以下のようなサンプルサイトのショップを紹介する Web サイトにも簡単に組み込むことができます。また、WordPress などのような Web サイトを構築する CMS などは、基本的には HTML タグを使用してコンテンツを作成することができますので、Map コンポーネント を活用するのも手段のひとつになるのではないでしょうか。

2024-04-23_12h45_40.gif

 

次にフレームワーク（React、Angular、Vue など）を使用した例を簡単に紹介したいと思います。各コンポーネントは、フレームワークに依存しないように設計されており、特定のアプリケーション フレームワーク（React、Angular、Vue など）に縛られることなく、利用できるようになっています。

ここでは、React と Vue のフレームワークでの Map コンポーネント の利用方法について紹介したいと思います。React や Vue フレームワーク以外の利用方法については、Programming patterns、Angularフレームワークについては、Web components in Angular を参照してください。また、GitHub には Vite や Webpack などの Templates が公開されていますので、こちらもあわせてご参照ください。

はじめに React フレームワークの使用方法について紹介します。各コンポーネント・パッケージには、React に適したパッケージが追加されています。arcgis/map-components の場合は、@arcgis/map-components-react を使用することが推奨されています。詳細は、Web components in React をご確認ください。

以下は、index.tsx に記述している例で、地図表示として、<ArcgisMap/>、<ArcgisSearch/>、<ArcgisLegend/> タグを使用しています。< ArcgisMap/> コンポーネントのプロパティを設定し、イベントが動作するように指定しています。

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

// /map-components-react から ArcgisMap, ArcgisSearch, ArcgisLegend をインポートします。 
import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react";

// カスタム要素をカスタム要素レジストリに登録するために defineCustomElements をインポートします。
import { defineCustomElements } from "@arcgis/map-components/dist/loader";

// カスタム要素を登録します。
defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" });

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <ArcgisMap 
      itemId="<アイテム ID を指定>" 
      onArcgisViewReadyChange={(event: any) => {
      console.log('MapView ready', event);
      }}
    >
      <ArcgisSearch position="top-right"></ArcgisSearch>
      <ArcgisLegend position="bottom-left"></ArcgisLegend>
    </ArcgisMap>
  </React.StrictMode>
);

 

React のソースコードの詳細については、GitHub で公開されている Templates の react をご確認ください。

React フレームワークで実行して Map コンポーネント を使用した例です。

2024-04-12_14h43_56.png

 

次に Vue フレームワークによる例です。

Vue については、フレームワークを使って構築する際のプログラミング パターンに関する新しいガイド トピックにも追加されています。

以下は、App.vue による例で、カスタム要素のレジストリに登録するために defineCustomElements をインポートして、カスタム要素を登録します。地図部分は、template として Map.vue を参照するように設定します。

 

<script setup>
import Map from "@/components/Map.vue";
import { defineCustomElements } from "@arcgis/map-components/dist/loader";
defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.29/assets" });
</script>

<template>
  <Map />
</template>

 

地図表示として、Map.vue では、<arcgis-map/>、<arcgis-search/>、<arcgis-legend/> タグを使用しています。<arcgis-map/> コンポーネントのプロパティを設定し、イベントが走るように指定しています。

 

<script setup>
function onReady(event) {
  console.log("MapView ready", event);
}
</script>

<template>
  <arcgis-map item-id="<アイテム ID を指定>" @arcgisViewReadyChange="onReady">
    <arcgis-search position="top-right" />
    <arcgis-legend position="bottom-left" />
  </arcgis-map>
</template>

 

Vue のソースコードの詳細は、GitHub で公開されている Templates の vue をご確認ください。

2024-04-12_15h20_16.png

Vue フレームワークで実行して Map コンポーネント を使用した例です。

 

まとめ

ArcGIS Maps SDK コンポーネントの Map コンポーネントを紹介しました。HTML を使用することで簡単に Web サイトなどに組み込むことができます。また、フレームワークにも簡単に組み込むことができるため、Web アプリケーションを少ないコーディング量で実現できるのではないでしょうか。今回触れた以外にも Map コンポーネントには、地図機能として多くのコンポーネントが提供されています。

バージョン 4.29 では、棒グラフや線グラフなどを実現できる Charts components も提供されるようになり、Map コンポーネントと組み合わせることができるため、よりリッチな Web サイトや Web アプリを作成することができるのではないでしょうか。

ArcGIS Maps SDK のコンポーネント ライブラリは、独自のアプリケーションに簡単に組み込むことができるようになっています。

せひ、この機会にお試しいただければと思います！

 

■参考サイト

 

0 Kudos
Version history
Last update:
2 weeks ago
Updated by:
Esri Contributor
Contributors