Slide 1

Slide 1 text

MAUIで Azure Mapsの表示 2024/6/22 .NETラボ 2024年6月 当日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/ https://confengine.com/conferences/xp2024 XP祭り2024 2024年9月28日(土)開催 ConfEngineにて コンテンツ募集中

Slide 4

Slide 4 text

MAUIでの地図表示 4 • Maui Maps(Maui 公式の地図機能) ➢https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/map • ArcGIS Maps SDK for .NET ➢https://www.esrij.com/products/arcgis-maps-sdk-for-dotnet/ • ThinkGeo Mobile Maps ➢https://thinkgeo.com/mobile-maps • Ignite UI for Blazor Map ➢https://jp.infragistics.com/products/ignite-ui- blazor/blazor/components/geo-map • Mapbox SDK for .NET MAUI ➢https://github.com/tuyen-vuduc/mapbox-maui • MapsUI ➢https://github.com/Mapsui/Mapsui

Slide 5

Slide 5 text

Mapsui 5 • 様々な.NETのフレームワークに対応したMapコンポーネント ➢MAUI, WPF, Avalonia, Uno, Blazor, WinUI, Eto, .NET Android and .NET iOS • OpenStreeetMapの表示に対応 • SkiaSharpにより地図描画を実現 • NetTopologySuiteによる2次元線形ジオメトリをサポート • BruTileによるタイルサービスへのアクセスをサポート

Slide 6

Slide 6 text

QuickStart で OpenStreetMapを表示 6 public MainPage() { InitializeComponent(); var mapControl = new Mapsui.UI.Maui.MapControl(); mapControl.Map?.Layers.Add( Mapsui.Tiling.OpenStreetMap.CreateTileLayer()); Content = mapControl; }

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

Mapsuiはオープンソース 8 OpenStreeetMapsのデータ取得は どうしているのだろうか?

Slide 9

Slide 9 text

Mapsui.Tiling.OpenStreetMapのソース 9 なんかみたことある! /{z}/{x}/{y}.png

Slide 10

Slide 10 text

10 Azure Maps にもタイル取得のAPIはある https://atlas.microsoft.com/map/tile?api-version=2022-08- 01&tilesetId={tilesetId}&zoom={zoom}&x={x}&y={y} { "version": 8, "name": "Azure Maps Style", "sources": { "azure-maps": { "type": "raster", "tiles": [ "https://atlas.microsoft.com/map/tile?subscription-key=SecretKey&api-version=2022-08-01&tilesetId=microsoft.base.hybrid.road&zoom={z}&x={x}&y={y}" ], "tileSize": 256 } }, "layers": [ { "id": "azure-maps-layer", "type": "raster", "source": "azure-maps", "minzoom": 0, "maxzoom": 22 } ] } 再掲

Slide 11

Slide 11 text

internal static class AzureMap { public static IPersistentCache? DefaultCache; public static TileLayer CreateTileLayer(string? userAgent = null) { userAgent ??= $"user-agent-of- {Path.GetFileNameWithoutExtension(System.AppDomain.CurrentDomain.FriendlyName)}"; return new TileLayer(CreateTileSource(userAgent)) { Name = "AzureMaps" }; } private static HttpTileSource CreateTileSource(string userAgent) { return new HttpTileSource(new GlobalSphericalMercator(), "https://atlas.microsoft.com/map/tile?subscription-key=xxxxx&api-version=2022-08- 01&tilesetId=microsoft.base.road&zoom={z}&x={x}&y={y}", name: "AzureMaps",userAgent: userAgent, persistentCache: DefaultCache); } }

Slide 12

Slide 12 text

12 microsoft.imagery microsoft.base.road microsoft.base.darkgrey

Slide 13

Slide 13 text

MAUIで Azure Mapsの表示 2024/6/22 .NETラボ 2024年6月 当日LT NTTテクノクロス 中島進也(なかしょ)

Slide 14

Slide 14 text

まとめ 14 • MAUIで地図表示できるライブラリは色々ある • OSSで気軽に使えるのはMapsui ➢Azure MapsのTilesも読み込める

Slide 15

Slide 15 text

おまけ 過去にも発表していました 15

Slide 16

Slide 16 text

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