スタートページ＞ JavaScriptスタートページ

地図ライブラリ maplib.js 使用解説書

本サイトでは、地図を用いたページがいくつかありますが、よく利用される機能を関数としてまとめて maplib.js としました。
　　<script src="https://www.kogures.com/hitoshi/javascript/maplib/maplib.js"></script>
で利用できますが、むしろ［コード表示］により、別ウインドウに表示されるソースコードをコピーして適宜カスタマイズされるのがよいと思います。

HMSdec(h, m, s）　　　時分秒→小数
　　var dec = HMSdec(h, m, s）　m, sは省略可　　コード表示

decHMS(dec)　　　　小数→時分秒
　　var [h, m, s] = decHMS(dec)　コード表示

緯度、経度の６０進法で、時分秒表示と、時の小数点表示の変換をします。
全ての値は正数、時と分は整数とします。

都道府県(コード)
　　　２桁のJISコードを与えて、都道府県名と緯度・経度を検索する コード表示
　var rtn = 都道府県(コード);
　　　var 県名 = rtn.県名; var 緯度 = rtn.緯度;　var 経度 = rtn.経度;

市区町村(コード)
　　　５桁のJISコードを与えて、市区町村名と緯度・経度を検索する コード表示
　var rtn = 市区町村(コード);
　　　var 県名 = rtn.県名;　var 市名 = rtn.市名;
　　　var 緯度 = rtn.緯度;　var 経度 = rtn.経度;

２０２０年以降の町村合併などによる変更は反映していません。

reverseGeocoder()
　　　　国土地理院ＡＰＩによる逆ジオコーデング コード表示
　　var [コード, 地名] = await reverseGeocoder(緯度,経度);

緯度,経度を与えて、都道府県コード（５桁）と、地名を戻します。

この関数から国土地理院のサイト https://mreversegeocoder.gsi.go.jp/reverse-geocoder/～」を呼び出していますが。クライアント側では、特別な設定は不要です。

reverseGeocoder() は、async/await を用いているので、呼出側の関数も、async/await を用いる必要があります。
　　async function reverseGeocoderTest() {
　　　　var 緯度 = eval(document.reverseGeocoderForm.緯度.value);
　　　　var 経度 = eval(document.reverseGeocoderForm.経度.value);
　　　　var [コード, 地名] = await reverseGeocoder(緯度, 経度);
　　　　document.reverseGeocoderForm.コード.value = コード;
　　　　document.reverseGeocoderForm.地名.value = 地名;

reverseGeocoderMultiple()　　　複数場所の逆ジオコーデング
　　　reverseGeocoderMultiple(緯度経度):　コード表示

実務的には、多数の場所があり、それぞれの住所も、府県名、市区名、地名にしたいし、
結果の再利用のために、別ウインドウにCSV形式で出力するのが、適切でしょう。
１場所ごとに、reverseGeocoder を利用してコードと地名を取得して、
関数 市区町村(コード)により、府県名と市区名を取得しています。

ケース１

入力
　　　　　　　　　　　緯度　　　経度
　　var 緯度経度 = [[35.6895, 139.6917],
　　　　　　　　　　[34.6937, 135.5023]];
　　await reverseGeocoderMultiple(緯度経度);
出力　別ウインドウに次のデータが表示される。
　　'緯度', '経度', 'コード', '府県名', '市区名', '地名'
　　35.6895, 139.6917, '13104', '東京都', '新宿区', '西新宿二丁目'
　　34.6937, 135.5023, '27127', '大阪府', '大阪市北区', '中之島一丁目'

ケース２

showEXIF(指定, 画像名表示場所, EXIF表示場所): コード表示

showEXIF の説明

HTMLでの記述
　　<input id="ファイル指定" type="file"　　// 指定："ファイル指定"
　　　　accept=".jpg, .jpeg"
　　　　multiple
　　　　onChange="showEXIF('ファイル指定', 'showEXIF画像名表示場所', 'showEXIF表示場所')">
　　</input>

　　<div id="showEXIF画像名表示場所"></div>
　　<div id="showEXIF表示場所"></div>

HTML標準機能であるFileAPI の機能を用いて、ローカル写真画像（jpegファイル）を選択し、
公開ライブラリ exif.js を用いて、画像に付帯しているEXIF情報を取り出し、
maplib.js の関数 showEXIF() を呼び出しています。
画像名を画像名表示場所、画像のwidth,height,撮影日, 緯度, 経度をEXIF表示場所に表示します。

exif.js を用いるには、
　　<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
が必要です。

=======================

拡張例

以下は、showEXIF で得た緯度、経度から逆ジオコーディングで住所を取得し、
さらに、これらの出力情報を再読込して、写真の情報をCSV形式で別ウインドウに出力しています。
アルバム整理などに役立つと思います。

なお、途中の出力が煩雑ならば、
　　<div hidden id="showEXIF画像名表示場所"></div>
として非表示にできます。

=======================

経度、緯度を読み込み、逆ジオコーディングで住所を取得する。 住所取得

全体を別ウインドウに表示する 表示

drawMapLeaflet 　基本的な地図の作成 コード表示
　　drawMapLeaflet(地図表示場所, 横幅, 縦高, 緯度, 経度, アイコン, ポップアップ);

HTMLに設定した「地図表示場所」のサイズを（横幅, 縦高）に設定し（下右の位置）、
緯度、経度の平均値を中央にした地図を表示します。
（緯度, 経度）の位置にマーカーを表示、クリックするとポップアップが表示されます。
緯度, 経度, アイコン, ポップアップは（１か所だけの場合も）配列で与えます。

地図作成に Leaflet を用いているので、head部に次の記述が必要です。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

maplibでのアイコン画像

「アイコン画像のURL」では、多数のサンプルがWebで無料公開されています。
この maplibでも、単純なサンプルを用意しています。
アイコン名は、「形状+色+添字」の形式になっています。
　　形状：p(通常)、c(円形)
　　色：r(赤), g(緑), b(青), y(黄)
　　添字：なし、 0,1,2,…,20
例えば、"icon/pr1.png" は、赤色のピン形で中央に１があるアイコンになります。
　　iconUrl: "icon/pr" + i + ".png",
とすれば、中央に 0,1,2,…がある複数のアイコンを指定できます。

clickMapLeaflet 　地図をクリックした点の緯度、経度を取得する コード表示
　　clickMapLeaflet(地図表示場所, 横幅, 縦高, 中心緯度, 中心経度, ズーム, 結果表示場所);

HTMLに設定した「地図表示場所」のサイズを（横幅, 縦高）に設定し（下右の青い位置）、
中心緯度, 中心経度, ズームによる地図を表示します。
その地図をクリックした点にマーカーが表示され、
結果表示場所（下右の赤い位置）に緯度経度が表示されます。

地図作成に Leaflet を用いているので、head部に次の記述が必要です。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>