leafletを鍛える。その37

概要

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

参考にしたページ

写真

サンプルコード

const DEFAULT_POSITION = {
    latitude: 35.68997,
    longitude: 139.692461
};
function showLoading() {
    document.getElementById('loading').style.display = 'block';
}
function hideLoading() {
    document.getElementById('loading').style.display = 'none';
}
function initMap(position) {
    const map = new OSMBuildings({
        container: 'map',
        position: position,
        zoom: 10,
        minZoom: 8,
        maxZoom: 20,
        attribution: '© Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> © Map <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'
    });
    map.addMapTiles('https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png');
    map.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/59fcc2e8/tile/{z}/{x}/{y}.json');
}
function getCurrentLocationAndShowMap() {
    showLoading();
    if ("geolocation" in navigator) 
    {
        navigator.geolocation.getCurrentPosition(
            function(position) {
                hideLoading();
                initMap({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                });
            },
            function(error) {
                console.error("位置情報の取得に失敗しました:", error);
                hideLoading();
                //alert("ng");
                initMap(DEFAULT_POSITION);
            },
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            }
        );
    } 
    else 
    {
        console.log("Geolocation APIがサポートされていません");
        hideLoading();
        initMap(DEFAULT_POSITION);
    }
}

getCurrentLocationAndShowMap();
    

成果物

以上。