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
