├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── examples
    └── examples.html
├── package.json
└── src
    └── L.Popup.Angular.js


/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | leaflet-popup-angular Changelog
 2 | =================
 3 | 
 4 | ## 1.0.1
 5 | - Update example
 6 | 
 7 | ## 1.0.2
 8 | - Fix zooming issue with release version of Leaflet 1.0.0.
 9 | - Better support injector selection.
10 | 
11 | ## 1.0.1
12 | - Fixed issue where the app wasn't selecting the injector properly.
13 | 
14 | ## 1.0.0
15 | - Version numbers updated.
16 | - Bower.json added.
17 | 
18 | ## 1.0.0-rc1
19 | - Laaflet 1.0 compatibility.
20 | 
21 | ## 0.1.4 (2016-04-12)
22 | API finalized. Examples added.
23 | 
24 | ## 0.0.2 (2016-04-07)
25 | First working version.
26 | 
27 | ## 0.0.1
28 | Project start


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Awesense Wireless
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # leaflet-popup-angular
 2 | Use AngularJS in your Leaflet popups. Extends the built-in L.popup.
 3 | 
 4 | Supports Leaflet [v1.0.0](https://github.com/Leaflet/Leaflet/tree/v1.0.0)
 5 | 
 6 | For Leaflet 0.7.7 support see [leaflet-popup-angular v0.1.2](https://github.com/grantHarris/leaflet-popup-angular/tree/v0.1.2)
 7 | 
 8 | See working [examples](http://grantharris.github.io/leaflet-popup-angular/examples/examples.html).
 9 | 
10 | ## Usage
11 | 
12 | ### Basic
13 | ```
14 | 	var popup = L.popup.angular({
15 | 		template: `
16 | 			<div>
17 | 				<h1>{{popup.$content.title}} - <small>{{popup.$content.name}}</small></h1>
18 | 				<div>
19 | 					My custom popup with controller. {{popup.hello}}
20 | 				</div>
21 | 			</div>
22 | 		`,
23 | 		controllerAs: 'popup',
24 | 		controller: ['$content', function($content){
25 | 			this.hello = 'Hello';
26 | 			$content.on(function(content){
27 | 				console.log('This executes on setContent', content);
28 | 			});
29 | 		}]
30 | 	}).setLatLng(latlng).setContent({
31 | 	    	'name': 'foo',
32 | 	    	'title': 'bar'
33 | 	    })
34 | 	    .openOn(map);
35 | ```
36 | 
37 | 
38 | ### No Controller
39 | 
40 | ```
41 | 	var popup = L.popup.angular({
42 | 		template: `
43 | 			<div>
44 | 				<h1>{{$content.title}} - <small>{{$content.name}}</small></h1>
45 | 				<div>
46 | 					My popup without a controller.
47 | 				</div>
48 | 			</div>
49 | 		`,
50 | 	}).setLatLng(latlng).setContent({
51 | 	    	'name': 'foo',
52 | 	    	'title': 'bar'
53 | 	    })
54 | 	    .openOn(map);
55 | ```
56 | 
57 | #### Note
58 | 
59 | For clarity, these examples are using template literals to represent multiline strings.
60 | Template literals are part of ES6 and are not supported by some browsers (notably IE).
61 | See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
62 | 
63 | This is a new package. We will be introducing support for angular's templateUrl soon 
64 | and the examples will be reimplemented using this feature.
65 | 
66 | For production use at this time, either:
67 | * Use a bundler like webpack to insert the html into your template-- template: require('template.html')
68 | * Use template literals and a tool like babel to compile down to ES5
69 | * Use oldschool JavaScript strings in place of template literals
70 | 
71 | 
72 | ## Dependency Injection
73 | In addition to the rest of your Angular application's services, L.popup.angular also provides several of its own services through dependency injection to the controller.
74 | 
75 | * __$content__ Content object. Register callbacks for setContent() with $content.on()
76 | * __$map__ Leaflet map object
77 | * __$options__ The options params from L.popup.angular.
78 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "leaflet-popup-angular",
 3 |   "version": "1.0.3",
 4 |   "description": "Allows for the use of AngularJS in leaflet popups.",
 5 |   "devDependencies": {
 6 |   },
 7 |   "main": "src/L.Popup.Angular.js",
 8 |   "scripts": {
 9 |   },
10 |   "eslintConfig": {
11 |     "root": true,
12 |     "globals": {
13 |       "L": true
14 |     },
15 |     "env": {
16 |       "commonjs": true,
17 |       "amd": true,
18 |       "node": false
19 |     },
20 |     "rules": {
21 |       "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
22 |       "indent": [2, "tab", {"VariableDeclarator": 0}],
23 |       "curly": 2,
24 |       "spaced-comment": 2,
25 |       "strict": 0,
26 |       "wrap-iife": 0,
27 |       "key-spacing": 0,
28 |       "consistent-return": 0
29 |     }
30 |   },
31 |   "repository": {
32 |     "type": "git",
33 |     "url": "git://github.com/grantHarris/leaflet-popup-angular.git"
34 |   },
35 |   "keywords": [
36 |     "gis",
37 |     "map"
38 |   ],
39 |   "license": "MIT"
40 | }


--------------------------------------------------------------------------------
/examples/examples.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html ng-app="app">
  3 |     <head>
  4 |         <title>Leaflet Popup Angular Examples</title>
  5 |         <meta name='viewport' content='width=device-width, user-scalable=no initial-scale=1, maximum-scale=1'>
  6 |         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  7 |         <script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
  8 |         <script type="text/javascript">
  9 |             angular.module('app', []);
 10 |             angular.module('app').factory('ExampleService', function(){
 11 |                 this.message = 'Try clicking around!';
 12 |                 return this;
 13 |             });
 14 |         </script>
 15 |         <script src="../src/L.Popup.Angular.js"></script>
 16 |         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
 17 |         <style type="text/css">
 18 |             body {
 19 |                 margin: 0;
 20 |             }
 21 |             #map {
 22 |                 position: absolute;
 23 |                 width: 100%;
 24 |                 height: 100%;
 25 |             }
 26 |         </style>
 27 |     </head>
 28 |     <body>
 29 |         <div id="map"></div>
 30 |         <script type="text/javascript">
 31 |             /*
 32 |                 Note: For clarity, these examples are using template literals to represent multiline strings.
 33 |                 Template literals are part of ES6 and are not supported by some browsers (notably IE).
 34 |                 See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
 35 | 
 36 |                 This is a new package. We will be introducing support for angular's templateUrl soon 
 37 |                 and the examples will be reimplemented using this feature.
 38 | 
 39 |                 For production use at this time, either:
 40 |                 - Use a bundler like webpack to insert the html into your template-- template: require('template.html')
 41 |                 - Use template literals and a tool like babel to compile down to ES5
 42 |                 - Use oldschool JavaScript strings in place-- template: '<div></div>'
 43 |             */
 44 |             var map = L.map('map').setView([51.505, -0.09], 13);
 45 | 
 46 |             var welcomePopup = L.popup.angular({
 47 |                 template: `
 48 | 					<div>
 49 | 						<h3>leaflet-popup-angular</h3>
 50 | 						<div>
 51 | 							Welcome! {{welcome.message}}
 52 | 						</div>
 53 | 					</div>
 54 | 				`,
 55 |                 controllerAs: 'welcome',
 56 |                 controller: ['ExampleService', function(ExampleService) {
 57 |                     /*
 58 | 						Any Angular service can be injected into the popup.
 59 | 					*/
 60 |                     this.message = ExampleService.message;
 61 |                 }]
 62 |             });
 63 | 
 64 |             L.marker([51.5, -0.09]).addTo(map)
 65 |                 .bindPopup(welcomePopup).openPopup();
 66 | 
 67 | 
 68 |             var interactionPopup = L.popup.angular({
 69 |                 template: `
 70 | 					<div>
 71 | 						<div>
 72 | 							The leaflet map is injected into the controller as $map. 
 73 | 							We can access the properties and methods leaflet provides in our controller.
 74 | 						</div>
 75 | 						<div>
 76 | 							<button ng-click="popup.zoomIn()">Zoom In</button> <button ng-click="popup.zoomOut()">Zoom Out</button> 
 77 | 							<strong ng-show="popup.zoom">Level: {{popup.zoom}}</strong>
 78 | 						</div>
 79 | 					</div>
 80 | 				`,
 81 |                 controllerAs: 'popup',
 82 |                 controller: ['$map', function($map) {
 83 |                     var that = this;
 84 | 
 85 |                     this.zoomIn = function() {
 86 |                         $map.zoomIn();
 87 |                         that.zoom = $map.getZoom();
 88 |                     };
 89 | 
 90 |                     this.zoomOut = function() {
 91 |                         $map.zoomOut();
 92 |                         that.zoom = $map.getZoom();
 93 |                     };
 94 |                 }]
 95 |             });
 96 | 
 97 |             L.polygon([
 98 |                 [51.509, -0.08],
 99 |                 [51.503, -0.06],
100 |                 [51.51, -0.047]
101 |             ]).addTo(map).bindPopup(interactionPopup);
102 | 
103 | 
104 |             var setContentPopup = L.popup.angular({
105 |                 template: `
106 | 					<div>
107 | 						<div>
108 | 							The popup can use content from setContent through the $content variable.
109 | 						</div>
110 | 						<div>
111 | 							<strong>{{popup.$content}}</strong>
112 | 						</div>
113 | 					</div>
114 | 				`,
115 |                 controllerAs: 'popup',
116 |                 controller: ['$content', function($content) {
117 |                     /*
118 | 						Callbacks can also be registered. 
119 | 						Callbacks are executed on each call to setContent
120 | 					*/
121 |                     $content.on(function(content) {
122 |                         console.log('The popup content:', content);
123 |                     });
124 |                 }]
125 |             });
126 | 
127 |             function onMapClick(e) {
128 |                 setContentPopup
129 |                     .setLatLng(e.latlng)
130 |                     .setContent("You clicked the map at " + e.latlng.toString())
131 |                     .openOn(map);
132 |             }
133 | 
134 |             map.on('click', onMapClick);
135 | 
136 |             var noControllerPopup = L.popup.angular({
137 |                 template: `
138 | 					<div>
139 | 						<div>
140 | 							This popup does not have a controller. {{$content}}
141 | 						</div>
142 | 					</div>
143 | 				`,
144 |             }).setContent('But we can still use templates and $content.');
145 | 
146 |             L.circle([51.508, -0.11], 500, {
147 |                 color: 'red',
148 |                 fillColor: '#f03',
149 |                 fillOpacity: 0.5
150 |             }).addTo(map).bindPopup(noControllerPopup);
151 | 
152 |             L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
153 |                 attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
154 |             }).addTo(map);
155 | 
156 |         </script>
157 |     </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |    "name": "leaflet-popup-angular",
 3 |    "label": {
 4 |       "en": "leaflet-popup-angular"
 5 |    },
 6 |    "language": "JavaScript",
 7 |    "version": "1.0.3",
 8 |    "description": "Allows for the use of AngularJS in leaflet popups",
 9 |    "repository": {
10 |       "type": "git",
11 |       "url": "git@github.com:grantHarris/leaflet-popup-angular.git"
12 |    },
13 |    "license": "MIT",
14 |    "keywords": [
15 |       "gis",
16 |       "map",
17 |       "angular",
18 |       "leaflet"
19 |    ],
20 |    "main": "src/L.Popup.Angular.js",
21 |    "dependencies": {
22 |       "leaflet": "~1.0.0",
23 |       "angular": "~1.5.7"
24 |    },
25 |    "repository": {
26 |       "type": "git",
27 |       "url": "https://github.com/grantHarris/leaflet-popup-angular"
28 |    },
29 |    "devDependencies": {
30 |    }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/L.Popup.Angular.js:
--------------------------------------------------------------------------------
  1 |  'use strict';
  2 | 
  3 |  L.Popup.Angular = L.Popup.extend({
  4 |      onAdd: function(map) {
  5 | 
  6 |          L.DivOverlay.prototype.onAdd.call(this, map);
  7 |          var that = this;
  8 | 
  9 |          angular.element(document).ready(function() {
 10 |              that._compile();
 11 | 
 12 |              clearTimeout(that._removeTimeout);
 13 |              that.getPane().appendChild(that._container);
 14 |              that.update();
 15 | 
 16 |              if (map._fadeAnimated) {
 17 |                  L.DomUtil.setOpacity(that._container, 1);
 18 |              }
 19 | 
 20 |              map.fire('popupopen', {
 21 |                  popup: that
 22 |              });
 23 | 
 24 |              if (that._source) {
 25 |                  that._source.fire('popupopen', {
 26 |                      popup: that
 27 |                  }, true);
 28 |                  if (!(that._source instanceof L.Path)) {
 29 |                      that._source.on('preclick', L.DomEvent.stopPropagation);
 30 |                  }
 31 |              }
 32 |          });
 33 |      },
 34 |      _compile: function() {
 35 |          var that = this;
 36 |          var $injector = angular.element(document).injector();
 37 | 
 38 |          if (!$injector) {
 39 |              $injector = angular.element(document.querySelectorAll('[ng-app]')).injector();
 40 |          }
 41 | 
 42 |          if (!$injector) {
 43 |              throw "L.Popup.Angular can't find your Angular app";
 44 |          }
 45 | 
 46 |          var $rootScope = $injector.get('$rootScope'),
 47 |              $compile = $injector.get('$compile'),
 48 |              $controller = $injector.get('$controller');
 49 | 
 50 |          this._scope = $rootScope.$new(true);
 51 |          this._element = angular.element(this._contentNode);
 52 |          this._element.html(this.options.template);
 53 | 
 54 |          this._$content = {
 55 |              _callbacks: [],
 56 |              on: function(callback) {
 57 |                  that._$content._callbacks.push(callback);
 58 |              }
 59 |          };
 60 | 
 61 |          if (this.options.controller) {
 62 |              var controller = $controller(this.options.controller, {
 63 |                  '$scope': this._scope,
 64 |                  '$map': this._map,
 65 |                  '$options': this.options,
 66 |                  '$content': this._$content
 67 |              });
 68 | 
 69 |              if (this.options.controllerAs) {
 70 |                  this._scope[this.options.controllerAs] = controller;
 71 |              }
 72 | 
 73 |              this._element.data('$ngControllerController', controller);
 74 |              this._element.children().data('$ngControllerController', controller);
 75 |          }
 76 | 
 77 |          $compile(this._element)(this._scope);
 78 |          this._scope.$apply();
 79 |      },
 80 |      update: function() {
 81 |          if (!this._map) {
 82 |              return;
 83 |          }
 84 | 
 85 |          var that = this;
 86 | 
 87 |          this._container.style.visibility = 'hidden';
 88 | 
 89 |          if (this._scope) {
 90 |              this._$content._callbacks.map(function(callback) {
 91 |                  callback(that._content);
 92 |              });
 93 | 
 94 |              if (this.options.controllerAs) {
 95 |                  this._scope[this.options.controllerAs].$content = this._content;
 96 |              } else {
 97 |                  this._scope.$content = this._content;
 98 |              }
 99 | 
100 |              this._scope.$apply();
101 |              this._scope.$evalAsync(function() {
102 |                  that.fire('contentupdate');
103 |                  that._updateLayout();
104 |                  that._updatePosition();
105 | 
106 |                  that._container.style.visibility = '';
107 | 
108 |                  that._adjustPan();
109 |              });
110 |          }
111 |      },
112 |      onRemove: function(map) {
113 |          if (this._scope) {
114 |              this._scope.$destroy();
115 |          }
116 |          if (this._$content) {
117 |              this._$content._callbacks = [];
118 |          }
119 | 
120 |          L.Popup.prototype.onRemove.call(this, map);
121 |      }
122 |  });
123 | 
124 |  L.popup.angular = function(options) {
125 |      return new L.Popup.Angular(options);
126 |  };


--------------------------------------------------------------------------------