angular-ui / ui-leaflet

AngularJS directive to embed an interact with maps managed by Leaflet library
http://angular-ui.github.io/ui-leaflet
Other
314 stars 134 forks source link

different popus for different markers #56

Open nmccready opened 9 years ago

nmccready commented 9 years ago

From @Danny-weebo on February 18, 2015 14:47

Hey, I'd like to set a different class name for each popup marker so I can have different styles of popups for different types of markers. Any advice on how it's done properly? I thought about attaching a class name to a popup depending on which type of marker was clicked, but I have no idea about how to approach the task. @israelidanny

Copied from original issue: tombatossals/angular-leaflet-directive#637

nmccready commented 9 years ago

From @Getz85 on February 19, 2015 15:30

The message property of marker's object can contain HTML.

You can check this example:

http://tombatossals.github.io/angular-leaflet-directive/examples/markers-angular-template-example.html

nmccready commented 9 years ago

From @EvilDaemon on May 1, 2015 15:21

how pass params to template?

nmccready commented 9 years ago

From @mastermind1981 on June 19, 2015 0:0

In the continuity of this issue, one of my use case is to have a directive for marker's popup like this : 1.

                 message: '<info-box param1="param1" param="param2"></info-box>',

info-box is a directive with template and it's own scope. 2. I have another case, where i create an array of makers and i want to create the popup with parameters of the directive are passed when looping like this

          angular.forEach($scope.hits, function(hit){
               coords = hit._source.location.split(',');
              $scope.markers.push ({
                 title : hit._source.title,
                 lat: parseFloat(coords[0]),
                 lng: parseFloat(coords [1]),
                 getMessageScope: function () { return $scope; },
                 message: '<info-box title="hit._source.title"></info-box>',
                 compileMessage: true,
                   });
           });

Is it possible to make the point 1 and 2?

Thanks in advance,