5/1、鯖江のまちをぷらっと歩く「さばぷら」が楽しい。 歩くと見える新たなまちの魅力。かわいく楽しい地図やアプリがあれば、歩かなくてもその魅力伝えられるかも!?

軽快に気持ちよく動く3D地図に惹かれて参加したオープンソースな地図プロジェクト「Adopt Geodata」を探索して、オープンストリートマップのデータから鯖江周辺のデータをコンバートし、オープンソースな地図ライブラリを使って表示まで完成。 思う存分、自由に変更できる地図とアプリを手に入れました!

Open Sabae Map - Adopt Geodata project」(src on GitHub)
いままで使っていた地理院地図+Leafletと違って、世界中の地図がアクセス制限なしで活用可能です。これは熱い!


WebGLとベクトルデータを使った傾けることも、回転させることもスムーズな地図。あとは、いい情報をどんどん載せていくだけですね! 地図ライブラリはオープンソースではなくなる前の Mapbox v1 から派生した、MapLibreを更に派生した、ESモジュール対応版を使っています。 「Mapbox GLからforkされたMapLibre

試験的にコンバートした鯖江市中心の地図を使ったアプリなら、下記のようなHTMLにプログラムを足していくだけで自由に開発できちゃいます。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>Open Sabae Map - Adopt Geodata project</title> <link rel="stylesheet" type="text/css" href="https://taisukef.github.io/sh2/mapbox-gl.css"> <style> body { margin: 0; top: 0; bottom: 0; width: 100%; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <div id="map"></div> <script type="module"> import { maplibregl } from "https://taisukef.github.io/maplibre-gl-js/maplibre-gl-es.js"; const map = new maplibregl.Map({ container: "map", style: "https://taisukef.github.io/sh2/style.json", attributionControl: true, hash: true }); map.addControl(new maplibregl.NavigationControl()); map.addControl(new maplibregl.ScaleControl({ maxWidth: 200, unit: "metric" })); </script> </body> </html>

手元にwebサーバーも不要です。index.htmlを作って、ブラウザで開くだけ!


VRふくい - 西山公園2(つつじ)
つつじで有名、西山公園、晴れ間を狙ってVR写真。空から見るつつじもいいですね!

links
- オープンソースプロジェクト「Adopt Geodata」へ開発参画で国連貢献!? CSVと3D地図で語るVRふくい

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS