今年はOSGeo.JPが関連するイベントがとても多いということもあり、X上でイベントマップを作ってみたいというツイートを見てしまい、ついつい作ってしまいました。
開発にはvitejsを利用しています。
まず、プロジェクトを初期化します。
mkdir osgeojp-events-2025
cd osgeojp-events-2025
npm create vite@latest . -- --template vanilla-ts
npm install
次に今回使うライブラリをインストールします。
npm install maplibre-gl
npm install yaml
npm install @turf/bbox
次に、vitejsの設定ファイル、vite.config.jsを用意します。Github Pagesでアクセスするので、baseの値をセットします。
import { defineConfig } from 'vite'
export default defineConfig({
base: '/osgeojp-events-2025'
})
次に、今回はyamlでイベント情報を書くようにしました。public/events.ymlに以下のように記述します。
- name: "FOSS4G LT会 #002"
date: 2025-05-27
location:
longitude: 139.737936
latitude: 35.658581
address: 東京都千代田区紀尾井町1-3 東京ガーデンテラス紀尾井町 紀尾井タワー 17F
name: Open Collaboration Hub LODGE (LINEヤフー)
homepage: https://osgeojp.connpass.com/event/350766/
- name: Open Source Conference 2025 Nagoya
date: 2025-06-07
location:
longitude: 136.92993
latitude: 35.158615
address: 愛知県名古屋市中村区名駅南1丁目1-1 名駅南ビル
name: 中小企業振興会館 3階 第2ファッション展示場
homepage: https://event.ospn.jp/osc2025-nagoya/
- name: Open Source Conference 2025 Shimane
date: 2025-06-21
location:
longitude: 133.062204
latitude: 35.464219
address: 島根県松江市朝日町478-18
name: 松江テルサ 1F テルサホール
homepage: https://event.ospn.jp/osc2025-shimane/
- name: ジオ展
date: 2025-07-02
location:
longitude: 139.762214
latitude: 35.687416
address: 東京都千代田区大手町1-2-1 Otemachi One 3F
name: 大手町三井ホール
homepage: https://www.geoten.org/
次にsrc/style.cssを書き換えます。
body {
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 100vh;
}
あとはコードを書くだけです。長いのでレポジトリを参照してください。
src/main.ts
やっている事としては、
- yamlファイルをfetch
- fitBoundsをするために、一旦yamlファイルをGeoJSONに変換してから、turf.js bboxでextentを作成してLngLatBoundsを作成
- 各POIはMarkerで実装。本当はGeoJSON化しているので、それを
sourceに追加してもよいのですが、良いアイコンが思い浮かばなかったのでMarkerにしています。 - mapはズームレベルによってスタイルを変更するようにしています。ズームアップしていくと詳細な地図が出るという仕組みになります。
こんな感じです。
あとはGithub Pagesの設定画面で、Deploy元をGithub Actionsに設定をしてから、publish.ymlでGithub Pagesにアップロードするという感じです。
コミュニティでマップを作りたい！っていう人は是非参考にしてください。
Discussion