Adding custom message (with Angular content) to a marker created by a user

[perkoren]

Hi, I'd like to add a message to a marker that a user created. This message should contain angular content (dynamic drop down i.e.). The idea is that after a user draws a marker on an image overlay, a popup appears containing a dropdown.

I tried something like this:

$scope.editableLayers = new L.FeatureGroup();
leafletData.getMap().then(function (map) {
  map.addLayer($scope.editableLayers);
    leafletData.getLayers().then(function () {
    map.on('draw:created', function (e) {
          var layer = e.layer;
          var type = e.layerType;
           if(type == 'marker'){
            var lf = $compile(angular.element('<div><productPopup></productPopup></div>'))($scope.$new());
            layer.bindPopup(lf[0]);
            layer.openPopup(lf[0]);
          }
          $scope.editableLayers.addLayer(layer);
});
});

where '<productPopup>' is a directive:

directive('productPopup', ['$http', '$compile', function($http, $compile) {
  return {
    templateUrl: 'templates/productPopup.html'
  }}]);

but with no success. I know that there is an option to pass angular content inside 'message' attribute of a marker, but it only works for a declarative marker creation. I was wondering, whether there is a function which would allow me to change this value dynamically?

[dalvaren]

+1

[davidovich]

This is already supported, see:

https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/0515-markers-angular-template-example.html

As long as you bind to a scope (see the m3 marker in the example), I don't see any problems in updating the data in your popup.

[perkoren]

The problem is this example refers to markers that are placed upfront on the leaflet map, in my case I'm adding them dynamically, so I assume I cannot use 'angular.extend' every time a new marker is added by the user on the UI, because it will override previous markers definition.

So my question refers to adding of new markers dynamically (we don't know where they will be placed, it depends on the user).

On Fri, Apr 22, 2016 at 2:22 AM, David Genest [email protected] wrote:

This is already supported, see:

https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/0515-markers-angular-template-example.html

As long as you bind to a scope (see the m3 marker in the example), I don't see any problems in updating the data in your popup.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/tombatossals/angular-leaflet-directive/issues/1072#issuecomment-213170149