MapLibreで地図サイトをつくる！

MapLibreで地図サイトをつくる！諸国・浪漫 / OpenStreetMap Foundation 坂ノ下勝幸 facebook: K.Sakanoshita /
Twitter: @K_Sakanoshita

P.2 自己紹介 - 坂ノ下勝幸 ◼ 主な所属コミュニティ・団体 ⚫ OpenStreetMap Foundation
Japan 理事 ⚫ Code for OSAKA 理事/Code for Harima,Kusatsu ⚫ 淀川アートネット ⚫ 諸国・浪漫 / etc.. ◼ 主な活動内容 ⚫ マッピングパーティの開催および協力 ⚫ ウィキペディアタウンの開催および協力 ⚫ オープンソース/データの活用（アプリ開発など） ◼ 目指していること ⚫ 地元の情報は、自分たちで発信する文化を作る ⚫ 現場こそ最強のツールとデータが使えるように P.2

P.3 これまで開発したアプリ ◼ カスタムマップを作る「まち歩きマップメーカー」 ◼ 図書館に寄せられた思い出マップやアートフェスマップ P.3

P.4 アプリを活用した活動も P.4

P.5 ワークショップの流れ P.5

P.6 ワークショップの流れ ◼ 環境構築を始めよう ⚫ Visual Studio CodeとGitのインストール（無い方） ◼ 簡単な地図アプリをつくろう
⚫ 地図を表示するコードを入力 ⚫ ピンの表示するコードを入力 ◼ アプリをカスタマイズしよう ⚫ GitHubからforkし、手元の環境にClone ⚫ 設定ファイルを編集してマップをカスタマイズ ◼ 成果発表 ⚫ 各自で開発したアプリの発表 P.6

P.7 環境構築を始めよう P.7

P.8 環境構築 ◼ Gitのインストール ⚫ https://gitforwindows.org/ ⚫ インストール後、以下のコマンドを実行しておく ✓ git
config --global user.email “自分のメールアドレス” ✓ git config --global user.name “自分の名前(GitHub上)" ◼ テキストエディタ ⚫ 推奨はVisual Studio Code（Git、簡易Webサーバも動くため） ◼ Webブラウザ ⚫ Google Chromeが一般的だがFirefoxでの動作確認も重要です ⚫ 両ブラウザは、CSSの初期値やフォントが少し異なるようで片方の初期値に依存しないよう両方での確認が必要です P.8

P.9 簡単な地図アプリをつくろう P.9

P.10 地図アプリの仕組み P.10 Webブラウザ（Chrome/Firefoxなど）あなたが作るアプリタイルサーバー（地図配信）各社のCDN （ライブラリ配布） MapLibre
GL JS ・地図を表示するためのライブラリ Bootstrap ・画面のスタイルを整えるライブラリその他・多言語対応、jQueryなどのライブラリ

P.11 MapLibre GL JSとは P.11 Webブラウザで地図を表示するためのJavaScriptライブラリ 2Dまたは3D地図の表示、様々なデータ表現も可能でありながら、誰でも自由（無料の意味も含む）に利用することが出来る

P.12 1.まずは地図表示 ◼ 以下のプログラムを入力しよう（ちょっと長いけど） P.12 <html> <head> <title>サンプル</title> <link rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" /> <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script> </head> <body> <div id="map" style="height: 100%;width: 100%;"></div> <script> var map = new maplibregl.Map({ container: 'map', style: 'https://k-sakanoshita.github.io/community_mapmaker/tiles/osmfj.json', // スタイル center: [135.4110, 34.6381], // 座標 zoom: 16, // ズームレベル pitch: 30 // 傾き }); </script> </body> </html>

