3

I'm trying to use the Wikipedia layer in english: http://mappingforyou.eu/javascript/Leaflet.Wikipedia.js

but I'm not successful on using the leaflet infotips "BindPopup". The code could be working with a sidebar, but I prefer infotips. Can you correct the line for me please?

enter image description here

function onMoveEnd(evt) {

  var template = '<h2>{label}</h2><p><img src="{thumbnail}"><br>{abstract}</p><p><a href="{link}">Read on Wikipedia</a></p>';

  L.wikipedia({
    query: {
      fields: ['label', 'lat', 'lng', 'abstract', 'link', 'thumbnail'],
      bounds: map.getBounds()
    },
    marker: {
      icon: L.icon({ // Icons from http://www.icondrawer.com/social-icons.php
        iconUrl: 'https://mappingforyou.eu/icons2/wikipedia_16.png',
        iconRetinaUrl: 'https://mappingforyou.eu/icons2/wikipedia_32.png',
        iconSize: [16, 16]
      })
    }
  }).addTo(map).on('click', function (evt) {
    evt.layer.bindPopup((template), {maxWidth: 200, maxHeight: 200});



  });
}

map.on('moveend', onMoveEnd);
2

1 Answer 1

3

the

      evt.layer.bindPopup((template), {maxWidth: 200, maxHeight: 200});

was replaced with

      evt.layer.bindPopup(L.Util.template(template, evt.layer.data), {maxWidth: 200, maxHeight: 200});

as in

function onMoveEnd(evt) {

  var template = '<h2>{label}</h2><p><img src="{thumbnail}"><br>{abstract}</p><p><a href="{link}">Read on Wikipedia</a></p>';

  L.wikipedia({
    query: {
      fields: ['label', 'lat', 'lng', 'abstract', 'link', 'thumbnail'],
      bounds: map.getBounds()
    },
    marker: {
      icon: L.icon({ // Icons from http://www.icondrawer.com/social-icons.php
        iconUrl: 'https://mappingforyou.eu/icons2/wikipedia_16.png',
        iconRetinaUrl: 'https://mappingforyou.eu/icons2/wikipedia_32.png',
        iconSize: [16, 16]
      })
    }
  }).addTo(map).on('click', function (evt) {
          evt.layer.bindPopup(L.Util.template(template, evt.layer.data), {maxWidth: 200, maxHeight: 200});


  });
}

map.on('moveend', onMoveEnd);

and successfully managed to show the data.

enter image description here

0

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.