#4 - Added ability for multiple detail maps to appear on a single view. Needed to give the <div> that contains the map a unique identifier. (#6)

Author: daveegrant

dist/ml-esri-maps-ng-tpls.js

@@ -0,0 +1,11 @@
+(function(module) {
+try {
+  module = angular.module('ml.esri-maps.tpls');
+} catch (e) {
+  module = angular.module('ml.esri-maps.tpls', []);
+}
+module.run(['$templateCache', function($templateCache) {
+  $templateCache.put('/templates/detail-map.html',
+    '<div id="{{ctrl.mapId}}" class="map-detail"></div>');
+}]);
+})();

dist/ml-esri-maps-ng-tpls.min.js

@@ -18,21 +18,23 @@
       scope: {
         geometry: '=',
         baseMap: '=',
-        zoom: '='
+        zoom: '=',
+        mapId: '='
       },
-      template: '<div id="detailMap" class="map-detail"></div>',
+      templateUrl: '/templates/detail-map.html',
       controller: 'mlEsriDetailMapController',
       controllerAs: 'ctrl'
     };
   }
 
-  MLEsriDetailMapController.$inject = ['$scope'];
-  function MLEsriDetailMapController($scope) {
+  MLEsriDetailMapController.$inject = ['$scope', '$timeout'];
+  function MLEsriDetailMapController($scope, $timeout) {
     var ctrl = this;
     var geometryData = [];
     var i=0;
 
     // Settings
+    ctrl.mapId = $scope.mapId ? $scope.mapId : 'detail-map-1';
     ctrl.baseMap = $scope.baseMap ? $scope.baseMap : 'national-geographic';
     ctrl.mapZoom = $scope.zoom ? $scope.zoom : 6;
     ctrl.mapGeometry = null;
@@ -60,7 +62,13 @@
       }
     }
 
-    initMap(geometryData);
+    // Have to wait for scope value of <mapId> to be updated in view
+    // before the map can be initialized.
+    $scope.$watch('mapId', function(newValue) {
+      $timeout(function(){
+        initMap(geometryData);
+      }, 300);
+    });
 
     /**
     *  Initializes the map with a single feature layer for locations.
@@ -81,7 +89,7 @@
         processGeoData(geoData);
 
         ctrl.map = new Map(
-          'detailMap', {
+          ctrl.mapId, {
             basemap: ctrl.baseMap,
             zoom: ctrl.mapZoom,
             smartNavigation: false

dist/ml-esri-maps-ng.js

@@ -11,7 +11,9 @@ var gulp = require('gulp'),
     uglify = require('gulp-uglify'),
     minifyCss = require('gulp-minify-css'),
     sourcemaps = require('gulp-sourcemaps'),
-    info = require('gulp-print');
+    info = require('gulp-print'),
+    html2Js = require('gulp-ng-html2js'),
+    minifyHtml = require('gulp-minify-html');
 
 gulp.task('jshint', function() {
   return gulp.src([
@@ -71,4 +73,22 @@ gulp.task('styles', ['scripts'], function() {
   ;
 });
 
-gulp.task('default', ['styles']);
+gulp.task('templates', function() {
+  return gulp.src([ './src/**/*.html' ])
+    .pipe(minifyHtml({
+      empty: true,
+      spare: true,
+      quotes: true
+    }))
+    .pipe(html2Js({
+      moduleName: 'ml.esri-maps.tpls',
+      prefix: '/'
+    }))
+    .pipe(concat('ml-esri-maps-ng-tpls.js'))
+    .pipe(gulp.dest('dist'))
+    .pipe(rename('ml-esri-maps-ng-tpls.min.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest('dist'));
+});
+
+gulp.task('default', ['styles', 'templates']);

dist/ml-esri-maps-ng.min.js

@@ -12,7 +12,9 @@
     "gulp-print": "^1.1.0",
     "gulp-less": "^3.0.3",
     "gulp-minify-css": "^1.2.0",
-    "gulp-sourcemaps": "^1.5.2"
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-minify-html": "^1.0.3",
+    "gulp-ng-html2js": "^0.2.0"
   },
   "engines": {
     "node": ">=0.8.0"

gulpfile.js

@@ -12,21 +12,23 @@
       scope: {
         geometry: '=',
         baseMap: '=',
-        zoom: '='
+        zoom: '=',
+        mapId: '='
       },
-      template: '<div id="detailMap" class="map-detail"></div>',
+      templateUrl: '/templates/detail-map.html',
       controller: 'mlEsriDetailMapController',
       controllerAs: 'ctrl'
     };
   }
 
-  MLEsriDetailMapController.$inject = ['$scope'];
-  function MLEsriDetailMapController($scope) {
+  MLEsriDetailMapController.$inject = ['$scope', '$timeout'];
+  function MLEsriDetailMapController($scope, $timeout) {
     var ctrl = this;
     var geometryData = [];
     var i=0;
 
     // Settings
+    ctrl.mapId = $scope.mapId ? $scope.mapId : 'detail-map-1';
     ctrl.baseMap = $scope.baseMap ? $scope.baseMap : 'national-geographic';
     ctrl.mapZoom = $scope.zoom ? $scope.zoom : 6;
     ctrl.mapGeometry = null;
@@ -54,7 +56,13 @@
       }
     }
 
-    initMap(geometryData);
+    // Have to wait for scope value of <mapId> to be updated in view
+    // before the map can be initialized.
+    $scope.$watch('mapId', function(newValue) {
+      $timeout(function(){
+        initMap(geometryData);
+      }, 300);
+    });
 
     /**
     *  Initializes the map with a single feature layer for locations.
@@ -75,7 +83,7 @@
         processGeoData(geoData);
 
         ctrl.map = new Map(
-          'detailMap', {
+          ctrl.mapId, {
             basemap: ctrl.baseMap,
             zoom: ctrl.mapZoom,
             smartNavigation: false

package.json

@@ -0,0 +1 @@
+<div id="{{ctrl.mapId}}" class="map-detail"></div>