1

I am trying to put an image inside the geoJSON file.

I know, that Geojson works as string and I cannot input the image directly, however I found some stuff, like this below:

http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm

which could be working, when code would be written properly. I believe, that problem lies somewhere in the quotes.

https://teamtreehouse.com/community/somebody-please-help-me-put-images-in-json

Anyhow my code looks like:

"type": "Feature",
             "properties": {
             "Title": "Stretham house",
                 "Head": "Flat to leave",
                 "Description": "<a href='https://en.wikipedia.org/wiki/Cambridge#/media/File:KingsCollegeChapelWest.jpg'<a>File directory</a>"
             "Pict":"image.png"
        },
            "geometry": {
            "type": "Point",
            "coordinates": [
            0.211212,
            52.344149
                ]
                  }
                    }];

And then...

var openreach = L.geoJSON(openpoor, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
    return L.circleMarker(latlng, btMarkerOptions);
},
    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><a>'+feature.properties.URL+'</a><br><img src='+ feature.properties.Pict +'/>');
}

    }).addTo(map);

As you can see I tried to put an image by 2 ways. Link opens me the image URL, however it's not visible at the pop up.

Another option fell through due some code mismatch.

I would like to have an effect similar to Google MyMaps

I am aware, that GeoJSON does not support a way such this.

Image popup in Google MyMaps

  • Ugh, when I transferred ISP's I broke the gistechsolutions link you referenced. I know that example works as I used it in class, I'll fix the link tonight. In my example for the popup I use: <center><img src='images/" + feature.properties.Pict + "' style='width:200px;height:300x;'></center> so my GeoJSON just has the Picture name and the ipictures are stored in the website images folder. – Bill Chappell Aug 13 at 19:35
  • Could you show me a whole code? And also could be possible to explain, what is the <center> for? I don't really need it I believe. – Mariusz Krukar Aug 14 at 8:19
1

Fixed the link http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm

Right click on http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm view source. note line 43, is where I define the popup. Since the popup is basically HTML I style it with a size and center() it in the popup. The GeoJSON file picture value is stored in feature.properties.Pict My code points to an image folder and the picture name. img src='images/" + feature.properties.Pict and I use some styling to control the size displayed.

The url to my GeoJSON file http://www.gistechsolutions.com/leaflet/DEMO/basic/data/Eagles.json shows values for the Pict attribute like ("Pict": "baldeagle2.jpg")

So my popup knows where to look for the picture and what image to grag, and how to display it.

var popupContent = "<p><b>"+ feature.properties.COMMON_NAM +"</b><br> <center><img src='images/" + feature.properties.Pict + "' style='width:200px;height:300x;'></center> <br> Located at site: <b>" +
feature.properties.LOCALITY_I +'</b></p>' ;

layer.bindPopup(popupContent);

};

img src='images/" + feature.properties.Pict + "'

is the same HTML as src="images/baldeagle2.jpg" and the image is stored in my images folder off the website root. Of course the actual filename changes to match the record attribute.

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.