Latest Contributions by TakahiroKAMIYA

はじめに 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)  から始めることができます。各コンポーネントの使い方として、チュートリアルなども提供されています。 また、Component API として、以下の ArcGIS Maps SDK for JavaScript components (beta) のガイドも公開されており、ドキュメントは、多く提供されています。 Map コンポーネント は、Get started の Templates に、フレームワークや Webpack などのサンプルが GitHub にも公開されていますので、すぐにお試しいただくことができるようになっています。 Script tags (AMD) Vite React Angular Vue Webpack   それではさっそく 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 コンポーネント の機能が提供されています。 よく利用されるシーンとして、例えば、コーヒーショップを紹介する Web サイトに店舗の場所を地図上で表示してみたいなどがあるかと思います。以下のようなサンプルサイトのショップを紹介する Web サイトにも簡単に組み込むことができます。また、WordPress などのような Web サイトを構築する CMS などは、基本的には HTML タグを使用してコンテンツを作成することができますので、Map コンポーネント を活用するのも手段のひとつになるのではないでしょうか。   次にフレームワーク（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 コンポーネント を使用した例です。   次に 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 をご確認ください。 Vue フレームワークで実行して Map コンポーネント を使用した例です。   まとめ ArcGIS Maps SDK コンポーネントの Map コンポーネントを紹介しました。HTML を使用することで簡単に Web サイトなどに組み込むことができます。また、フレームワークにも簡単に組み込むことができるため、Web アプリケーションを少ないコーディング量で実現できるのではないでしょうか。今回触れた以外にも Map コンポーネントには、地図機能として多くのコンポーネントが提供されています。 バージョン 4.29 では、棒グラフや線グラフなどを実現できる Charts components も提供されるようになり、Map コンポーネントと組み合わせることができるため、よりリッチな Web サイトや Web アプリを作成することができるのではないでしょうか。 ArcGIS Maps SDK のコンポーネント ライブラリは、独自のアプリケーションに簡単に組み込むことができるようになっています。 せひ、この機会にお試しいただければと思います！   ■参考サイト ArcGIS Maps SDK for JavaScript Introduction - components (beta) ArcGIS Maps SDK コンポーネント Storybook ArcGIS Maps SDK Components Storybook GitHub arcgis-maps-sdk-javascript-samples-beta   ... View more

はじめに これまで過去2回にわたって kintone と ArcGIS の連携について紹介してきました。第3弾となる今回は ArcGIS Field Maps という現場でデータ収集が行えるモバイルアプリを使用して、kintone と連携を試してみましたので、具体的な連携方法について紹介していきます。 ArcGIS Field Maps は、マップ ベースでの現地調査業務に特化したアプリで、現場作業員がデータ収集時に活用できるマップ操作やデータ更新、リアルタイムの位置共有といった機能を兼ね備えたオールインワン アプリです。 ArcGIS Filed Maps の使い方や機能などの詳細については、ESRIジャパンの ArcGIS ブログでも公開していますので、ご参照ください。 連携の流れ 連携で使用した kintone アプリは、kintone が提供している業務アプリの不動産物件マスタを使用しました。不動産物件マスタは、前回の記事でも紹介した 不動産マスタ_ArcGIS 連携アプリを使用しました。 ArcGIS Field Maps を使用して、現地で不動産物件情報の登録や編集などを行い、その結果を kintone 側にも反映させるという流れになります。データ仕様に関しては、kintone でデータを削除する場合にレコード番号が必要になるなど、kintone 側でもデータ管理ができるように不動産マスタ_ArcGIS 連携で使用しているデータをそのまま使用しました。データは事前に ArcGIS Field Maps で使用できるようにフィーチャ レイヤーの作成などを行う必要があります。今回は不動産物件という名前でフィーチャ レイヤーを作成しました。  ArcGIS Field Maps と kintone との連携は、Make を使用しました。Make は、サードパーティ製のワークフロー自動化サービスです。Web アプリケーションやサービスを統合するためのツールで、プログラミングができない人でも使いやすいように設計されており、ビジネスプロセスの自動化やタスクの自動化を行うことができます。連携として、Make には、以下のような様々なテンプレートが用意されており、例えば、Google スプレッドシートにデータを追加したら、Slack に通知する、Trello のカードが更新されたら、メールで通知する、などの連携を簡単に実現することができます。             また、ArcGIS Field Maps を利用したインテグレーションやテンプレートなど多く用意されています。 ArcGIS Field Maps では、Make を通じて Webhook をサポートしています。 Webhook は、アプリケーションが他のアプリケーションに、イベントによって発生する情報を提供することを可能にします。Webhook の一般的な使用方法は、電子メールや SMS による通知の送信、ソーシャルメディアへのメッセージ投稿、スプレッドシートへのレコード自動書き込み、エンタープライズ データベースの更新などです。Make に ArcGIS Field Maps アプリが組み込まれることで、ユーザーは ArcGIS Field Maps を Webhook ワークフローに統合することができます。ArcGIS Field Maps では、Webhook をトリガーにする、API を呼び出すといった方法での連携利用が可能です。 ※ Make の使い方の QA などは、サポート対象外となります。 ArcGIS Field Maps とkintone との連携 ArcGIS Field Maps とkintone との連携では、Webhook をトリガーとして使用しました。具体的には、ArcGIS Field Maps モバイルアプリでフィーチャを作成、更新、削除されたときに Webhook によって電子メール通知を送信するなど、別のアクションをトリガーすることができ、このトリガーによって kintone 側にデータの作成や更新、削除を行っています。以下の図が Make によって作成した ArcGIS Filed Maps と kintone の連携の完成形になります。 ここからは、各設定について簡単に説明していきます。詳細については、ArcGIS Field Maps リソースの ArcGIS Field Maps の自動化や Make のヘルプや API リファレンスなどをご参照ください。 ArcGIS Field Maps の設定では、Make で Webhook にField Maps アプリを追加します。[Watch Features] トリガーモジュールを選択して Webhook に設定するため ArcGIS Online 組織サイトへ接続して、[Feature Layer] で、接続の ArcGIS Online から編集可能なフィーチャ レイヤーを選択します。ここでは不動産物件のフィーチャ レイヤーを選択しています。 次に Webhook に含める [Trigger events] を選択します。[Trigger events] は、以下のシナリオがあり、ここではすべて選択しています。 [Features Created] - フィーチャが作成されたときにシナリオをトリガーします。 [Features Updated] - フィーチャが更新されたときにシナリオをトリガーします。 [Features Deleted] - フィーチャが削除されたときにシナリオをトリガーします。 最後に [Save] をクリックして、[OK] をクリックします。これで、Filed Maps モジュールが構成されます。 続いて、[Tools] セクションの [Flow Control] をクリックして、オプションのリストから、[Iterator] を選択します。[Iterator] モジュールは自動的に Field Maps モジュールに接続されます。 このため、複数のフィーチャが同時に返された場合に、Webhook はフィーチャの配列を反復処理できます。 [Iterator] モジュールを選択し、[Array] テキスト ボックスをクリックします。[ArcGIS Field Maps - Watch Feature Service] のドロップダウン メニューで、次の配列の中から 1 つ以上を検索して選択します。 [Adds []] - フィーチャが作成された場合 [Updates []] - フィーチャが更新された場合 [Delete IDs []] - フィーチャが削除された場合 ここでは、すべて選択しています。 そして、[Tools] セクションの [Flow Control] をクリックして、オプションのリストから、[Router] を選択します。条件分岐用として [Router] を追加しています。データの登録・更新・削除の条件で設定しています。 分岐の条件としては、 {{2.edits.`0`.features.adds[].attributes.GlobalID}} - フィーチャが作成された場合 {{2.edits.`0`.features.updates[].attributes.GlobalID}} - フィーチャが更新された場合 {{2.edits.`0`.features.deleteIds[]}} - フィーチャが削除された場合 以下のように 3 つの条件を設定します。 最後に kintone 側にデータを反映させるための連携設定を行います。 Make では、kintone モジュールも用意されており、目的の機能に応じて設定することが可能です。データの登録では、Create a Record を使用して、App ID は kintone アプリの不動産マスタ_ArcGIS 連携を選択します。Record の各 Value には、フィーチャ レイヤーの属性情報を指定します。 データの更新では、Update a Record を使用して、App ID は kintone アプリの不動産マスタ_ArcGIS 連携を選択します。Update key としてユニークなIDが必要となるため、ここでは、Global ID を使用しました。Record の各 Value には、フィーチャ レイヤーの属性情報を指定します。 データ削除の場合は、kintone 側に登録されている Record ID を使用して削除する必要があるため、削除対象のレコード番号を取得する必要があります。そのため、Search Records を使用して、GlobalID をキーにしてレコード番号を取得します。そして、取得したレコード番号を Delete a Record で使用して、データの削除を行います。 すべての設定が完了したら [Save] をクリックして、シナリオを保存します。 必要に応じて、[Run once] をクリックして Webhook をテストします。 [Run once] をクリック後に、Field Maps を開いて、フィーチャを作成、更新、または削除します。 kintone の不動産マスタ_ArcGIS 連携アプリでフィーチャが反映されているかを確認します。 [Scheduling] 切り替えボタンを使用して、シナリオをアクティブ化します。スケジュールを [Immediately] に設定して、フィーチャが更新されるたびにシナリオが実行されるようにします。  ArcGIS Field Maps と kintone で確認 以下は、ArcGIS Field Maps の画面操作の様子です。以下のように現地で不動産物件の情報の登録や更新などを行います。 ArcGIS Field Maps で不動産物件の情報を更新後、しばらく経過すると kintone の不動産マスタ_ArcGIS 連携アプリにて反映されます。反映されれば以下の画面のように確認することができます。 まとめ 今回は、以前に紹介した不動産物件マスタのアプリと ArcGIS Field Maps との連携にフォーカスして紹介しました。Make を使用することで、開発することなく、API 連携ができるのは便利だと思いました。ただ、連携先の API の仕様などの理解をしておくと、Make での設定などはスムーズにできると思います。 今回の Make での連携は一例ですが、非常に多くのパターンの連携ができるようになっています。ArcGIS Field Maps の Field Maps の自動化や ArcGIS Field Maps と電子メール通知の自動化については、Esri のブログやビデオなどでも紹介していますので、ぜひ、お試しいただければと思います。 ■関連リンク ArcGIS Field Maps | ESRIジャパン 製品ページ ArcGIS Field Maps | ArcGIS リソース集 スタートアップ ガイド 米国 Esri 社 Web サイト ArcGIS Field Maps Esri Community kintone と ArcGIS の連携を試してみました ～第2弾 不動産物件マスタのアプリ拡張 ～   ... View more

