LoginSignup
0
0
@kottaro123456

震度分布図を作ろう② ～シンプルな地図にしよう～

Last updated at Posted at 2023-12-08

はじめ

さて、本日もやってまいりました、震度分布図を作ろうのシリーズでございます。

前回したこと

えーと、前の①ではとりあえず地図だけ表示したんですよね。
1000020601.png

さっそくかいはｔ…ではありません。

ではここにさっそく震度をプロットしていこうではないか、と言いたくなりますが、いきなりここで三択クイズです。

Q, このまま震度をプロットしてしまうとどんな弊害が起こるでしょうか。
　ア: 見づらくなる
　イ: とても見づらくなる
　ウ: めっちゃ見づらくなる

さあ、みなさんならすぐに分かりますね。
正解は「エ」の「くそ見づらくなる」でした。正答率は100%だと思います。

こんな色とりどりの地図の中に、震度アイコンを置いてもさほど目立ちません。
目立たないどころか地図の中に埋もれてしまいます。(同じではないか)

じゃあどうするの？

じゃあどうするのよ？って思った人、いるかもしれないし、いないかもしれません。
震度分布図をよく思い出してください。今まで見てきた震度分布図の背景の地図って…。

そう、大体は県境だけが描かれたくそシンプルな黒っぽい地図ですよね。
s-スクリーンショット 2023-12-08 181607.jpg

さて、今回②では、今の地図(Open Street Map)を上のようなかっこいいシンプルな地図にしていきましょう。

開発スタート

前回までのコードは

前回①までのコードは、

の一番下に乗っていますので、コピーして使用ください。

前回までの解説

前回①まででは、Leafletの導入とOSMの表示を行いました。
最後のOSMの表示について、前回には詳しく説明していなかったので説明します。

説明を見る
1行目
var map = L.map('map').setView([51.505, -0.09], 13);

L.map(map)：#mapという名のものをLeafletのマップオブジェクトとして扱う
.setView([51.505, -0.09], 13)：最初どこを表示させるかを決める。([緯度, 経度], ズームレベル)の形で設定する。ズームレベルは数字が大きいほど高倍率のズーム＝小範囲の地図となる。

3～5行目
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png'：タイルレイヤー＝今回のように画像形式の地図を扱うときに使用する。
attribution: '&copy; <a…'：右下に出る引用元表示に出したい内容を設定する。
.addTo(map)：先程設定したmapに追加する

7～9行目
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();

L.marker([51.5, -0.09]).addTo(map)：[緯度, 経度]の場所にLeafletのマーカーオブジェクトを配置する。
.bindPopup('Popup')：ポップアップ、クリックしたら出てくる補足情報的なんの内容を設定する。
.openPopup()：ポップアップを開かせる

データをパクってくる

さて、今までのようにOSMなど人に頼っていたら、URLをぶち込めばすぐに表示できましたが、自分で新しく作ろうとすると、データがどうしても必要になってきます。
そこで、海岸線や県境をポチポチしながらデータを作って行くと地理には詳しくなれますがとても大変です。
ではどうするか。人頼みです。
前の記事にはなんて書いてありましたか。
「自分がしなくたって誰かが代わりにきっとやってくれてます。」
そうこれです。地図データに関しても自分でするのはめんどくさいので、人が作ってくれたものを拝借させていただこうとしようではないですか。（←？）

ここで、地図データはGeoJSONという形なので、「都道府県 geojson」と調べてみると、良さげなのが何個か見つかります。

これが一番上に出てきたのでこれを借りようとしようではないか。
「Geojson ファイル を置いておく。* ダウンロードのうえ使用して下さい。連絡は不要です。」のところから.geojson をダウンロードします。
ブラウザで開いてみると、「利用制限はありません。出典を明示する必要もありません」と書いてありますので、余計な著作権表示をしなくても良いようで良いですね。

ではこの地図データをブラウザ上に描画していきましょう。

ここからサーバーが必要になります。ローカルでは動きません。
ファイルはサーバー上にアップロードしてから確認してください。

地図データを描画① ～データを読み込もう～

