ハンズオン資料
MapLibre GL JSとOverpass APIでWebアプリを作る諸国・浪漫 / OpenStreetMap Foundation 坂ノ下 勝幸facebook: K.Sakanoshita / Twitter: @K_Sakanoshita
View Slide
P.2自己紹介 - 坂ノ下 勝幸◼主な所属コミュニティ・団体⚫ OpenStreetMap Foundation Japan⚫ Code for OSAKA/Kusatsu/Harima/Suita⚫淀川アートネット⚫諸国・浪漫 / etc..◼主な活動内容⚫マッピングパーティの開催および協力⚫ウィキペディアタウンの開催および協力⚫オープンソース/データの活用（アプリ開発など）◼目指していること⚫地元の情報は、自分たちで発信する文化を作る⚫現場こそ最強のツールとデータが使えるようにP.2
P.3オープンデータって？
P.4オープンデータって？◼オープンデータは利用規約の一種⚫データ（文書、写真など）を何処まで使って良いかを決めたルールのこと⚫「自由に使える」がオープンデータ◼オープンデータは誰のもの？⚫作った人や組織の著作物⚫著作権の枠組みに則った「自由」⚫「守るべきルール」はちゃんとあるP.4官民データ活用推進基本法で国と地方自治体はオープンデータに取り組む義務がある
P.5著者の知識と想いを伝える方法◼筆者の知識と想いを本にすると、時間と場所を超えて伝えられる◼活版印刷で本を量産出来た結果、多くの方たちに伝えられている◼国民の知る権利を補償するために「公共図書館」が存在しているP.5インターネットが登場するまでは主に本が知識と想いを伝えていた
P.6インターネットで伝え方が変化◼ Webサイト（ブログ、SNS）でも筆者の知識と想いを伝えられる◼ネット上の情報は失いやすい⚫ Yahoo!ジオシティーズも閉鎖⚫本は正しく保管すれば長持ちする◼コピーを保存していても、筆者しかどこまで使って良いかが判断出来ないP.6「伝わるけど残りにくい」ことと「残しても活かしにくい」時代へ
P.7オープンデータで残して伝える◼著作権は作者の権利を守る⚫基本的に作者の許可が必要⚫許可する範囲が違う可能性◼「残して伝える」を目的に⚫ブログもSNSも残りにくく、利用規約（ルール）が曖昧⚫オープンデータとして公開し、誰もが自由に活用出来るようにすると、残る可能性があるP.7オープンデータとして公開すると残して活かすことが出来る可能性
P.8「清水寺」は最初から世界遺産？◼清水寺の創建年代⚫「清水寺縁起絵巻」「今昔物語集」「扶桑略記」によれば、宝亀9年（778年）音羽山に着いた僧の賢心は、観音の化身から寺を任されたことが始まり◼清水の舞台から飛び降りた人⚫「成就院日記」によると、飛び降りは元禄7年(1694年)～元治元年(1864年)に未遂含む235件、生存率は85.4%P.8様々な事を記録、将来に残すことで地域の魅力や価値が生まれる可能性
P.9要するに◼「オープンデータ＝無料」では無い⚫「行政が公開している無料データ」の理解はよくある間違い⚫ FOSS4Gが目指す「Free」の思想に沿ったデータがその目的◼「オープンデータ＝自由」の意味⚫自由とは、時間や場所を超えて、世界中の方たちの想いや様々な活動を支えようとする考え方のこと。と、私は考えています。⚫一見無駄に見えるものの、100年後に価値が出る可能性がある✓ 何に価値を見出すか、それはその時の文化、経済、人の考え次第と言えるオープンデータで残し、将来に伝えていけたら将来の地域にとって大きな宝物になると思うP.9
P.10OpenStreetMapって？P.10
P.11OpenStreetMapのロゴ画像※3単語をまとめて1単語（スペース無し）最初にお伝えしたいこと◼ OpenStreetMapとは⚫何処かの企業の製品や提供しているサービスではありません⚫世界中のみんなと一緒に「地図」を作る国際プロジェクトです⚫ 2004年に英国から始まり、日本では2008年頃に始まりました◼みんなとは⚫個人、企業やNGO、NPOなどの組織も含みます⚫誰でも自由に参加出来るオープンな活動です◼ OpenStreetMapは誰のもの？⚫英国のOpenStreetMap Foundation（財団）がオープンデータ（ODbL）で提供していますP.11
P.12OpenStreetMapの「地図」とは◼単なる「地図」だと、使い道はそんなに多くはない⚫目に見えない人は「図」使えないし、トイレの情報が欲しい時にお店の情報が地図に表示されていると探しづらくなるよね？正確に言えばOpenStreetMapは地図と少し違います「地図を作るための情報を集めたデータベース」ですP.12
P.13◼ OpenStreetMapから必要なデータを取り出して活用する⚫データは様々な種類の地図、ゲーム、音声案内など何にでも使えるOpenStreetMapは地図じゃない？観光案内飲食店防災 ゲームWikipedia音声案内OpenStreetMapデータベースP.13
P.14他の地図でも良いのでは？◼ OpenStreetMap以外の地図じゃ出来ないの？⚫もちろん、地図やデータを他社に販売している会社もあります⚫そういったビジネスが行われているのは一般的に良くあります◼他の地図やデータはその会社の商品です⚫ビジネス上の理由で、一般人は地図アプリを無料提供している会社もありますが、あくまで無料なだけで自由には使えません⚫アプリは無料で使えても、地図を印刷してチラシ内に使ったり、データを抜き出すのは、ほとんどの地図で禁止されており、自由な地図ではありませんP.14
P.15自由な地図じゃなくても良いのでは？◼「自由な地図」で無くても、目的を達したら良くない？⚫はい。目的が達するなら、自由な地図で無くても構いません⚫ただ、「目的」とは何でしょうか。みんな目的は同じでしょうか◼人や地域には事情があるので、いろんな目的があります⚫需要が高い地図には様々な会社が参入するので、安くて充実したサービスが提供されますが、需要が少ない地図はどうでしょうか⚫また、地域の事情（人口、犯罪、災害など）、地図を使う方の事情（言語、文化、視聴覚、身体など）も考慮された地図は十分あるでしょうかP.15
P.16難しい話もあるけれど◼世界中のみんなで、一緒に世界地図に描いていき◼誰も思いつかなかった、新しい使い方を創造して◼様々な事情に対応した、地図やサービスが出来るそんな世界を目指すのがOpenStreetMapP.16
P.17OpenStreetMapが実現したいこと店舗情報背景地図店舗情報背景地図経路情報投稿情報経路情報大企業が提供している地図 OpenStreetMapと組み合わせた地図企業、団体、個人が必要な層を追加できる（車いす、アレルギー、保育園防災、防犯、歴史など）OpenStreetMap交通情報ベースはOpenStreetMap必要な所に注力出来るので大企業に限らず活用出来るP.17
P.18様々な活動を支えるデータの共同整備店舗情報背景地図経路情報OpenStreetMapと組み合わせた地図企業、団体、個人が必要な層を追加できる（車いす、アレルギー、保育園防災、防犯、歴史など）OpenStreetMap例えば、商店街のランチマップを作って印刷して配布する場合、道路や建物から地図を描いていくのはコストが掛かるそのため、様々な活動でも利用している基礎データ（道路や建物など）を共同で整備することで、コスト削減が出来るまた、地域に住んでいる方たちが地図を直接更新することで、バリアフリーなどきめ細かいデータの整備が行えるそして、マップを作る団体が活動停止しても、新しい団体が生まれた時は、そのデータを引き継いで活動が再開出来る国際プロジェクトなため、国境を超えた国際的なマップを作ることが出来るP.18
P.19すでに色んな所で使われています◼普通の人は「何処の地図」か気にしないので気づきませんゲームグッズ類ランチマップWikipediaまち歩きマップP.19バリアフリー
P.20要するに◼ OpenStreetMapは「地図では無い」⚫様々な方たちの想いを記録し続ける「データベース」が本質⚫地図は「主題（テーマ）」が重要だが、OpenStreetMapが地図では無いのは、「主題が存在していない」ことからも分かる◼一見無駄に見えるデータも残すことが出来る⚫文化が違うと理解が難しくなる。例えば「鳥居と門の違い」は？⚫ OpenStreetMapは、この違いもマッピングすることが推奨される⚫その上で、コミュニティ同士で多様性と標準化を話し合う◼ OpenStreetMapから地図を作ることが出来る⚫主題を持つことでOpenStreetMapから地図を作れる⚫世界中の人たちが日々更新し、様々な活動に活かす地理空間データベースのプラットフォームがOSMP.20
P.21サンプルアプリの配布P.21
P.22サンプルアプリ◼ Playgrounds-Easyのfork⚫ https://github.com/K-Sakanoshita/Playgrounds-Easy⚫ご自身のリポジトリにforkしてPCにCloneしてください⚫ Visual Studio CodeのLive Serverなどで実行させてください◼サンプルアプリの内容⚫別に開発している「遊具のある公園マップ」の簡易版⚫機能を極限まで削減して、ソースコードをシンプル化P.22
P.23サンプルアプリの構成◼ライブラリ⚫ maplibre-gl 今回の主役1⚫ jquery Bootstrap4が必要なので残っています⚫ Bootstrap4 Web画面のCSSフレームワーク⚫ Osmtogeojson Overpass APIで取得したデータの変換P.23
P.24サンプルアプリの構成◼サンプルアプリ⚫ dataフォルダ✓ config.json アプリの設定が書かれたファイル✓ category.json OpenStreetMapのタグから種類名を判別するファイル✓ marker.json OpenStreetMapのタグからアイコンを判別するファイル✓ overpass.json Overpass APIを呼び出すクエリー文が書かれたファイル✓ style.json MapLibreで地図を表示するためのスタイルファイル⚫ libフォルダ✓ winlib.js 画面操作などちょっとしたライブラリ✓ maplib.js MapLibre操作などちょっとしたライブラリ✓ poilib.js 地図に表示するマーカーを管理✓ overpasslib.js 今回の主役2「Overpass API」を操作✓ detaillib.js マーカーをクリックした時の詳細表示⚫ cmapmaker.js アプリの本体プログラム⚫ initialize.js アプリの初期化プログラムP.24その他Image:画像maki-icon:アイコン
P.25地図表示の基本P.25
P.26基本的な話をざっくりと◼地図を表示するにはタイルサーバが必要⚫ OpenStreetMapプロジェクト自体は、タイルサーバの提供は慎重✓ タイルサーバは、Maxbox社やMaptiler社などのサービス利用を推奨している✓ OpenStreetMap.orgサイト向けのタイルサーバは、常識の範囲内で利用可能✓ 詳しくは、OSM Wiki「JA:タイル利用規約」に書かれているので参照⚫ OpenStreetMap Foundation Japanが提供しているタイルサーバを利用✓ 日本国内のコミュニティ向けにタイルサーバの提供を行っている➢ https://tile.openstreetmap.jp/✓ 今回は3D地図を使うので、ベクタ形式のタイルサーバを利用する➢ 以前は2D地図（ラスタ形式）のタイルサーバが一般的だったサンプルアプリの「◆が重なったボタン」を押せばラスタタイルとベクタタイルの違いが分かりますP.26
P.27地図表示に使うライブラリ◼ MapLibre GL JS⚫ Mapbox社のMapbox GL JSのライセンス変更によってforkされた地図を表示するためのライブラリ⚫そのため、Mapbox GL JS向けのドキュメントでも基本的な所は共通点があるので、困ったことがあれば検索対象にするのも良い◼地図を表示するだけなら、かなりシンプルに書けるP.27【Index.html】スタイルシートとライブラリの読み込み ※地図を表示させる場所【maplib.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.28地図を表示するスタイル◼ MapLibreは様々なタイルサーバに対応している⚫今回はラスタタイルとベクタタイルの設定方法を説明する⚫地図の表示は「new maplibregl.Map(パラメータ)」で出来る✓ 実行結果を map 変数などに入れておく（マーカー追加などで利用する）style.jsonの設定は膨大。普通はスタイル編集ツールを使うP.28【maplib.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});【maplib.js】地図表示エリアの設定（init内）this.stylesの中身はconfig.jsonに記載されている内容を読み込んだもの最初のエントリ"OpenStreetMapJP": {"style": "./data/style.json"},このファイルを参照する指示
P.29ざっくりstyle.jsonの概要説明◼ style.jsonはsourceとlayersエリアの設定が大事⚫タイルサーバを提供している会社は、このstyle.jsonを作るためのスタイル編集ツールを提供していることがあるので使ってみようラスタタイルの設定はconfig.jsonの「OSM_Standard」参照P.29{“style”: {“version”: 8, // 8固定“sources”: {“ソース名”: { // ソース名は自分で決めて良いurl: “タイルサーバのurl”,“type”: “vector” // ベクタタイルサーバは”vector”}},“layers”: {{ 背景の設定 }, // レイヤー設定がいろいろ{ 土地利用の設定 }}}
P.30ラスタスタイルを追加してみよう◼ config.json の “GSI_pale”の下に以下のコードを追加しようP.30"GSI_ort": {"style": {"version": 8,"sources": {"rtile": {"type": "raster","tiles": ["https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg"],"tileSize": 256,"maxzoom": 18,"attribution": "href='https://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html'>国土地理院(オルソ画像) |© OpenStreetMap contributors"}},"layers": [{"id": "raster-tiles","type": "raster","source": "rtile"}]}}
P.31地図にアイコンを追加する方法◼ createElementでdiv要素を作り、スタイルを設定した上でmaplibregl.Markerメソッドでdivを指定し、座標などを追加した上でaddTo(map)メソッドで追加する⚫アイコン画像やテキストはdiv要素中のinnerHTMLに書けば良いP.31// maplib.js よりaddMarker(params) {var icon = document.createElement('div');icon.style.width = `${params.size + params.span_width}px`;icon.style.height = `${params.size}px`;let marker = new maplibregl.Marker(icon).setLngLat(params.poi.lnglat).addTo(this.map);marker.getElement().innerHTML= params.html;return marker;};※maplib.js の addMarker は poilib.js の setMarker から呼び出されている（setMarkerでHTMLなどを生成）
P.32OpenStreetMapのAPIP.32
P.33OpenStreetMap本家API◼地図を編集するためのAPIが用意されている⚫編集履歴などのメタ情報も取得が出来るが、今回は扱わないAPI⚫興味がある人はWikiを参照のこと（地図編集ソフトが作れるよ）✓ https://wiki.openstreetmap.org/wiki/JA:API_v0.6P.33拙作Easy Changeset Viewerhttps://k-sakanoshita.github.io/Easy_Changeset_Viewer地図の編集履歴を地図に可視化誰がどこを編集したか丸わかり
P.34Overpass API◼ OSM地図データから個別に選択された部分を取り出すAPI⚫ Web APIによる地理空間データベースとして提供されている⚫読み取り専用だが、ユーザー認証が不要なので気軽に使える◼ OpenStreetMap公式のOverpass APIは提供されていない⚫ドイツやフランス、ロシアの企業や団体が個別に提供されている⚫ OSM WikiにOverpass API提供サーバーの一覧がある✓ https://wiki.openstreetmap.org/wiki/Overpass_API⚫いずれも無料で使えるが、常識の範囲内での利用が良い✓ ドイツのサーバはよく使われる半公式な存在だが、短時間で何度もAPIを叩くと、1分ほどアクセスを拒否されるなど制約もあるP.34
P.35Overpass 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.36Overpass Turboで遊んでみよう◼ Overpass QLを触れる以下のサイトを開こう⚫ https://overpass-turbo.eu/◼大阪市へ移動し、「ウィザード」ボタンを押す◼「toilets in osaka」と入力し、クエリを作成して実行を押すP.36toilets in osaka「クエリを作成して実行」を押す
P.37Overpass 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.jsonを参照◼サンプルアプリでは、公園、児童公園、リラクゼーショングランド、公園の遊具を取得するクエリになっているP.38"overpass": ["node[¥"leisure¥"=¥"park¥"]","way[¥"leisure¥"=¥"park¥"]","node[¥"leisure¥"=¥"playground¥"]","way[¥"leisure¥"=¥"playground¥"]","way[¥"landuse¥"=¥"recreation_ground¥"]","relation[¥"leisure¥"=¥"park¥"]","relation[¥"leisure¥"=¥"playground¥"]","relation[¥"landuse¥"=¥"recreation_ground¥"]","node[¥"playground¥"]","way[¥"playground¥"]"],
P.39今回作るWebアプリについてP.39
P.40（再掲）サンプルアプリの構成◼サンプルアプリ⚫ dataフォルダ✓ config.json アプリの設定が書かれたファイル✓ category.json OpenStreetMapのタグから種類名を判別するファイル✓ marker.json OpenStreetMapのタグからアイコンを判別するファイル✓ overpass.json Overpass APIを呼び出すクエリー文が書かれたファイル✓ style.json MapLibreで地図を表示するためのスタイルファイル⚫ libフォルダ✓ winlib.js 画面操作などちょっとしたライブラリ✓ maplib.js MapLibre操作などちょっとしたライブラリ✓ poilib.js 地図に表示するマーカーを管理✓ overpasslib.js 今回の主役2「Overpass API」を操作✓ detaillib.js マーカーをクリックした時の詳細表示⚫ cmapmaker.js アプリの本体プログラム⚫ initialize.js アプリの初期化プログラムP.40その他Image:画像maki-icon:アイコン
P.41サンプルアプリの構成◼サンプルアプリの構成は以下のイメージP.41initialize.jsライブラリの読み込み設定ファイルの読み込み地図初期化、イベント登録cmapmaker.js地図画面上にあるボタンやマーカーから呼び出されるwinlib.js maplib.js poilib.js overpasslib.js detaillib.jscmapmaker.jsから必要に応じて呼び出されるmaplibre-glMapLibreは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には任意のコントロールを追加出来るP.47// maplib.js よりaddControl(position, domid, html, cname) { // add mapl controlclass HTMLControl {onAdd(map) {this._map = map;this._container = document.createElement('div');this._container.id = domid;this._container.className = 'maplibregl-ctrl ' + cname;this._container.innerHTML = html;this._container.style = "transform: initial;";return this._container;}onRemove() {this._container.parentNode.removeChild(this._container);this._map = undefined;}}this.map.addControl(new HTMLControl(), position);};
P.48マップコントロールの追加◼ initialize.jsの40行目付近に以下のコードを追加すると⚫「hello」と表示するコントロールを地図の左下に追加できます⚫「Hello」をHTMLにすれば、本格的なコントロールが追加できる⚫ index.htmlの後半にで囲われたHTMLがあるのでそれを参考にして、index.html内にメニューを追加することも出来る◼アイコン情報の一覧表示方法⚫デベロッパーツール（F12）を開き、以下を入力してみる⚫アイコンのID、名称、種別、緯度経度を配列で返してくれる⚫画面左上のメインメニューにテーブル表示させるなども可能✓ テーブルをどう表示させるかはお任せします（ライブラリ利用もあり）✓ キーワード検索機能とかあると便利ですよねP.48mapl.addControl("bottom-left",“Hello",poiCont.makeList())poiCont.makeList()
P.49他にも機能や設定があります◼処理中を示すアニメーション制御◼ config.json で設定可能な項目◼その他⚫アイコンのファイル名は ./data/marker.json で指定⚫「公園」などの種別名は ./data/category.json で指定P.49winCont.spinner(true); // falseにすると消える"splashUrl": "./image/Playgrounds.png",“initZoom”: 14, // 初期ズーム(大きいほどズームする)“maxZoom”: 21, // 最大ズーム(21だと一軒家レベル)“initView”: [ // 初期表示の緯度経度135.4828,34.7212],“PoiViewZoom”: 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_TileserverP.53
P.54参考情報（続き）◼ OpenStreetMap⚫世界がOpenStreetMapを必要とする理由https://qiita.com/nyampire/items/073c850f083cf9fb8d35⚫ learn OSM（はじめてからのOpenStreetMapガイド）https://learnosm.org/ja/◼講師（坂ノ下）のサイト⚫ GitHub K-Sakanoshitahttps://github.com/K-Sakanoshita✓ OpenStreetMapを駆使したWebアプリを公開中⚫まち歩きマップメーカー（自由に加工＆使える地図画像を作る）https://armd-02.github.io/mapmaker/⚫コミュニティマップメーカー（今回のサンプルアプリの大元）https://github.com/K-Sakanoshita/community_mapmaker✓ 公式だけど、少し古いソースコードなのが残念（なんとかします）P.54
barsaka2
martine
bernhardsvt
matleenalaakso
florets1
cbtlibrary
arumakan
2720japanoke
knocklearn
robinlee
kaityo256
senayakut
signer
tammyeverts
wjessup
trishagee
frogandcode
notwaldorf
chriscoyier
cromwellryan
matthewcrist
sachag
zakiwarfel
addyosmani
gr2m