Sur wordpress, dans un modèle de page, j'affiche une carte Leaflet et fait une recherche Jquery de tous mes posts publiés, que je souhaiterais afficher sous forme de markers.
Je parviens à ce stade :
- à afficher la carte ;
- à faire ma requête (notamment en extrayant des champs ACF pour les latitude et longitude). En tout cas, je parviens à les afficher dans mes tests.
Je dispose en théorie du code susceptible de générer les variables nécessaires à la création des markers, que je devrais, sauf erreur, intégrer dans la boucle, avant mon "// 4." (voir infra).
Mais cela ne fonctionne pas, cela provoque une erreur critique.
Si je mets ce code juste avant la balise </div>, j'ai bien un marker, celui de la page en cours.
Le code de ma page :
Code : Tout sélectionner
<?php
/**
* Template Name: Clean Page 2
* This template will only display the content you entered in the page editor
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<body class="cleanpage">
<div id="mapid" style="width:100%; height: 100svh;" 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
$the_query = new WP_Query( $args );
// 3. On lance la boucle !
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ) : $the_query->the_post();
$titre = the_title();
$lat = get_field("latitude_depart");
$lng = get_field("longitude_depart");
echo $titre;
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://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '<a href="© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
minZoom: 0,
maxZoom: 22,
}).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>
<?php wp_footer(); ?>
</body>
</html>
Code : Tout sélectionner
<div class="marker" data-url="<?php the_permalink(); ?>" data-title='<h4><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h4>' data-lat="<?php echo $lat; ?>"
data-lng="<?php echo $lng; ?>"></div>
