I have a question (unexpectedly) about styling markers in leaflet. I have a map with list displaying some earthquakes from geojson (.0/summary/all_day.geojson). The thing is I want to set the markers colors due to mag property in geojson. I tried some code on my own but nothing seems to work for me. Do you have please some idea where could be the problem or how to do this? Thank you for all your help. Below is my js code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-geojson-selector.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="top"></div>
<div id="map"></div>
<script src="moment.min.js"> </script>
<script src="jquery.min.js"></script>
<script src="leaflet.js"></script>
<script src="leaflet-geojson-selector.js"></script>
<script>
var geoLayer, geoList,
map = new L.Map('map', {
zoomControl:false,
center: [30.9000, 31.2400],
zoom: 2,
maxBounds: [[-90,-180],[90,180]],
layers: [
L.tileLayer(
'http://{s}.basemaps.cartocdn/dark_all/{z}/{x}/{y}.png', {
attribution: '©
<a href="">OpenStreetMap</a> ©
<a href="">CartoDB</a>',
subdomains: 'abcd',
minZoom: 2,
maxZoom: 3,
}),
L.tileLayer('={x}&y={y}&z={z}', {
maxZoom: 20,
minZoom: 4,
attribution: 'Imagery from <a href="/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="">OpenStreetMap</a>'
}),
]
});
map.addControl(L.control.zoom({position:'topright'}));
$.getJSON('.0/summary/all_day.geojson', function(json) {
geoLayer = L.geoJson(json, {
onEachFeature: function(feature,layer) {
var popupText = "<b>Magnitude:</b> " + feature.properties.mag
+ "<br><b>Location:</b> " + feature.properties.place
+ "<br><a href='" + feature.properties.url + "'>More info</a>";
layer.bindPopup(popupText, {closeButton: false, offset: L.point(0, -20)});
layer.on('mouseover', function() { layer.openPopup(); });
layer.on('mouseout', function() { layer.closePopup(); });
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: Math.round(feature.properties.mag)*3,
});
},
}).addTo(map);
geoList = new L.Control.GeoJSONSelector(geoLayer, {
zoomToLayer: true,
listOnlyVisibleLayers: true
});
map.addControl(geoList);
});
</script>
</body>
</html>
Here is my leaflet-geojson-selector.js : /
I have a question (unexpectedly) about styling markers in leaflet. I have a map with list displaying some earthquakes from geojson (http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson). The thing is I want to set the markers colors due to mag property in geojson. I tried some code on my own but nothing seems to work for me. Do you have please some idea where could be the problem or how to do this? Thank you for all your help. Below is my js code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-geojson-selector.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="top"></div>
<div id="map"></div>
<script src="moment.min.js"> </script>
<script src="jquery.min.js"></script>
<script src="leaflet.js"></script>
<script src="leaflet-geojson-selector.js"></script>
<script>
var geoLayer, geoList,
map = new L.Map('map', {
zoomControl:false,
center: [30.9000, 31.2400],
zoom: 2,
maxBounds: [[-90,-180],[90,180]],
layers: [
L.tileLayer(
'http://{s}.basemaps.cartocdn./dark_all/{z}/{x}/{y}.png', {
attribution: '©
<a href="http://www.openstreetmap/copyright">OpenStreetMap</a> ©
<a href="http://cartodb./attributions">CartoDB</a>',
subdomains: 'abcd',
minZoom: 2,
maxZoom: 3,
}),
L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
maxZoom: 20,
minZoom: 4,
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="http://www.openstreetmap/copyright">OpenStreetMap</a>'
}),
]
});
map.addControl(L.control.zoom({position:'topright'}));
$.getJSON('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) {
geoLayer = L.geoJson(json, {
onEachFeature: function(feature,layer) {
var popupText = "<b>Magnitude:</b> " + feature.properties.mag
+ "<br><b>Location:</b> " + feature.properties.place
+ "<br><a href='" + feature.properties.url + "'>More info</a>";
layer.bindPopup(popupText, {closeButton: false, offset: L.point(0, -20)});
layer.on('mouseover', function() { layer.openPopup(); });
layer.on('mouseout', function() { layer.closePopup(); });
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: Math.round(feature.properties.mag)*3,
});
},
}).addTo(map);
geoList = new L.Control.GeoJSONSelector(geoLayer, {
zoomToLayer: true,
listOnlyVisibleLayers: true
});
map.addControl(geoList);
});
</script>
</body>
</html>
Here is my leaflet-geojson-selector.js : https://jsfiddle/3tmre0pf/
Share Improve this question asked Feb 23, 2017 at 11:52 peterpeter 431 silver badge3 bronze badges 2- Have you read leafletjs./examples/geojson ? – IvanSanchez Commented Feb 23, 2017 at 12:49
- Yes mate, but I am somehow stuck on this.. – peter Commented Feb 24, 2017 at 7:30
1 Answer
Reset to default 4You can style your markers depending on choosen value by adding the style function to your geojson call:
$.getJSON('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) {
geoLayer = L.geoJson(json, {
style: function(feature) {
var mag = feature.properties.mag;
if (mag >= 4.0) {
return { color: "red" };
}
else if (mag >= 3.0) {
return { color: "orange" };
}
else if (mag >= 2.0) {
return { color: "yellow" };
}
else {
return { color: "green" };
}
},
onEachFeature: ...
}
Simplified example on codepen: http://codepen.io/dagmara223/pen/LWYNJO