1

I want to draw markers from data on Leaflet map

I'm currently doing with that way

                 L.marker(
            [48.840346,2.319415]).addTo(map).bindPopup("<b>X<b>"<img style='width: 100%' src='http://i.imgur.com/XMVjS1s.jpg'/></div> ",{minWitdh:256} ");  

But i have a Data.json

  {
      "title": "A",
      "lat": 48.841491,
      "long": 2.355989,

   },
    {
      "title": "B",
      "lat": 48.878849,
      "long": 2.312855,
      },

i want to do something like this

 L.marker(
        [lat,long]).addTo(map).bindPopup("<b>title<b>"<img style='width: 100%' src='http://i.imgur.com/XMVjS1s.jpg'/></div> ",{minWitdh:256} ");  

To get all The Data and render it on my Map ?

1

This post should answer your question: https://stackoverflow.com/questions/14506989/leaflet-popup-with-additional-information-from-geojson

You should use the "onEachFeature" to attach a popup to your marker and show the information stored in your json data. Then, access the properties of your json data through feature.properties.* in the bindPopup() function.

var myLayer = L.geoJson(myJson, {
    onEachFeature: yourOnEachFeatureFunction
}).addTo(map);

function yourOnEachFeatureFunction(feature, layer){
    if (feature.properties.title) {
        layer.bindPopup("<b>" + feature.properties.title + "<b><img style='width: 100%' src='http://i.imgur.com/XMVjS1s.jpg'/></div>");
    }
}

The if condition is to be sure that you have a title property in your json data.

BTW, you could also store the src of the image in the json data.

To load the json in your leaflet map instead of hard-coding marker coordinates (L.geoJson(myJson,...)), I suggest to have a look at the leafllet documentation or in this forum. The way I usually do is to use jquery and its function $.getJSON():

var myGeojson = []; // global variable       

$.getJSON("./geojson/mygeojsonfile.json", function(data) {
          $.each(data.features, function(i, f) {
               myGeojson.push(f);         
         });

         var myLayer = L.geoJson(myGeojson, {
             onEachFeature: function (feature, layer) {
                layer.bindPopup("<b>" + feature.properties.title + "<b><img style='width: 100%' src='http://i.imgur.com/XMVjS1s.jpg'/></div>");
             }
           }).addTo(map);
        });

J.

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.