Leaflet マーカーのカスタマイズ | open data geographic utilize

ため池表示マーカーをカスタマイズ

デフォルト

　西脇市のため池182か所のデフォルト表示。マーカーをクリックするとため池名をポップアップ表示。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Reservoir&Municipalities Map - Leaflet</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
        <link rel="stylesheet" href="./style-practical-011.css"/>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="map"></div>
        <script src="./index-practical-011.js"></script>
    </body>
</html>

let mymap = new L.map('map').setView([35, 135], 11);

//国土地理院地図
let gsiattr = "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>";
let gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { minZoom:5, attribution: gsiattr });
gsi.addTo(mymap);  // 初期設定で地理院標準地図を表示

//ため池        
$.getJSON("../geojson/nishiwaki_2138.geojson",function(data) {
    L.geoJson(data).bindPopup(function(layer){
        return layer.feature.properties.ため池名;     //ため池名
    }).addTo(mymap);
});

Leaflet Tutorials に倣って

　Leaflet TutorialsのUsing GeoJSON with Leafletの例に倣って、マーカーを変更

let mymap = new L.map('map').setView([35, 135], 11);

//国土地理院地図
let gsiattr = "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>";
let gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { minZoom:5, attribution: gsiattr });
gsi.addTo(mymap);  // 初期設定で地理院標準地図を表示

let geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

let point;  //ため池        
$.getJSON("../geojson/nishiwaki_2138.geojson",function(data) {
    point = L.geoJson(data,{
        pointToLayer: function (feature,cordinate) {
        return L.circleMarker(cordinate,geojsonMarkerOptions)},
    onEachFeature: function(feature,layer){
        let name = feature.properties.ため池名;
        layer.bindPopup(name);
        }
    }).addTo(mymap);
});

マーカーの大きさと色を変更

　JavaScriptコードの9～11行目で、circleの大きさ、縁の色、円内の色を変更する。カラーコードの変更で即座に変更できるが、オリジナルの形状や多色のマーカーを使い分けるときは、Leaflet Tutorialsの Markers with Custom Iconsが参考になる。

let mymap = new L.map('map').setView([35, 135], 11);

//国土地理院地図
let gsiattr = "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>";
let gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { minZoom:5, attribution: gsiattr });
gsi.addTo(mymap);  // 初期設定で地理院標準地図を表示

let geojsonMarkerOptions = {
    radius: 4,
    fillColor: "#00ffff",
    color: "#00f",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

let point;  //ため池        
$.getJSON("../geojson/nishiwaki_2138.geojson",function(data) {
    point = L.geoJson(data,{
        pointToLayer: function (feature,cordinate) {
        return L.circleMarker(cordinate,geojsonMarkerOptions)},
    onEachFeature: function(feature,layer){
        let name = feature.properties.ため池名;      //ため池名
        layer.bindPopup(name);
        }
    }).addTo(mymap);
});