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?
Sources:
https://matthewbarker.github.io/leaflet-wikipedia/
And:
https://github.com/turban/Leaflet.Wikipedia
The "existing code" is the example from the "turban" version:
<!DOCTYPE html>
<html>
<head>
<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" />
<style>
html, body, #map { margin: 0; height: 100%; background: #fff; }
.leaflet-sidebar img { float: right; padding: 0 0 10px 10px; }
</style>
</head>
<body>
<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>
<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'
});
map.addControl(sidebar);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var template = '<h2>{label}</h2><p><img src="{thumbnail}">{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: '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();
});
</script>
</body>
</html>
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>
