├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── examples
    └── example.html
├── package-lock.json
├── package.json
└── src
    └── L.Control.Angular.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | leaflet-angular-control Changelog
 2 | =================
 3 | 
 4 | ## 0.1.4
 5 | - Fixed bug preventing click events from reaching the document.
 6 | - Disables propagation of click and scroll events to the map.
 7 | 
 8 | ## 0.1.3
 9 | - Better injector support. Directive as well as JavaScript based.
10 | - Updated example
11 | 
12 | ## 0.1.2
13 | - Fixed issue where the app wasn't selecting the injector properly.
14 | 
15 | ## 0.1.1
16 | - Added bower.json
17 | 
18 | ## 0.1.0 (2016-04-15)
19 | - Stop click propagation to the map.
20 | 
21 | ## 0.0.4 (2016-03-18)
22 | - Fixed a bug where the Angular scope was not being destroyed on the removal of the control from the map.
23 | 
24 | ## 0.0.3 (2016-02-23)
25 | 
26 | ### Improvements
27 | - Added $options to the dependency injection for the control's controller. Allows easy access to the leaflet control's options. 
28 | 
29 | ## 0.0.2 (2016-01-24)
30 | - Initial leaflet-angular-control release.
31 | 
32 | ## 0.0.1 (2016-01-13)
33 | - 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.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Leaflet Control Angular
 2 | 
 3 | Leaflet Control Angular alows for the use of AngularJS in custom Leaflet controls.
 4 | 
 5 | ## Install
 6 | `npm i leaflet-control-angular`
 7 | 
 8 | ## Examples
 9 | 
10 | Working [example](http://grantharris.github.io/leaflet-control-angular/examples/example.html). Also see the `examples` directory.
11 | 
12 | ## TODO
13 | 
14 | This plugin currently only supports string templates. Support for function templates, and templateUrl coming soon.
15 | 
16 | ## License
17 | 
18 | Leaflet Angular Control is released under the MIT License.
19 | 


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


--------------------------------------------------------------------------------
/examples/example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html ng-app="app">
 3 |     <head>
 4 |         <title>Leaflet Control Angular</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 = 'Please click on the map';
12 |                 return this;
13 |             });
14 |         </script>
15 |         <script src="../src/L.Control.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 |             h3{
27 |                 margin-top:5px;
28 |                 margin-bottom:5px;
29 |             }
30 |             .pane{
31 |                 background-color: #FFF;
32 |                 padding:5px;
33 |                 color: #000;
34 |                 margin:10px 0px 25px 0px;
35 |             }
36 |         </style>
37 |     </head>
38 |     <body>
39 |         <div id="map"></div>
40 |         <script type="text/javascript">
41 |             var map = L.map('map').setView([0, 0], 2);
42 |             var controlAngular = L.control.angular({
43 |                 position: 'bottomleft',
44 |                 template: `
45 |                      <div class="pane">
46 |                         <div ng-if="!leaflet.latlng">
47 |                             <h3>{{leaflet.message}}</h3>
48 |                         </div>
49 |                         <div ng-if="leaflet.latlng">
50 |                              <h3>Click Location</h3>
51 |                              <strong>Latitude:</strong> {{leaflet.latlng.lat}} <br>
52 |                              <strong>Longitude:</strong> {{leaflet.latlng.lng}}
53 |                          </div>
54 |                          <button ng-click="leaflet.zoom()">Zoom In</button>
55 |                      </div>
56 |                      `,
57 |                 controllerAs: 'leaflet',
58 |                 controller: function($scope, $element, $map, ExampleService){
59 |                     var that = this;
60 |                     this.message = ExampleService.message;
61 |                     this.latlng = null;
62 | 
63 |                     this.zoom = function(){
64 |                         $map.zoomIn();
65 |                     };
66 | 
67 |                     $map.on('click', function(e){
68 |                         that.latlng = e.latlng;
69 |                         $scope.$apply();
70 |                     });
71 |                 }
72 |             });
73 | 
74 |         map.addControl(controlAngular);
75 | 
76 |         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
77 |             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
78 |         }).addTo(map);
79 | 
80 |         </script>
81 |     </body>
82 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |    "name": "leaflet-control-angular",
 3 |    "version": "0.1.4",
 4 |    "lockfileVersion": 1,
 5 |    "requires": true,
 6 |    "dependencies": {
 7 |       "angular": {
 8 |          "version": "1.8.0",
 9 |          "resolved": "https://registry.npmjs.org/angular/-/angular-1.8.0.tgz",
10 |          "integrity": "sha512-VdaMx+Qk0Skla7B5gw77a8hzlcOakwF8mjlW13DpIWIDlfqwAbSSLfd8N/qZnzEmQF4jC4iofInd3gE7vL8ZZg=="
11 |       },
12 |       "leaflet": {
13 |          "version": "0.7.7",
14 |          "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-0.7.7.tgz",
15 |          "integrity": "sha1-HjUrpU5j0HZFH6NjyQCJDLLPde4="
16 |       }
17 |    }
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |    "name": "leaflet-control-angular",
 3 |    "label": {
 4 |       "en": "leaflet-control-angular"
 5 |    },
 6 |    "language": "JavaScript",
 7 |    "version": "0.1.4",
 8 |    "description": "Allows for the use of AngularJS in custom leaflet controls.",
 9 |    "repository": {
10 |       "type": "git",
11 |       "url": "https://github.com/grantHarris/leaflet-control-angular"
12 |    },
13 |    "license": "MIT",
14 |    "keywords": [
15 |       "gis",
16 |       "map",
17 |       "angular",
18 |       "leaflet"
19 |    ],
20 |    "main": "src/L.Control.Angular.js",
21 |    "dependencies": {
22 |       "angular": "^1.6.0",
23 |       "leaflet": "^0.7.7"
24 |    },
25 |    "devDependencies": {}
26 | }
27 | 


