0

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?

  • 6th question in two days? 10th question in 12 days? – TomazicM Aug 14 at 16:45
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.

  • It doesn't really solve my particular problem right now, although there is a bulk of another useful options, that I will take into account soon. – Mariusz Krukar 2 days ago

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.