Change Marker Icon with Layers Control

[Bernd Loigge]

Hi,

Is there a way to change the Icon of all Makres of a geojson Layer with the Layer Control?

I have two Icons in my project:

var Icon_Target = L.icon({

iconUrl: 'https://dl.dropboxusercontent.com/u/209723935/Bibliotheken/images/Target.png',

iconSize: [30,35],

iconAnchor: [15,34]

})

var Icon_SiteB = L.icon({

iconUrl: 'https://dl.dropboxusercontent.com/u/209723935/Bibliotheken/images/SiteB.png',

iconSize: [30,35],

iconAnchor: [15,34]

})

I would like to change the icon using the Layers Control (like in this example - http://leafletjs.com/examples/layers-control-example.html - except that I don't want to show/remove the icon but to change it.

Any ideas?

Thanks in advance,

Bernd

[Robertico]

Have you found a solution ? I'm looking for the same.

Regards,

Robertico

Op vrijdag 27 juni 2014 09:50:55 UTC+2 schreef Bernd Loigge:

[bos...@geomarketing.de]

You could extend the Layer Control or write your own control

And then implement a function wich use "setIcon()" on your markers to change there icons.

[Robertico]

I've already tried the use of setIcon() but it doesn't work.

I use the easybutton plugin and added setIcon() to this buttons function, but no icon changed.

(I also use easybutton for another function (save to pdf) and that works just fine)

I've loaded my map and markers from a kml file (using the togeojson plugin)

I'd like to give the user the opportunity to select another icon (so dynamically change the icon)

[DanielX]

Did you tried doing this with a marker you created in the code yourself? 

Maybe there is a problem with the markers generated by your kml file. Because kml can include styles.

In a little sample, wich i craeted, is no problem changing the icon. http://fiddle.jshell.net/DanielX/uevr3Ldh/3/

And could you show us the code where you want to change the icon?

[Robertico]

Using Leaflet plugins;

• leaflet.filelayer (load local KML and convert to GeoJSON using togeojson.js)
  
• togeojson.js
  
• easy-button.js
  

Code;

var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: 'Map data © 2013 OpenStreetMap contributors',
});


var map = L.map('map')
   .fitWorld()
   .addLayer(osm);


// line style
var style = {color:'red', fillColor: "#ff7800", opacity: 1.0, fillOpacity: 0.8, weight: 2, clickable: false};


// icon style
var myIcon = L.icon({
iconUrl: 'map_pin_yellow.png',
iconSize: [22, 31],
iconAnchor: [9, 30],
popupAnchor: [0, -28]
});


L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';


var geoJsonOptions = {
 onEachFeature: function (feature, layer) {
 layer.bindPopup(feature.properties.description);},
 style: style,
 pointToLayer: function (data, latlng) {
 return L.marker(latlng, {icon: myIcon, title: 'Click icon'});
 }
}


L.Control.fileLayerLoad({
 layerOptions: geoJsonOptions,
}).addTo(map);

var Icon_SiteB = L.icon({
 iconUrl: 'https://dl.dropboxusercontent.com/u/209723935/Bibliotheken/images/SiteB.png',
 iconSize: [30,35],
 iconAnchor: [15,34]
 })

 
L.easyButton('fa-map-marker', function(){marker.setIcon(Icon_SiteB);},'Change Icon')

[DanielX]

I don't see any reference to your markers, so try pushing them in an array when creating them.

And then iterate the array when pushing your button and "setIcon" on each marker.

How many markers do you have to change? I think when there are to much it could be slow.



var markers = [];



var geoJsonOptions = {
 onEachFeature: function (feature, layer) {
 layer.bindPopup(feature.properties.description);},
 style: style,
 pointToLayer: function (data, latlng) {


 var marker = L.marker(latlng, {icon: myIcon, title: 'Click icon'};
 markers.push(marker);
 return marker;


 }
}


L.Control.fileLayerLoad({
 layerOptions: geoJsonOptions,
}).addTo(map);



var Icon_SiteB = L.icon({
 iconUrl: 'https://dl.dropboxusercontent.com/u/209723935/Bibliotheken/images/SiteB.png',
 iconSize: [30,35],
 iconAnchor: [15,34]
 })
 
L.easyButton('fa-map-marker', function(){


for(var i = 0;i<markers.length;i++){

markers[i]setIcon(Icon_SiteB);

}

},'Change Icon')

... 

[Robertico]

Thanks a million !

There's just a small mistake ( missing dot between markers[i] and setIcon(Icon_SiteB) )

L.easyButton('fa-map-marker', function(){
for(var i = 0;i<markers.length;i++){

markers[i].setIcon(Icon_SiteB);
}
},'Change Icon')

[DanielX]

My pleasure!

[Ali A]

Thanks alot.