P.13 1.まずは地図表示の簡単な解説 ◼ 地図を表示させるだけなら簡単 P.13 <html> <head> <title>サンプル</title> <link rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" /> <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script> </head> <body> <div id="map" style="height: 100%;width: 100%;"></div> <script> var map = new maplibregl.Map({ container: 'map', style: 'https://k-sakanoshita.github.io/community_mapmaker/tiles/osmfj.json', // スタイル center: [135.4110, 34.6381], // 座標 zoom: 16, // ズームレベル pitch: 30 // 傾き }); </script> </body> </html> MapLibreを読み込む地図を表示させる画面表示サイズを指定

P.14 注意すること ◼ 以下のスタイルの指示に沿って地図を表示する ◼ 上記のスタイルについて ⚫ 一般社団法人OpenStreetMap Foundation Japanが無償提供している
地図配信サーバーを利用しています。あまり負荷を与えなければ誰でも許可を得ず利用しても構わないので、ご利用ください ✓ 使う時は、上記のosmfj.jsonをダウンロードしてから使うようお願いします今回はファイルのダウンロードが手間なので直接書いています ◼ 地図配信サーバについて ⚫ 世界で一番使われているのは恐らくGoogle Mapsかと思われますが、 MapBox社、MapTiler社など、各種企業が地図配信サーバーを提供しているので、ビジネスなどで本格的に利用を始める時は、自分にあった地図配信サーバーを提供している会社と契約してください P.14 style: ‘https://k-sakanoshita.github.io/community_mapmaker/tiles/osmfj.json’

