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?