0

On a page i'am loading multiples maps with leaflet and on each map i add two layer loaded from geoJSON file. On one layer loaded from geoJSON, they are mouse-click events but not on the other. Sometime when i load the page with firefox, the mouse-click event doesn't work, i need to re-load to make them working. This is my piece of code :

    (function($){ 
  var map1 = L.map('map_container_zone1').setView([45.760612, 6.333560], 16);
  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: '&copy; <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18,
      id: 'map.zone1'
  }).addTo(map1);

  $.getJSON( "/media/kml/zone1.geojson").done(function( dataperimeterzone1 ) {    
    L.geoJSON(dataperimeterzone1
      ).addTo(map1);      
  }); 

  $.getJSON( "/media/kml/buildings_zone1.geojson").done(function( datagbuildingszone1 ) {
    function onEachFeature(feature, layer) {     
      var popupContent = feature.properties.Name;            

        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }

      layer.setStyle({color : feature.properties.Style});

      if (feature.properties.Name.length !=0)
      {
          layer.bindPopup(popupContent);
      }
    }

    L.geoJSON(datagbuildingszone1, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature
      }).addTo(map1);    
  })
  .fail(function() {
    console.log( "An error occured when loading the layer buildings_zone1" );
  });   

  var map2 = L.map('map_container_zone2').setView([45.761277, 6.258469], 16);
  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: '&copy; <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18,
      id: 'map.zone2'
  }).addTo(map2);

  $.getJSON( "/media/kml/zone2.geojson").done(function( dataperimeterzone2 ) {    
    L.geoJSON(dataperimeterzone2
      ).addTo(map2);      
  }); 

  $.getJSON( "/media/kml/buildings_zone2.geojson").done(function( datagbuildingszone2 ) {
      function onEachFeature(feature, layer) {      
      var popupContent = feature.properties.Name;

        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }

      layer.setStyle({color : feature.properties.Style});

        layer.bindPopup(popupContent);
    }

    L.geoJSON(datagbuildingszone2, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature
      }).addTo(map2);    
  })
  .fail(function() {
    console.log( "An error occured when loading the layer buildings_zone2" );
  }); 

})(jQuery);

How to solve this issue ? Maybe the second layer is added before than the first one isn't finished to be loaded ?

Thanks by advance

P.S. : i have updated the script because there more than one map loaded on the page

user3533235
  • 155
  • 11
  • You say the problem involves two maps and click events, but the code provided has neither. Make sure the code in your question is [minimal, complete and reproducible](https://stackoverflow.com/help/minimal-reproducible-example) – IvanSanchez Jun 28 '19 at 13:17
  • Do your layers overlap? – ghybs Jun 28 '19 at 17:08
  • Hello, **IvanSanchez** : i have just updated the script in my first message because there is more than one map loaded in the page. **ghybs** : yes, the layers are overlaping is the reason why i loaded the buildings layer in last because is on this one that there are click events – user3533235 Jul 03 '19 at 12:35
  • Since you load your GeoJSON data through AJAX, you do not know when the callback will execute. Your "second" layer might very well be added first, therefore being stacked under the other one, and no longer receiving clicks when hidden by overlapping features. See the linked post for a solution on this. – ghybs Jul 04 '19 at 02:22
  • BTW if you are sure there is only 1 layer you want to listen clicks to, you can make it "permanently" on top using map panes. – ghybs Jul 04 '19 at 04:19
  • So, with the extra library leaflet-pip, it allow to determine on which layer the mouse click has been done ? I will open a new post in case of i'am not able of using it – user3533235 Jul 04 '19 at 14:08

0 Answers0