P.15 2.地図にマーカーを追加してみよう ◼ 赤枠の箇所を追加入力してみよう P.15 <html> <head>(head部分は変更無し)</head> <body> <div id="map"
style="height: 100%;width: 100%;"></div> <script> var map = new maplibregl.Map({ container: 'map', style: 'https://k-sakanoshita.github.io/community_mapmaker/tiles/osmfj.json', // スタイル center: [135.4110, 34.6381], // 座標 zoom: 16, // ズームレベル pitch: 30 // 傾き }); // マーカーの作成 var marker = new maplibregl.Marker() .setLngLat([135.4110, 34.6381]) .addTo(map) </script> </body> </html> マーカーの追加処理緯度経度を指定して追加

P.16 3.マーカーにポップアップを追加しよう ◼ 赤枠の箇所を追加入力してみよう P.16 <body> <div id="map" style="height: 100%;width:
100%;"></div> <script> var map = new maplibregl.Map({ (map部分の処理は変更無し) }); // ポップアップの設定 var popup = new maplibregl.Popup({ offset: 25, // ポップアップの位置 closeButton: false, // 閉じるボタンの表示 }).setText('こんにちは') // マーカーの作成 var marker = new maplibregl.Marker() .setLngLat([135.4110, 34.6381]) .setPopup(popup) .addTo(map) </script> </body> ポップアップの追加処理ポップアップ内容の設定

P.17 4.マーカーアイコンを変えてみよう① ◼ キーワード検索してアイコン画像を入手しよう ⚫ 「電車アイコン」（他にも駅アイコンなどお好きにしてください） ⚫ 個人使用＆非公開なので、著作権はあまり気にしなくてもOK ✓ 第三者にサービスとして公開する場合、権利関係はしっかり確認しましょう
◼ お気に入りの画像が見つかったらダウンロード ⚫ 適当にファイル名を付けて、index.htmlと同じ場所に保存 P.17

P.18 4.マーカーアイコンを変えてみよう② ◼ 赤枠の箇所を追加入力してみよう P.18 <script> var map = new
maplibregl.Map({ (map部分の処理は変更無し) }); // アイコンの設定 var icon = document.createElement(‘div’); icon.innerHTML = “<img src='train.png' style='width: 32px'>"; // ポップアップの設定 var popup = new maplibregl.Popup({ offset: 25, // ポップアップの位置 closeButton: false, // 閉じるボタンの表示 }).setText('こんにちは'); // マーカーの作成 var marker = new maplibregl.Marker({ element: icon }) .setLngLat([135.4110, 34.6381]) .setPopup(popup) .addTo(map) </script> アイコン画像の指定アイコン画像をHTMLで指定

P.19 5.駅のアイコンを追加してみよう① ◼ 駅のデータを検索してダウンロードします ◼ 以下のサイトを開きます。ATCの近くへ移動してください ⚫ https://overpass-turbo.eu/ ◼ ウィザードボタンを押し、「railway=station」と入力して
「クエリを作成して実行」ボタンを押します P.19

P.20 5.駅のアイコンを追加してみよう② ◼ 駅データが表示されたら「エクスポート」ボタンを押して、「GeoJson」でダウンロードします ◼ ダウンロード後、index.htmlと同じフォルダに移動させて、 export.geojsonのファイル名を「data.js」に変更します P.20

P.21 5.駅のアイコンを追加してみよう③ ◼ 「data.js」を開き、一行目に「var datas =」を書きます P.21 var datas =
{ "type": "FeatureCollection", "generator": "overpass-turbo", "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.", "timestamp": "2024-05-18T17:08:16Z", "features": [ { "type": "Feature", "properties": { "@id": "node/346493769", "light_rail": "yes", "name": "中ふ頭", "name:en": "Nakafuto", 一行だけ先頭行に追加する

P.22 5.駅のアイコンを追加してみよう④ ◼ Index.htmlに書いたアイコン設定～マーカー作成の部分を「sub.js」ファイルに移動させ、以下のように編集しよう P.22 // アイコンを作る function makeIcon(data)
{ // アイコンの設定 var icon = document.createElement('div'); icon.innerHTML = "<img src=‘train.png' style='width: 32px'>"; // ポップアップの設定 var popup = new maplibregl.Popup({ offset: 25, // ポップアップの位置 closeButton: false, // 閉じるボタンの表示 }).setText(data.properties.name); // マーカーの作成 var marker = new maplibregl.Marker({ element: icon }) .setLngLat(data.geometry.coordinates) .setPopup(popup) .addTo(map) } 3つの処理を関数化する data内のnameを表示 data内の緯度経度を指定

P.23 ◼ 「sub.js」の後、index.htmlを以下のように書き換えようちゃんと駅のマーカーが表示されるかな？ <script> var map = new maplibregl.Map({
(map部分の処理は変更無し) }); datas.features.forEach(data => makeIcon(data)) </script> 5.駅のアイコンを追加してみよう⑤ P.23 datasを一件ずつ取得してmakeIcon処理を呼び出す

P.24 サンプルアプリの配布 P.24

P.25 サンプルアプリ ◼ Community Mapmaker ⚫ https://github.com/K-Sakanoshita/community_mapmaker ⚫ ご自身のリポジトリにforkしてPCにCloneしてください ⚫
Visual Studio CodeのLive Serverなどで実行させてください ◼ サンプルアプリの概要 ⚫ OpenStreetMapのデータベースをリアルタイムで取得した上で指定したデータに絞り込んでアイコン表示を行う汎用アプリ ⚫ Google Spreadsheetと連携して、OpenStreetMapの施設情報と別に用意したデータ（イベント情報や写真など）と組み合わせて地図上に表示する機能もある ◼ 活用例 ⚫ 十三アートフェスマップ、大阪思い出残しマップ ⚫ 遊具のある公園マップなど P.25

P.26 サンプルアプリの構成 ◼ ライブラリ ⚫ maplibre-gl 今回の主役1 ⚫ jquery Bootstrap4が必要なので残っています
⚫ Bootstrap4 Web画面のCSSフレームワーク ⚫ Osmtogeojson Overpass APIで取得したデータの変換 P.26

P.27 サンプルアプリの構成 ◼ サンプルアプリ ⚫ dataフォルダ ✓ config-user.jsonc アプリの設定が書かれたファイル ✓
category-ja.json OpenStreetMapのタグから種類名を判別するファイル ✓ marker.json OpenStreetMapのタグからアイコンを判別するファイル ✓ overpass-custom.json Overpass APIを呼び出す命令が書かれたファイル ✓ style.json MapLibreで地図を表示するためのスタイルファイル ⚫ libフォルダ ✓ Basiclib.js 汎用的な処理を書いたライブラリ ✓ winlib.js 画面操作などちょっとしたライブラリ ✓ geolib.js MapLibre操作などちょっとしたライブラリ ✓ poilib.js 地図に表示するマーカーを管理 ✓ overpasslib.js 今回の主役2「Overpass API」を操作 ⚫ cmapmaker.js アプリの本体プログラム ⚫ initialize.js アプリの初期化プログラム P.27 その他 Image:画像 maki-icon:アイコン

P.28 地図表示の基本 P.28

P.29 地図を表示するスタイル ◼ MapLibreは様々なタイルサーバに対応している ⚫ 今回はラスタタイルとベクタタイルの設定方法を説明する ✓ ラスタタイル：256px * 256px
の地図画像（要するにドット絵） ✓ ベクタタイル：3D演算して都度描画する画像 ⚫ 地図の表示は「new maplibregl.Map(パラメータ)」で出来る ✓ 実行結果を map 変数などに入れておく（マーカー追加などで利用する） ⚫ 地図表示のスタイルは tilesフォルダ内のosmfj.json で指定地図表示のカスタマイズは手間なので扱いに慣れてきたら調べてみよう P.29 【geolib.js】地図表示エリアの設定（init内） this.map = new maplibregl.Map({ "container": 'mapid', "style": this.styles[this.selectStyle], "maxZoom": Conf.maxZoom, "zoom": Conf.initZoom, "antialias": true, "hash": true, "center": Conf.initView });

P.30 スタイルファイルの概要説明 ◼ スタイルファイルはsourceとlayersエリアの設定が大事 ⚫ タイルサーバーを提供している会社は、このファイルを作るためのスタイル編集ツール（マウス操作で楽々設定）を提供しているラスタタイル設定はconfig-system.jsonの「OSM_Standard」参照 P.30 {
“style”: { “version”: 8, // 8固定 “sources”: { “ソース名”: { // ソース名は自分で決めて良い url: “タイルサーバのurl”, “type”: “vector” // ベクタタイルサーバは”vector” } }, “layers”: { { 背景の設定 }, // レイヤー設定がいろいろ { 土地利用の設定 } } }

P.31 OpenStreetMapのAPI P.31

P.32 OpenStreetMapのデータについて ◼ OpenStreetMapのデータは「ODbL」と呼ばれるライセンス ⚫ 基本的には「＠OpenStreetMap Contributors」の著作権帰属表示をする以外は自由に使えます（商用利用も含めて好きに出来る） ⚫ データベースからデータを一部抜き出した場合もODbLが適用され
ますが、その「データを使って地図などの派生物を作った場合」は制作著作物となり、作者が自由にライセンスを付けることが出来る ⚫ 例えば、OpenStreetMapのデータをもとに地図画像を作った場合、作った人がライセンスを決められる（コピー不可とするのも可能） ✓ Tシャツなどのグッズ、作曲・歌詞の元ネタ、アート作品なども同様 ✓ データと作品を分けて扱えるので、商用利用時の自由度が高まっている ✓ 参考） https://qiita.com/nyampire/items/b0cbdd142d76bcc66d9c P.32

P.33 OpenStreetMap本家API ◼ 地図を編集するためのAPIが用意されている ⚫ 編集履歴などのメタ情報も取得が出来るが、今回は扱わないAPI ⚫ 興味がある人はWikiを参照のこと（地図編集ソフトが作れるよ） ✓ https://wiki.openstreetmap.org/wiki/JA:API_v0.6
P.33 拙作Easy Changeset Viewer https://k-sakanoshita.github.io/ Easy_Changeset_Viewer 地図の編集履歴を地図に可視化誰がどこを編集したか丸わかり

P.34 Overpass API ◼ OSM地図データから個別に選択された部分を取り出すAPI ⚫ Web APIによる地理空間データベースとして提供されている ⚫ 読み取り専用だが、ユーザー認証が不要なので気軽に使える
◼ OpenStreetMap公式のOverpass APIは提供されていない ⚫ ドイツやフランス、ロシアの企業や団体が個別に提供されている ⚫ OSM WikiにOverpass API提供サーバーの一覧がある ✓ https://wiki.openstreetmap.org/wiki/Overpass_API ⚫ 日本国内でテスト運用しているサーバーもある ✓ https://overpass.openstreetmap.jp/ ⚫ いずれも無料で使えるが、常識の範囲内での利用が良い ✓ ドイツのサーバはよく使われる半公式な存在だが、短時間で何度も APIを叩くと、1分ほどアクセスを拒否されるなど制約もある P.34

P.35 Overpass QL ◼ Overpass APIはWeb APIで公開されている ◼ サーバAPIアドレス以降に下記のパラメータを指定する ⚫
?data=[out:json][timeout:30][bbox:Area];(Query);out body meta;>;out skel;`; ⚫ Area 緯度経度（例） [bbox: 34.75,135.32,34.77,135.35] ⚫ Query検索条件（例） node["leisure"="park"]; 上記のQuery言語のことをOverpass QLと呼ぶ P.35 ノード（点）の公園を探す北西の緯度経度と南東の緯度経度で四角い範囲を返す // overpass.js より let LL = mapl.getLL(), query = ""; let maparea = LL.SE.lat + ',' + LL.NW.lng + ',' + LL.NW.lat + ',' + LL.SE.lng; overpass.forEach(val => query += val + ";"); let url = Conf.OverPassServer + `?data=[out:json][timeout:30] [bbox:${maparea}];(${query});out body meta;>;out skel;`; console.log("OverPassControl: getGeojson: " + url);

P.36 Overpass Turboで遊んでみよう ◼ Overpass QLを触れる以下のサイトを開こう ⚫ https://overpass-turbo.eu/ ◼ 大阪市へ移動し、「ウィザード」ボタンを押す
◼ 「toilets in osaka」と入力し、クエリを作成して実行を押す P.36 toilets in osaka 「クエリを作成して実行」を押す

P.37 Overpass QL ◼ Overpass QLは様々な機能が用意されている詳しくはWiki ⚫ https://wiki.openstreetmap.org/wiki/JA:Overpass_API/Overpass_QL ⚫ Chat
GPT便利。例「大阪市内の図書館を出すOverpass QLを教えて」 ◼ 基本的なクエリの書き方 ⚫ node or way or relation[key=value] ✓ node : 点 ✓ way : 線・エリア ✓ relation : 組み合わせ ✓ key=value : OSMのタグ（key=value形式） ⚫ OSMのタグは下記参照 ✓ https://wiki.openstreetmap.org/wiki/JA:Map_Features ✓ 世界中のあらゆる動かないものをマッピング出来るよう日々見直し中 P.37 地図は、点、線、エリアの組み合わせで作られている

P.38 サンプルアプリの設定 ◼ dataフォルダ内のoverpass-custom.jsonを参照初期設定では、店舗と工房を表示するよう設定している P.38 { "osm": { "stores":
{ "overpass": [ "nwr[¥"shop¥"]", "nwr[¥"craft¥"]" ], "tags": [ "shop", "craft" ], "expression": { "stroke": "#c0c0c0", "stroke-width": 1 }, "titles": [ "name", "operator" ] } } } OpenStreetMapのタグがshop or craftを検索 nwrは点と線とエリア全てを意味する上記で検索した結果から指定したタグのデータだけを絞り込む設定取得した施設や店舗がエリアの場合、枠を指定した色で塗る

P.39 今回作るWebアプリについて P.39

P.40 （再掲）サンプルアプリの構成 ◼ サンプルアプリ ⚫ dataフォルダ ✓ config-user.jsonc アプリの設定が書かれたファイル ✓
category-ja.json OpenStreetMapのタグから種類名を判別するファイル ✓ marker.json OpenStreetMapのタグからアイコンを判別するファイル ✓ overpass-custom.json Overpass APIを呼び出す命令が書かれたファイル ✓ style.json MapLibreで地図を表示するためのスタイルファイル ⚫ libフォルダ ✓ Basiclib.js 汎用的な処理を書いたライブラリ ✓ winlib.js 画面操作などちょっとしたライブラリ ✓ geolib.js MapLibre操作などちょっとしたライブラリ ✓ poilib.js 地図に表示するマーカーを管理 ✓ overpasslib.js 今回の主役2「Overpass API」を操作 ⚫ cmapmaker.js アプリの本体プログラム ⚫ initialize.js アプリの初期化プログラム P.40 その他 Image:画像 maki-icon:アイコン

P.41 サンプルアプリの構成 ◼ サンプルアプリの構成は以下のイメージ P.41 initialize.js ライブラリの読み込み設定ファイルの読み込み地図初期化、イベント登録 cmapmaker.js
地図画面上にあるボタンやマーカーから呼び出される winlib.js geolib.js poilib.js overpasslib.js listllib.jsなど cmapmaker.jsから必要に応じて呼び出される maplibre-gl MapLibreはmaplib.js/経由で間接的に呼び出すタイルサーバ Overpassサーバ

P.42 アプリを開発してみよう P.42

P.43 何を開発するか考える ◼ しばらくサンプルアプリを遊んでみよう ⚫ 不便な所、機能を追加したい所を考えてみよう ⚫ 遊具以外に表示したい地物（アイコン）を考えてみよう ◼ 表示したいアイコンを思いついた方
⚫ 以下のサイトを開き、OSMタグを調べてみよう ⚫ https://wiki.openstreetmap.org/wiki/JA:Map_Features ✓ 例えばトイレは「amenity=toilets」でマッピング ✓ 消火器、自動販売機、ベンチ、ゴミ箱などもあります ✓ 好きな組み合わせもOK。どんなマップを作りますか？ P.43

P.44 みんなで発表しましょう ◼ どんなアプリを作りたいか話しましょう ⚫ まずはアプリのタイトル名 ⚫ 次に何を地図に表示したいか ⚫ 他にも欲しい機能など
P.44

P.45 まずはサイトタイトルの変更 ◼ サイトタイトルを変更 ⚫ index.htmlのタイトルタグを変更しよう ◼ 説明文の見直し ⚫ config.jsonのaboutTitle～licenceMessageを変更しよう
✓ メニューやタイトルをクリックした時のメッセージが変化します ✓ cmapmaker.jsのviewMessageで表示させているので確認してみよう ◼ メニューの追加、変更 ⚫ config.jsonのmenuを参考に、メニューを変更して見よう ⚫ メニュー表示は「画面左上」と「詳細表示の画面左上」がある ✓ 画面左上は“menu“、「詳細表示の画面左上」は”detailMenu”で変更できる P.45

P.46 表示させる地物の変更 ◼ 表示させる地物を変更する ⚫ ./data/overpass.json のタグを見直そう ✓ 複数のタグを書いた場合、「and」では無く「or」でクエリは計算される ⚫
tags内の書式は「overpassから取得したデータの絞り込み用」 ✓ 例えば、「amenity」で取得すると本当に様々なデータが取得される ✓ この場合、tagsで「amenity=toiltes」と書けばトイレだけ絞り込みが出来る ⚫ expressionの書式はラインの描画用 ✓ 敷地（way or relation）の場合、自動的にラインを書くので、その描画色を指定する ※塗りつぶしは行いません P.46 "tags": [ "leisure=park", "leisure=playground", "landuse=recreation_ground", "playground" ], "expression": { "stroke": "#409040", "stroke-width": 2 }

P.47 マップコントロールの追加 ◼ MapLibreには任意のコントロールを追加出来る ⚫ 以下のコードをinitialize.jsに追加するとhelloが左上に表示される入力画面や表示エリアを追加して、もっと分かりやすいアプリを目指してみるのも良い P.47 //
basehtmlに代入したHTMLを画面の左上に追加するサンプル mapLibre.addControl( “top-left”, // 表示位置 bottom-right:右下 “baselist”, // 配置したDOMのIDを指定する “<div>hello</div>”, // 追加したいHTML “mapLibre-control m-0 p-0“ // 配置したDOMのCSSを指定する );

P.48 マップコントロールの追加 ◼ アイコン情報の一覧表示方法 ⚫ デベロッパーツール（F12）を開き、以下を入力してみる ⚫ アイコンのID、名称、種別、緯度経度を配列で返してくれる ⚫ 画面左上のリスト表示に利用しているが、より高度な検索や
分析や画面表示に利用しても良いかも知れません P.48 poiCont.makeList([“stores”]) storesはoverpass-custom.jsoncで指定されたターゲット名のこと

P.49 他にも機能や設定があります ◼ 処理中を示すアニメーション制御 ◼ config-user.json で設定可能な項目 ◼ その他 ⚫
アイコンのファイル名は ./data/marker.json で指定 ⚫ 「公園」などの種別名は ./data/category-ja.json で指定 P.49 winCont.spinner(true); // falseにすると消える "splashUrl": "./image/Playgrounds.png", “initZoom”: 14, // 初期ズーム(大きいほどズームする) “maxZoom”: 21, // 最大ズーム(21だと一軒家レベル) “viewCenter”: [ // 初期表示の緯度経度 135.4828, 34.7212 ], “PoiZoom”: “stores”: 13, // アイコンを表示し始めるズーム

P.50 その他にもいろいろ「こんなことやりたい」など気軽にご相談ください P.50

P.51 成果発表！ P.51

P.52 作ったアプリの発表会 ◼ さて、何処まで出来たでしょうか？ ⚫ みんなで作った所、苦労した所を発表しましょう ⚫ 今後作りたい機能、良くしたい機能も話しましょう ◼ ん？自分の街のデータが足りない？
⚫ 自分たちでOpenStreetMapにマッピングしたら、みんなの役に立つので、ぜひとも一緒にマッピングしましょう P.52

P.53 参考情報 ◼ OSM Wiki(Overpass API/QL) ⚫ https://wiki.openstreetmap.org/wiki/Overpass_API ⚫ https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL
◼ Overpass関連の説明記事 ⚫ https://qiita.com/K-Sakanoshita/items/0c610d76bba2e7245ea5 ⚫ https://qiita.com/Aruneko/items/ef2e7efb4925a2f8515f ◼ MapLibre(Official Site) ⚫ https://maplibre.org/maplibre-gl-js/docs/API/ ⚫ MapLibreで使えるベクタタイルサーバ（OSMFJ提供） ✓ https://wiki.openstreetmap.org/wiki/Japan/OSMFJ_Tileserver P.53

P.54 参考情報（続き） ◼ OpenStreetMap ⚫ 世界がOpenStreetMapを必要とする理由 https://qiita.com/nyampire/items/073c850f083cf9fb8d35 ⚫ learn OSM（はじめてからのOpenStreetMapガイド）
https://learnosm.org/ja/ ◼ 講師（坂ノ下）のサイト ⚫ GitHub K-Sakanoshita https://github.com/K-Sakanoshita ✓ OpenStreetMapを駆使したWebアプリを公開中 ⚫ まち歩きマップメーカー（自由に加工＆使える地図画像を作る） https://armd-02.github.io/mapmaker/ ⚫ コミュニティマップメーカー https://github.com/K-Sakanoshita/community_mapmaker P.54

MapLibreで地図サイトをつくる！

MapLibreで地図サイトをつくる！

More Decks by K.Sakanoshita

Featured

Transcript