Hide Wikipedia plugin layer below certain zoom level in Leaflet

Question

How can I turn the following code into a variable, so that I can choose, or not, to load it in the layer control? and not anymore on moving the map or reaching this zoom level.

I added a var wikilayer = before "function on moveend" and brackets here and at the very end, but it's resulting in the browser minding on the ending bracket and the page not to function from this code

Following is a working code with the following js file found at Github from Turban's repositery https://github.com/turban/Leaflet.Wikipedia

// wikipedia 

var start_at_zoom_wiki = 10;

function onMoveEnd(evt) {
  if (map.getZoom() > start_at_zoom_wiki) {

    var template = '<h2>{label}</h2><p><img src="{thumbnail}" width="150"><br>{abstract}</p><p><a href="{link}" target="_blank">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: 'http://mappingforyou.eu/icons/wikipedia_16.png',
          iconRetinaUrl: 'http://mappingforyou.eu/icons/wikipedia_32.png',
          iconSize: [16, 16]
        })
      }
    }).addTo(map).on('click', function (evt) {
      evt.layer.bindPopup(L.Util.template(template, evt.layer.data), customOptions);
    });
  }
}

map.on('moveend', onMoveEnd);

and this is my alternate layer control from here

var baseLayers = [];
var overLayers = [{
  group: " ",
  layers: [{
    active: false,
    name: "Wikipedia (test)",
    icon: '<i class="icon icon-restaurant"></i>',
    layer: wiki,
  }, ]
}, ];

// panel

var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers, {
  compact: true,
  collapsed: true,
  collapsibleGroups: false
});


map.addControl(panelLayers);

Answer 1

Leaflet.Wikipedia plugin has a big defficiency/bug that it does not refresh data when map is zoomed or panned. This means that on any map zoom/pan, which triggers map moveend event, layer has to be recreated.

Simplest way to do this is to have an auxiliray layer group wikipedia, where old data/features is first cleared out and then new data/features are added.

Code could then look something like this:

var map = L.map('map');
map.setView([51.4235064, -1.7134741999999998], 13);

var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var template = '<h2>{label}</h2><p><img src="{thumbnail}" width="150"><br>{abstract}</p><p><a href="{link}" target="_blank">Wikipedia...</a></p>';

var wikipedia = L.layerGroup();

function getWikipadeaData() {
  var newWiki = 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: 'http://mappingforyou.eu/icons/wikipedia_16.png',
        iconRetinaUrl: 'http://mappingforyou.eu/icons/wikipedia_32.png',
        iconSize: [16, 16]
      })
    }
  }).on('click', function (evt) {
    evt.layer.bindPopup(L.Util.template(template, evt.layer.data), customOptions);
  });
  wikipedia.clearLayers();
  wikipedia.addLayer(newWiki);
  if (!map.hasLayer(wikipedia)) map.addLayer(wikipedia);
}

var baseLayers = [];       
var overLayers = [
  {
    name: "Wikipedia",
    icon: '<img src="http://mappingforyou.eu/icons/wikipedia_16.png">',
    layer: wikipedia
  },
];

var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers);
map.addControl(panelLayers);

var start_at_zoom_wiki = 10;
function onMoveEnd(evt) {
  if (map.getZoom() > start_at_zoom_wiki) {
    getWikipadeaData();
  }
}
map.on('moveend', onMoveEnd);

Answer 2

This is how the plugin works if you want to use a button to show the articles, but still prevent to load articles when using a low zoom factor.

Maybe there is an easier way than using a variable like state=1 or state=0, but at least it works. The fact is, I didn't tried to add it to a Leaflet layer control.

this leaflet wikipedia articles plugin could be edited by using https in the dbpedia calls, choosing the language, choosing the maximum articles on a map.

// implementing early variables


var temoinwiki;
var wikipedia = L.layerGroup();
var start_at_zoom_wiki = 9
var template = '<p>{label}</p><p><img src="{thumbnail}" width="150"><br>{abstract}</p><p><a href="{link}" target="_blank">Wikipedia...</a></p>';

// get the wikipedia info

function getWikipediaData() {
    var newWiki = L.wikipedia({
    query: {
        fields: ['label', 'lat', 'lng', 'abstract', 'link', 'thumbnail'],
        bounds: map.getBounds()
    },
    marker: {
        icon: L.icon({
            iconUrl: 'https://mappingforyou.eu/icons2/wikipedia_16.png',
            iconRetinaUrl: 'https://mappingforyou.eu/icons2/wikipedia_16.png',
            iconSize: [16, 16]
        })
    }
}).on('click', function(evt) {
    evt.layer.bindPopup(L.Util.template(template, evt.layer.data), {
        maxHeight: 200,
        maxWidth: 200
    });
});


wikipedia.clearLayers();
          wikipedia.addLayer(newWiki);
if (!map.hasLayer(wikipedia)) map.addLayer(wikipedia);
            }           ;

// changes data when moving panning or zooming the map

function onMoveEndwiki(evt) {
  if (map.getZoom() > start_at_zoom_wiki && temoinwiki === 1) {
    getWikipediaData(); }

    else if (map.getZoom() <= start_at_zoom_wiki) {wikipedia.clearLayers()};
};

map.on('moveend', onMoveEndwiki);

// button, requires leaflet easybutton

var wikibtn = L.easyButton({
    states: [{

      stateName: 'loadwiki',        // name the state
    icon:      '<strong>W</strong>',               // and define its properties
    title:     'Wikipedia articles',      // like its title
    onClick: function(btn, map) {       // and its callback 
        temoinwiki = 1;
         if (map.getZoom() > start_at_zoom_wiki) {getWikipediaData()};   
        btn.state('removewiki');    // change state on click!
    }
}, {
    stateName: 'removewiki',
    icon:      '<strong>W*</strong>',
    title:     'Remove Wikipedia articles',
    onClick: function(btn, map) {
temoinwiki = 0;
map.removeLayer(controlMarkerwiki);
         wikipedia.clearLayers();
        btn.state('loadwiki');
    }
}]
});

wikibtn.addTo(map);