Slide 1

Slide 1 text

Azure Mapsでネイティブ表⽰ 2024/5/25 .NETラボ 2024年5⽉ 当⽇LT NTTテクノクロス 中島進也(なかしょ)

Slide 2

Slide 2 text

⾃⼰紹介 • なかしょ(中島進也) @nakasho_dev • 所属:NTTテクノクロス株式会社 デジタルトランスフォーメーション事業部 • 業務:MaaS関連のスマートフォンアプリ開発担当 • 趣味: Ø妻とモンハンデート ØIT関連の勉強会(主にモバイル系 or アジャイル系) Ø技術コミュニティの運営スタッフ üeXtreme Programming Japan User Group(XPJUG) 2019〜 üTDD BootCamp Online (TDDBC) 2020〜 ※本資料は私個⼈の意⾒であり、所属企業・部⾨⾒解を代表するものではありません。

Slide 3

Slide 3 text

http://xpjug.com/ 2024年 9⽉28⽇(⼟) 開催

Slide 4

Slide 4 text

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/

Slide 5

Slide 5 text

Build 2024にてBing Mapsとの統合が発表 5 URL: https://techcommunity.microsoft.com/t5/azure-maps-blog/introducing-the-unified-azure-maps-experience/ba-p/4147571

Slide 6

Slide 6 text

2025年6⽉末からBing Maps Native SDKは⾮推奨 6 URL: https://learn.microsoft.com/en-us/bingmaps/sdk-native/ 2028年6⽉末に廃⽌

Slide 7

Slide 7 text

⾊々な地理空間情報サービス 地図サービス 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/

Slide 8

Slide 8 text

WebではなくNativeで実現したいので Nativeで実装できるSDKを求めて...

Slide 9

Slide 9 text

MapLibre 9 • MapBoxがOSSライセンス から商⽤ライセンスに変 わったことを契機に フォークして開発された • 組織として開発して、開 発した機能に応じてスポ ンサーや個⼈の寄付から のお⾦を⽀払うBounty⽅ 式で開発 https://maplibre.org/sponsors/

Slide 10

Slide 10 text

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/

Slide 11

Slide 11 text

11 MapLibre Style Specification 地図のスタイルを定義するためのフォーマット。この仕様により、地 図の外観やインタラクションを詳細に設定可能。 • レイヤー構成 Ø地図の各要素(道路、建物、⽔域など)はレイヤーとして定義される。 Øレイヤーの種類には、背景、ライン、シンボル、ラスタ、フィル、サークル などがある。 • ソース Ø地図データのソースを指定します。これには、ベクターデータやラスター データのURLが含まれる。 Ø複数のソースを組み合わせて使⽤可能。 • スタイルプロパティ Ø⾊、線幅、透明度など、地図の各要素のスタイルを詳細に設定。 Øズームレベルに応じた動的なスタイル変更も可能。 • JSON形式 Øスタイル指定はJSON形式で記述されます。これにより、プログラム的に⽣ 成・編集が容易である。

Slide 12

Slide 12 text

12 XYZタイルサーバを含む例 • ソースの定義: Øsimple-xyzという名前で、 OpenStreetMapのタイルURLを指 定。 • レイヤーの定義 Øbackgroundレイヤーで背景⾊を ライトグレー(#e0e0e0)に設定。 Øosm-tilesレイヤーで定義したXYZ タイルを地図に表⽰。

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

できた! 14

Slide 15

Slide 15 text

まとめ 15 • Bing MapsはAzure Mapsと統合する ØBing MapsもNative SDKは⾮推奨に。2028年6⽉に廃⽌。 • 無料で気軽に使えるOSSライブラリとしてMapLibreがある ØMapBoxのフォークなので、MapBoxとの互換性は⾼い • Styleの定義でAzure MapsのTilesも読み込める

Slide 16

Slide 16 text

ご清聴ありがとうございました。 16