How to change colors geoJSON marker on leaflet based on ID?

Question

i'm simply want to change my marker from geoJSON on my leaflet based on ID properties in geoJSON marker, i've try follow tutorial on leaflet and also i've google it and still i can't find conclusion how to fix my code

Here my full code

<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 1366px; height: 720px;"></div>
<script>
var mymap = L.map('mapid').setView([-2.729070029832631,107.64713287353514], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/hadicns/cjji5fjq61nru2rmiheweks5d/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGFkaWNucyIsImEiOiJjampoem5kbWIycjYzM3FudjA2cDJhZmN6In0.cYnG3YB44jr4yitE_HFSgg', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}
var geojsonFeature = {"type":"FeatureCollection",
 "features":[
   {"type":"Feature",
    "properties":{"siteid":"TJN012",
                  "sitename":"TJN012MG1_TSEL_TanjungPandan3",
                  "popupContent":"siteid: TJN012<br>sitename: TJN012MG1_TSEL_TanjungPandan3",
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.63576,-2.72322]},
     "id": 3126},
   {"type":"Feature",
    "properties":{"siteid":"TJN002",
                  "sitename":"TJN002MD1_TSEL_TanjungPandanII",
                  "popupContent":"siteid: TJN002<br>sitename: TJN002MD1_TSEL_TanjungPandanII"
				  },
    "geometry":{"type":"Point",
                "coordinates":[107.65699,-2.7366]},
      "id": 3127 }]};


L.geoJSON(geojsonFeature, {

		style: function (feature) {
			return feature.properties && feature.properties.style;
		},

		onEachFeature: onEachFeature,

		pointToLayer: function (feature, latlng) {
			var colors = {
				3126: "#000",
				3127: "#001"
			};
			return new L.circleMarker(latlng, {
				radius: 8,
				fillColor: colors[feature.properties.id],
				color: colors[feature.properties.id],
				weight: 1,
				opacity: 1,
				fillOpacity: 0.8
				
			});
		}
	}).addTo(mymap);
L.geoJSON(geojsonFeature).addTo(mymap);
L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature
}).addTo(mymap);
</script>

</body>
</html>

And it's end up with black circle below marker icon for each marker i work on, please help me to change the marker color

code results

Stedy Stedy · Accepted Answer · 2018-07-17T06:08:56

In order to replace colors with a key value lookup you need to define a function instead of use array slicing. I created this function for ease of demonstration:

function getColor(d) {
  if (d === 3126)
    return "#000";
  if (d === 3127)
    return "#ff0000";
}

Your question originally used "#001" which also renders as black in the browser so I changed the color.

Finally, adding this function to L.geoJson:

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 1366px; height: 720px;"></div>
<script>
var mymap = L.map('mapid').setView([-2.729070029832631,107.64713287353514], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/hadicns/cjji5fjq61nru2rmiheweks5d/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGFkaWNucyIsImEiOiJjampoem5kbWIycjYzM3FudjA2cDJhZmN6In0.cYnG3YB44jr4yitE_HFSgg', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}
function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.popupContent) {
        layer.bindPopup(feature.properties.popupContent);
    }
}
var geojsonFeature = {"type":"FeatureCollection",
 "features":[
   {"type":"Feature",
    "properties":{"siteid":"TJN012",
                  "sitename":"TJN012MG1_TSEL_TanjungPandan3",
                  "popupContent":"siteid: TJN012<br>sitename: TJN012MG1_TSEL_TanjungPandan3",
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.63576,-2.72322]},
     "id": 3126},
   {"type":"Feature",
    "properties":{"siteid":"TJN002",
                  "sitename":"TJN002MD1_TSEL_TanjungPandanII",
                  "popupContent":"siteid: TJN002<br>sitename: TJN002MD1_TSEL_TanjungPandanII"
                  },
    "geometry":{"type":"Point",
                "coordinates":[107.65699,-2.7366]},
      "id": 3127 }]};

function getColor(d) {
  if (d === 3126)
    return "#000";
  if (d === 3127)
    return "#ff0000";
}


L.geoJSON(geojsonFeature, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature,

        pointToLayer: function (feature, latlng) {

    console.log(getColor(feature.id));
      return new L.circleMarker(latlng, {
                radius: 8,
                fillColor: getColor(feature.id),
        color: getColor(feature.id),
        weight: 1,
                opacity: 1,
                fillOpacity: 0.8

            });
        }
    }).addTo(mymap);

L.geoJSON(geojsonFeature).addTo(mymap);

</script>

</body>
</html>

Results in:

How to change colors geoJSON marker on leaflet based on ID?

1 Answers