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
  • Is this linked to leaflet data providers plugin to display Wikipedia API entries on a map layer? I have been having trouble getting that to work properly.
    – WombatBill
    Commented Feb 24, 2023 at 10:28
  • @WombatBill look here gis.stackexchange.com/questions/421181/…
    – Vincent Dc
    Commented Feb 24, 2023 at 12:14

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 you have read our privacy policy.

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