AzureMapsでネイティブ表示

2024/05/25(土)に開催された .NETラボ 勉強会 2024年5月( https://dotnetlab.connpass.com/event/317839/) に参加した時に当日受付LTで発表した資料です。 #dotnetlab #azuremaps

Transcript

1. Azure Mapsでネイティブ表⽰ 2024/5/25 .NETラボ 2024年5⽉ 当⽇LT NTTテクノクロス 中島進也（なかしょ）
2. ⾃⼰紹介 • なかしょ（中島進也） @nakasho_dev • 所属：NTTテクノクロス株式会社 デジタルトランスフォーメーション事業部 • 業務：MaaS関連のスマートフォンアプリ開発担当 • 趣味： Ø妻とモンハンデート ØIT関連の勉強会（主にモバイル系 or アジャイル系） Ø技術コミュニティの運営スタッフ üeXtreme Programming Japan User Group（XPJUG） 2019〜 üTDD BootCamp Online (TDDBC) 2020〜 ※本資料は私個⼈の意⾒であり、所属企業・部⾨⾒解を代表するものではありません。
3. http://xpjug.com/ 2024年 9⽉28⽇(⼟) 開催
4. 2025年3⽉末にAzure Maps Native SDKは廃⽌ 4 URL: https://azure.microsoft.com/en-us/updates/azure-maps-native-sdk-for-android-and-ios-will-be-retired-on-31-march-2025-transition-to-use-web-view-of-azure-maps-web-sdk/
5. Build 2024にてBing Mapsとの統合が発表 5 URL: https://techcommunity.microsoft.com/t5/azure-maps-blog/introducing-the-unified-azure-maps-experience/ba-p/4147571
6. 2025年6⽉末からBing Maps Native SDKは⾮推奨 6 URL: https://learn.microsoft.com/en-us/bingmaps/sdk-native/ 2028年6⽉末に廃⽌
7. ⾊々な地理空間情報サービス 地図サービス Android iOS Web 備考 GoogleMaps 〇 〇 〇 https://developers.google.com/maps?hl=ja MapKit × 〇 〇 https://developer.apple.com/documentation/mapkit/ Bing Maps △ △ 〇 https://www.microsoft.com/en-us/maps/bing-maps/choose-your-bing-maps-api Azure Maps △ △ 〇 https://azure.microsoft.com/ja-jp/products/azure-maps いつもNavi 〇 〇 〇 https://www.zenrin-datacom.net/solution/api ArcGIS 〇 〇 〇 https://www.esrij.com/products/arcgis-developers/apis-and-sdks/ Here 〇 〇 〇 https://www.here.com/jp MapBox 〇 〇 〇 https://www.mapbox.com/ Mapped In 〇 〇 〇 https://developer.mappedin.com/ maptiler 〇 〇 〇 https://www.maptiler.com/jp/ Mappls 〇 〇 〇 https://about.mappls.com/api/maps/ TomTom 〇 〇 〇 https://developer.tomtom.com/ Mapple 〇 × × https://mapple.com/products/system-sdk/
8. WebではなくNativeで実現したいので Nativeで実装できるSDKを求めて．．．
9. MapLibre 9 • MapBoxがOSSライセンス から商⽤ライセンスに変 わったことを契機に フォークして開発された • 組織として開発して、開 発した機能に応じてスポ ンサーや個⼈の寄付から のお⾦を⽀払うBounty⽅ 式で開発 https://maplibre.org/sponsors/
10. MapLibreのプロダクト 10 • MapLibre GL JS ØTypeScriptライブラリ • MapLibre Native ØOpenGLとMetalをサポート ØAndroid, iOS, GLFW, Linux, Node.js, Qt, Windows, macOS • MapLibre RS ØWebGPU, Rust, WebAssembly, まだ不安定 • MapLibre Style Specification ØMapLibreで使⽤するStyleを定義するJSON仕様 • Martin Ø⼤規模なPostGISデータベースからVectorTileを⽣成するサーバ https://maplibre.org/
11. 11 MapLibre Style Specification 地図のスタイルを定義するためのフォーマット。この仕様により、地 図の外観やインタラクションを詳細に設定可能。 • レイヤー構成 Ø地図の各要素（道路、建物、⽔域など）はレイヤーとして定義される。 Øレイヤーの種類には、背景、ライン、シンボル、ラスタ、フィル、サークル などがある。 • ソース Ø地図データのソースを指定します。これには、ベクターデータやラスター データのURLが含まれる。 Ø複数のソースを組み合わせて使⽤可能。 • スタイルプロパティ Ø⾊、線幅、透明度など、地図の各要素のスタイルを詳細に設定。 Øズームレベルに応じた動的なスタイル変更も可能。 • JSON形式 Øスタイル指定はJSON形式で記述されます。これにより、プログラム的に⽣ 成・編集が容易である。
12. 12 XYZタイルサーバを含む例 • ソースの定義: Øsimple-xyzという名前で、 OpenStreetMapのタイルURLを指 定。 • レイヤーの定義 Øbackgroundレイヤーで背景⾊を ライトグレー（#e0e0e0）に設定。 Øosm-tilesレイヤーで定義したXYZ タイルを地図に表⽰。
13. 13 Azure Maps にもタイル取得のAPIはある https://atlas.microsoft.com/map/tile?api-version=2022-08- 01&tilesetId={tilesetId}&zoom={zoom}&x={x}&y={y} ! "#$%&'()"*+,- ")./$"*+"012%$+3.4&+5678$"- "&(2%9$&"*+! ".12%$:/.4&"*+! "674$"*+"%.&6$%"- "6'8$&"*+; "<664&*==.68.&>/'9%(&(?6>9(/=/.4=6'8$@&2A&9%'46'():B$7C5$9%$6D$7E.4':#$%&'()CFGFF:G,:GHE6'8$&$6IJC/'9%(&(?6>A.&$><7A%'J>%(.JE1((/C!1KELC!LKE7C!7K" M- "6'8$5'1$"*+FNO K K- "8.7$%&"*+; ! "'J"*+".12%$:/.4&:8.7$%"- "674$"*+"%.&6$%"- "&(2%9$"*+".12%$:/.4&"- "/')1((/"*+G- "/.L1((/"*+FF K M K
14. できた！ 14
15. まとめ 15 • Bing MapsはAzure Mapsと統合する ØBing MapsもNative SDKは⾮推奨に。2028年6⽉に廃⽌。 • 無料で気軽に使えるOSSライブラリとしてMapLibreがある ØMapBoxのフォークなので、MapBoxとの互換性は⾼い • Styleの定義でAzure MapsのTilesも読み込める
16. ご清聴ありがとうございました。 16