[GIS] Leaflet Easybutton does’t show up

easybutton-pluginleaflet

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>

Best Answer

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>
Related Question