🗺️

架空地図マーカー共同編集サイト制作時の備忘録

2023/08/23に公開

目的

国土地理院やOpenStreetMapで登録されている実在の地図上ではなく、架空の地図を多人数でマーカー編集・共有できるようにしたかった。
例)ゲームのマップに施設を描き込んで共有するなど

そしてこの備忘録は次のアップデート用に見直すためのものです。

前提

  • 地図を画像に差し替えられる
  • 自分がDBなどの知識がほぼないので会員登録など無し
    • 荒らし防止のためにGoogleフォームである程度書き込み内容を制限しておく

とりあえず完成

(管理期間がほぼ終わっているため)縮小版、書き込みはここからは不可。
https://1686.site/pfsoz-map/


使用したもの

  • leaflet.js
    • プラグイン沢山(後述)
  • Google スプレッドシート
  • Google フォーム

参考

https://leafletjs.com/
https://lendl.sakura.ne.jp/journals/category/botw-on-leaflet/
ブレワイの地図を再現している。leafletの初期設定~画像のタイル化~マーカー装飾などを丁寧に説明してくださっています。こちらの記事が無かったらおそらく作ろうと思わなかったので大変感謝しております。
https://www.papaparse.com/
スプレッドシートのcsvデータを扱いやすい用に変換するライブラリ。

使用したプラグイン

https://github.com/mlevans/leaflet-hash
URLにハッシュを追加し、拡大率と緯度経度を共有できるように。
https://github.com/Norkart/Leaflet-MiniMap
ミニマップを表示して、いまどこを見ているか分かりやすく。
https://maydemirx.github.io/leaflet-tag-filter-button/
マーカーフィルターを追加し、種類別に表示できるように。

https://dyamashiro.com/google-form-default-value/
Googleフォームに遷移する際にURLで緯度経度を事前入力しておく。

Discussion