完成したWebGIS
https://takumi-yoshi.github.io/bears-map/
・ヒグマ出没地点表示
・年、月、時間帯フィルタ
・件数表示
・背景地図切替
はじめに
普段、GISソフトはよく使うのですが、WebGISに関しては無知です。
GISソフトをインストールしていない環境でも地図が閲覧できたり、
オープンなデータを確認する時もよく目にはするので便利なものだなーとは思ってましたが、
地図がどのような仕組みでWeb上に表示されているのかは全く分かりませんでした。
色々とGIS関連の作業したり情報収集していると、WebGISの仕組みが気になってきて、自分でもWebGISで地図を作成してみたくなり、やってみました。
これからWebGISを学んだり、サイトを作りたいという方に少しでも参考になれば嬉しいです。
作りたかったWebGIS
とりあえず地図を表示することを目的にしたので、データは軽くシンプルそうなものにしようと思います。
今回、表示するものは札幌市のヒグマ出没地点にしました。
クマの出没地点は、既に多くのWebGISで公開されています。
既存のものは、直近の出没地点が表示されていて、ポイントをクリックすると目撃日時などの情報がポップアップで見られるようなものが多いです。
個人的には、過去の出没地点も見てみたいと思い、過去のデータも公開してくれている札幌市さんのデータを使用させてもらいました。
https://ckan.pf-sapporo.jp/dataset/sapporo_bear_appearance
また、出没地点のデータには、年月日、時間などの情報があったので、フィルター機能で表示ピンを絞り込めるようにします。
（このような機能のWebGISがもうすでに開発されておりますが、個人的な開発練習ということで類似したものを作成していきます。）
使用したデータ
ヒグマ出没地点のポイントデータ（2016年～2025年）
札幌市さんのオープンなデータの公開サイト（DATA-SMART CITY SAPPORO）から、出没地点の2016年～2025年のcsvデータをダウンロードします。
https://ckan.pf-sapporo.jp/dataset/sapporo_bear_appearance
ダウンロードしたデータを確認すると、緯度経度の他に、"日付"や"時刻"の情報があることが分かります。
WebGISで表示したいため、データを"GeoJSON"に変換しておきます。
変換はQGISで行います。
csvの緯度経度を基に、GISソフトでcsvをポイントデータとして表示します。
やり方はこちらが参考になります。
https://qgis.mierune.co.jp/posts/howto_1_add_csv
QGIS上に表示出来たら、GeoJSONに変換します。
追加したレイヤーを選択した状態で、
タブ「レイヤ」→「名前を付けて保存」から、GeoJSONで保存します。
また、さらに過去のデータも追加しました。
基礎調査2004 クマ類全国分布メッシュ
https://geoportal.env.go.jp/datasets/f760a4a146ae40cea50e8f78d6e9679f_0/about
こちらは、shpファイルですが、同様にQGISでGeoJSONに変換します。
GeoJSONは、後述するhtmlファイルと同じフォルダに配置します。
HTMLの作成準備
WebGISはWebブラウザ上で動作するため、HTMLで画面の構造を作り、CSSでデザインを整え、JavaScriptで地図の表示や各種機能を実装します。
私はこれらを書いたことがなかったため、まずは基礎的な部分から学ぶことにしました。
HTMLは、"VS Code"というソフトを使用して書きました。
無料で、多くの技術ブログなどでおすすめされていますし、
私はPythonなどを少し触ったことがあったので既にインストールされていました。
次に、VS CodeでHTMLファイルを作成するのですが、作成方法は↓などを参考にしました。
https://webst8.com/code/vscode-file-create/
WebGISの作成
いよいよプログラムですが、あまりにも知識がなかったため、色々なサイト↓を参考に少しずつ学習しました。
・世界一わかりやすいHTML講座！ #初心者向け #HTML入門 #プログラミング
https://youtu.be/IR_srJ2zL3o?si=KxloVUQvH09mbdR8
・現場のプロがわかりやすく教える 位置情報エンジニア養成講座 （単行本）
https://www.shuwasystem.co.jp/book/9784798068923.html
・【初級編】MapLibre GL JSを使ったWebGIS作成
https://zenn.dev/asahina820/books/c29592e397a35b
・【中級編】MapLibre GL JSを使ったWebGIS作成
https://zenn.dev/asahina820/books/071ba23476fdc4
まだまだ理解しきれていない部分や習得できていない技術も多いですが。。。
とりあえず大まかなプログラミングの構成や、地図ライブラリの概念などは知ることができました。
記事などを参考にしたり、AIに教えてもらいながらとりあえずコードを書いていきました。
WebGISで、地図を動かすオープンソースのライブラリはいくつか種類があるようですが、候補としてはLeaflet、MapLibre GL JSなどがあります。
今回は表示するデータ量がそれほど多くないことに加え、参考記事やサンプルコードが豊富で初心者でも取り組みやすそうだったため、地図ライブラリには Leaflet を採用しました。
（参考：https://qiita.com/macole/items/9bdecdaf950b7fdc196a ）
書いたコードが、どのようなWebGISになっているか確認してみます。
VS Code の"Open with Live Server"から、ブラウザで確認します。
作成したWebGIS
このような感じになりました。
・leafletを使用
・ヒグマ出没地点をポイントで表示
・2004年基礎調査のクマ出没メッシュをポリゴンで表示
・年別・月別・時間帯別のフィルタリング機能
・フィルタリングに応じた出没件数の表示
・背景地図の切り替え
・OpenStreetMap
・地理院タイル
WebGISの公開
WebGISの公開は、GitHub Pagesを使います。無料です。ありがたい。
GitHub Pagesについては、↓などが参考になりました。
https://zenn.dev/kwaka1208/articles/github-pages
思ったより簡単にできました。
・会員登録
・リポジトリ（フォルダ）を作成
・HTML、GeoJSONをアップロード
・README.mdなど作成
・公開設定
↓作成したWebGIS
https://takumi-yoshi.github.io/bears-map/
苦労した点
GISソフトは普段から使っているので、GISデータそのものの取り扱いにはあまり苦労しませんでした。
しかし、HTML、CSS、JavaScriptでコードを書く部分はかなり苦労しました。
サンプルコードを見ても最初は何をしているのか分からず、参考記事やAIに教わりながら少しずつ理解を進めました。
こればかりは一朝一夕で身につくものではないので、今後も地道に学習していきたいと思います。
おわりに
WebGISについて何がどうなっているかわからない状態から、記事やAIに教わりながら、一通り作成して公開することができました。
作成してみると、どのようにWebGISができているのか、多少なりとも理解できた気がします。
やはりHTMLのコードの部分など課題はかなり多いですが、実際作ってみるともっとこういう表現をしたいなど色々試してみたくなりました。
というか、これがほぼすべて無料でできるという環境に驚きます。
今回はHTML、CSS、JavaScriptのシンプル構成で作成しましたが、より本格的な構成での開発もやってみたいと思いました。
また、MapLibreなど他のライブラリも試しながら、WebGISへの理解を深めていきたいと思います。
最後までご覧いただきありがとうございました。
それではまた。