I have been trying to move examples of Wikipedia layers to my file server. They work when opened via file explorer, but not when uploaded. All that I have changed are the addresses for the JS files. I can generate the maps, but either don't get no Wikipedia icons, or the bindPopup functions stop working.

<script src="assets/js/leaflet/reqwest.min.js"></script>
<script src="assets/js/leaflet/leaflet.js"></script>    
<script src="assets/js/leaflet/L.Control.Sidebar.js"></script>
<script src="assets/js/leaflet/Leaflet.Wikipedia.js"></script>

I have gone through the js files, but have been unable to find any internal links (a reference within one of the js files to another). Are there problems with some of these js files no longer being compatible with the current version of Leaflet?





The "existing code" is the example from the "turban" version:

<!DOCTYPE html>
    <title>Wikipedia articles in Rogaland</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--<meta property="og:image" content="route.png" />-->
    <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
    <link rel="stylesheet" href="lib/sidebar/L.Control.Sidebar.css" />  
        html, body, #map { margin: 0; height: 100%; background: #fff; }
        .leaflet-sidebar img { float: right; padding: 0 0 10px 10px; }

    <div id="sidebar"></div>
    <div id="map"></div>
    <script src="lib/reqwest.min.js"></script>          
    <script src="lib/leaflet/leaflet.js"></script>  
    <script src="lib/sidebar/L.Control.Sidebar.js"></script>    
    <script src="../src/Leaflet.Wikipedia.js"></script>

    var map = L.map('map', {
        minZoom: 5,
        maxZoom: 19
    }).setView([36.1205, -5.342], 16);

    var sidebar = L.control.sidebar('sidebar', {
        closeButton: true,
        position: 'left'
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

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

        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: 'img/wikipedia_16.png',
                iconRetinaUrl: 'img/wikipedia_32.png',
                iconSize: [16, 16]
    }).addTo(map).on('click', function(evt) { 
        sidebar.setContent(L.Util.template(template, evt.layer.data)).show();


The only change I made was to the addresses of the JavaScript files:

<script src="assets/js/leaflet/reqwest.min.js"></script>
<script src="assets/js/leaflet/leaflet.js"></script>    
<script src="assets/js/leaflet/L.Control.Sidebar.js"></script>
<script src="assets/js/leaflet/Leaflet.Wikipedia.js"></script>
  • What is the "file server?" is that different to a web server? Which environment (Windows,Linux/Mac?)
    – Mapperz
    Feb 24 at 14:05
  • Web server/file server/ftp: whatever you want to call it. It is running on Linux, my local is running Win10. All of the other js files associated with Leaflet and accessing PostgreSQL, etc., all work fine. The only exceptions so far have been these Wikipedia links.
    – WombatBill
    Feb 24 at 14:11
  • And what goes wrong? Any errors in the browser debugger console or network section? Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code.
    – TomazicM
    Feb 24 at 14:51
  • The base maps show up, but none of the Wikipedia links/icons.
    – WombatBill
    Feb 24 at 14:56
  • No errors or warnings in the browser console.
    – WombatBill
    Feb 24 at 15:04


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.