OpenMapEditor作ったぜ。プライバシー最優先の地図エディタでVanilla JS＋Leaflet、GPX/KMLは全部ブラウザ内で完結

author: arar70002025-09-13T12:07:47Z

r/webdevの連中へ。

Showoff Saturday用にOpenMapEditorを投下する。Organic Mapsみたいなアプリを普段めっちゃ使ってて、サードパーティにファイル投げずにGPX/KML/KMZをデスクトップで扱いたかったから自分で作ったってわけだな。

目標はプライバシーと実用性。だから完全に100%クライアントサイドで動くようにした。

技術ハイライトまとめ↓

Full Organic Maps Compatibility：KMZのバックアップと互換を目指して作ってる。インポート時にOrganic Maps固有の16色とかをちゃんと解析して保持、エクスポート時に正しく書き戻すようにしてる。KML/KMZの解析と生成は全部ブラウザ内でJSZipやtogeojsonみたいなライブラリを使って処理するから、データがサーバーに触れることは一切ない。
Zero Build Step：アプリはバニラのJavaScript/HTML/CSSのみで構築、地図はLeaflet.js。npmもバンドラーもトランスパイラも無し。シンプルなアーキテクチャを保つのがおもろいチャレンジだった。
Multiple Elevation Providers：任意経路の標高プロファイル生成に対応。設定でGoogle Elevation APIや公開のOpen Topo Data APIなど、ソースを切り替えられる。
Performance Optimized：Stravaみたいな巨大GPSトラックでもUIが重くならないよう、インポート時にsimplify-jsで経路を自動簡略化する。デフォルトONだけど、精度重視なら設定でオフにできる。
It’s a PWA：マップの帰属表示からデスクトップに「インストール」できて、よりネイティブに近い使い勝手にできる。

さらにStrava APIと連携、MapboxやOSRMと連携するカスタムルーティングパネルや、完全カスタムなレイヤーコントローラも実装済み。

コードはGitHubにあるから、特に「ビルドステップ無し」アプローチとかパフォーマンス周りのツッコミ・意見をもらえると助かる。見てくれてありがとう。