leafletを鍛える。その45

概要

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

参考にしたページ

写真

サンプルコード

var mymap = L.map('mapid', {
        scrollWheelZoom: false,
        smoothWheelZoom: true,
        smoothSensitivity: 1,

    }).setView([51.505, -0.09], 13);
    mymap.scrollWheelZoom = true;

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

    mymap.on("zoom", function () {
        showZoom();
    })

    function showZoom(){
        document.getElementById('info_container').innerHTML = "zoom<br/>" + "<span>" + mymap.getZoom().toFixed(2) + "</span>";
    }
    showZoom();

    var CircleMarker = L.circleMarker([51.495, -0.09], {
        fillColor: '#0383ff',
        fillOpacity: 0.5,
        radius: 20
    }).addTo(mymap);

    L.marker([51.515, -0.09]).addTo(mymap);

    

成果物

以上。