Leaflet: Error when showing marker name within an info box/popup from GeoJSON data

Question

I am trying to make it so when you click on the marker you get a popup with the name of the station within wales.

Live working of my code: https://ces-web2.southwales.ac.uk/students/18018815/mitchtut/giscw2/leaflet.htm

I am currently getting this error:

leaflet.htm:167 Uncaught TypeError: Cannot read property 'properties' of undefined at i.clickOnMarker1 (leaflet.htm:167)

code:

<!--MAP SCRIPT-->
<script>
<!--Instantiating the map-->
    var Leafmap = L.map('mapspce', {
    center: [51.5, -3.4],
    zoom: 9,
    scrollWheelZoon:true,
    contextmenu:true,
    locateControl:true,
    contextmenuItems:[
        {
            text: 'KML Loaded Map',
            callback:function(latlngObj, layerPoint, containerPoint) {
                alert('you have clicked on: ' + latlngObj.latlng);
            }.bind(this)
        }
    ]
});



<!--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
};

<!--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
}
//if clicked the circle marker changes colour and gets bigger
function SetMarkerStyle(target) {
if (clicked) {
clicked.setStyle(unclickStyle);
}
target.setStyle(clickStyle);
clicked=target;

}

var infoWindow =L.control();//creating the infowindow

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);


//setting circle marker style when clicked
function clickOnMarker1(e){
SetMarkerStyle(e.target);
infoWindow.update(clickLayer.feature.properties);
}

function clickOnMarker2(e){
SetMarkerStyle(e.target.tMarker);
}


var clickLayer = L.geoJSON(wtsGeo,{ //getting the markers from the GeoJSON file
pointToLayer: function (feature,latlng) { //assigning them to markers
var Marker1 = L.circleMarker(latlng,unclickStyle); //Setting the marker to a circle and its values to that of its geospatial coordinates
//var Marker2 = L.marker(latlng);//Old Marker
//Marker2.tMarker = Marker1;//Old Marker
var markerGroup = L.layerGroup([Marker1]);
Marker1.on('click', clickOnMarker1);//assigning the click tofunction to the marker
//Marker2.on('click', clickOnMarker2);//Old Marker
return(markerGroup);
}
}).addTo(Leafmap);//adding this layer to the map
</script>

Answer 1

Rearranging the colour click and reassigning functions will make this easier.

There was an issue with the way in which the colour changing script led to an error in which the way the infobox was called.

Splitting the functions up helped to reduce confusion and enable to colour change to be called upon click and then updating the infobox by assigning it to the target through e.target

Code Below

    <!--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);
}

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

function panToFeature(e){
    Leafmap.fitBounds(e.target.getBounds())
}

function onEachFeature(feature, layer) {
    layer.on({
        click:SetMarkerStyle
    });
}