[RESOLU] Afficher carte leaflet / php / wordpress

Eléphanteau du PHP | 21 Messages

16 avr. 2023, 13:08

Bonjour,
Débutant, j'avance à tâtons pour dépasser la basique utilisation de wordpress, en goûtant au php.
J'essaie d'appliquer ce tuto pour afficher une carte (seulement la carte, en pleine page) de tous mes articles : https://www.copier-coller.com/creer-une ... wordpress/
J'ai créé un modèle de page (en php), ajouté l'appel aux fichiers js et css de leaflet.

Je vois bien ma div sur ma page, mais pas de carte.
Je tourne désormais un peu en rond.

Est-ce que quelqu'un serait susceptible de me décoincer un peu (au moins que je vois une carte !), afin que je puisse poursuivre mes expérimentations ?
Merci d'avance !
Voici le contenu du modèle de la page sur laquelle je bricole :
<?php

/*Template Name: page_carte*/
/*Template Post Type: page*/

?>

<div id="mapid1" style="width:100%; height: 100%;"></div>

<script>

var map = L.map('mapid1').setView([51.5, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map); 
 
var marker = L.marker([51.5, -0.09]).addTo(map);

</script>
Bonne journée,

Mammouth du PHP | 2703 Messages

16 avr. 2023, 14:38

il est question d'un code d'accès sur https://docs.mapbox.com/mapbox.js/examp ... n-leaflet/ non présent dans ce bout de code.

Eléphanteau du PHP | 21 Messages

17 avr. 2023, 12:45

Bonjour,
Je n'utilise pas map box comme couche carto, mais OpenStreetMap (gratuit, sans abonnement ni limite d'affichage).
D'où l'absence de référence à mapbox.

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

17 avr. 2023, 15:11

Bonjour,

As-tu vérifié la console javascript ? (Ctrl+Maj+i puis onglet Console)
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 21 Messages

17 avr. 2023, 16:47

Non, je n'avais pas vérifié.
J'obtiens :
(index):6 Uncaught ReferenceError: L is not defined
at (index):6:11

Donc, si j'ai bien compris, à la ligne :
var map = L.map('mapid').setView([51.5, -0.09], 13);

Est-ce que je dois en déduire que le script Leaflet n'est pas chargé ?

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

17 avr. 2023, 18:02

Très probablement.

Le message d'erreur te dit que "L" n'est pas définit, donc la question c'est où aurait-il dû être défini, et la réponse est très probablement vu ton tuto dans le leaflet.js qui devrait avoir été chargé.
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 21 Messages

17 avr. 2023, 18:05

J'ai ajouté directement dans ma page

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
crossorigin=""></script>

Plutôt que de le définir dans mon fichier functions.php et ça fonctionne.
Je vais continuer comme ça.

Merci !