1

I have a problem adding my images to the popup features of my Geojson. I can do it for one image but i would like to have them for multipels images.

<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA==" crossorigin=""></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<style>

#myMapContainer {
border: red 1px solid;
width: 1880px;
height: 950px;
}
.leaflet-popup-content {
max-widthwidth: 1000px;
height: 600px;
overflow-y: scroll;
}

</style>
</head>
<body>

<div id='myMapContainer'></div>

<script>

// initialize the map
var myMap = L.map('myMapContainer', {
center: [49.806111111111107, 8.5986111111111114],
zoom: 30
});

var geojsonFeature = {
"type": "FeatureCollection",
"name": "bilder",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "ID": "5a7ff6d8-1697-4eac-937a-8f7183c56b2b", "Name": "20190826_093333.jpg", "Date": "2019\/08\/26", "Time": "09:33:33", "Lon": 8.5986111111111114, "Lat": 49.806111111111107, "Altitude": 159.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093333.jpg", "RelPath": ".\/bilder\/20190826_093333.jpg", "Timestamp": "2019\/08\/26 09:33:33" }, "geometry": { "type": "Point", "coordinates": [ 8.598611111111111, 49.806111111111107 ] } },
{ "type": "Feature", "properties": { "ID": "df988dff-7089-4f67-a91a-2c915b609849", "Name": "20190826_093334.jpg", "Date": "2019\/08\/26", "Time": "09:33:34", "Lon": 8.5986111111111114, "Lat": 49.806111111111107, "Altitude": 158.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093334.jpg", "RelPath": ".\/bilder\/20190826_093334.jpg", "Timestamp": "2019\/08\/26 09:33:34" }, "geometry": { "type": "Point", "coordinates": [ 8.598611111111111, 49.806111111111107 ] } },
{ "type": "Feature", "properties": { "ID": "42ceefde-fa04-41d1-9245-1b7df36f8513", "Name": "20190826_093351.jpg", "Date": "2019\/08\/26", "Time": "09:33:51", "Lon": 8.5988888888888901, "Lat": 49.806388888888883, "Altitude": 151.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093351.jpg", "RelPath": ".\/bilder\/20190826_093351.jpg", "Timestamp": "2019\/08\/26 09:33:51" }, "geometry": { "type": "Point", "coordinates": [ 8.59888888888889, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "af3843a5-8ce6-46e4-84aa-c57281b8abd7", "Name": "20190826_093353.jpg", "Date": "2019\/08\/26", "Time": "09:33:53", "Lon": 8.5988888888888901, "Lat": 49.806388888888883, "Altitude": 151.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093353.jpg", "RelPath": ".\/bilder\/20190826_093353.jpg", "Timestamp": "2019\/08\/26 09:33:53" }, "geometry": { "type": "Point", "coordinates": [ 8.59888888888889, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "57cf9f41-794e-4db0-b660-f6a65880cd21", "Name": "20190826_093355.jpg", "Date": "2019\/08\/26", "Time": "09:33:55", "Lon": 8.5988888888888901, "Lat": 49.806388888888883, "Altitude": 151.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093355.jpg", "RelPath": ".\/bilder\/20190826_093355.jpg", "Timestamp": "2019\/08\/26 09:33:55" }, "geometry": { "type": "Point", "coordinates": [ 8.59888888888889, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "45653ac0-acab-4637-a61e-11f90e0d3ee5", "Name": "20190826_093408.jpg", "Date": "2019\/08\/26", "Time": "09:34:08", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 155.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093408.jpg", "RelPath": ".\/bilder\/20190826_093408.jpg", "Timestamp": "2019\/08\/26 09:34:08" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "e39e9b1b-9b65-4b23-9f46-89759e2f9900", "Name": "20190826_093411.jpg", "Date": "2019\/08\/26", "Time": "09:34:11", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 155.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093411.jpg", "RelPath": ".\/bilder\/20190826_093411.jpg", "Timestamp": "2019\/08\/26 09:34:11" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "085b6d47-be69-4616-91b1-05ebf945e7a9", "Name": "20190826_093414.jpg", "Date": "2019\/08\/26", "Time": "09:34:14", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 155.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093414.jpg", "RelPath": ".\/bilder\/20190826_093414.jpg", "Timestamp": "2019\/08\/26 09:34:14" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "a150bb68-2a6e-4104-9194-893a3dbf92aa", "Name": "20190826_093427.jpg", "Date": "2019\/08\/26", "Time": "09:34:27", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 151.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093427.jpg", "RelPath": ".\/bilder\/20190826_093427.jpg", "Timestamp": "2019\/08\/26 09:34:27" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "a4ffe1b6-0d27-4d98-aa80-61a711f92fec", "Name": "20190826_093429.jpg", "Date": "2019\/08\/26", "Time": "09:34:29", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 156.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093429.jpg", "RelPath": ".\/bilder\/20190826_093429.jpg", "Timestamp": "2019\/08\/26 09:34:29" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "75a82be8-d11a-4907-b37e-7d14bf14d510", "Name": "20190826_093442.jpg", "Date": "2019\/08\/26", "Time": "09:34:42", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 157.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093442.jpg", "RelPath": ".\/bilder\/20190826_093442.jpg", "Timestamp": "2019\/08\/26 09:34:42" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "4eb3119f-c9c3-472f-8f5b-1e75b0f34671", "Name": "20190826_093444.jpg", "Date": "2019\/08\/26", "Time": "09:34:44", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 158.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093444.jpg", "RelPath": ".\/bilder\/20190826_093444.jpg", "Timestamp": "2019\/08\/26 09:34:44" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "ae71e289-1f59-4fee-a1f2-9735a76bfbbb", "Name": "20190826_093446.jpg", "Date": "2019\/08\/26", "Time": "09:34:46", "Lon": 8.5991666666666671, "Lat": 49.806388888888883, "Altitude": 158.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093446.jpg", "RelPath": ".\/bilder\/20190826_093446.jpg", "Timestamp": "2019\/08\/26 09:34:46" }, "geometry": { "type": "Point", "coordinates": [ 8.599166666666667, 49.806388888888883 ] } },
{ "type": "Feature", "properties": { "ID": "9e406746-f39d-45e6-9829-b4660eb9c783", "Name": "20190826_093501.jpg", "Date": "2019\/08\/26", "Time": "09:35:01", "Lon": 8.5994444444444458, "Lat": 49.806666666666665, "Altitude": 0.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093501.jpg", "RelPath": ".\/bilder\/20190826_093501.jpg", "Timestamp": "2019\/08\/26 09:35:01" }, "geometry": { "type": "Point", "coordinates": [ 8.599444444444446, 49.806666666666665 ] } },
{ "type": "Feature", "properties": { "ID": "3647e5f7-74c2-41c0-88b0-1ff90c503be4", "Name": "20190826_093511.jpg", "Date": "2019\/08\/26", "Time": "09:35:11", "Lon": 8.5994444444444458, "Lat": 49.806666666666665, "Altitude": 0.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093511.jpg", "RelPath": ".\/bilder\/20190826_093511.jpg", "Timestamp": "2019\/08\/26 09:35:11" }, "geometry": { "type": "Point", "coordinates": [ 8.599444444444446, 49.806666666666665 ] } },
{ "type": "Feature", "properties": { "ID": "a588e974-7f30-4d61-9fe8-5a9b9ab4776f", "Name": "20190826_093514.jpg", "Date": "2019\/08\/26", "Time": "09:35:14", "Lon": 8.5994444444444458, "Lat": 49.806666666666665, "Altitude": 0.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093514.jpg", "RelPath": ".\/bilder\/20190826_093514.jpg", "Timestamp": "2019\/08\/26 09:35:14" }, "geometry": { "type": "Point", "coordinates": [ 8.599444444444446, 49.806666666666665 ] } },
{ "type": "Feature", "properties": { "ID": "b2a386f5-6536-4976-8a26-c00d32a84fdc", "Name": "20190826_093521.jpg", "Date": "2019\/08\/26", "Time": "09:35:21", "Lon": 8.5994444444444458, "Lat": 49.806666666666665, "Altitude": 0.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093521.jpg", "RelPath": ".\/bilder\/20190826_093521.jpg", "Timestamp": "2019\/08\/26 09:35:21" }, "geometry": { "type": "Point", "coordinates": [ 8.599444444444446, 49.806666666666665 ] } },
{ "type": "Feature", "properties": { "ID": "5afb1b2e-4b6f-449b-bc26-dcd0afdf6c64", "Name": "20190826_093525.jpg", "Date": "2019\/08\/26", "Time": "09:35:25", "Lon": 8.5994444444444458, "Lat": 49.806666666666665, "Altitude": 0.0, "North": "", "Azimuth": "", "Camera Maker": "samsung", "Camera Model": "SM-G960F", "Title": "", "Comment": "", "Path": "C:\/Users\/abdul.sayed\/Desktop\/leaflet\/bilder\\20190826_093525.jpg", "RelPath": ".\/bilder\/20190826_093525.jpg", "Timestamp": "2019\/08\/26 09:35:25" }, "geometry": { "type": "Point", "coordinates": [ 8.599444444444446, 49.806666666666665 ] } }
]
};




// For one Image

var mypos = L.marker([50.068155, 8.430888]);

var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var imageUrl = 'bilder/20190826_093333.jpg',


imageBounds = [[50.068155, 8.430888], [50.068155, 8.430888]];

mypos.bindPopup("<img src='" + imageUrl + "'/>", {maxWidth: 1000}).openPopup();

L.geoJSON(geojsonFeature).addTo(myMap);



OpenStreetMap_DE.addTo(myMap);
L.imageOverlay(imageUrl, imageBounds).addTo(myMap);
mypos.addTo(myMap);





</script>
</body>
</html>

enter image description here

  • Hi and welcome to GIS.SE! Could you please be more specific on your solution path or comment on your code? – root676 Sep 4 at 10:36
0

You need to place your pictures in a web folder. For example the first image:

"C:/Users/abdul.sayed/Desktop/leaflet/bilder\20190826_093333.jpg"

Well that's not on my C:\ drive, I won't see it. Change the data to just have the image name. Make a folder "photos" off your website. The have the JavaScript call it in the popup as

<img src='photos/" + feature.properties.YourPhotoField + "'> 

Now how to show more than one photo in a popup? Here is a demo of a bootstrap dialog with tabs, you could have one phot in each tab.

Using a bootstrap dialog with Tabs http://www.gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html Zip file of my pages and datafiles. http://www.gistechsolutions.com/leaflet/DEMO/pointsinpoly/pointsinpoly.zip

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.