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

1 Answer 1

1

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>    
2
  • 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, 2019 at 22:50
  • 1
    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, 2019 at 5:37

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.