0

enter image description hereI can't figure out why the EasyButton does't work. The following is the result of many modifications but none of them work as expected.

Simple Leaflet Map

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>

<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }
</style>

<script
    src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>

<script>
    var map = L.map('map').setView([52.2858, 5.78682], 14);
    mapLink =
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; ' + mapLink,
            maxZoom: 18,
        }).addTo(map);


    var helloPopup = L.popup().setContent('Hello World!');

    L.easyButton('fa-globe', function (btn, map) {
        helloPopup.setLatLng(map.getCenter()).openOn(map);
    }).addTo(map);

</script>

0

I don't know if you copied the whole of your code, but here are several things that need to be corrected.

Links to leaflet.css and font-awesome.css are missing:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">

And what is most importatnt, leaflet.js script should be included before easy-button.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>    
  • I added an image of the whole of the code because the code was not listed completely. And F12 lists: Uncaught ReferenceError: L is not defined – Gerie1th Apr 2 at 22:50
  • As I wrote in may answer, that's because you are including easy-button.js before leaflet.js (see second part of my answer). And please never give pictures of your code, always actual code text. – TomazicM Apr 3 at 5:37

Your Answer

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

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