3

Added individual url and image for 21 places in json file. Am trying to add image in my popup. Image shows up but broken in the popup. Not sure where in the code the error is??

(Same error for every popup, I rather load image from url, less space in project, but more control over pic if internal.)

My code:

var markerStyle = {
    radius: 3,
    fillColor: "#E4007C",
    color: "#E2062C",
    weight: 1,
    opacity: 0.9,
    fillOpacity: 0.7
};
         
var city = L.geoJson(cities, {
pointToLayer: function (features, latlng) {
    return L.circleMarker(latlng, markerStyle)
            .bindPopup("<center><img src='images/cityPic/" 
            + features.properties.cityPic 
            + "' style='width:200px;height:300x;'></center>" 
            + "<p><b> "+features.properties.city + "</b><br/>" 
            + "County: " + features.properties.admin_name + "<br/>" 
            + "Population: " + features.properties.population + "</p>" 
            + "<a href ='https://www.google.se/maps/@59.3036556,17.9778991,14z'><b> GET HERE </b></a>");
    }
}).addTo(map);

enter image description here

0
4

In your bindPopup, make sure the call to the GeoJSON property matches its actual name:

var markerStyle = {
    radius: 3,
    fillColor: "#E4007C",
    color: "#E2062C",
    weight: 1,
    opacity: 0.9,
    fillOpacity: 0.7
};
         
var city = L.geoJson(cities, {
pointToLayer: function (features, latlng) {
    return L.circleMarker(latlng, markerStyle)
            .bindPopup("<center><img src='images/cityPic/" 
            + features.properties.cityPic  // <-- this doesn't exist in your geojson object
            + "' style='width:200px;height:300x;'></center>" 
            + "<p><b> "+features.properties.city + "</b><br/>" 
            + "County: " + features.properties.admin_name + "<br/>" 
            + "Population: " + features.properties.population + "</p>" 
            + "<a href ='https://www.google.se/maps/@59.3036556,17.9778991,14z'><b> GET HERE </b></a>");
    }
}).addTo(map);

The line features.properties.cityPic doesn't match the features.properties.pic property of your GeoJSON object which holds an image name stockholm.jpg.

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.