Leafletで地図を作ろう － (気象庁震度観測点マップ)
1.気象庁震度観測点マップ 作品例として、気象庁震度観測点マップを作成します。この題材は複数の地図タイルの追加や任意のアイコンマーカーの追加、ポップアップの表示、スライドメニューの追加とカスタマイズなど 地図を拡張するための部品の実装要素の大部分を含んだ作品例としています。気象庁震度観測点一覧表は、気象庁ホームページより取得したものに 地図を作成するために必要な項目を追加したものをExcelで編集して、定義ファイルとしてExcelからソースコードを生成しました。 気象庁 : http://www.data.jma.go.jp/svd/eqev/data/kyoshin/jma-shindo.html 現在公開されている最新データは、令和2年10月29日現在のものですが、地図作成時点で取得したものは、令和元年11月14日現在のものを使用しています。 観測終了したものもあるため、差分更新が必要なため少し古いデータとなっています。時間的に余裕のあるときに更新を予定していますので、ご了承願います。 2.ソースコードの説明 気象庁震度観測点マップのメインとなる(eqpointmap.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、eqpoint.css、leaflet.js、SlideMenu.js、jsframe.js、eqpoint.js、posdata.jsライブラリ等をヘッダー部分に指定しています。 SlideMenu.jsとSlideMenu.cssは、下記のGitHubからダウンロードできます。 取得先 : GitHubからダウンロード(スライドメニュー) フローティング・ウィンドウ ライブラリ(JSFrame.js)はQiitaの下記のページにて紹介されていたものを 参考とさせて頂きました。IE以外のブラウザでは、ポップアップさせたウィンドウが地図の下側に隠れてしまうため IE専用として実装しました。(ブラウザの判定で対応) 取得先 : フローティング・ウィンドウ ライブラリ(JSFrame.js) eqpoint.cssとeqpoint.js、posdata.jsは筆者が作成したものです。 DEMO <!DOCTYPE html> &l
