Search code examples
javascriptangularjsleafletangular-leaflet-directive

LEAFLET maps and markers with select options - ANGULARjs

I have an app with leaflet maps for showing all my items on maps (I set up markers with pop with info). Now, when the client came to the page, he need to search map and select markers. In pop up, I will put the check box. Now, my problem is, when I put another div, where I need to list the selected items. I need to select markers and show it only. Best explanation for this is this map.

Solution

  • Following this example you can specify a marker that has a popup with an Angular template which works in the same $scope as your application, using getMessageScope. You can then use all the ng- attributes on your HTML elements. I added an added attribute to each marker that indicates whether the user has chosen that one (clicked the checkbox) or not, using ng-model.

    amarker:{
  lat: 53.5510,
  lng: 9.9936,
  zoom: 8,
  message: '{{ markers.amarker.options.name }}<br/> <input type="checkbox" ng-model="markers.amarker.added"/>Add',
  getMessageScope: function() { return $scope; },
  options:{
    name: "Marker A"
  },
  added: false
}

    It's a bit "hacky" because there's no reference back to the marker in the message, that's why you have to use markers.<marker id> here.

    Then when you list all markers it's simply a matter of filtering the added attribute:

    <ul>
  <li ng-repeat="(markerid,marker) in markers" ng-if="marker.added">{{marker.options.name}}</li>
</ul>

    Demo here: https://plnkr.co/edit/I4CB3tSiViKTiKt1xCXD