How insert GeoJSON with GetJSON ?

This code load in the admin !

jQuery.getJSON(“LOSMB-lux-be.geojson”,function(data){
var datalayer = L.geoJson(data ,{
onEachFeature: function(feature, featureLayer) {
featureLayer.bindPopup(feature.properties.Name);
}
}).addTo(cttm_map);
});

But how load in the front end ?

Thanks !

Dear @jeanpoldupont,

First of all, are you doing this in front-office or admin area?

I will assume it is in the front-office. Unlike in the admin area, I’ve added some custom event and a global javascript array cttm_map[].
I’ve written a documentation for interacting on the map object right here:
https://camilles-travels.com/get-started-with-travelers-map-wordpress-plugin/#dev-documentation

In your case, you need to add a function like this:

<script>
// Listen for the event.
document.addEventListener('cttm_map_loaded', function (e) {
  // cttm_map is an array of all the maps included in the page, so we loop through each.
  for (var i = 0; i < cttm_map.length; i++) {
       //You can now interact with the map object.
      jQuery.getJSON("OSMB-lux-be.geojson",function(data){
      L.geoJson(data).addTo(cttm_map[i]);
   });
  }
}, false);
</script>

I hope this helps ??

Camille, merci pour votre réponse !

J’ai mis en place votre code :

add_action( 'wp_enqueue_scripts', 'my_custom_script_load' );
function my_custom_script_load(){
  wp_enqueue_script( 'prov-lux', '/wp-content/themes/blocksy-child/prov-lux.js', array( 'jquery' ) );
}

dans le fichier prov-lux.js :

document.addEventListener('cttm_map_loaded', function (e) {
    for (var i = 0; i < cttm_map.length; i++) {
        jQuery.getJSON('/wp-content/themes/blocksy-child/OSMB-lux-be.json', function (data) {
            L.geoJson(data).addTo(cttm_map[i]);
        });
    }
}, false);

Mais ?a ne fonctionne pas.

Le fichier .geojson est simplement renommé .json.

j’ai l’erreur javascript suivante :

Uncaught TypeError: t is undefined
    addTo https://travail.europedirectlux.be/wp-content/plugins/travelers-map-2.0-Multiple-markers/includes/public/js/leaflet/leaflet.js?ver=5.8:5
    <anonymous> https://travail.europedirectlux.be/wp-content/themes/blocksy-child/prov-lux.js?ver=5.8:4
    jQuery 9
    <anonymous> https://travail.europedirectlux.be/wp-content/themes/blocksy-child/prov-lux.js?ver=5.8:3
    triggerMapLoadedEvent https://travail.europedirectlux.be/wp-content/plugins/travelers-map-2.0-Multiple-markers/includes/public/js/init-travelers-map.js:35
    initTravelersMap https://travail.europedirectlux.be/wp-content/plugins/travelers-map-2.0-Multiple-markers/includes/public/js/init-travelers-map.js:14
    <anonymous> https://travail.europedirectlux.be/wp-content/plugins/travelers-map-2.0-Multiple-markers/includes/public/js/travelersmap.js?ver=5.8:5
    EventListener.handleEvent* https://travail.europedirectlux.be/wp-content/plugins/travelers-map-2.0-Multiple-markers/includes/public/js/travelersmap.js?ver=5.8:3
leaflet.js:5:64070

La page est la suivante : https://travail.europedirectlux.be/leurope-dans-notre-region/

Déjà merci pour l’attention portée à mon problème !

Après recherches et lectures, j’ai tenté ceci, qui fonctionne :

document.addEventListener('cttm_map_loaded', function (e) {
jQuery.getJSON('/wp-content/themes/blocksy-child/OSMB-lux-be.json', function (data) {
            L.geoJson(data).addTo(cttm_map[0]);
        });
 
}, false);

Il semble que le code dans la boucle n’est pas correct …

Bonjour,
Je pense que le bug de boucle est lié à la V2, je vais corriger tout ?a avant la sortie officielle, merci pour la découverte du bug.

Je suis content que vous ayez trouvé la réponse malgré tout ??

Après vérification, il ne s’agit pas d’un bug du plugin mais du fonctionnement normal de javascript. La fonction getJSON de jQuery est en fait asynchrone, elle récupère la valeur de i une fois que la boucle est déjà terminée, ce qui provoque une erreur car i = nombre de carte + 1.

La solution est “simplement” de changer var i = 0 par let i = 0, car let a une portée de bloc et non pas de function comme var.

Plus d’informations ici :
https://stackoverflow.com/questions/15347750/getjson-and-for-loop-issue

Je mettrai à jour ma documentation pour mettre remplacer par let.

Merci Camille pour votre explication, et surtout pour votre super plugin ??

Jean-Pol