Multiple overlays on click event not working for lineString

Open sudhirbitsgoa opened this issue 9 years ago • 0 comments

Hi, I added two overlays. The second overlay has paths and points. The onclick event for points is getting fired but onclick of paths is not getting triggered.Event is captured by overlayer 1.

example.zip

<!DOCTYPE html>
<html ng-app="demoapp">

  <head>
    <link data-require="[email protected]" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
    <link data-require="[email protected]" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="0.7.3" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
    <script data-require="[email protected]" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
    <script src="https://cdn.rawgit.com/tombatossals/angular-leaflet-directive/master/dist/angular-leaflet-directive.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>
    var app = angular.module("demoapp", ["leaflet-directive"]);
    app.controller("LayersOverlayGeoJSONController", [ "$scope",  '$http',  function($scope, $http) {
      angular.extend($scope, {
        world: {
          lat: 18.0357772751 ,
          lng: 79.6389664708,
          zoom: 12.5
        },
        layers: {
          baselayers: {
            osm: {
              name: 'OpenStreetMap',
              url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
              type: 'xyz'
            },
          },
          overlays:{},
          paths: {}
        }
      });



      $http.get("india.geo.json").success(function(data, status) {
        angular.extend($scope.layers.overlays, {
          countries: {
            name:'World Country Boundaries',
            type: 'geoJSONShape',
            data: data,
            visible: true,
            layerOptions: {
              style: {
                color: '#00D',
                fillColor: 'red',
                weight: 2.0,
                opacity: 0.4,
                fillOpacity: 0.2
              },
              onEachFeature: onEachFeature
            }
          }
        });

        function onEachFeature(feature, layer) {
          layer.on({
            click: function() {
              $scope.country = layer.feature.properties.description;
              console.log($scope.country);
            }
          })
        }
      });

      $http.get('network.json').success(function(data, status) {
          angular.extend($scope.layers.overlays, {
              india: {
                name: 'india',
                type: 'geoJSONShape',
                data: data,
                visible: true,
                layerOptions: {
                  style: {
                      color: 'blue',
                      fillColor: 'red',
                      weight: 10,
                      opacity: 1
                  },
                  onEachFeature: onEachFeature
                }
              }
          });
          $scope.paths = data;
          function onEachFeature(feature, layer) {
              debugger;
              layer.on({
                click: function() {
                  debugger;
                  $scope.country = layer.feature.properties.description;
                  console.log($scope.country);
                }
              })
              layer.openPopup(layer.feature.properties.description);
          }

          $scope.$on("leafletDirectiveMap.click", function(event, args){
              debugger;
          });
          $scope.events = function() {
              debugger;
          }
      });
    }]);
  </script>
  </head>

  <body ng-controller="LayersOverlayGeoJSONController">
    <leaflet id='map' lf-center="world" layers="layers" event-broadcast='events' height="480px" width="100%"></leaflet>
    <h1>GeoJSON Shape Layer</h1>
    <pre>country: {{country}}</pre>
  </body>

</html>

Oct 08 '16 07:10 sudhirbitsgoa