--------------------------------------------------------------------------------
/src/L.Control.Angular.js:
--------------------------------------------------------------------------------
 1 |  'use strict';
 2 | 
 3 |  L.Control.Angular = L.Control.extend({
 4 |     options: {
 5 |          position: 'bottomleft',
 6 |          template: ''
 7 |      },
 8 |      onAdd: function onAdd (map) {
 9 |          var that = this;
10 |          this._container = L.DomUtil.create('div', 'angular-control-leaflet');
11 | 
12 |          if (!L.Browser.touch) {
13 |              L.DomEvent
14 |                .disableClickPropagation(this._container)
15 |                .disableScrollPropagation(this._container);
16 |          } else {
17 |              L.DomEvent.disableClickPropagation(this._container);
18 |          }
19 |          
20 |          angular.element(document).ready(function() {
21 |              var $injector = angular.element(document).injector();
22 | 
23 |              if (!$injector) {
24 |                  $injector = angular.element(document.querySelectorAll('[ng-app]')).injector();
25 |              }
26 | 
27 |              if (!$injector) {
28 |                  throw "L.Control.Angular can't find your Angular app";
29 |              }
30 | 
31 |              var $rootScope = $injector.get('$rootScope'),
32 |                  $compile = $injector.get('$compile'),
33 |                  $controller = $injector.get('$controller');
34 | 
35 |              that._scope = $rootScope.$new(true);
36 | 
37 |              var element = angular.element(that._container);
38 |              element.html(that.options.template);
39 | 
40 |              if (that.options.controller) {
41 |                  var controller = $controller(that.options.controller, {
42 |                      '$map': map,
43 |                      '$scope': that._scope,
44 |                      '$element': element,
45 |                      '$options': that.options
46 |                  });
47 | 
48 |                  if (that.options.controllerAs) {
49 |                      that._scope[that.options.controllerAs] = controller;
50 |                  }
51 | 
52 |                  element.data('$ngControllerController', controller);
53 |                  element.children().data('$ngControllerController', controller);
54 |              }
55 | 
56 |              $compile(element)(that._scope);
57 |              that._scope.$apply();
58 |          });
59 |          return this._container;
60 |      },
61 |      onRemove: function(){
62 |         if(this._scope){
63 |             this._scope.$destroy();
64 |         }
65 |      }
66 |  });
67 | 
68 |  L.control.angular = function(options) {
69 |      return new L.Control.Angular(options);
70 |  };


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