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 ©, <a href="https://www.thunderforest.com/maps/transport/">Thunderforest</a> ©'
}).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>
clickLayer.feature
is undefinedfeature
property, since it's a circle marker, not GeoJSON feature.