Leaflet Map (carte de tous les articles wordpress) et Jquery

**christophe2802** · 19/04/2023, 15h20

Bonjour,
Je débute dans une exploitation plus poussée de Wordpress (petit à petit...), et suis confronté à un souci d'affichage de l'ensemble de mes articles sur une carte Leaflet (sans utilisation de plugin).
J'ai créé un modèle de page destiné à afficher uniquement cette carte, dont les marqueurs doivent être ajoutés et géolocalisés grâce à deux champs ACF.
Pour le moment, j'affiche ma carte, et une requête me permet d'obtenir les infos relatives à chaque article (latitude, longitude, titre, permalien notamment, à compléter par la suite) (je parviens en tout cas à les afficher via "echo").
Il me reste désormais à générer le code propre à chaque marqueur.
Voici le code de mon modèle de page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
 
<?php
 
/*Template Name: page_carte*/
/*Template Post Type: page*/
 
?>
 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 
<div id="mapid" style="width:100%; height: 50%;" class="desktop_visible">
 
<?php 
 
// 1. On définit les arguments pour définir ce que l'on souhaite récupérer
$args = array(
    'post_type' => 'post',
    'post_status'=>'publish',
    'posts_per_page' => -1,
);
 
// 2. On exécute la WP Query
$my_query = new WP_Query( $args );
 
// 3. On lance la boucle !
if( $my_query->have_posts() ) :
 
while( $my_query->have_posts() ) : $my_query->the_post();
 
$lat = get_field("latitude_depart");
$lng = get_field('longitude_depart');
$depart = get_field('depart');
$titre = the_title();
$url = the_permalink();
 
echo $titre;
echo "<br>";
 
echo $depart;
echo "<br>";
 
echo $lat;
echo " / ";
echo $lng;
echo "<br>";
 
echo "<br>";
 
endwhile;
endif;
 
// 4. On réinitialise à la requête principale (important)
wp_reset_postdata();
 
?>
 
</div>
 
 
<script>
 
jQuery(function($) {
var map = L.map('mapid').setView([46.622013, 1.853553], 6);
 
L.tileLayer('https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
	attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	minZoom: 0,
	maxZoom: 22,
	subdomains: 'abcd',
	accessToken: 'vLlwAEQLqEYDmQeAAg3L4iL6JO4txM4sJF3zbA1ooE62dQvSIJ1GtXUPUH8bPB7l'
}).addTo(map);
 
var marker = L.marker([47.385705, 4.175862]).addTo(map);
 
$('.marker').each(function() {
   var lat = $(this).attr('data-lat');
   var lng = $(this).attr('data-lng');
   var name = $(this).attr('data-title');
   var marker = new L.marker([ lat, lng ]).bindPopup( name ).addTo( map );
   });
 
});
 
</script>

Pour alimenter "marker", j'ai cet extrait de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="marker"  data-url="<?php the_permalink(); ?>"  data-title='<h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>' data-lat="<?php echo $lat; ?>" 
data-lng="<?php echo $lng; ?>">
</div>

que je pensais insérer dans la div de la carte, comme le préconise la page que j'utilise comme base ( https://www.copier-coller.com/creer-...-et-wordpress/

Mais là, je rencontre des difficultés. Dès que j'intègre ce code dans la boucle while, j'obtiens une erreur critique.

Une âme charitable pourrait-elle m'éclairer ?
Merci d'avance !