Leafletで地図を作ろう － (都道府県別人口統計マップ)
1.都道府県別人口統計マップ 作品例として、都道府県別人口統計マップを作成します。この題材はベース地図タイル上に都道府県別の人口統計人数をレンジ(10段階)に 設定した範囲に応じた都道府県境界を設定した色にて塗りつぶし色分けして表示します。 ソースコードの大部分は、すでに公開している 「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に 説明 していきます。 都道府県別の色分け描画部分のソースコードは、下記のサイト様のサンプルコードより借用させて頂きました。 URL : https://knooto.info/leaflet-examples/ URL : https://knooto.info/example/leaflet/pref-map-chart.html マップポリゴンデータ (var prefs)は、下記のサイト様より入手したものを利用させて頂きました。 データ元 : https://www.itdashboard.go.jp/js/data/prefectures.geojson 参考 : https://rch850.hatenablog.com/entry/2019/05/21/013618 2.ソースコードの説明 都道府県人口統計マップのメインとなる(demographics.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、demogra.css、leaflet.js、SlideMenu.js、jsframe.js、demographics.js、pospop.js、prefs.jsライブラリ等をヘッダー部分に指定しています。 demogra.css、demographics.js、pospop.jsは筆者が作成したものです。尚、マップポリゴンデータ(geoJSONデータ)は上記で入手したものをprefs.jsとしました。 DEMO //***** テキスト時計 ***** function clock() { var twoDigit =function(num){ var digit
