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

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

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

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

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

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

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

緯度,経度を与えて、都道府県コード（５桁）と、地名を戻します。
国土地理院の ttps://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 = 地名;

複数場所の逆ジオコーデング

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

showEXIF(指定, 画像名表示場所, EXIF表示場所): js表示

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 　基本的な地図の作成 js表示
　　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 　地図をクリックした点の緯度、経度を取得する js表示
　　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>