はじめに CesiumJS が ArcGISのロケーションサービスを利用したアプリケーションを構築するためのオープンソースライブラリとして全面的にサポートされました。これにより、CesiumJS の 3D レンダリングエンジンと ArcGIS のロケーションサービスを使用して、ベースマップへのアクセス、ホストデータの表示、ジオコーディング、ルート検索、人口統計データ（ジオエンリッチメント）、空間解析などを行うアプリケーションを構築することができます。 本内容のアナウンスは Cesiumのブログ「Cesium and Esri Announce Support for ArcGIS Location Services in CesiumJS」でも紹介されています。 本記事では、米国 Esri 社が ArcGIS Blog にて投稿した「Announcing support for CesiumJS and ArcGIS location services」の記事を翻訳して紹介します。 CesiumJS で ArcGIS ロケーションサービスを利用したアプリケーション開発のガイドとして ArcGIS Developersのサイトで CesiumJS の開発者ガイドが公開されています。 CesiumJS に関する新しい ArcGIS Developers ガイドのチュートリアル   新しい ArcGIS Developers のガイドには、CesiumJS とロケーションサービスをインテグレーションする方法を説明する 20 のチュートリアルが含まれています。以下のサービスが対象となります。 ベースマップ スタイル サービス ホスト フィーチャ サービス ホスト シーン サービス (I3S) ホスト イメージ タイル サービス ジオコーディング サービス ルート検索 サービス ジオエンリッチメント サービス 空間解析 サービス 構築できるアプリケーションの種類については、以下をお読みください。   はじめましょう Cesium JS と ArcGIS ロケーションサービスを使用して開発を始めるには、ArcGIS Developer アカウントか ArcGIS Online アカウントのどちらかが必要です。お持ちでない場合は、サービスに限定的にアクセスできる無料アカウントで始めることができます。 無料アカウントの作成については、ArcGIS 開発リソース集の「開発者アカウントの作成」も参考としてください。 また、アプリケーションの開発およびデプロイには、Cesium ion のアカウントも必要です。アカウントを作成するには、ion.cesium.com にアクセスします。   CesiumJS で ArcGIS のベースマップ スタイルを表示 CesiumJSで使用できる他のサービスへのアクセス CesiumJS で表示される ArcGIS のイメージと標高レイヤー CesiumJS ライブラリに、World Imagery、World Oceans、World Hillshade スタイルを含む ArcGIS ベース レイヤーにアクセスする新しいクラスが追加されました。ArcGisMapServerImageryProvider クラスを使用すると、アプリケーションでこれらのレイヤーをイメージ タイルとしてアクセスできます。これらのレイヤーにアクセスするには、API キーなどの ArcGIS アクセストークンが必要です。 ArcGIS ベース レイヤーを CesiumJS アプリケーションに追加する方法の例を次に示します。 const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN"; Cesium.Ion.defaultAccessToken = cesiumAccessToken; const apiKey = "YOUR_ARCGIS_API_KEY"; Cesium.ArcGisMapService.defaultAccessToken = apiKey; const arcgisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE); const viewer = new Cesium.Viewer("cesiumContainer", { baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery) }); また、デフォルトの BaseLayerPicker を使用して、アプリケーションに ArcGIS ベース レイヤーを直接読み込むこともできます。この方法でレイヤーを読み込むには、CesiumJS に含まれるデフォルトのアクセストークンをオーバーライドする必要があります。 Cesium.ArcGisMapService.defaultAccessToken = "YOUR_ARCGIS_API_KEY"; CesiumJS で ArcGIS ベース レイヤーを使用する方法の詳細については、新しい CesiumJS ガイドのチュートリアル「Display a scene」を参照してください。   CesiumJS で ArcGIS のホストデータを表示 CesiumJS は、フィーチャ データや I3S データなど、ArcGIS でホストされているデータを表示することもできます。アプリケーションでフィーチャにアクセスするには、GeoJsonDataSource クラスを使用して、ArcGIS でホストされているフィーチャ サービスをクエリすることで、ポイント、ポリライン、ポリゴンを表示することができます。 スタイル設定されたホスト フィーチャ サービスのフィーチャを CesiumJS で表示。サンタモニカ山脈の公園、トレイル、登山口を表現しています。 次にホスト フィーチャ サービスからフィーチャを追加する方法の例を示します。 arcgisRest.queryFeatures({ url: featureServiceURL, authentication, f:"geojson" }).then((response) => { const data = Cesium.GeoJsonDataSource.load(response) viewer.dataSources.add(data); }) フィーチャを追加する方法の詳細については、チュートリアルの「Add features as GeoJSON」を参照してください。   CesiumJS で表示される 3D メッシュ レイヤーです。メッシュにはフランクフルトの街並みが描かれており、建物や道路、樹木などが描かれています。 I3SDataProvider クラスを使用して、ホストされた I3S データを CesiumJS アプリで表示することができます。CesiumJS は現在、OGC I3S 標準に準拠した 3D オブジェクトレイヤーと 3D メッシュ レイヤーをサポートしています。 次にホストされた I3S データを CesiumJS アプリケーションに追加する方法の例を示します。 const frankfurtMesh = "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer"; const i3sProvider = await Cesium.I3SDataProvider.fromUrl(frankfurtMesh, { geoidTiledTerrainProvider: geoidService, token: apiKey }) viewer.scene.primitives.add(i3sProvider); I3S データを追加する方法の詳細については、チュートリアルの「Add an integrated mesh」を参照ください。   CesiumJS で使用できる他のサービスへのアクセス CesiumJS で視覚化した運転ルートと道順です。ルートと道順は ArcGIS のルート検索サービスを使用して計算されています。 また、CesiumJS を使用して、すぐに使用できる他の ArcGIS ロケーションサービスからの結果を表示することもできます。これらのサービスには、ジオコーディングサービス、ルート検索サービス、ジオエンリッチメント サービス、空間解析サービスなどがあります。 CesiumJS の 3D 機能により、サービスの結果をユニークな方法で簡単に視覚化することができます。例えば、次の画像は、空間解析操作の結果を CesiumJS で視覚化したものです。 ホット スポットの解析結果を CesiumJS で視覚化したものです。ホット スポットは背の高い赤いクラスター、コールド スポットは背の低い青いクラスターで視覚化されています。 このホット スポット解析は空間解析サービスを使用して、その結果を CesiumJS で視覚化しています。CesiumJSのモデリング機能により、3D データへの強力なレンダリングが可能になり、データ内のホット スポットやコールド スポットがどこにあるのかを即座に伝えることができます。新しい「Perform a feature analysis」のチュートリアルには、この分析を実行するための詳細な手順が記載されています。 この記事では、ArcGIS と CesiumJS を使って構築できる一例を紹介しています。もっと詳しく知りたい方は、ArcGIS Developers の Web サイトにある「CesiumJS guide」のガイドを参照してください。   ■関連リンク ArcGIS Platform ESRIジャパン製品ページ ArcGIS Developers ESRIジャパン製品ページ ArcGIS Developers 開発リソース集 ArcGIS (米国) ブログ Announcing support for CesiumJS and ArcGIS location services Esri 社（米国）Web サイト ArcGIS Developers （CesiumJS） Cesium (米国) ブログ Cesium and Esri Announce Support for ArcGIS Location Services in CesiumJS   ... View more

