Como passar campos personalizados do Wordpress para mapbox-gl js para criar marcadores no mapa?

Question

Estou tentando criar um mapa traçando pontos diferentes usando Mapbox e Wordpress. No Wordpress, criei um tipo de postagem personalizado com as coordenadas armazenadas em metacampos personalizados. Os campos estão todos configurados, mas estou tendo problemas para passá-los para o javascript no meu modelo php.

Tentei usar um loop, mas não consigo porque as coordenadas precisam ser armazenadas dentro do javascript. Parece que armazenar os metacampos personalizados em um geoJSON é a única solução.

Aqui está como o código do Mapbox deve se parecer, as coordenadas e o título devem vir das postagens e 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]
            }
        }
    ]
};

Meu PHP se parece com isso para obter os campos personalizados e transformá-los em 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]);
?>

Em seguida, tentei processar os dados por meio deste script. No entanto, ele não retorna 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>

Já encontrei uma solução possível aqui, mas não entendo como colocá-la no geoJSON: Como passar campos personalizados para mapbox-gl js para criar pontos no mapa?

Answer 1

você pode fazer isso via wp_localize_script (observe que o código abaixo é um exemplo e precisa ser alterado para funcionar no seu 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 );

e, em seguida, em seu script, chame o objeto localizado https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699

Answer 2

Basicamente, existem três soluções aqui. Qual deles é relevante para você depende muito do seu caso de uso, é claro!

1. Execute sua consulta de postagem personalizada na função que você usa para enfileirar o script e localizar uma variável em wp_localize_script com os dados da Consulta (Jasper B sua solução acima :))

2. Inline o php com o script. O código PHP está na mesma página do script embutido (hacky, mas rápido para teste). Algo assim (corrigir o php de fechamento):

   var data = <? php $ data? "> // TODO Corrija isso, por favor! Não posso escrever aqui. Desde que esteja codificado, ele deve fornecer uma matriz de dados, apenas console.log para ver se está certo.

3. Você pode criar um terminal com Ajax ou com Wordpress REST e, em seu arquivo JS, consultar os dados e exibi-los. Aqui estão mais algumas informações sobre como configurar uma solicitação Ajax Get