leafletを鍛える。その43

概要

leafletを鍛えてみた。
geolonia、見つけたのでやってみた。

参考にしたページ

写真

サンプルコード

import { openReverseGeocoder } from "https://cdn.skypack.dev/@geolonia/open-reverse-geocoder@latest";


const map = L.map("map", {
	center: [35.7021028, 139.755583],
	zoom: 13
});
const baseLayer = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
	attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors'"
});
baseLayer.addTo(map);

function runReverseGeocode() {
    const center = map.getCenter()
    openReverseGeocoder([center.lng, center.lat]).then(res => {
        if (res && res.code) 
        {
            document.querySelector('#address').innerText = `${res.prefecture}${res.city}${res.oaza || ''}${res.chome || ''}${res.koaza || ''}${res.chiban || ''}`
        } 
        else 
        {
            document.querySelector('#address').innerText = '地図を動かしてください。'
        }
    }).catch(error => {
        alert(error)
        document.querySelector('#address').innerText = '地図を動かしてください。'
    })
}

map.on('moveend', () => {
    runReverseGeocode()
})
map.on('load', () => {
    runReverseGeocode()
})

成果物

以上。