はじめに .NET MAUI をサポートしている ArcGIS Maps SDK for .NET を利用することで、地図アプリを開発することができます。ArcGIS Maps SDK for .NET は、Esri が提供する地図アプリ用の SDK で、Windows、mac OS 及び iOS、Android プラットフォーム上で動作するネイティブ GIS アプリケーションの開発キットであり、Windows デスクトップや Windows タブレット、iOS、Android などの多様なプラットフォーム向けに様々な GIS 機能を持ったアプリケーションを開発することができます。 今回は、ArcGIS Maps SDK for .NET で .NET MAUI を使用して、Esri が公開しているサンプルプログラムをiOS と Android の物理デバイスにデプロイするところまでを紹介したいと思います。 .NET MAUI とは .NET Multi-Platform App UI (.NET MAUI) は、C# と XAML を使用して、ネイティブのモバイル アプリやデスクトップ アプリを作成するためのクロスプラットフォーム フレームワークです。.NET MAUI を使用することで、1 つの共有コードから Android、iOS、macOS、Windows で実行できるアプリを開発することができます。 .NET MAUI の詳細については、Microsoft 社の Microsoft Learn ページの「.NET MAUIとは」を参照してください。 ArcGIS Maps SDK for .NET とは ArcGIS Maps SDK for .NET を使用すると、Android、iOS、macOS および Windows 用のマッピングおよび位置情報解析アプリを構築できます。この API を使用することで、Windows Presentation Foundation（WPF）、Windows UI Library（WinUI）、Universal Windows Platform（UWP）、および .NET MAUI の各アプリケーション プラットフォームで作成するデスクトップ アプリとモバイル アプリで、ビジネス及びアプリケーション ロジック コードを共有することができます。 現在の最新バージョンは、2022 年 12 月 14 日（日本時間 2022 年 12 月 15 日）にリリースしましたバージョン 200.0 になります。詳細は、「ArcGIS Maps SDK for .NET バージョン 200.0 をリリースしました」を参照してください。 ArcGIS Maps SDK for .NET では多くの機能を提供しており、主な機能の詳細については、ArcGIS Maps SDK for .NET の ガイドの Key features (英語) や Tutorials (英語) を参照してください。 また、すぐに試してみたい方は、WPF版として、Microsoft Store から ArcGIS Maps SDK for .NET Samples (WPF) が提供されています。iOS 版は、Apple Store の ArcGIS Runtime SDK Samples、 Android 版は、Google Play から ArcGIS Runtime SDK Sample View で確認していただくことも可能です。サンプルは、ArcGIS Runtime SDK として提供していますが、ほぼ同じ機能を確認することができます。こちらは、SDK の名称が変更されたことで、ArcGIS Runtime SDK から ArcGIS Maps SDKs for Native Apps となっています。ArcGIS Maps SDK for .NET は、ArcGIS Maps SDKs for Native Apps のラインナップとして提供しており、現在 iOS 版として、ArcGIS Maps SDK for Swift (Beta)、Android 版としては、ArcGIS Maps SDK for Kotlin (Beta) を提供しています。 サンプルアプリの実行 サンプルアプリの各機能は、以下の ArcGIS Maps SDK for .NET の MAUI Samples から確認することもできます。 サンプルアプリの開発環境として、Visual Studio for Mac を使用して、アプリのビルドから物理デバイスでのデプロイまでを行いました。ArcGIS Maps SDK for .NET の開発環境や実行環境については、製品仕様の動作環境をご確認ください。 サンプルアプリは、GitHub で提供している arcgis-maps-sdk-dotnet-samples を Git からクローンか、直接ダウンロードします。 サンプルアプリは、WPF や WinUI、UWP なども提供していますが、今回は、.NET MAUI を使用するため直接 src/MAUI/ArcGIS.Samples.Maui.sln のソリューションプログラムを Visual Studio for Mac で開きます。NuGet パッケージなど、依存関係のパッケージのインストールを行います。 準備が整ったら、[Visual Studio for Mac] ツール バーで、デバッグ ターゲットを iOS シミュレーターから機種を選択して、 [再生] ボタンを押して iOS シミュレーターでアプリを起動します。iOS シミュレーターが起動して、サンプルアプリを確認することができます。同様に Android エミュレーターでも動作させることができます。Android エミュレーターは、Android デバイスマネージャーであらかじめデバイスを設定しておく必要があります。 ここまで、Visual Studio for Mac での iOS シミュレーターや Android エミュレーターでの起動方法を簡単に紹介してきましたが、Visual Studio for Mac のインストールやアプリのビルド等については、Microsoft Learn ページ .NET MAUI のドキュメントの「インストール」や「最初のアプリをビルドする」が参考になりました。 次に物理デバイスにデプロイをしていきます。 iOS の場合は、物理デバイスでアプリをテストするには、デバイスをプロビジョニングする必要があります。詳細は、.NET MAUI のドキュメント「iOS 用のデバイス プロビジョニング」が分かりやすく、ここでは簡単な手順のみを紹介します。 iOS では、デバイスにアプリをデプロイする前に、Apple の開発者プログラムのサブスクリプションが必要になります。Apple Developer Program、または、Apple Developer Enterprise Program のプログラムにアクセスしてプログラムに登録します。そうすることで、アプリの開発やテスト、配布などを行うことができます。 iOS デバイスをプロビジョニングする方法として、Visual Studio によって自動的に作成して管理する方法「自動プロビジョニング」と Apple Developer ポータルで作成して管理する「手動プロビジョニング」があります。 ここでは、推奨されている自動プロビジョニングで行いました。 ソリューション ウィンドウで、.NET MAUI アプリプロジェクトの Platform > iOS フォルダ から Info.plist ファイルを開きます。Info.plist エディターで、[ソース]ビューから[アプリケーション]ビューに変更します。 [アプリケーション] ビューの [署名] セクションで、[自動プロビジョニング] を選択します。Apple アカウントでサイン インして、自動プロビジョニングを有効にするチームを選択してください。Visual Studio for Macがプロジェクトの自動プロビジョニングを試み、プロセスが正常に完了したかどうかを示します。 　※ 自動プロビジョニングが失敗した場合は、[自動署名] ウィンドウにエラー理由が表示されます。 プロビジョニングを構成した後、アプリをデバイスにデプロイできるようになります。 [アプリケーション] ビューの [配置情報] セクションで、[デプロイ ターゲット] ドロップダウンを使用して、アプリでサポートされている最小 iOS バージョンに展開先を設定します。 　※　配置ターゲットの値は、[ビルド > ターゲット プラットフォーム] タブの [プロジェクトのプロパティ] ダイアログで定義されている [最小 iOS バージョン] の値と同じである必要があります。 iOS デバイスが USB または Wi-Fi 経由で Mac に接続されていることを確認します。 [Visual Studio for Mac] のツール バーで、デバッグ ターゲットが接続されている iOS デバイスに設定されていることを確認し、[再生] ボタンを押してデバイスでアプリを起動します。                   物理デバイスにアプリがインストールされて以下のように確認することができます。 Android アプリをデプロイしてテストするには、デバイスで開発者モードと USB デバックを有効にして、デバイスを USB 経由でコンピューターに接続して行います。 デバイスの接続後は、[Visual Studio for Mac] ツール バーで、デバッグ ターゲットが接続されている Android デバイスに設定されていることを確認し、[再生] ボタンを押してデバイスでアプリを起動します。 物理デバイスにアプリがインストールされて以下のように確認することができます。以下は、MAUI Sample の Find address と Navigate route のサンプルになります。 Android アプリのデプロイに関しての詳細は、.NET MAUI のドキュメントの「デバック用に Android デバイスを設定する」をご確認ください。 まとめ 今回は ArcGIS Maps SDK for .NET で .NET MAUI を使用して、iOS と Android の物理デバイスにアプリをデプロイするところまでを紹介しました。 ArcGIS Maps SDK for .NET は、WPF や WinUI、UWP にも対応しています。サンプルとして、WPF samples、WinUI samples、UWP samples も同じように提供していますので、ぜひこちらもお試しいただければと思います。 ■関連リンク ArcGIS ブログ ArcGIS Maps SDK for .NET バージョン 200.0 をリリースしました ArcGIS Developers 開発リソース集 技術 Tips 集 > ArcGIS Maps SDK for .NET Esri 社（米国）Web サイト ArcGIS Maps SDK for .NET         ... View more

