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?

1
  • 6th question in two days? 10th question in 12 days?
    – TomazicM
    Aug 14, 2019 at 16:45

3 Answers 3

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.

1
  • 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.
    – Geographos
    Aug 19, 2019 at 9:00
0

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.

0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.