Forum d'entraide PHPFrance

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,

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.

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.

Bonjour,

As-tu vérifié la console javascript ? (Ctrl+Maj+i puis onglet Console)

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é ?

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é.

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 !