Linked popup image in GeoJSON file

Question

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?

Answer 1

I put up some write ups and examples here for a class. http://www.gistechsolutions.com/leaflet/DEMO/ I have some write ups and examples, You can view source and copy/paste my code from the pages, and even get the data if you need it.

You may want to check out "Panel Map" and "NY Leg map", both of these apps use links and images that work off the on-click event in the onEachFeatrure function. I stuck the images and links in a table in a div, that loaded with the on-click event. You can use CSS to hide/show the div and style it.

Another option is a sidebar https://github.com/nickpeihl/leaflet-sidebar-v2 I've used these and have them open/show on an on-click event. The code is very similar to using a side panel. Good Luck.

Answer 2

It looks like this solution is worth to use:

Changing image size in JSON file

after a couple forther advices I modified my code like this:

 onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p><a href='file:///Z:\\Fixed Line\\Design & Build\\2. Clients\\Openreach\\3. MDU Designs\\Coventry\\OR66 - Priory Court, Coventry\\front.png'><img src='images/" + feature.properties.Pict + "' style='width:200px;height:250px;'></a><p>"+feature.properties.Description+"</p><a>"+feature.properties.URL+"</a>");
}

    }).addTo(map);

placing the <a href...> path before the feature.properties.Pics.

I used a path to the local file, although it works fine alwo with normal URL address.

Answer 3

If you want to have an image specified to a single file, then you must use the following code:

onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p><a href='images/" + feature.properties.Pict + "'><img src='images/" + feature.properties.Pict + "' style='width:200px;height:250px;'></a><p>"+feature.properties.Description+"</p><a>"+feature.properties.URL+"</a>");
}

    }).addTo(map);