Usare Leaflet in Wordpress senza plugin

Per usare Leaflet in Wordpress abbiamo un plugin apposito, con il quale però non sono riuscito a fare determinate cose.

Come ad esempio usare una mappa satellitare; può essere che sia io che non ci sia riuscito e si possa fare, fatto sta che ho preferito il metodo senza plugin.

In questo articolo vediamo come fare.

La prima cosa è aggiungere questo codice nel functions.php del vostro tema child:

function enqueue_leaflet_scripts() {
    wp_enqueue_style('leaflet-css', 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
    wp_enqueue_script('leaflet-js', 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js', array(), null, true);
}

Fatto questo possiamo aggiungere del codice HTML custom all'interno della nostra pagina.

Ad esempio questo:

<div id="map" style="height: 500px;"></div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var map = L.map('map').setView([41.9234034, 12.4890914], 5);

    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: '&copy; <a href="https://www.esri.com/">Esri</a> contributors'
    }).addTo(map);

    var marker = L.marker([38.1112268, 13.3524434]).addTo(map);
    marker.bindPopup("<b>Marker</b><br>Marker di test");
});
</script>

Enjoy!