¿Cómo pasar campos personalizados de Wordpress a mapbox-gl js para crear marcadores en el mapa?

Question

Estoy tratando de crear un mapa que traza diferentes puntos usando Mapbox y Wordpress. En Wordpress creé un tipo de publicación personalizada con las coordenadas almacenadas en metacampos personalizados. Todos los campos están configurados, pero tengo problemas para pasarlos al javascript en mi plantilla php.

Intenté usar un bucle, pero no puedo usarlo ya que las coordenadas deben almacenarse dentro del javascript. Parece que almacenar los metacampos personalizados en un geoJSON es la única solución.

Así es como debería verse el código de Mapbox, aunque las coordenadas y el título deberían provenir de las publicaciones y campos personalizados:

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]
            }
        }
    ]
};

Mi PHP se ve así para obtener los campos personalizados y transformarlos 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]);
?>

Luego intenté procesar los datos a través de este script. Sin embargo, no devuelve nada:

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

Ya encontré una posible solución aquí, pero no entiendo cómo introducirla en geoJSON: ¿Cómo pasar campos personalizados a mapbox-gl js para crear puntos en el mapa?

Answer 1

puede hacerlo a través de wp_localize_script (tenga en cuenta que el código a continuación es un ejemplo y debe modificarse para que funcione en su caso)

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 );

y luego, en su script, llame al objeto localizado https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699

Answer 2

Básicamente, aquí hay tres soluciones. ¡Cuál es relevante para usted depende en gran medida de su caso de uso, por supuesto!

1. Ejecute su consulta de publicación personalizada en la función que usa para poner en cola el script y localizar una variable en wp_localize_script con los datos de la Consulta (Jasper B su solución anterior :))

2. Inline el php con el script. El código PHP está en la misma página que el script en línea (hacky pero rápido para probar). Algo como esto (corrige el php de cierre):

   var data = <? php $ data? "> // TODO Corrija esto por favor. No puedo escribirlo aquí. Siempre que esté codificado, debería proporcionarle una matriz de datos, solo consúltelo. es correcto.

3. Puede crear un punto final con Ajax o con Wordpress REST, y en su archivo JS consultar los datos y mostrarlos. Aquí hay más información sobre cómo configurar una solicitud de Ajax Get