Support » Plugin: Travelers' Map » How insert GeoJSON with GetJSON ?

  • Resolved jeanpoldupont

    (@jeanpoldupont)


    Hello,

    I want to insert the boundaries of my province, exported as GeoJSON.

    Where put this ?

    jQuery.getJSON("OSMB-lux-be.geojson",function(data){
    L.geoJson(data).addTo(cttm_map);
    });

    I try in the plugin code, no error, but I get nothing on the map …

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter jeanpoldupont

    (@jeanpoldupont)

    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 !

    Plugin Author Camille V

    (@socrapop)

    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 🙂

    Thread Starter jeanpoldupont

    (@jeanpoldupont)

    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 !

    Thread Starter jeanpoldupont

    (@jeanpoldupont)

    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 …

    Plugin Author Camille V

    (@socrapop)

    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 😉

    Plugin Author Camille V

    (@socrapop)

    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.

    Thread Starter jeanpoldupont

    (@jeanpoldupont)

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

    Jean-Pol

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.