Newer
Older
2022-S.Keigo / map / app4 / karubi.js
@”Sato ”Sato on 21 Dec 2022 2 KB uMapデータを利用
(() => {
    function MyMap(id) {
        var mymap;
        function init(id) {
        // 例: コントロールレイヤ
        var osmTile =	// OSMのタイル
            L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution:
            '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
    contributors'
            });
        var gsiTile =	// 国土地理院タイル
            L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
            attribution:
            '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
            });
        var geojsonLayer = 
            L.geoJson(karubi, { // karubi変数は karubi.geojson からロードした
                style: function (feature) {
                    return feature.properties;
                },
                onEachFeature: function(j, layer) {
                    let p = j.properties;
                    if (p) {
                        let name = p.name, desc = p.description;
                        let popup = "<h3>" + name + "</h3>" + "<p>" + desc + "</p>";
                        layer.bindPopup(popup);
                    }
                }
            })
        mymap = L.map("mymap", {
            layers: [gsiTile],
            center: [38.9165,139.8297], zoom: 13, scrollWheelZoom: false
        });
        // 以下、コントロールレイヤの設定
        //   ベースレイヤはOSMと国土地理院2つをJSON形式で指定
        var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
        //   マーカーを2つオーバーレイレイヤに指定
        var ovlLayers  = {'カルビーハウス': geojsonLayer};
        //   ベースレイヤとオーバーレイレイヤをマップに追加
        L.control.layers(baseLayers, ovlLayers).addTo(mymap);
        }
        // ↓初期化時にすぐ実行される
        init(id);
    };
    document.addEventListener("DOMContentLoaded", function(){
        MyMap("mymap");}, false);
    })();