さーて、データもパクってきましたし、さっそく描画していきましょう。
JavaScriptは前のものはテストなので全て削除します。サラぴんからやり直しです。
今回は、$.getJSONというところで、前読み込んだjQueryを使用しています。
本当はasync function()なんちゃらかんちゃら…書かないといけないのを短く実装できています。

ソースコード
index.js
+ var map = L.map('map').setView([36.575, 137.984], 6);
+ L.control.scale({ maxWidth: 150, position: 'bottomright', imperial: false }).addTo(map);
+ map.zoomControl.setPosition('topright');
+ 
+ $.getJSON("prefectures.geojson", function (data) {
+     L.geoJson(data, {}).addTo(map);
+ });

L.control.scale()：右下に出てくる、この長さが1kmやでモノサシを配置する。
map.zoomControl.setPosition：右上に出てくる、プラスマイナスボタンでズームできるやつを配置する。
$.getJSON("JSON File URL", function (data) {})：URLのファイルを取得して、その中身をdataとして格納し、function {}の中で使うことができる優れもの。めっちゃ使う。
L.geoJson(data, {})：geoJSONのデータをLeafletに読み込ませる。dataはgeoJSONのデータ、{}の中は色や重ね順などのオプション。

できましたか？
できたらこんな感じで、日本地図が表示されていると思います。
s-20231208224922.jpg
次は色を変えていきましょう。

地図データを描画② ～色を決めよう～

次に地図の配色を決めましょう。
今は初期状態の青色になっています。
NERVのように黒背景に白線にするか、ウェザーニュースのように青背景に黒線にするか…。
決めれましたか？

今回私はNERVのようなものにしたいと思います。

では黒背景なので、まずは地図のHTML要素にCSSのbackgroundを効かせましょう。

こんな感じですね。

次に、地図データの色をJavaScriptで設定していきましょう。
今回は後で色を変えられるようにStyleを使って色を指定しておきましょう。

ソースコード
index.css
html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
}
+ #map {
+     background: #1d1d1d;
+ }
index.js
var map = L.map('map').setView([36.575, 137.984], 6);
L.control.scale({ maxWidth: 150, position: 'bottomright', imperial: false }).addTo(map);
map.zoomControl.setPosition('topright');

+ var PolygonLayer_Style_nerv = {
+     "color": "#ffffff",
+     "weight": 1.5,
+     "opacity": 1,
+     "fillColor": "#3a3a3a",
+     "fillOpacity": 1
+ }

$.getJSON("prefectures.geojson", function (data) {
    L.geoJson(data, {
+       style: PolygonLayer_Style_nerv
    }).addTo(map);
});

スタイルを変数を使って格納しておくと、色を変更する設計をするときに便利になります。
"color"は線の色、"weight"は線の太さ、"opacity"は線の透明度、"fillColor"は塗りつぶしの色、"fillOpacity"は塗りつぶしの透明度を設定します。
geoJsonや、circle、markerなどで直接"color"を指定することもできますが、色を変更するかもの設定の場合は、色情報を変数に格納して、"style"で変数名を指定したほうが、簡単に色の変更ができます。

これでまた確認してみると…。
s-20231208230444.jpg
さっきよりもシュッとしてますよね。黒のほうがかっこいいですね。

終わりに

これで地図をOpen Street MapやGoogle Mapのように、色が腐る程あるものから、ツートーンのシュッとしている地図に変更することができました。
なんか長いかなと思いましたが、話が逸れていなくて安心です。（確認してないだけです。たぶん話逸れてます。）

今回までのソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>震度分布図</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <div id="map"></div>
    <script src="index.js"></script>
</body>
</html>
index.js
var map = L.map('map').setView([36.575, 137.984], 6);
L.control.scale({ maxWidth: 150, position: 'bottomright', imperial: false }).addTo(map);
map.zoomControl.setPosition('topright');

var PolygonLayer_Style_nerv = {
    "color": "#ffffff",
    "weight": 1.5,
    "opacity": 1,
    "fillColor": "#3a3a3a",
    "fillOpacity": 1
}

$.getJSON("prefectures.geojson", function (data) {
    L.geoJson(data, {
        style: PolygonLayer_Style_nerv
    }).addTo(map);
});
index.css
html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
}
#map {
    background: #1d1d1d;
}

次回予告

震度分布図を作ろう③ ～地震情報をいじろう～

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0