はじめに これまで Calcite Design System の使用方法として、Calcite Design System のチュートリアルを3回連載しました。本記事では第4回目として、チュートリアルの Filter recent earthquakes を紹介します。 第１回：地図アプリの作成 第２回：ダークモードスイッチの作成 第３回：コアコンセプトの適用 第４回：近発生した地震のフィルタリング ← 本記事 Calcite Design System を使用してユーザー インター フェイス (UI) を構築します。このチュートリアルでは、複雑な問題を解決するために複製や拡張が可能な Calcite Components の概要を説明します。 ここでは、以下のことを行います。 ・フィーチャ サービスから属性にアクセスするためのクエリの実行方法 ・クエリで見つかったレコードの数を動的に入力するための calcite-notice を追加 ・クエリから個々のレコードを表示するために calcite-card を動的に追加 ・Map Viewer のレコードの位置にリンクする calcite-button の作成 このチュートリアルでは vanilla JavaScript を使用していますが、これらの概念と対話の方法はフレームワークに関係なく適用できます。地図を含むチュートリアルは「地図アプリを作成する」をご覧ください。 地震の検索結果   作成にあたって必要なもの ArcGIS 開発者アカウント このチュートリアルで使用するサービスにアクセスするには、無料の ArcGIS 開発者アカウントまたは ArcGIS Online 組織に関連付けられたアカウントが必要です。 ステップ 新しいペンの作成 1．CodePen にアクセスし、アプリケーション用の新しいペンを作成します。 HTML の追加 1．CodePen > HTML で、HTMLを追加して <body> タグのあるページを作成します。また、<main> セクシ ョンを追加します。CodePenでは、<!DOCTYPE html> タグは必要ありません。別のエディターを使用している場合や、ローカル サーバーでページを実行している場合は、必ずこのタグを HTML ページの先頭に追加してください。 <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Calcite Components: Filter recent earthquakes</title> </head> <style> </style> <body> <main> </main> </body> <script> </script> </html> 2．Calcite Design System Web コンポーネントにアクセスするには、<head> 要素に Calcite Components への参照を追加します。 <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Calcite Components: Filter recent earthquakes</title> <script src="https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js" type="module"></script> <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.7/calcite.css" /> </head>​ 3．次に、アプリケーションの中身を整理します。main セクションに、地震の結果を格納するために、heading と heading-level の属性を持つ calcite-shell と calcite-panel を追加します。 headingとheading-level 属性は、より多くのユーザーをサポートするために、アプリケーション全体のページ階層 (page hierarchy) を配置します。これはページの最初のヘッダーなので、heading-level 値を "1 " に設定します。 <calcite-shell> <!-- Panel to display records --> <calcite-panel heading="Earthquake results" heading-level="1" description="Search by location to display results"> </calcite-panel> </calcite-shell> レコードの表示 ユーザーが調整できるように、HTMLコンテンツの構築を続けます。コンテンツは、ユーザーがアプリケーションの操作ることで変化します。 1．calcite-panel に calcite-filter を追加します。この calcite-filter は地震のフィーチャ サービスへのクエリに使用される予定です。 <!-- Filter records --> <calcite-filter placeholder="Try searching Alaska"></calcite-filter> 2．次に id 属性を持つ calcite-notice を追加し、ユーザーにオンデマンドでフィードバックを提供します。 <!-- An active class will be added to display the number of records --> <calcite-notice id="note"> </calcite-notice>​ 3．calcite-notice では、divを追加して title スロットに配置し、後で id 属性を使って地震発生件数を入力するのに使用します。 <!-- An active class will be added to display the number of records --> <calcite-notice id="note"> <div id="number-records" slot="title"> <!-- Content is automatically generated --> </div> </calcite-notice>​ 4．地震の結果を格納するために、class 属性を持つ div を追加します。また、パネルの footer スロットに calcite-pagination を配置し、page-size 属性を追加して1ページに表示する件数を指定します。 <!-- Container with Cards --> <div class="card-container"> <!-- Content is automatically generated --> </div> <!-- Pagination --> <calcite-pagination slot="footer" page-size="12" style="visibility:hidden" > </calcite-pagination>​ データのクエリ ユーザーが入力した検索キーワードで地震のフィーチャ サービスを取得する JavaScript 機能を追加します。 1．まず、後で要素を参照するために calcite-filter、calcite-pagination、calcite-notice、card-container の CSS クラスを参照する定数と変数を作成します。 const filterElement = document.querySelector("calcite-filter"); const paginationElement = document.querySelector("calcite-pagination"); const noticeElement = document.querySelector("calcite-notice"); const cardContainer = document.querySelector(".card-container");​ 2．次に、Fetch API を使用して earthquakes サービスに問い合わせます。成功したら、Response.json() でレスポンスを解析し、map() メソッドでフィーチャを取得します。 /* Fetch the earthquakes feature service */ fetch("https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json") .then((response) => response.json()) .then(({features}) => features.map(({attributes}) => attributes)) 結果のフィルタリング 次に、解析されたレスポンスを使用して、ユーザー定義の結果をフィルタリングして表示します。 1．initFilter という named function expression を使用して、結果をフィルタリングします。上記のステップで定義した定数と変数を使用して calcite-filter コンポーネントの items プロパティを設定します。 /* Fetch the earthquakes feature service */ fetch("https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/USGS_Seismic_Data_v1/FeatureServer/0/query?where=1%3D1&outFields=*&f=json") .then((response) => response.json()) .then(({features}) => features.map(({attributes}) => attributes)) .then((attributes) => initFilter(attributes)); /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; }; 2．initFilterで、calciteFilterChange イベントのリスナーを追加して、フィルタの value の変化を監視します。次にpaginationの startItem と totalItems のプロパティを変更して、最初のページに戻ります。最後に、フィルタの value が falsey でないときにカードを追加する条件を作成します。 フィルタの [`filteredItems`](xref://site.self/filter/#component-api-properties-filteredItems) プロパティには、[`value`](xref://site.self/filter/#component-api-properties-value)がない場合にすべての項目が格納されます。検索機能を作るには、ユーザーがクエリ用語を入力したときだけ、カードを追加する必要があります。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { } }); }; 3．次にcalciteFilterChange 内で、フィルタリングされた地震の totalItems が指定した pageSize 値よりも大きい場合に calcite-pagination コンポーネントを表示します。 calcite-pagination コンポーネントの CSS プロパティの visibility を "hidden" に設定します。結果が 1 ページ以上ある場合は、CSS プロパティの値を ”visible” に変更します。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; paginationElement.style.visibility = "hidden"; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { // If additional pages are populated, display Pagination if (paginationElement.total > paginationElement.pageSize) { paginationElement.style.visibility = "visible"; } } }); };​ 地震を表示 地震を表示するために、各結果の属性を calcite-card に格納します。また、calcite-button を追加し、アクセスすると、地震の位置が Map Viewer で表示されるようにします。 1．フィルタリングされた地震を、card-container クラスに属する calcite-card コンポーネントに、createCard という名前の関数式で配置します。 /* Create Cards and their content */ const createCard = (item) => { const titleName = item.place.replace(/[;']/g,""); // Populate Card content if (cardContainer.childElementCount < paginationElement.pageSize) { const cardString = `<calcite-card id="card-${item.OBJECTID}"> <span slot="title"> <b>${item.place}</b> </span> <span slot="subtitle"> Occurred on: ${new Date(item.eventTime)} </span> <calcite-chip appearance="outline-fill" scale="s" kind="inverse" icon="graph-time-series" > Magnitude: ${item.mag} </calcite-chip> <calcite-button label="Open ${titleName} in map" icon-end="launch" slot="footer-end" target="_blank" width="full" href="https://www.arcgis.com/apps/mapviewer/index.html?` + `marker=${item.longitude};${item.latitude};` + // Marker (lng, lat) `4326;` + // Coordinate system titleName + `;` + `https://clipart.world/wp-content/uploads/2021/07/Target-clipart-transparent.png;` + // Marker image `Magnitude: ${item.mag}&` + `level=6" > Open in map </calcite-button> </calcite-card>`; const cardElement = document .createRange() .createContextualFragment(cardString); cardContainer.appendChild(cardElement); } }; 2．カードを作成するには、フィルタ value に一致する各フィーチャの calciteFilterChange イベントリスナーで createCard を呼び出します。結果を含む cardContainer の内容をクリアします。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; paginationElement.style.visibility = "hidden"; cardContainer.innerHTML = ""; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { filterElement.filteredItems.forEach((item) => createCard(item)); paginationElement.totalItems = filterElement.filteredItems.length; // If additional pages are populated, display Pagination if (paginationElement.totalItems > paginationElement.pageSize) { paginationElement.style.visibility = "visible"; } } }); }; 3．次に、ユーザーに対して地震の結果件数を表示します。関数 showNumberOfResponses を作成し、calcite-notice のタイトルにレスポンス件数を転記します。ユーザーがコンテンツにアクセスできるように、Notice の open 属性を "true" に設定します。レスポンス数に応じて innerHTML、kind、icon 属性が変更されます。 /* Display the number of responses in a Notice */ function showNumberOfResponses(responseNumber) { const note = document.getElementById("note"); const numberRecordsNote = document.getElementById("number-records"); // If 0 responses, add "Sorry" to the Notice text // Add the Notice color and icon if (responseNumber === 0) { responseNumber = `Sorry, ${responseNumber}` note.kind = "danger"; note.icon = "exclamation-mark-triangle"; } else { note.kind = "brand"; note.icon = "information"; } // Notice text numberRecordsNote.innerHTML = `${responseNumber} records found.`; noticeElement.open = true; } 4．カードの作成と同様に、calciteFilterChange イベントリスナーのコールバック関数にshowNumberOfResponses 関数の呼び出しを追加します。フィルタリングされた値が存在しない場合、通知の open 属性を「false」に、calcite-pagination の visibility を「hidden」に設定します。 /* Filter the results to display */ const initFilter = (items) => { filterElement.items = items; document.addEventListener("calciteFilterChange", () => { paginationElement.startItem = 1; paginationElement.totalItems = 0; // Prevent display of elements if no Filter value is present noticeElement.open = false; paginationElement.style.visibility = "hidden"; cardContainer.innerHTML = ""; // When a Filter value is present // Create Cards, update Pagination, and number of responses if (filterElement.value) { filterElement.filteredItems.forEach((item) => createCard(item)); paginationElement.totalItems = filterElement.filteredItems.length; showNumberOfResponses(filterElement.filteredItems.length); // If additional pages are populated, display Pagination if (paginationElement.totalItems > paginationElement.pageSize) { paginationElement.style.visibility = "visible"; } } }); }; 5．pagination の calcitePaginationChange イベントにリスナーを追加し、ユーザーがページを変更するときに後続のフィルタリング アイテムを表示できるようにします。filteredItems のサブセットを pagination の startItemプロパティから始まり、startItem プロパティと pageSize プロパティの合計で終わるように表示します。 /* Update Cards when interacting with Pagination */ document.addEventListener("calcitePaginationChange", ({ target }) => { const displayItems = filterElement.filteredItems.slice( target.startItem - 1, target.startItem - 1 + target.pageSize ); }); 6．最後に、calcite-pagination を操作する際に、カードを更新します。cardContainer の内容を以前のフィルタリング結果でクリアし、calcitePaginationChange イベントリスナーで createCard を呼び出します。 /* Update Cards when interacting with Pagination */ document.addEventListener("calcitePaginationChange", ({ target }) => { cardContainer.innerHTML = ""; const displayItems = filterElement.filteredItems.slice( target.startItem - 1, target.startItem - 1 + target.pageSize ); displayItems.forEach((item) => createCard(item)); }); スタイリングの追加 これでアプリケーションの機能は完成です。CSS のスタイリングを使って、インターフェイスのデザインを最終調整します。 1．card-container クラスに、CSS grid layout、calcite-chip の震度表示色、calcite-notice の位置指定を用いたスタイルを追加します。 <style> .card-container { margin: 0.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 1rem; justify-content: space-evenly; } calcite-chip { color: var(--calcite-ui-danger); } calcite-notice { position: relative; margin: 0.75rem; } </style>​ アプリを実行する CodePenで、コードを実行すると、アプリケーションが表示されます。 まとめ 今回は、Calcite Design System を使用したチュートリアルの Filter recent earthquakes のサンプルを翻訳して紹介しました。ArcGIS 開発リソース集にも Calcite Design System の開発に役立つガイド集を公開していますので、ご活用ください。 関連リンク Calcite Design System チュートリアル集 ・Tutorials | Calcite Design System | ArcGIS Developers ArcGIS Developers ・ArcGIS Developers ArcGIS 開発リソース集 ・ArcGIS Developers 開発リソース集 (esrijapan.github.io) ... View more

