Hello.
I use Leaflet in a Web2py application where I load the features with $getJSON. I have only markers in my features.
My problem is that I don't find a way to load a different icon depending of a feature property.
I need something like that:
switch (feature.properties.category) {
case '1': set the green icon;
case '2': set the blu icon;
}
<script>
var map = L.map('map')
//Here is a greenIcon
var greenIcon = L.icon({
iconUrl: '{{=URL('static','markers/green.png')}}',
shadowUrl: '{{=URL('static','markers/shadow.png')}}',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
//Here is a bluIcon
var bluIcon = L.icon({
iconUrl: '{{=URL('static','markers/blu.png')}}',
shadowUrl: '{{=URL('static','markers/shadow.png')}}',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
map.on('load', function() {
loadMarkers();
}).setView([ {{=session.events_latitude}} , {{=session.events_longitude}} ], {{=session.zoom}});
map.on('moveend', function() {
loadMarkers();
});
function loadMarkers () {
var east = map.getBounds().getEast();
$('#east').val(east);
var west = map.getBounds().getWest();
$('#west').val(west);
var south = map.getBounds().getSouth();
$('#south').val(south);
var north = map.getBounds().getNorth();
$('#north').val(north);
var zoom = map.getZoom();
$.getJSON('{{=URL('f_ajax', 'get_main_event_locations')}}', {east: east, west: west, south: south, north: north, zoom: zoom}, function( data ) {
if (typeof geojsonLayer !== 'undefined') {
map.removeLayer(geojsonLayer);
}
geojsonLayer = L.geoJson(data, {
//With it I can set a custom icon, but it will be the same for all the features
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: greenIcon});
},
onEachFeature: onEachFeature}).addTo(map);
});
}
function onEachFeature (feature, layer) {
var popupContent;
if (feature.properties && feature.properties.popupContent) {
popupContent = feature.properties.popupContent + feature.properties.track_quotation;
}
layer.bindPopup(popupContent);
}
</script>
Someone knows how I can do it?
Thanks.