1

I am trying to highlight a marker using a different icon when clicked. There are many posts about it but I am getting different error:

.setIcon is not a function.

This is my point data and the click event on it:

var schoolP = new L.GeoJSON.AJAX('data/schools.json', {pointToLayer:function(feature,latlng){
  var str= "<h6><b>"+feature.properties.sch_name+", "+feature.properties.sch_loc+"</b><br>Primary Schools</h6>";
     return L.marker(latlng,{icon: primaryIcon}).bindPopup(str);                             
}});
         
schoolP.addTo(mymap);

// When click
schoolP.on('click', function(e) {
    schoolP.setIcon(highlightIcon);
});

Below is how I defined the marker icons:

//primary school icon
var primaryIcon = new L.Icon({
  iconUrl: '/webmap101/img/schoolP.png',
  iconSize: [40, 61],
  iconAnchor: [12, 41],
  popupAnchor: [120, 30]
});


//icon when highlight
var highlightIcon = new L.Icon({
  iconUrl: '/webmap101/img/SchoolHighlight.png',
  iconSize: [60, 81],
  iconAnchor: [12, 41],
  popupAnchor: [120, 30]
});
2
  • Could you add tags showing what the script is used for - my guess is that it's an open layers script or leaflet (possibly your code has been adapted from QGIStoWeb)
    – LeasMaps
    Commented May 11, 2023 at 4:57
  • Hi @TomazicM, Thanks. I will try the code. I also want to un-highlight the previous marker when another marker is selected. I saw some of your previous posts and it seems we can achieve it with another function of reset-highlight and assigning it to some other event like mouseout or similar. But, I just want to use "click" event to select new marker and unselect the previous one. I ended up using the code below but it is not working. I will add the code in another comment due to character limitation. Commented May 15, 2023 at 7:37

1 Answer 1

0

With your code you are trying to set different icon to whole schoolP layer, which cant be done. You have to set new icon to clicked marker layer. You can get clicked marker layer from click event e by property e.propagatedFrom (see https://leafletjs.com/reference.html#event).

So relevant part of the code should the look something like:

schoolP.on('click', function(e) {
  e.propagatedFrom.setIcon(highlightIcon);
});
7
  • Hi @TomazicM, Thanks. I will try the code. I also want to un-highlight the previous marker when another marker is selected. I saw some of your previous posts and it seems we can achieve this with another function of reset-highlight and assigning it to some other event like mouseout or similar. But, I just want to "click" event only to select new marker and unselect the previous one. I ended up using the code as below but it is not working: Commented May 15, 2023 at 7:23
  • var selectedLayer; function highlightSchool(e) { removeHighlight; var layer = e.target; layer.setIcon(highlightIcon); selectedLayer = layer; } function removeHighlight(e) { layer = e.target; if(selectedLayer!== layer){ selectedLayer.setIcon(primaryIcon); } } function onEachFeatureSchool(feature, layer) { layer.on({ click: highlightSchool }); } Commented May 15, 2023 at 7:41
  • var schoolP = new L.GeoJSON.AJAX('data/schools.json', {pointToLayer:function(feature,latlng){ var str= "<h6><b>"+feature.properties.sch_name+", "+feature.properties.sch_loc+"</b><br>Primary Schools</h6>"; return L.marker(latlng,{icon: primaryIcon}).bindPopup(str); },onEachFeature: onEachFeatureSchool}); schoolP.addTo(mymap); Commented May 15, 2023 at 7:44
  • Answer above answers your question. If answer helped you solve you problem, it's customary on GIS SE site to mark it as accepted, to let others with similar problems know that problem was resolved. If you have additional question, please post it as a new question.
    – TomazicM
    Commented May 15, 2023 at 9:15
  • Thanks @TomazicM. How to mark it as accepted? Also, I will post my follow up question as a new one. Commented May 16, 2023 at 1:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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