はじめに 以前にサイボウズ株式会社が提供している kintone と ArcGIS を連携した記事を紹介しました。今回は前回紹介した記事からさらに不動産物件マスタのアプリを拡張したので、拡張した内容にフォーカスして紹介したいと思います。   前回のおさらい 前回の記事では、kintone が提供している業務アプリの一つとして不動産物件マスタがあり、不動産物件マスタのデータを ArcGIS と連携して地図表示を行いました。 具体的には、kintone JavaScript API を使用して、kintone 上で不動産物件マスタのデータを ArcGIS API for JavaScript を使用して地図上に表示をしました。さらに ArcGIS では多くのオンライン コンテンツを配信しているので、ArcGIS Living Atlas of the World に登録されている災害情報として、洪水浸水想定区域（国土数値情報 令和 2 年）を使用しました。 ArcGIS Living Atlas of the World には他にも災害情報が登録されています。その他の災害情報の活用方法として、ArcGIS ブログ（梅雨・台風の大雨の季節に備えた災害情報レイヤーの活用法 ～ハザードマップを作成してみよう～）でも紹介しています。   不動産物件マスタのアプリ拡張：詳細・編集・追加 前回は kintone JavaScript API のイベントのレコード一覧イベントを使用して物件マスタのデータを地図上に表示しました。今回は、レコードの詳細表示や追加、編集のイベントにも対応しました。これにより、物件マスタの詳細情報の確認やデータの編集、新規物件データの追加を行うことができるようになります。 kintone JavaScript APIによるレコード詳細イベント、追加イベント、編集イベントを使用することで kintone 上でデータの編集や追加などに関してカスタマイズをすることができます。カスタマイズなどの詳細は cybozu developer network で確認することができます。   以下に不動産物件マスタの詳細表示、編集や追加に関して実装した部分について紹介していきます。   不動産物件マスタ：詳細表示 不動産物件マスタの一覧から詳細画面に遷移した画面が以下です。kintone では標準でこの機能を提供しており、詳細画面に地図の機能を組み込みました。 レコードの詳細イベントは “app.record.detail.show” で呼び出すことができます。イベントタイプやイベントが呼び出されるタイミングなど具体的な内容は kintone JavaScript API のレコードの詳細イベントで確認できます。レコード詳細イベントでは event オブジェクトが取得できますので、event オブジェクトから record オブジェクトを取得し、record オブジェクト内の緯度・経度を取得し、地図上に物件の位置を表示しています。 全体のソースは以下の通りです。 (function () { "use strict"; // API キー const api_key = '<API キー>'; // 一覧画面を開いた時に実行します kintone.events.on('app.record.index.show', function(event) { // 一覧の上部部分にあるスペース部分を定義します let elAction = kintone.app.getHeaderSpaceElement(); // すでに地図要素が存在する場合は、削除します // ※ ページ切り替えや一覧のソート順を変更した時などが該当します let mapCheck = document.getElementsByName('viewDiv'); if (mapCheck.length !== 0) { elAction.removeChild(mapCheck[0]); } // 地図を表示する div 要素を作成します let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: auto; height: 350px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); // レコード情報を取得します let records = event['records']; //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Legend", "esri/widgets/LayerList", ], function (esriConfig, Map, MapView, MapImageLayer, Graphic, GraphicsLayer, Legend, LayerList) { // API キーの作成 esriConfig.apiKey = api_key; const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); const view = new MapView({ map: map, center: [139.69167, 35.68944], zoom: 10, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { // レイヤーリスト ウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); // MapImageLayer の作成 const mapImageLayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/sinsuisoutei/MapServer" }); map.add(mapImageLayer); // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); // GraphicsLayer の作成 const graphicsLayer = new GraphicsLayer({ title: "不動産物件マスタ" }); const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; for (const record of records) { let lat = record['緯度']['value']; let lon = record['経度']['value']; let name = record['物件名']['value']; let address = record['物件所在地']['value']; let company = record['オーナー企業名_氏名']['value']; let tel = record['オーナー電話番号']['value']; // 属性情報の作成 let propertyAtt = { Name: name, Address: address, Company: company, Tel: tel }; // point の作成 let point = { type: "point", longitude: lon, latitude: lat }; // Graphic オブジェクトの作成 let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol, attributes: propertyAtt, popupTemplate : { title: "不動産物件マスタ", content: [ { type: "fields", fieldInfos: [ { fieldName: "Name", label: "物件名" }, { fieldName: "Address", label: "住所" }, { fieldName: "Company", label: "オーナー企業名/氏名" }, { fieldName: "Tel", label: "オーナー電話番号" } ] } ] } }); graphicsLayer.graphics.add(pointGraphic); //console.log(record['緯度']['value']); //console.log(record['経度']['value']); } map.add(graphicsLayer); }); }); })(); 地図部分の実装に関しては前回紹介した内容と基本的には同じですので、前回の記事を参照してください。   不動産物件マスタ：編集機能 次は物件データの編集です。詳細画面からレコードの編集ボタンをクリックすることで、各項目が編集できるようになります。kintone では標準でこの機能を提供しており、編集画面に地図の機能を組み込むことで、地図上からユーザーが任意に場所を選択できるようにしました。また、任意の位置をクリックし、そのクリックした位置の住所を確定して物件の所在地として表示しました。これはリバースジオコーディングという機能で、緯度・経度から住所を検索する機能です。 レコードの編集イベントは “app.record.edit.show” で呼び出すことができます。イベントタイプやイベントが呼び出されるタイミングなど具体的な内容は kintone JavaScript API のレコードの編集イベントで確認できます。   全体のソースは以下の通りです。 (function () { "use strict"; // API キー const api_key = '<API キー>'; //レコード追加画面の表示 kintone.events.on(['app.record.edit.show'], function (event) { // レコード情報を取得します let record = event.record; // 地図のスペースフィールドの要素を取得します let elAction = kintone.app.record.getSpaceElement('Map'); // 地図を表示する div 要素を作成します let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: 800px; height: 450px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/Graphic", "esri/widgets/Legend", "esri/widgets/LayerList", "esri/rest/locator" ], function (esriConfig, Map, MapView, MapImageLayer, Graphic, Legend, LayerList, Locator) { // API キーの作成 esriConfig.apiKey = api_key; const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); let lat = record['緯度']['value']; let lon = record['経度']['value']; const view = new MapView({ map: map, center: [lon, lat], zoom: 17, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { // レイヤーリスト ウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); // MapImageLayer の作成 const mapImageLayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/shinsuisoutei2020/MapServer", visible: false }); map.add(mapImageLayer); // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下に凡例ウィジェットを追加 view.ui.add(legend, "bottom-left"); const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // blue outline: { color: [255, 255, 255], // White width: 1 } }; // point の作成 let point = { type: "point", longitude: lon, latitude: lat }; // Graphic オブジェクト let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // 地図 クリック時 view.on("click", (event) => { view.graphics.removeAll(); if (event.mapPoint) { // クリック時の緯度経度を kintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.mapPoint.latitude; record.record['経度'].value = event.mapPoint.longitude; kintone.app.record.set(record); // クリック時の緯度経度をマップにマップに表示 let point = { type: "point", longitude: event.mapPoint.longitude, latitude: event.mapPoint.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // サービス URL let serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; // リバース ジオコーディング // 物件の所在地を取得 Locator.locationToAddress(serviceUrl , { location: point }).then((result) => { if (result.address) { record.record['物件所在地'].value = result.address; } else { record.record['物件所在地'].value = ""; } kintone.app.record.set(record); }); } }); }); }); })(); リバースジオコーディングですが、ArcGIS Platform が提供しているロケーションサービスのリバースジオコーディングを使用しています。 ArcGIS API for JavaScript の locater モジュールの locationToAddress() メソッドを使用しています。引数にサービス URL と location プロパティに地図上でクリックした緯度・経度を指定します。ステップごとに確認したい方は、ArcGIS API for JavaScript のチュートリアル（Reverse geocode）をご参照ください。 // クリック時の緯度経度をマップにマップに表示 let point = { type: "point", longitude: event.mapPoint.longitude, latitude: event.mapPoint.latitude }; // サービス URL let serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; // リバース ジオコーディング // 物件の所在地を取得 Locator.locationToAddress(serviceUrl , { location: point }).then((result) => { if (result.address) { record.record['物件所在地'].value = result.address; } else { record.record['物件所在地'].value = ""; } kintone.app.record.set(record); });   不動産物件マスタ：追加機能 最後に物件データの追加です。詳細画面からレコードを追加するボタンをクリックすることで、各項目が追加できます。kintone では標準でこの機能を提供しており、編集機能と同様に地図の機能を組み込みました。リバースジオコーディングの機能と Search ウィジェット呼ばれるマップ内の目標物や場所を検索するためのウィジェットを追加しました。ArcGIS API for JavaScript では多くの便利なウィジェットを提供しており、簡単に組み込むことができます。詳細については、以前にこちらのブログ「続編 はじめてのWeb マッピングアプリケーション開発 : ウィジェット編」でも紹介しているのでご参照ください。 レコードの追加イベントは “app.record.create.show” で呼び出すことができます。イベントタイプやイベントが呼び出されるタイミングなど具体的な内容は kintone JavaScript API のレコードの追加イベントで確認できます。   全体のソースは以下の通りです。 (function () { "use strict"; // API キー const api_key = '<API キー>'; //レコード追加画面の表示 kintone.events.on('app.record.create.show', function (event) { // レコード情報を取得します let record = event.record; // 地図のスペースフィールドの要素を取得します let elAction = kintone.app.record.getSpaceElement('Map'); // 地図を表示する div 要素を作成します let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: 800px; height: 450px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/MapImageLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Legend", "esri/widgets/LayerList", "esri/rest/locator", "esri/widgets/Search" ], function (esriConfig, Map, MapView, MapImageLayer, Graphic, GraphicsLayer, Legend, LayerList, Locator, Search) { // API キーの作成 esriConfig.apiKey = api_key; const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); // デフォルトの値を設定 let lat = "35.68944"; let lon = "139.69167"; if (record['緯度']['value'] && record['経度']['value']) { lat = record['緯度']['value']; lon = record['経度']['value']; } const view = new MapView({ map: map, center: [lon, lat], zoom: 17, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { // レイヤーリスト ウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, { position: "top-right" }); }); // MapImageLayer の作成 const mapImageLayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/shinsuisoutei2020/MapServer", visible: false }); map.add(mapImageLayer); // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); // Search ウィジェット const search = new Search({ view: view, popupEnabled: false }); view.ui.add(search, { position: "top-right" }); const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // blue outline: { color: [255, 255, 255], // White width: 1 } }; // point の作成 let point = { type: "point", longitude: record['経度']['value'], latitude: record['緯度']['value'] }; // Graphic オブジェクト let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // マップクリック時 view.on("click", (event) => { view.graphics.removeAll(); if (event.mapPoint) { // クリック時の緯度経度を kintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.mapPoint.latitude; record.record['経度'].value = event.mapPoint.longitude; kintone.app.record.set(record); // クリック時の緯度経度をマップにマップに表示 let point = { type: "point", longitude: event.mapPoint.longitude, latitude: event.mapPoint.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); // サービス URL let serviceUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"; // リバース ジオコーディング // 物件の所在地を取得 Locator.locationToAddress(serviceUrl , { location: point }).then((result) => { if (result.address) { record.record['物件所在地'].value = result.address; } else { record.record['物件所在地'].value = ""; } kintone.app.record.set(record); }); } }); // 検索が確定した場合 search.on("select-result", (event) => { view.graphics.removeAll(); if (event.result) { 　// 検索結果をkintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.result.feature.geometry.latitude; record.record['経度'].value = event.result.feature.geometry.longitude; record.record['物件所在地'].value = event.result.name; kintone.app.record.set(record); // 検索結果の緯度経度をマップに表示 let point = { type: "point", longitude: event.result.feature.geometry.longitude, latitude: event.result.feature.geometry.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); } }); }); }); })(); Search ウィジェットですが、イベントに応じてその後の処理を実装することができます。今回は select-result で検索が確定した場合に確定した情報の緯度・経度、物件の所在地を kintone 側に設定するようにしました。同時にその場所も地図上に表示しています。 // 検索が確定した場合 search.on("select-result", (event) => { view.graphics.removeAll(); if (event.result) { 　// 検索結果をkintone のレコードに設定 const record = kintone.app.record.get(); record.record['緯度'].value = event.result.feature.geometry.latitude; record.record['経度'].value = event.result.feature.geometry.longitude; record.record['物件所在地'].value = event.result.name; kintone.app.record.set(record); // 検索結果の緯度経度をマップに表示 let point = { type: "point", longitude: event.result.feature.geometry.longitude, latitude: event.result.feature.geometry.latitude }; let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); } });   アプリのデプロイ アプリのデプロイは、前回も紹介しましたが、不動産物件マスタ > アプリの設定 > JavaScript/CSS でカスタマイズの画面で JavaScript や CSS ファイルを適用することで反映することができます。今回は、機能ごとにソースファイル（index.js、detail.js、edit.js、create.js）を作成して適用しました。ソースファイルも分割して適用することができるので保守も楽になるかと思います。 詳しくは、kintone ヘルプの「JavaScript やCSS でアプリをカスタマイズする」をご確認ください。   まとめ 今回は前回紹介した不動産物件マスタのアプリを拡張した部分を紹介しました。ArcGIS API for JavaScript の Search ウィジェットやリバースジオコーディングの機能も紹介しました。今回紹介した以外にも ArcGIS API for JavaScript には多くの機能が提供されています。サンプルコードや API リファレンスも充実していますので、ぜひ参照してください。 また、今回連携した方法以外にも ArcGIS には便利な機能やサービスがあるので、kintone とさまざまな連携サービスが実現できるのではないかと思います。ぜひ、これを機会に kintone と ArcGIS の連携をお試しいただければと思います。   ■関連リンク ArcGIS Developer 開発リソース集 Esri 社（米国）Web サイト ArcGIS Developer ArcGIS API for JavaScript Esri Community kintone と ArcGIS の連携を試してみました。         ... View more

はじめに 今回サイボウズ株式会社が提供している kintone と ArcGIS との連携を試してみましたので、連携方法について紹介したいと思います。 kintone とは kintone（キントーン）は、開発の知識がなくても自社の業務に合わせたシステムを簡単に作成できる、サイボウズのクラウドサービスです。業務アプリを直感的に作成でき、チーム内で占有して使えるなど、国内でも導入している組織は多いと思います。最近は ArcGIS との連携についての相談も増えています。 さて、今回は kintone が提供している業務アプリの一つとして不動産物件マスタがあり、その不動産物件マスタのデータを ArcGIS と連携して地図表示をしてみました。kintone の標準機能では、地図サービスは提供していませんので、地図を使用する場合の選択肢として ArcGIS はとても便利です。 ArcGIS はすぐに利用可能な豊富な地図データや、地理情報を作成、分析、可視化するためのデスクトップ アプリ、モバイル アプリ、Web アプリ、クラウドサービス、サーバー製品等から構成され、システム形態や用途に応じて自由に組み合わせて導入できます。 kinetone では、連携方法として、kintone JavaScript API  や kintone REST API、kintone Plug-in API などの kintone API を提供しており、多くのパターンで ArcGIS との連携が可能です。今回の連携では、kintone JavaScript API を使用しました。kintone JavaScript API は、kintone の画面上の動作や見た目を変える APIで、JavaScript ファイルをアプリにアップロードして適用することで、kintone の画面上で動作させることができます。また、kintone にはさまざまな JavaScript イベントがあり、動作を操作することもできます。 具体的には、JavaScript API と連携するために、ArcGIS API for JavaScript を使用して、kintone 上で不動産物件マスタのデータを ArcGIS API for JavaScript を使用して地図上に表示しました。さらに ArcGIS では多くのオンライン コンテンツを配信していますので、浸水想定区域/Anticipated Inundation Area も重ねて表示してみました。これにより浸水リスクのある不動産物件を把握することもできるようになります。   kintoneで不動産物件マスタのアプリを作成 kintone を利用するために、はじめに cybozu の developer network で kintone の開発者ライセンスを作成します。kintone 開発者ライセンスは、kintone API を使った開発を目的として、利用できる環境です。利用規約など細かい詳細については、kintone 開発者ライセンス（開発環境）をご確認ください。 kintone 環境が整ったら不動産物件マスタのアプリを作成します。 kintone の使い方やアプリの作成方法について kintone ヘルプを参考にしていただければと思います。   不動産物件マスタのアプリで地図機能を追加 地図機能の追加では、JavaScript API と連携するために ArcGIS API for JavaScript を使用しました。ArcGIS API for JavaScript は、地図アプリ開発用の API で 2D・3D の地図アプリを開発することができます。地図の可視化機能や CSV や GeoJSON などのデータを表示できたりと多くのGIS機能を備えています。また、ArcGIS にも対応しているため、ArcGIS 上にあるデータを表示することも可能です。詳細については、ArcGIS API for JavaScript のサイトを確認してください。現在のバージョンは、4.23です。Sample Code や API リファレンスも充実しています。 kintone で作成した不動産物件マスタのアプリの動作や画面をカスタマイズする場合に、不動産物件マスタ > アプリの設定 > JavaScript/CSS でカスタマイズの画面で JavaScript や CSS ファイルを適用することでカスタマイズができます。詳しくは、kintone ヘルプの「JavaScript やCSS でアプリをカスタマイズする」をご確認ください。 上記の JavaScript/CSS でカスタマイズの画面で、ArcGIS API for JavaScript で開発した地図機能を適用していきます。 はじめに ArcGIS API for JavaScript を CDN 経由で使用するために PC 用の JavaScript ファイルには「https://js.arcgis.com/4.23/」を設定し、PC 用の CSS ファイルには 「https://js.arcgis.com/4.23/esri/themes/light/main.css」を設定します。不動産の物件情報を取得して地図に表示する部分は arcgis.js ファイルとして作成して設定しました。 kintone アプリで使用する JavaScript API によるイベントやデータの取得などは、スタートアップガイドや Tips なども多くのガイドが提供されています。とくに、はじめよう kintone API が参考になりました。 次に不動産の物件情報を取得して地図に表示する部分の arcgis.js について説明していきます。 今回は一覧画面を開いた時のイベントから不動産の物件情報を取得して地図に表示するように実装しました。以下は、地図画面を表示する DIV 要素の作成とレコードを取得（不動産の物件情報を取得）しているコードです。     // 一覧画面を開いた時に実行 kintone.events.on('app.record.index.show', function(event) { // 一覧の上部部分にあるスペース部分を定義 let elAction = kintone.app.getHeaderSpaceElement(); // すでに地図要素が存在する場合は、削除 // ※ ページ切り替えや一覧のソート順を変更した時などが該当 let mapCheck = document.getElementsByName('viewDiv'); if (mapCheck.length !== 0) { elAction.removeChild(mapCheck[0]); } // 地図を表示する div 要素を作成 let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: auto; height: 350px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); // レコード情報を取得 let records = event['records']; :     最後に ArcGIS API for JavaScript による実装部分です。 ArcGIS API for JavaScript を使用して背景地図などの地図サービスを利用するために ArcGIS Platform を使用しました。ArcGIS Platform はベースマップやジオコーディング、ルーティングなどのロケーション サービスを提供する PaaS のサービスです。ArcGIS Platform のロケーション サービスを使用するために API キーを取得する必要があります。API キーは ArcGIS Developer で開発者アカウントを作成することで無償から利用することができます。 ArcGIS Developer による開発者アカウントの作成や API キーの取得は、ArcGIS 開発リソース集をご確認ください。 ArcGIS API for JavaScript の地図表示部分として、はじめに Map オブジェクトの basemap プロパティに使用する背景地図を指定します。今回は "osm-streets-relief" を指定しました。その他、API キーで使用できる背景地図として多くの種類があります。 そして、MapView オブジェクトに Map オブジェクトを指定することで、地図を描画します。 オンラインコンテンツの浸水想定区域/Anticipated Inundation Area の表示には MapImageLayer (マップ イメージ レイヤー)を使用しました。不動産の物件情報の表示には GraphicsLayer (グラフィックス レイヤー) を使用しました。GraphicsLayer は、フィーチャにジオメトリと属性を持たせることができ、Graphic オブジェクトを作成することで地図に物件情報を描画することができます。 ArcGIS API for JavaScript の詳しい使用方法については、「はじめての Web マッピングアプリケーション開発シリーズ」でも紹介しています。 以下は、ArcGIS API for JavaScript によるコードです。     // API キーの設定 esriConfig.apiKey = api_key; // Map オブジェクト const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); 　 　// MapView オブジェクト const view = new MapView({ map: map, center: [139.69167, 35.68944], zoom: 10, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { 　// レイヤーリスト ウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); 　　 　　// マップ イメージ レイヤー const mapImageLayer= new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/sinsuisoutei/MapServer" }); map.add(mapImageLayer); 　　 　　// 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImageLayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); 　　 　　// グラフィックス レイヤー const graphicsLayer = new GraphicsLayer({ title: "不動産物件マスタ" }); 　　 // シンボルの設定 const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; for (const record of records) { let lat = record['緯度']['value']; let lon = record['経度']['value']; let name = record['物件名']['value']; let address = record['物件所在地']['value']; let company = record['オーナー企業名_氏名']['value']; let tel = record['オーナー電話番号']['value']; 　　　　 　　　　// 属性情報の作成 let propertyAtt = { Name: name, Address: address, Company: company, Tel: tel }; // point の作成 let point = { type: "point", longitude: lon, latitude: lat }; // Graphic オブジェクト let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol, attributes: propertyAtt, popupTemplate : { title: "不動産物件マスタ", content: [ { type: "fields", fieldInfos: [ { fieldName: "Name", label: "物件名" }, { fieldName: "Address", label: "住所" }, { fieldName: "Company", label: "オーナー企業名/氏名" }, { fieldName: "Tel", label: "オーナー電話番号" } ] } ] } }); graphicsLayer.graphics.add(pointGraphic); } map.add(graphicsLayer);     arcgis.js 全体のコードは以下となります。     (function () { "use strict"; // API キー const api_key = '<API キー>'; // 一覧画面を開いた時に実行 kintone.events.on('app.record.index.show', function(event) { // 一覧の上部部分にあるスペース部分を定義 let elAction = kintone.app.getHeaderSpaceElement(); // すでに地図要素が存在する場合は、削除 // ※ ページ切り替えや一覧のソート順を変更した時などが該当 let mapCheck = document.getElementsByName('viewDiv'); if (mapCheck.length !== 0) { elAction.removeChild(mapCheck[0]); } // 地図を表示する div 要素を作成 let viewDiv = document.createElement('div'); viewDiv.setAttribute('id', 'viewDiv'); viewDiv.setAttribute('name', 'viewDiv'); viewDiv.setAttribute('style', 'width: auto; height: 350px; margin-right: 30px; border: solid 2px #c4b097'); elAction.appendChild(viewDiv); // レコード情報を取得 let records = event['records']; //console.log(records); require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/Basemap", "esri/layers/MapImageLayer", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Legend", "esri/widgets/LayerList", ], function (esriConfig, Map, MapView, Basemap, MapImageLayer, Graphic, GraphicsLayer, Legend, LayerList) { // API キーの設定 esriConfig.apiKey = api_key; // Map オブジェクト const map = new Map({ basemap: "osm-streets-relief" // Basemap layer }); 　　 // MapView オブジェクト const view = new MapView({ map: map, center: [139.69167, 35.68944], zoom: 10, // scale: 72223.819286 container: "viewDiv", constraints: { snapToZoom: false } }); view.when(() => { 　// レイヤーリスト ウィジェット const layerList = new LayerList({ view: view }); // ビューの右上にウィジェットを追加 view.ui.add(layerList, "top-right"); }); 　　　　　　 　　　　　　// MapImageLayer (マップ イメージ レイヤー) const mapImagelayer = new MapImageLayer({ title: "浸水想定区域 ", url: "https://content.esrij.com/arcgis/rest/services/Dosyasaigai/sinsuisoutei/MapServer" }); map.add(mapImagelayer); 　　　　　　 　　　　　　 // 凡例ウィジェット const legend = new Legend({ view: view, layerInfos: [ { layer: mapImagelayer } ] }); // ビューの右下にウィジェットを追加 view.ui.add(legend, "bottom-left"); 　　　　　　 　　　　　　 // GraphicsLayer (グラフィックス レイヤー) const graphicsLayer = new GraphicsLayer({ title: "不動産物件マスタ" }); // シンボルの設定 const simpleMarkerSymbol = { type: "simple-marker", color: [0, 0, 205], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; for (const record of records) { let lat = record['緯度']['value']; let lon = record['経度']['value']; let name = record['物件名']['value']; let address = record['物件所在地']['value']; let company = record['オーナー企業名_氏名']['value']; let tel = record['オーナー電話番号']['value']; 　　　　　　　　 　　　　　　　　 // 属性情報の作成 let propertyAtt = { Name: name, Address: address, Company: company, Tel: tel }; // point の作成 let point = { type: "point", longitude: lon, latitude: lat }; // Graphic オブジェクト let pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol, attributes: propertyAtt, popupTemplate : { title: "不動産物件マスタ", content: [ { type: "fields", fieldInfos: [ { fieldName: "Name", label: "物件名" }, { fieldName: "Address", label: "住所" }, { fieldName: "Company", label: "オーナー企業名/氏名" }, { fieldName: "Tel", label: "オーナー電話番号" } ] } ] } }); graphicsLayer.graphics.add(pointGraphic); } map.add(graphicsLayer); }); }); kintone.events.on('app.record.detail.show', function(event) { window.alert('レコード表示イベント'); }); })();     まとめ 今回紹介した機能以外にも ArcGIS API for JavaScript には多くの機能が提供されております。サンプルコードや API リファレンスも充実していますので、参照してください。 今回連携した方法以外に ArcGIS でも REST API のサービスが充実していますので、kintone とさまざまな連携が実現できるのではないかと思います。ぜひ、これを機会に kintone と ArcGIS の連携をお試しいただければと思います。 ■関連リンク ArcGIS Developer 開発リソース集 Esri 社（米国）Web サイト ArcGIS Developer ArcGIS API for JavaScript ArcGIS Blog：米国 Esri 社 What's new in ArcGIS API for JavaScript (4.23)   ... View more

Leaflet、Esri Leaflet、OpenLayers、Mapbox などのオープンソースのクライアント API を使用して、従来の ArcGIS Online タイル サービスを使用するマッピング アプリケーションを構築している場合は、新しい ArcGIS ベースマップ レイヤー サービスに更新する必要があります。 従来の ArcGIS Online タイル サービスは、更新が終了しています。そのため、Esri の利用規約に準拠して継続的なアクセスを確保するため 2022年 4月30日 までにアプリケーションを更新する必要があります。 更新は簡単で、ベースマップ サービスには無料でアクセスできます。 従来の ArcGIS Online タイル サービスについては、ArcGIS ブログ「ArcGIS Online ラスター ベースマップの更新停止に伴うベースマップ ギャラリー更新のお知らせ」にも公開していますので併せてご参照ください。 本記事は ArcGIS Blog で紹介されている「Open source developers: Time to upgrade to the new ArcGIS basemap layer service!」の記事を翻訳して紹介したいと思います。   新しい ArcGIS ベースマップ レイヤー サービス 新しい ArcGIS ベースマップ レイヤー サービスは、従来の ArcGIS Online タイル サービスに代わるものです。新しいサービスでは、世界各国からアクセスされるアプリケーションのパフォーマンスが大幅に向上し、新しい地域の衛星画像もより高解像度で提供されます。 また、新しいベクター タイル ベースマップ サービスもぜひご利用ください。このサービスは Mapbox Vector Tile Specification をサポートしており、オープンソースの API と簡単に統合することができます。ベクター タイルは全体的に最高のパフォーマンスを提供し、アプリケーションに合わせて25以上のベクター タイル スタイルから選択することができます。 ベクター タイル サービスは、Vector Tile Style Editor（ベクター タイル スタイル エディター）による独自のベースマップ スタイルの作成に対応しており、custom colors、fonts、glyphs を用いたアプリケーションのブランディングが可能です。カスタムスタイルの作成方法については、カスタム スタイルを作成するチュートリアルをご覧ください。 アプリケーションをアップデートする手順 以下の手順で、従来のサービスを新しいベースマップ サービスに置き換えます。 1．従来のベースマップ サービスを特定する アプリケーションが以下の URL エンドポイントを使用している場合、アプリケーションを更新する必要があります。   World Street Map https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer World Topo Map https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer World Light and Dark Gray Canvas https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Reference/MapServer https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Light_Gray_Base/MapServer https://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Light_Gray_Reference/MapServer World Boundaries and Places https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Boundaries_and_Places/MapServer https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Reference_Overlay/MapServer World Transportation https://services.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer World National Geographic https://services.arcgisonline.com/arcgis/rest/services/NatGeo_World_Map/MapServer     2．ArcGIS アカウントの取得 新しいベースマップ レイヤー サービスを利用するには、ArcGIS Developer（個人開発者向け）または ArcGIS Online アカウント（組織向け）が必要です。お持ちでない場合は、無料でサインアップすることができます。 NOTE：開発者アカウントでは、200万のベースマップ タイルを毎月無料で利用できます。 NOTE：開発者アカウントの作成から API キーの取得、マップとベースマップ レイヤーを表示するシンプルな地図アプリの作成方法まで、ArcGIS Developer 開発リソース集にも公開していますので、併せてご参照ください。   3．APIキーの取得 開発者用ダッシュボードにログインし、API キー (アクセストークン) を取得します。   4．新サービスを参照する 新しいベースマップ レイヤー サービスにアクセスするには API キーを使用します。以下の URL エンドポイントを使うか、Leaflet、Mapbox、OpenLayers の具体的なコード例を参照してください。   イメージ タイル 衛星画像、海洋、陰影起伏の新しいイメージ タイルに直接アクセスするには、以下の URL に {z}、{y}、{x} の値と token を指定してください。   https://ibasemaps-api.arcgis.com/arcgis/rest/services/{ImageryType}/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN}     サンプル   https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN} https://ibasemaps-api.arcgis.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN} https://ibasemaps-api.arcgis.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}?token={ACCESS_TOKEN}     ベクタータイル  新しいベクター タイル スタイルにアクセスするには、以下のURLに basemapStyle、type、トークン (API キーまたは OAuth 2.0 トークン) を指定します。type は style に設定する必要があります。   https://basemaps-api.arcgis.com/arcgis/rest/services/styles/{basemapStyle}?type={type}&token={ACCESS_TOKEN}     サンプル   https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Navigation?type={type}&token={ACCESS_TOKEN} https://basemaps-api.arcgis.com/arcgis/rest/services/styles/OSM:Standard?type={type}&token={ACCESS_TOKEN} https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Streets?type={type}&token={ACCESS_TOKEN} https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:Imagery?type={type}&token={ACCESS_TOKEN}     Leaflet と Esri Leaflet のアプリをアップデートする方法 Leaflet アプリケーションを更新する最も簡単な方法は、Esri Leaflet プラグインを使用することです。Esri Leaflet CDN または npm パッケージと、Esri Leaflet Vector Plugin をロードする必要があります。 NOTE：L.Esri.BasemapLayer クラスで既に Esri Leaflet  を使用している場合、L.Esri.BasemapLayer クラスは非推奨のため、 L.esri.Vector.vectorBasemapLayer プラグインを使用する必要があります。 ライブラリがロードされた後、API キーを使用して、利用可能なすべてのベースマップ レイヤー スタイルにアクセスすることができます。  詳細は、「Esri Leaflet とロケーション サービス開発者向けガイド」を参照してください。   サンプル   <script src="https://unpkg.com/esri-leaflet@3.0.3/dist/esri-leaflet.js"integrity="sha512-kuYkbOFCV/SsxrpmaCRMEFmqU08n6vc+TfAVlIKjR1BPVgt75pmtU9nbQll+4M9PN2tmZSAgD1kGUCKL88CscA=="crossorigin=""></script> <script src="https://unpkg.com/esri-leaflet-vector@3.1.1/dist/esri-leaflet-vector.js"integrity="sha512-7rLAors9em7cR3/583gZSvu1mxwPBUjWjdFJ000pc4Wpu+fq84lXF1l4dbG4ShiPQ4pSBUTb4e9xaO6xtMZIlA=="crossorigin=""></script> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Navigation"; const map = L.map('map', { minZoom: 2 }).setView([25,-10], 2); //Latitude, longitude L.esri.Vector.vectorBasemapLayer(basemapEnum, { apiKey: apiKey }).addTo(map);     Mapbox GL JS アプリをアップデートする方法 Mapbox GL JS の以前のバージョン（バージョン 1.x）を使用している場合、新しい ArcGIS ベースマップ レイヤー サービスに直接アクセスできます。古い URL エンドポイントを新しいベクター タイル レイヤーのエンドポイントに置き換え、API キーを含めます。 詳細は「Mapbox GL JS と ArcGIS ロケーション サービス ガイド」を参照してください。   サンプル   <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet"/> const apiKey = "YOUR_API_KEY"; const basemapEnum = "ArcGIS:Nova"; // Basemap layer style const map = new mapboxgl.Map({ container: "map", style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${apiKey}`, zoom: 1, center: [-5, 30] // [longitude, latitude] });     OpenLayers アプリをアップデートする方法 TileLayer クラスまたは OL-Mapbox-Style ライブラリなどの他のプラグインで 、TileLayer 新しい URL エンドポイントに更新して API キーを使用します。 詳細は「OpenLayers と ArcGIS ロケーション サービス ガイド」を参照してください。   サンプル   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.7.0/build/ol.js"></script> <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@6.1.4/dist/olms.js"></script> const apiKey = "YOUR_API_KEY"; const basemapId = "ArcGIS:Topographic"; const basemapURL = "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/" + basemapId + "?type=style&token=" + apiKey; olms(map, basemapURL); //OpenLayers Mapbox style     まとめ 従来の ArcGIS Online のタイル サービスは、しばらく前から、更新が終了しており、また Esri の利用規約に準拠するため、2022 年 4 月 30 日 までに新しい ArcGIS ベースマップ レイヤー サービスに更新する必要があります。 また、ジオコーディングやルーティングなど他の ArcGIS ロケーション サービスをオープンソースの API で使用することに興味がある場合は、マッピング API とロケーション サービスのガイドを参照してください。   ■関連リンク ArcGIS Developer 開発リソース集 Esri 社（米国）Web サイト ArcGIS Developer ... View more

ArcGIS QuickCapture 1.11 (template), but Online has been updated and the current latest version is 1.12.104. So when you use it, it will ask you to update the app and send you to the Apple Store.                     https://apps.apple.com/jp/app/arcgis-quickcapture/id1451433781 I don't think ArcGIS QuickCapture 1.11 (template) will be upgraded until AppStudio is updated. How are you updating ArcGIS QuickCapture 1.11 (template)? https://doc.arcgis.com/ja/quickcapture/faq/whatsnew.htm ... View more

ES modules はすでにご存知の方も多いかと思います。ES modules は、主要なブラウザで採用されている、モダンな JS を扱うための公式の標準化されたモジュール システムです。ArcGIS API for JavaScript の ES modules は、@arcgis/core を通じて npm からインストールして利用することができます。 ArcGIS API for JavaScript バージョン 4.18 では、、APIとフレームワークやビルドツールとの統合を大幅に容易にすることを目的としています。4.19では、これらのモジュールが本番環境で使用可能になりました。ES modules のインストールに関する簡単な概要は、APIドキュメントの Build with ES modules ガイドのトピックをご覧ください。 本記事では、ES modules について ArcGIS Blog でも紹介されている「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier」と「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier - Part 2」の記事を翻訳して紹介したいと思います。 まず、「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier」では、以下のように ES modules の使い方を中心に紹介しています。   どのようにして始めるのか？ NPM を使って、新しい ES modules パッケージ (@arcgis/core) をインストールします。   npm install @arcgis/core   その後、import ステートメントを使用して、個々のモジュールをアプリケーションにロードします。ES modules のパッケージの命名規則では、/core が使用され、AMD CDN  modules で使用される /esri とは異なります。   import WebMap from '@arcgis/core/WebMap'; import MapView from '@arcgis/core/views/MapView'; const webmap = new WebMap({ portalItem: { id: '05e015c5f0314db9a487a9b46cb37eca', }, }); const view = new MapView({ container, map: webmap });   2番目のステップは、API のアセット（スタイル、イメージ、フォント、ローカリゼーションファイルを含む）を @arcgis/core/assets フォルダからビルドフォルダにコピーすることです。ビルドツールによって様々な方法がありますが、簡単な方法は、ビルドプロセス中に実行される NPM スクリプトを設定することです。例えば、npm install ncp を実行し、package.json にフォルダをコピーするスクリプトを設定します。これは React の例です。   { "script": { "start": "npm run copy && react-scripts start", "build": "npm run copy && react-scripts build", "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets" } }   最後のステップは、CSS の設定です。テーマを選び、@arcgis/core/assets/esri/themes/ からテーマファイルをプロジェクトにコピーするようにコードを設定します。ここでは React の例を紹介します。   // React - index.js import '@arcgis/core/assets/esri/themes/dark/main.css';   以上で、API を自分のアプリケーションに取り込むことができました。あとは、ビルドを実行すれば、API の ES modules が他のすべてのインポートと一緒にバンドルされます 次に「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier - Part 2」では、以下のように ES modules のメリットや ES modules の移行に関するトピック、フレームワークを使用する場合の検討事項などを紹介しています。   なぜ ES modules なのか？ ほとんどのローカルビルドでは、ES modules が動作します。ローカルビルドとは、アプリケーションコードと一緒に API モジュールをインストールし、消費し、コンパイルすることです。これが何を意味するのか、詳しくは以下をご覧ください。 ここでは、そのメリットをまとめてご紹介します。 コードの簡素化 最新ブラウザでのネイティブサポート 最小限の設定 最新のフレームワークやビルドツールとのシームレスな統合 ES modules は、API コードを require() 文で囲む必要がないため、AMD modules よりも簡単に使用することができます。ES modules は、ネイティブの import 文によってアプリケーション内で参照されます。これは、ECMA 2015（ES6）仕様がすべての主要なブラウザベンダーによって採用されたために実現しました。また、ES modules は、ほとんどの最新のフレームワークではデフォルトでサポートされています。 以下は、ES modules と AMD modules を並べた 2 つのコードスニペットです。 それに比べ、AMD は ECMA 規格ではなく、API 仕様に基づいています。ブラウザでネイティブにサポートされていないため、AMD は Dojo や RequireJS などの別のモジュールローダーを必要とします。このため、フレームワークを使用する際には、特別な設定やヘルパーライブラリ、esri-loader や arcgis-webpack-plugin などの追加プラグインが必要になります。   4.19 の新機能は？ 4.19では、いくつかの機能改善に加えて、インストールとセットアップを簡素化しました。@arcgis/core の NPM インストールでは、API で使用されるアセットを実行時に取得するデフォルトの方法として CDN を使用するようになりました。API のアセットを node_modules からプロジェクトにコピーする必要はもうありません。アセットには、スタイル、画像、ウェブ ワーカー、ウェブ アセンブリー、ローカライゼーション ファイルが含まれます。プライベートネットワーク上でアプリを実行している場合など、ローカルでアセットを扱う必要がある場合は、config.assetsPath  でデフォルトを上書きすることができます。   サンプルはどこにありますか？ https://github.com/Esri/jsapi-resources/tree/master/esm-samples では、様々な基本的な入門サンプルを用意しています。API の ES modulesをReact、Angular、webpack、rollup.js などと組み合わせて使用する例があります。サンプルの使用に関する質問や、ES modules に関するその他の質問があれば、リポジトリの issue ページに投稿することができます。   AMD modules を使用していますが、切り替える必要がありますか？ JavaScriptフレームワークを使用せずに AMD モジュールを使用している場合や、ローカルビルドを作成していない場合は、移行する必要はありません。 フレームワークを使用している場合や、すでに esri-loader や arcgis-webpack-plugin を使用している場合は、ES modules への移行をお勧めします。 この2つのモジュールタイプの違いについて、多くの質問を受けます。ここで重要なのは、AMD modules と ES modules の間で、基本的な API の機能は全く同じであるということです。大きく異なるのは、ブラウザ、フレームワーク、ビルドツールがモジュールとどのように連携するかという点です。   フレームワークの使用やローカルビルドを検討すべきでしょうか？ JavaScript アプリケーションの規模が大きくなってくると、新しい機能を追加することが難しくなってきます。フレームワークを使用することは、バニラ HTML/JavaScript で作られたアプリと比較して、フロントエンドアプリのスケーラビリティ、生産性、パフォーマンスを向上します。 フレームワークは、スケーラブルなアプリケーションの構築に必要な足場を提供します。Angular、React、VueJS などの主要なフレームワークは、大規模で高性能なアプリケーションを構築する企業によって実世界でテストされてきました。これらのフレームワークには、定型的なコードやコンポーネント、内蔵されたユニットテスト、状態管理、頻繁に使用されるワークフローのためのデザインシステム、そしてこれらすべてをサポートする世界規模のコミュニティが用意されています。フレームワークの基盤構築やメンテナンスにどれだけの時間が費やされたかを考えれば、同じものを作り直すために費やす時間はありません。 フレームワークには、webpack や rollup.js などのモジュールバンドラーが付属しています。これらのバンドラーは、フレームワークを使わずに単体で使用することもできます。バンドラーの役割は、アプリケーションのコードと依存関係をコンパイルし、最適化されたチャンク（バンドル）に分割して、本番環境に投入することです。この最適化ステップの目的は、可能な限り最速のロードパフォーマンスを提供することです。下図はバンドルがディスク上でどのように見えるかを示すスクリーンショットです。   HTML アプリで ES modules を使用することはできますか？ ES modules は、テストとプロトタイピングのためにのみ、CDN 経由で提供されています。これはパフォーマンス上の理由によるもので、ES modules の CDN ビルドは高速ロードには最適化されていません。本番環境では、ローカルビルドのみを使用することをお勧めします。なぜなら、最適化をより細かくコントロールできるからです。Esri のサンプルリポジトリには、ES modules CDN のサンプルがあります。   まとめ 私たちは、新しい ES modules に興奮していますし、皆さんもそうであることを願っています。ぜひ、お試しください。基本的なスタート ガイド：ArcGIS API for JavaScript SDK Guide Topic - Build with ES modules とサンプル アプリをご覧ください。   ■関連リンク ESRIジャパン Web サイト ArcGIS API for JavaScript Esri 社（米国）Web サイト ArcGIS API for JavaScript ... View more

When I display a map of Japan with mapbox gl js, I see a mixture of Japanese and English notation. It is displayed in Japanese location. Is this currently supported?      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <title>Mapbox GL JS 背景地図表示と GeoJSON 表示</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> <script> const apiKey = "AAPKe9fefdc8839248fe8916671a8d6722dd8yIiVGa4rmTt7LKcvznc-up0JQLLS5vW9FQ7RM1TfmZ8uOs5y6TGbZ3Q6QLmlFsB"; const basemapEnum = "ArcGIS:Streets"; const map = new mapboxgl.Map({ container: "map", // the id of the div element style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`, zoom: 12, // starting zoom center: [139.72514, 35.60847], // starting location [longitude, latitude] pitch: 45, hash: true }); map.addControl(new mapboxgl.NavigationControl()); let scale = new mapboxgl.ScaleControl({ maxWidth: 200, unit: 'metric' }); map.addControl(scale); map.once("load", () => { // This code runs once the base style has finished loading. map.addSource("kankojohoShinagawa100kei", { type: "geojson", data: "https://services5.arcgis.com/HzGpeRqGvs5TMkVr/arcgis/rest/services/kankojohoShinagawa100kei/FeatureServer/0/query?f=pgeojson&where=1=1&outFields=*", cluster: true, clusterRadius: 20, // cluster two kankojohoShinagawa100kei if less than 20 pixels apart clusterMaxZoom: 14 // display all kankojohoShinagawa100kei individually from zoom 14 up 　}); 　map.addLayer({ id: "kankojohoShinagawa100kei-circle", type: "circle", source: "kankojohoShinagawa100kei", paint: { "circle-color": "hsla(0,0%,0%,0.75)", "circle-stroke-width": 1.5, "circle-stroke-color": "white", "circle-radius": ["case", ["get", "cluster"], 10, 5] // 10 pixels for clusters, 5 pixels otherwise } 　}); 　map.addLayer({ id: "kankojohoShinagawa100kei-cluster-count", type: "symbol", source: "kankojohoShinagawa100kei", layout: { "text-font": ["Arial Bold"], "text-field": ["get", "point_count"], "text-offset": [0, 0.1] // move the label vertically downwards slightly to improve centering }, paint: { "text-color": "white" } 　}); map.on("click", "kankojohoShinagawa100kei-circle", (e) => { const trailhead = e.features[0]; new mapboxgl.Popup() .setHTML(`<b>名前：${trailhead.properties.name}</b> <br/><b>カテゴリ1：</b>${trailhead.properties.category} <br/><b>カテゴリ2：</b>${trailhead.properties.category_supplement} <br/><b>詳細：</b>${trailhead.properties.description_ja} <br/><b>場所：</b>${trailhead.properties.location}` ) .setLngLat(trailhead.geometry.coordinates) .addTo(map); }); map.on("mouseenter", "kankojohoShinagawa100kei-circle", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "kankojohoShinagawa100kei-circle", () => { map.getCanvas().style.cursor = ""; }); }); </script> </html>     https://valuecreation.github.io/mapbox-gl-js-samples/20210131/#12/35.60847/139.72514/0/45   ... View more