4

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.com/dark_all/{z}/{x}/{y}.png', {
attribution: '&copy;     
<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; 
<a href="http://cartodb.com/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> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/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.net/3tmre0pf/

Improve this question
2

1 Answer 1

Reset to default
4

You 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

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.