1

Is there a way to reset a markers colour after clicking off of it.

I am trying to make the markers colour change once clicked on and then update the infobox to the name of the train station and zoom into the marker. Upon clicking on a new marker, I would like the old markers style to be reset. I used to have this through the if statement below

//if clicked the circle marker changes colour and gets bigger
     function SetMarkerStyle(target) {
     if (clicked) {
     clicked.setStyle(tMarker);
     }
     target.setStyle(clickStyle);
    clicked=target;
    }

However, this does not work in the current situation. Is there a way to update the marker after another has been selected?

Current Code to show implementation

<!--MAP SCRIPT-->
<script>
<!--Instantiating the map-->
    var Leafmap = L.map('mapspce', {
    center: [51.5, -3.4],
    zoom: 9,
    scrollWheelZoon:true,
    contextmenu:true,
    locateControl:true
});



<!--Adding the tile-->
L.tileLayer('https://tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=2392bb5236f942d8897fbe6d6c2d0c66',{
    maxZoom: 19,
    transparent: true,
    attribution: 'Tom Slater 18018815 &copy;, <a href="https://www.thunderforest.com/maps/transport/">Thunderforest</a> &copy;'
    }).addTo(Leafmap);
<!--Making a marker-->
var tMarker = {
    radius:6,
    fillColor: '#09f9df',
    color:'#ff0000',
    weight:1,
    opacity: 1,
    fillOpacity:1
};

var contentLayer =L.geoJSON(wtsGeo,{
    style: tMarker,
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, tMarker);
        }
    });
    
Leafmap.addLayer(contentLayer);

//Stores clicked marker
var clicked;

//Clicked style
var clickStyle = {
    radius:7,
    fillColor:'#ff0000',
    color:'#ff0000',
    opacity:1,
    weight:2,
    fillOpacity:1
}
//unclicked style
var unclickStyle = {
    radius:6,
    fillColor: '#09f9df',
    color:'#ff0000',
    weight:1,
    opacity: 1,
    fillOpacity:1
}

<!-- function addHandlers(feature, layer) { -->
    <!-- layer.on({ -->
        <!-- click: SetMarkerStyle -->
    <!-- }); -->
<!-- } -->

var infoWindow =L.control();

infoWindow.onAdd = function(Leafmap){
    this._div = L.DomUtil.create('div','info');
    this.update();
    return this._div;
};
    
infoWindow.update = function (statM) {
    this._div.innerHTML = '<h4>Station Name:</h4>' + (statM ? '<b>'+statM.distname:'click on marker');
};

infoWindow.addTo(Leafmap);

function SetMarkerStyle(e){
    var layer = e.target;
    layer.setStyle({
        radius:7,
        fillColor:'#ff0000',
        color:'#ff0000',
        opacity:1,
        weight:2,
        fillOpacity:1
    });
    infoWindow.update(layer.feature.properties);
    Leafmap.setView(e.latlng,13);
}

function resetClickStyle(e){
    contentLayer.resetStyle(e.target);
    infoWindow.update();
}

function zoomToFeature(e){
    Leafmap.setView(e.latlng,13);
}

function onEachFeature(feature, layer) {
    layer.on({
        click:SetMarkerStyle
    });
}
</script>

1 Answer 1

2

The easiest way is to call .resetStyle() on the GeoJSON Group. This clears the style of all markers. Or you can call .resetStyle(layer) then it resets only the passed layer.

  1. I recommand to reset all styles when a marker is clicked and then add the new style:
function resetMarkerStyles(){
    contentLayer.resetStyle();
    infoWindow.update();
}

function SetMarkerStyle(e){
    resetMarkerStyles();
    var layer = e.target;
    layer.setStyle({
        radius:7,
        fillColor:'#ff0000',
        color:'#ff0000',
        opacity:1,
        weight:2,
        fillOpacity:1
    });
    infoWindow.update(layer.feature.properties);
    Leafmap.setView(e.latlng,13);
}
  1. Add a click listener to the map, to reset the style when clicking on the map:
Leafmap.on('click',resetMarkerStyles);

But then you need to add L.DomEvent.stopPropagation(e) in SetMarkerStyle else it is called twice when clicking on the layer -> layer-click and then map-click:

function SetMarkerStyle(e){
    resetMarkerStyles();
    var layer = e.target;
    layer.setStyle({
        radius:7,
        fillColor:'#ff0000',
        color:'#ff0000',
        opacity:1,
        weight:2,
        fillOpacity:1
    });
    infoWindow.update(layer.feature.properties);
    Leafmap.setView(e.latlng,13);
    L.DomEvent.stopPropagation(e);
}

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.