OpenStreetMap and Mapbox

OpenStreetMap
とMapboxを
ASP.NET Core
web appで利用
する
地図アプリの基本とコンテンツの受け渡
し

Profile
2021/3/27
システム構築のプロセス評価、改善、策定、
開発フレームワークの設計、実装管理、プリ
セールスやプロジェクトの立ち上げなど
ブログ
http://blog.processtune.com
プロフィール
Tetsuro Takao on Facebook, Twitter
or http://mvp.Microsoft.com
コミュニティ
.NETラボの運営スタッフ
https://dotnetlab.connpass.com
Microsoft MVP
Developer Technologies
[July 2010 – June 2021]

地図アプリの基本
作成開始時のサービスへの登録
2021/3/27

Map APIs
各サービスの仕組み
2021/3/27
エッジ側PC
token
token
token

Google Maps Platform API
2021/3/27
クレジットカードの登録が必要ですが、
月300ドル（2021年3月時点最新情報）
まで無料枠が付きます

Google Maps Platform APIのコスト
2021/3/27

Microsoft Azure MapsとBing Maps
2021/3/27

Microsoft Azure MapsのFree枠
2021/3/27
月に25万件の基本的なマッピングおよびトラフィックのトランザクションが提供
され、さらに5,000件のタイムゾーンクエリ、および25,000件の他のすべての
サービスのクエリが提供され、1秒間に50件以下のクエリに制限されます。

Bing Mapsのカバレッジ
2021/3/27

Mapbox
2021/3/27
Mapbox Streetsタイルセットを使用する際は、MapboxとOpenStreetMapに帰属していること
を明示する必要があります。また、それらの明示にはMapbox、OpenStreetMapおよび
Improve this mapのリンクを含む必要があります。

Google
2021/3/27
開発者のアカウント管理
ダミーデータ
ロードテストやサービスディスカ
バリーのブルーテストができない

Leafletを使う
JavaScriptライブラリ
2021/3/27

インフォメーション・アーキテクチャを理解する
コンテンツの配信と地図の利用の本質
2021/3/27

地図アプリが果たす役割
2021/3/27
位置五十音順
時系列分類
連続量

地図アプリのコンテンツ
2021/3/27
ロケーションのプロッ
ト
ポイント間の距離計算
経路探索
ロケーション・アドレ
ス変換
ストリートビュー
販売店
アルバ
ム・タ
イトル
発売日
ジャン
ル
連続量
アルバムの場合

地図アプリのコンテンツ
2021/3/27
ロケーションのプロッ
ト
ポイント間の距離計算
経路探索
ロケーション・アドレ
ス変換
ストリートビュー
配達先顧客名配達日
配達品目配達回数
配送サービスの場合

静的コンテンツの必要性
なぜ地図アプリに丸投げする部分が多い方がいいのか？
2021/3/27

Webサーバーは安くない
2021/3/27
• ストレージにコンテンツを配置するだけならスクリプトなどによる自動化が可能
Webサーバーのメンテナンス・コスト
• ストレージのコストに比べるとWebサーバーのホスティングは高額
Webサーバーのコンピューティング・コスト
• クラウド・ネイティブな環境では、Webサーバーの運用だけで制御はできないのでルーティングやロギ
ング、サービス・ディスカバリの構成管理はストレージより高コストになる
Webサーバーのスケーリング・コスト
• キャッシュや動的レンダリングに関してはWebサーバーは最適だが、静的コンテンツの配信に関して
はWebサーバーでなくともストレージが行える
Webサーバーの静的コンテンツの配信コスト

Webpack, Browserify or Blazor WebAssembly
2021/3/27
依存機能へのパスの解決が必要なシーン ≒ 静的HTMLのホスティング
CDNが用意されているライブラリを使う CDNを構築する
BlogやSPAなど
SPAs App modules Renderers

地図アプリのデータを作成する
インフォメーション・アーキテクチャに則ったモデリングを行う
2021/3/27

サンプル作成→実行
2021/3/27

デバッグ（ブレークポイントの追加と変数の内容確
認）
2021/3/27

デバッグ（ファイルの読み込みとリスト表示）
2021/3/27
nullだった変数にリストが入る

ページの追加（アイコンの選択）
2021/3/27

ページの追加（ナビゲーションバーの設定）
2021/3/27

ページの追加（ページの追加と表示の確認）
2021/3/27
@page "/leafletmap“
<h1>Leafletの地図</h1>

ページの追加（Blazorの処理順）
2021/3/27
Program.cs
•Main
•_imports.razor
•App.razor
Index.html
•header
•link
•script
Shared
•MainLayout.razor
•…css
•…razor（MainLayout
の部品）
WebAssembly
表示
•LeafletMap.razor

ページの追加（Mapboxポータル：Dashboard）
2021/3/27

ページの追加（Mapbox APIのCDN）
2021/3/27
Program.cs
• Main
• _imports.razor
• App.razor
Index.html
• header
• link
• script
Shared
• MainLayout.razor
• …css
• …razor（MainLayoutの部
品）
WebAssembly
表示
• LeafletMap.razor

ページの追加（Mapbox APIの呼び出し）
2021/3/27
Program.cs
• Main
• _imports.razor
• App.razor
Index.html
• header
• link
• script
Shared
• MainLayout.razor
• …css
• …razor（MainLayoutの部
品）
WebAssembly
表示
• LeafletMap.razor

ページの追加（index.htmlのheadタグ）
2021/3/27

ページの追加（ページレンダリング後のMapbox API呼び出
し）
2021/3/27

タイルの変更とオープンデータの利用
2021/3/27
function renderingMap() {
lat = 35.661971;
lon = 139.703795;
userDistance = null;
mymap = L.map('mapid').setView([lat, lon], 10);
var base = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativ
ecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoidGV0c3Vyby10YWthbyIsImEiOiJja2IxbTA5dGwwMXNzMnBxenM0eTQ4MW11In0.wEJvokR0fJkTptr9utKL7g'
}).addTo(mymap);
if(userDistance == null){userDistance = 5;}
previewCircle = L.circle([lat, lon], userDistance * 1000, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
});
previewCircle.addTo(mymap).bindPopup("距離[" + userDistance + " km]");
mymap.on('click', onMapClick);
};
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-
xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-
gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

Reference
2021/3/27
dotnet new
https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-new
ASP.NET Core Blazor WebAssembly をデバッグする
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/debug?view=aspnetcore-5.0&tabs=visual-studio
OPEN ICONIC
https://useiconic.com/open
ASP.NET Core Blazor で .NET メソッドから JavaScript 関数を呼び出す
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0

OpenStreetMap and Mapbox

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to OpenStreetMap and Mapbox

Similar to OpenStreetMap and Mapbox (20)

More from Takao Tetsuro

More from Takao Tetsuro (20)

Recently uploaded

Recently uploaded (9)

OpenStreetMap and Mapbox

Editor's Notes