0

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>
10
  • It would appear that clickLayer.feature is undefined
    – Ian Turton
    Feb 15, 2021 at 17:04
  • @IanTurton If you read the code toward the bottom it is defined being var clickLayer = L.geoJSON(wtsGeo,{
    – WMTS
    Feb 15, 2021 at 17:08
  • And yet the computer says "no" - read the error message
    – Ian Turton
    Feb 15, 2021 at 17:16
  • This provides no insight whatsoever. I have read the error although such a layer is defined and this is why I ask for help. Instead I am met with a rude "And yet the computer says "no"" from a moderator of all. Way to really close off coding for new people instead of being helpful like the community should be.
    – WMTS
    Feb 15, 2021 at 17:37
  • 2
    Sorry to say that, but you'll have to learn debugging in browser by setting breakpoints and inspecting values of variables/object. If you would do that, you would see that clicked marker/layer has no feature property, since it's a circle marker, not GeoJSON feature.
    – TomazicM
    Feb 15, 2021 at 18:22

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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