Linked popup image in GeoJSON file

by Mariusz Krukar   Last Updated August 14, 2019 15:22 PM

Developing the issue solved in this post:

Trying to pop up image in GeoJSON file?

I would like to have each GeoJSON image thumbnail possible to open in larger window.

I was trying to connect with my local file URL (but it can be obviously some link in the web):

{
  "type": "Feature",
  "properties": {
"Title": "JHG",
    "Head": "Shortstanton sidings",
"Description": "Conor Murphy",
"URL": "<a href='https://www.johnhenrygroup.co.uk/' target='blank'>JHG</a>",
"Pict": "image.png"
"PicURL": "<a href='file:///Z:\\Fixed Line\\Design & Build\\2. Clients\\Openreach\\3. MDU Designs\\Coventry\\OR66 - Priory Court, Coventry\\20190709_121215019_iOS%20(1).jpg' target='blank'>image.png</a>
},
  "geometry": {
    "type": "Point",
    "coordinates": [
      0.05458831787109375,
      52.29163006501503
    ]
  }

} ] };

Then I built up the major code like this:

var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
    return L.circleMarker(latlng, geojsonMarkerOptions);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font 
 color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: 
"+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> 
Website:"+feature.properties.URL+"</p><br><center><a href='"+ 
feature.properties.PicURL +"' target='blank'><img src='images/" + 
feature.properties.Pict + " ' style='width:200px;height:300x;'></a>");
}

    }).addTo(map);

And I got a blank screen unfortunately.

Besides the following code works in this case:

var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
    return L.circleMarker(latlng, geojsonMarkerOptions);
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font 
color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: 
"+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> 
Website:"+feature.properties.URL+"</p><br><center><a href='file:///Z:\\Fixed Line\\Design & Build\\2. Clients\\Openreach\\3. MDU Designs\\Coventry\\OR66 - Priory Court, Coventry\\20190709_121215019_iOS%20(1).jpg' target='blank'><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'></a>");

}

    }).addTo(map);

But I got the same link for all GeoJSON placemarks.

Does anyone know how to make the link unique for a single one popup?



Related Questions


Pop up image in GeoJSON file

Updated August 13, 2019 18:22 PM

Leaflet.js - GeoJson properties as icon

Updated February 19, 2018 08:22 AM

Displaying bounding box array on leaflet map

Updated February 20, 2017 13:22 PM


Leaflet draw export to kml

Updated November 08, 2017 15:22 PM