Comment passer des champs Wordpress personnalisés dans mapbox-gl js pour créer des marqueurs sur la carte?
J'essaye de créer une carte traçant différents points en utilisant Mapbox et Wordpress. Dans Wordpress, j'ai créé un type de publication personnalisé avec les coordonnées stockées dans des champs méta personnalisés. Les champs sont tous configurés, mais j'ai du mal à les passer dans le javascript de mon modèle php.
J'ai essayé d'utiliser une boucle, mais je ne peux pas l'utiliser car les coordonnées doivent être stockées dans le javascript. On dirait que stocker les champs méta personnalisés dans un geoJSON est la seule solution.
Voici à quoi devrait ressembler le code Mapbox, les coordonnées et le titre devraient provenir des articles et des champs personnalisés:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/coptmarketing/cjvi7hc4602dk1cpgqul6mz0b',
center: [-76.615573, 39.285685],
zoom: 16 // starting zoom
});
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"title": "Shake Shack"
},
"geometry": {
"type": "Point",
"coordinates": [-76.609844, 39.286894]
}
},
{
"type": "Feature",
"properties": {
"title": "Starbucks"
},
"geometry": {
"type": "Point",
"coordinates": [-76.619071, 39.286649]
}
}
]
};
Mon PHP ressemble à ceci pour obtenir les champs personnalisés et les transformer en JSON:
<?php $args = array( 'post_type' => 'places', 'post_status' => 'publish', 'nopaging' => true ); $query = new WP_Query( $args ); // $query is the WP_Query Object
$posts = $query->get_posts(); // $posts contains the post objects $output = array();
foreach( $posts as $post ) { // Pluck the id and title attributes
$output[] = array( 'id' => $post->ID,
'title' => $post->post_title, 'address' => get_post_meta($post->ID,'ci_cpt_adresse', true),
'longitude' => get_post_meta($post->ID, 'ci_cpt_adressex', true), 'altitude' => get_post_meta($post->ID, 'ci_cpt_adressey', true)
);
}
$data = json_encode(['placelist' => $output]);
?>
J'ai ensuite essayé de traiter les données via ce script. Cependant, cela ne renvoie rien:
<script>
var placeJson = data;
var stores = {
"type:" "FeatureCollection",
"features:" [],
};
for (i = 0; i < placeJson.placelist.length; i++) {
geojson.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeJson.placelist.[i].altitude, placeJson.placeList[i].longitude]
},
"properties": {
"title": placeJson.placelist.[i].title
}
},);
}
</script>
<script>
stores.features.forEach(function(store, i){
store.properties.id = i;
});
</script>
J'ai déjà trouvé une solution possible ici, mais je ne comprends pas comment l'introduire dans geoJSON: Comment passer des champs personnalisés dans mapbox-gl js pour créer des points sur la carte?
Réponses
vous pouvez le faire via wp_localize_script (veuillez noter que le code ci-dessous est un exemple et doit être modifié pour fonctionner dans votre cas)
wp_enqueue_script( 'my_mapbox', get_template_directory_uri() . '/js/mabox.js' );
$dataToBePassed = array( 'home' => get_stylesheet_directory_uri(), 'pleaseWaitLabel' => __( 'Please wait...', 'default' ) ); wp_localize_script( 'my_mapbox', 'php_vars', $datatoBePassed );
puis dans votre script appel à l'objet localisé https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699
Fondamentalement, il y a trois solutions ici. Le choix qui vous convient le mieux dépend bien entendu de votre cas d'utilisation!
Exécutez votre requête de publication personnalisée dans la fonction que vous utilisez pour mettre le script en file d'attente et localiser une variable dans wp_localize_script avec les données de la requête (Jasper B sa solution ci-dessus :))
Inline le php avec le script. Le code PHP est sur la même page que le script intégré (hacky mais rapide pour les tests). Quelque chose comme ça (corrigez le php de fermeture):
var data = <? php $ data? "> // TODO Corrigez ce pls! Je ne peux pas l'écrire ici. Tant qu'il est encodé, il devrait vous fournir un tableau de données, il suffit de le consigner pour voir si c'est correct.
Vous pouvez créer un point de terminaison avec Ajax ou avec Wordpress REST, et dans votre fichier JS, interroger les données et les afficher. Voici quelques informations supplémentaires sur la configuration d'une demande Ajax Get