Leaflet Map (carte de tous les articles wordpress) et Jquery
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:
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">© <b>Jawg</b>Maps</a> © <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:
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 !
