Use shared angular template for sets of markers

[nmccready]

From @joeljeske on August 24, 2015 17:49

It would make sense to allow a set of markers to use the same angular templates (marker.message property) and the same scope factory (marker.getMessageScope() function).

By definition, a template should be the generic html partial that gets compiled and made specific by Angular and its scope bindings. Each marker should not have its own copy of the angular template but shared at some higher level.

Possible API

controller.js

$scope.markers = {
  m1: {
    lat: 51.505,
    lng: -0.09,
    popupGroup: "detail"
  },
  m2: {
    lat: 51,
    lng: 0,
    popupGroup: "detail"
  },
  m3: {
    lat: 51,
    lng: -1,
    popupGroup: "detail"
 };

$scope.markerOptions = {
  groups: {
    detail: {
      // template: "1 + 1 = {{ 1 + 1 }}",
      templateUrl: "popupTemplate.html",
      getScope: function(marker) {
          var scope = $scope.$new();
          scope.marker = marker;
          return scope;
      }
    }
  }
};

index.html

<leaflet markers="markers" marker-options="markerOptions" ... ></leaflet>

popup.html

<div>Location: {{marker.lat}} , {{marker.lng}}</div>

Additional Notes

• The individual markers could override their group's template or scope
• The html partial would not be duplicated in memory
• The template could be lazily $compiled and reused for performance
• This would bring a lot of familiarity to common Angular Developers. Similar examples
  • ngRoute's $routeProvider
  • ui.router's $stateProvider
  • ui.bootstrap's $modal

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

[nmccready]

From @gustavoaragon on October 30, 2015 20:13

+1

[omeid]

+1

The message parameter is very prone (maybe string, maybe a template) to errors and getMessageScope is also a bit akward to construct from jsons.