├── .bowerrc ├── .gitignore ├── .jshintrc ├── .travis.yml ├── LICENSE ├── README.md ├── bower.json ├── dist ├── angular-leaflet-directive-ext.d3.js ├── angular-leaflet-directive-ext.d3.min.js ├── angular-leaflet-directive-ext.filter.js └── angular-leaflet-directive-ext.filter.min.js ├── examples ├── control-filter-example.html ├── hexbin-example.html └── ping-example.html ├── gulpfile.js ├── package.json └── src └── js ├── filter └── controls.js ├── hexbin ├── hexbin.js └── leaflet.js └── ping ├── leaflet.js └── ping.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "src/lib" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Node modules 11 | node_modules 12 | 13 | # project files 14 | .project 15 | 16 | # Mac OS 17 | .DS_Store 18 | 19 | # Bower modules 20 | src/lib -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "eqnull": true, 3 | "undef": "true", 4 | "strict": "true", 5 | 6 | "globals": { 7 | "L": true, 8 | "document": true, 9 | "angular": true 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | - "0.11" 5 | before_script: 6 | - npm install -g gulp 7 | script: gulp -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Asymmetrik 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Leaflet Angular Directive Extensions 2 | 3 | [![Build Status][travis-image]][travis-url] 4 | 5 | ## What is it? 6 | This project wraps the popular [Angular Leaflet Directive project](https://github.com/tombatossals/angular-leaflet-directive) project, extending it to include two additional leaflet plugins: [d3 hexbins](https://github.com/Asymmetrik/leaflet-hexbin) and [filter boxes](https://github.com/Asymmetrik/leaflet-filter). 7 | 8 | ## How do I use it? 9 | 10 | ### d3 Hexbin 11 | ```js 12 | var app = angular.module("demoapp", ["leaflet-directive", "leaflet-directive.ext.hexbin"]); 13 | app.controller("DemoController", [ "$scope", "leafletData", function($scope, leafletData) { 14 | angular.extend($scope, { 15 | london: { 16 | lat: 51.505, 17 | lng: -0.09, 18 | zoom: 4 19 | }, 20 | tiles: { 21 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' 22 | }, 23 | hexbin: { 24 | data: [], 25 | config: {} 26 | } 27 | }); 28 | 29 | var latFn = d3.random.normal(51.505, 0.2); 30 | var longFn = d3.random.normal(-0.09, 0.2); 31 | 32 | $scope.generateData = function(){ 33 | var data = []; 34 | for(i=0; i<1000; i++){ 35 | data.push( [longFn(), latFn()] ); 36 | } 37 | $scope.hexbin.data = data; 38 | }; 39 | 40 | }]); 41 | ``` 42 | 43 | ### Filter 44 | ```js 45 | var app = angular.module("demoapp", ["leaflet-directive", "leaflet-directive.ext.filter"]); 46 | app.controller("DemoController", [ "$scope", "leafletData", function($scope, leafletData) { 47 | angular.extend($scope, { 48 | london: { 49 | lat: 51.505, 50 | lng: -0.09, 51 | zoom: 4 52 | }, 53 | controls: { 54 | filter: {} 55 | }, 56 | tiles: { 57 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' 58 | } 59 | }); 60 | leafletData.getMap().then(function(map) { 61 | map.on('filter:filter', function (e) { 62 | console.log(e); 63 | }); 64 | }); 65 | }]); 66 | ``` 67 | 68 | ## How do I include this package in my project? 69 | The easiest way to include this package in your project, is to use [Bower](http://bower.io) 70 | 71 | ```bash 72 | bower install -S angular-leaflet-directive-ext 73 | ``` 74 | 75 | Alternatively, you can download the source or minified javascript files yourself from the GitHub repository (they are contained in the dist directory). 76 | 77 | Alter-alternatively, you can clone this repo and build it yourself. 78 | 79 | You will also need to install the dependencies (you can find them in the bower.json file). 80 | 81 | 82 | ## How do I build this project? 83 | There are several tools you will need to install to build this project: 84 | * [Node](http://nodejs.org/) 85 | * [Gulp](http://http://gulpjs.com/) 86 | * [Bower](http://bower.io) 87 | 88 | If you're on Mac OS, check out [Homebrew](https://github.com/mxcl/homebrew) to get node up and running easily. It's as simple as `brew install node` 89 | 90 | First, you will need to install the build dependencies for the project using node. If you want to use the examples, you will need to install the javascript dependencies for the project using bower. Finally, to build the project and generate the artifacts in the /dist directory, you will need to build the project using gulp. 91 | 92 | ```bash 93 | npm install 94 | bower install 95 | gulp 96 | ``` 97 | 98 | [travis-url]: https://travis-ci.org/Asymmetrik/angular-leaflet-directive-ext/ 99 | [travis-image]: https://travis-ci.org/Asymmetrik/angular-leaflet-directive-ext.svg 100 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-leaflet-directive-ext", 3 | "version": "0.4.3", 4 | "authors": [ 5 | "reblace " 6 | ], 7 | "scripts": [ 8 | "angular-leaflet-directive-ext.filter.js", 9 | "angular-leaflet-directive-ext.hexbin.js" 10 | ], 11 | "license": "MIT", 12 | "ignore": [ 13 | ".DS_Store", 14 | ".git", 15 | ".gitignore", 16 | ".travis.yml", 17 | ".bowerrc", 18 | ".jshintrc", 19 | ".project", 20 | "gulpfile.js", 21 | "package.json", 22 | "examples", 23 | "node_modules", 24 | "package.json", 25 | "src", 26 | "test" 27 | ], 28 | "dependencies": { 29 | "d3": "~3.5", 30 | "leaflet": "~0.7.3", 31 | "d3-plugins": "*", 32 | "leaflet.draw": "0.2.3", 33 | "font-awesome": "~4.4", 34 | "angular": "~1.3", 35 | "angular-leaflet-directive": "0.7.9", 36 | "leaflet-d3": "~0.3", 37 | "leaflet-filter": "~0.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /dist/angular-leaflet-directive-ext.d3.js: -------------------------------------------------------------------------------- 1 | /*! angular-leaflet-directive-ext Version: 0.4.3 */ 2 | angular.module('leaflet-directive.ext.d3.hexbin', ['leaflet-directive']).config([ '$provide', function($provide){ 3 | 'use strict'; 4 | 5 | $provide.decorator('leafletDirective', [ '$delegate', function($delegate){ 6 | // Just adding the scope variable called 'hexbin' 7 | $delegate[0].$$isolateBindings.hexbin = { 8 | attrName: 'hexbin', 9 | mode: '=', 10 | optional: true 11 | }; 12 | 13 | return $delegate; 14 | }]); 15 | }]); 16 | angular.module('leaflet-directive.ext.d3.hexbin').directive('hexbin', function() { 17 | 'use strict'; 18 | 19 | return { 20 | restrict : 'A', 21 | scope : false, 22 | replace : false, 23 | require : 'leaflet', 24 | link : function(scope, element, attrs, controller) { 25 | 26 | // Get the leaflet scope from the parent leaflet controller 27 | var leafletScope = controller.getLeafletScope(); 28 | 29 | controller.getMap().then(function(map) { 30 | // Initialize the hexbin layer 31 | var hexLayer = L.hexbinLayer(leafletScope.hexbin.config).addTo(map); 32 | var temp = leafletScope.hexbin; 33 | 34 | // Watch the hexbin scope variable 35 | leafletScope.$watchCollection('hexbin.data', function(){ 36 | hexLayer.data(leafletScope.hexbin.data); 37 | }); 38 | 39 | hexLayer.data(leafletScope.hexbin.data); 40 | }); 41 | 42 | } 43 | }; 44 | }); 45 | 46 | angular.module('leaflet-directive.ext.d3.ping', ['leaflet-directive']).config([ '$provide', function($provide){ 47 | 'use strict'; 48 | 49 | $provide.decorator('leafletDirective', [ '$delegate', function($delegate){ 50 | // Just adding the scope variable called 'ping' 51 | $delegate[0].$$isolateBindings.ping = { 52 | attrName: 'ping', 53 | mode: '=', 54 | optional: true 55 | }; 56 | 57 | return $delegate; 58 | }]); 59 | }]); 60 | angular.module('leaflet-directive.ext.d3.ping').directive('ping', function() { 61 | 'use strict'; 62 | 63 | return { 64 | restrict : 'A', 65 | scope : false, 66 | replace : false, 67 | require : 'leaflet', 68 | link : function(scope, element, attrs, controller) { 69 | 70 | // Get the leaflet scope from the parent leaflet controller 71 | var leafletScope = controller.getLeafletScope(); 72 | 73 | controller.getMap().then(function(map) { 74 | // Initialize the ping layer 75 | var pingLayer = L.pingLayer(leafletScope.ping.config).addTo(map); 76 | leafletScope.$on(leafletScope.ping.event, function(event, pingData){ 77 | pingLayer.ping(pingData); 78 | }); 79 | }); 80 | 81 | } 82 | }; 83 | }); 84 | -------------------------------------------------------------------------------- /dist/angular-leaflet-directive-ext.d3.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-leaflet-directive-ext Version: 0.4.3 */ 2 | angular.module("leaflet-directive.ext.d3.hexbin",["leaflet-directive"]).config(["$provide",function($provide){"use strict";$provide.decorator("leafletDirective",["$delegate",function($delegate){return $delegate[0].$$isolateBindings.hexbin={attrName:"hexbin",mode:"=",optional:!0},$delegate}])}]),angular.module("leaflet-directive.ext.d3.hexbin").directive("hexbin",function(){"use strict";return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(scope,element,attrs,controller){var leafletScope=controller.getLeafletScope();controller.getMap().then(function(map){var hexLayer=L.hexbinLayer(leafletScope.hexbin.config).addTo(map);leafletScope.hexbin;leafletScope.$watchCollection("hexbin.data",function(){hexLayer.data(leafletScope.hexbin.data)}),hexLayer.data(leafletScope.hexbin.data)})}}}),angular.module("leaflet-directive.ext.d3.ping",["leaflet-directive"]).config(["$provide",function($provide){"use strict";$provide.decorator("leafletDirective",["$delegate",function($delegate){return $delegate[0].$$isolateBindings.ping={attrName:"ping",mode:"=",optional:!0},$delegate}])}]),angular.module("leaflet-directive.ext.d3.ping").directive("ping",function(){"use strict";return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(scope,element,attrs,controller){var leafletScope=controller.getLeafletScope();controller.getMap().then(function(map){var pingLayer=L.pingLayer(leafletScope.ping.config).addTo(map);leafletScope.$on(leafletScope.ping.event,function(event,pingData){pingLayer.ping(pingData)})})}}}); -------------------------------------------------------------------------------- /dist/angular-leaflet-directive-ext.filter.js: -------------------------------------------------------------------------------- 1 | /*! angular-leaflet-directive-ext Version: 0.4.3 */ 2 | /* 3 | * We are extending the controls directive of leaflet-directive in order to add initialization of the 4 | * filter component as part of the controls directive 5 | */ 6 | angular.module('leaflet-directive.ext.filter', ['leaflet-directive']).config([ '$provide', function($provide){ 7 | "use strict"; 8 | 9 | $provide.decorator('controlsDirective', [ '$delegate', '$timeout', 'leafletHelpers', function($delegate, $timeout, leafletHelpers){ 10 | // Grab a reference to the directive 11 | var directive = $delegate[0]; 12 | 13 | // Grab a reference to the link function 14 | var link = directive.link; 15 | 16 | // Implement a custom compile function that alters the link function 17 | directive.compile = function(){ 18 | return function(scope, element, attrs, controller) { 19 | // Apply the original directive's link function 20 | link.apply(this, arguments); 21 | 22 | // Initialize the filter 23 | if(!controller) { 24 | return; 25 | } 26 | 27 | var isDefined = leafletHelpers.isDefined, 28 | leafletScope = controller.getLeafletScope(), 29 | controls = leafletScope.controls; 30 | 31 | // Get the map 32 | controller.getMap().then(function(map) { 33 | // If the filter leaflet plugin is loaded and the filter config exists, then add it 34 | if (null != L && null != L.Control && isDefined(L.Control.Filter) && null != controls && isDefined(controls.filter)) { 35 | 36 | // Initialize the Filter Control 37 | var filterFeature = new L.FeatureGroup(); 38 | var filterOptions = { 39 | position: 'topright', 40 | filter: { rectangle: {} }, 41 | filterGroup: filterFeature 42 | }; 43 | angular.extend(filterOptions, controls.filter); 44 | controls.filter = filterOptions; 45 | map.addLayer(filterOptions.filterGroup); 46 | 47 | var filterControl = new L.Control.Filter(filterOptions); 48 | map.addControl(filterControl); 49 | 50 | leafletScope.$watch('controls.filter.shape', function(n, o){ 51 | filterControl.setFilter(n); 52 | }); 53 | 54 | // Handler for the filter event (see below) 55 | var filterHandler = function(e){ 56 | // update the shape if the filter object is set and it has changed 57 | if(null != controls && null != controls.filter){ 58 | // Finally, check to make sure that the change is actually a change 59 | if(!filterControl.equals(controls.filter.shape, e.geo)) { 60 | $timeout(function(){ 61 | controls.filter.shape = e.geo; 62 | }); 63 | } 64 | } 65 | }; 66 | 67 | // register for filter events 68 | map.on('filter:filter', filterHandler); 69 | leafletScope.$on('$destroy', function(){ 70 | map.off('filter:filter', filterHandler); 71 | }); 72 | } 73 | }); 74 | 75 | }; // end of return function 76 | }; 77 | 78 | return $delegate; 79 | }]); 80 | }]); -------------------------------------------------------------------------------- /dist/angular-leaflet-directive-ext.filter.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-leaflet-directive-ext Version: 0.4.3 */ 2 | angular.module("leaflet-directive.ext.filter",["leaflet-directive"]).config(["$provide",function($provide){"use strict";$provide.decorator("controlsDirective",["$delegate","$timeout","leafletHelpers",function($delegate,$timeout,leafletHelpers){var directive=$delegate[0],link=directive.link;return directive.compile=function(){return function(scope,element,attrs,controller){if(link.apply(this,arguments),controller){var isDefined=leafletHelpers.isDefined,leafletScope=controller.getLeafletScope(),controls=leafletScope.controls;controller.getMap().then(function(map){if(null!=L&&null!=L.Control&&isDefined(L.Control.Filter)&&null!=controls&&isDefined(controls.filter)){var filterFeature=new L.FeatureGroup,filterOptions={position:"topright",filter:{rectangle:{}},filterGroup:filterFeature};angular.extend(filterOptions,controls.filter),controls.filter=filterOptions,map.addLayer(filterOptions.filterGroup);var filterControl=new L.Control.Filter(filterOptions);map.addControl(filterControl),leafletScope.$watch("controls.filter.shape",function(n,o){filterControl.setFilter(n)});var filterHandler=function(e){null!=controls&&null!=controls.filter&&(filterControl.equals(controls.filter.shape,e.geo)||$timeout(function(){controls.filter.shape=e.geo}))};map.on("filter:filter",filterHandler),leafletScope.$on("$destroy",function(){map.off("filter:filter",filterHandler)})}})}}},$delegate}])}]); -------------------------------------------------------------------------------- /examples/control-filter-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 57 | 63 | 64 | 65 |

Draw filter example

66 |

Manipulate a filter and a geoJSON data structure will be shown on the console.log.

67 |
68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /examples/hexbin-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 51 | 57 | 58 | 59 |

Hexbin Overlay example

60 |

Dynamic hexbin heatmap data overlay.

61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /examples/ping-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 44 | 47 | 48 | 49 |

Ping Overlay example

50 |

Real-time ping overlay example.

51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | p = require('./package.json'), 3 | gulpLoadPlugins = require('gulp-load-plugins'), 4 | plugins = gulpLoadPlugins(); 5 | 6 | var banner = '/*! ' + p.name + ' Version: ' + p.version + ' */\n'; 7 | 8 | gulp.task('default', ['build']); 9 | 10 | gulp.task('watch', function(){ 11 | gulp.watch(['src/**/*', '!/src/lib/**/*'], ['build']); 12 | }); 13 | 14 | gulp.task('build', ['js-d3', 'js-filter'] ); 15 | 16 | gulp.task('js-d3', function(){ 17 | return gulp.src([ 18 | 'src/js/hexbin/leaflet.js', 19 | 'src/js/hexbin/hexbin.js', 20 | 'src/js/ping/leaflet.js', 21 | 'src/js/ping/ping.js', 22 | ]) 23 | 24 | // JS Hint 25 | .pipe(plugins.jshint('.jshintrc')) 26 | .pipe(plugins.jshint.reporter('jshint-stylish')) 27 | 28 | // Concatenate 29 | .pipe(plugins.concat(p.name + '.d3.js')) 30 | .pipe(plugins.insert.prepend(banner)) 31 | .pipe(gulp.dest('dist')) 32 | .pipe(plugins.filesize()) 33 | 34 | // Uglify 35 | .pipe(plugins.uglify({ 36 | mangle: false 37 | })) 38 | .pipe(plugins.rename(p.name + '.d3.min.js')) 39 | .pipe(plugins.insert.prepend(banner)) 40 | .pipe(gulp.dest('dist')) 41 | .pipe(plugins.filesize()) 42 | .on('error', plugins.util.log); 43 | }); 44 | 45 | gulp.task('js-filter', function(){ 46 | return gulp.src([ 47 | 'src/js/filter/controls.js' 48 | ]) 49 | 50 | // JS Hint 51 | .pipe(plugins.jshint('.jshintrc')) 52 | .pipe(plugins.jshint.reporter('jshint-stylish')) 53 | 54 | // Concatenate 55 | .pipe(plugins.concat(p.name + '.filter.js')) 56 | .pipe(plugins.insert.prepend(banner)) 57 | .pipe(gulp.dest('dist')) 58 | .pipe(plugins.filesize()) 59 | 60 | // Uglify 61 | .pipe(plugins.uglify({ 62 | mangle: false 63 | })) 64 | .pipe(plugins.rename(p.name + '.filter.min.js')) 65 | .pipe(plugins.insert.prepend(banner)) 66 | .pipe(gulp.dest('dist')) 67 | .pipe(plugins.filesize()) 68 | .on('error', plugins.util.log); 69 | }); 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-leaflet-directive-ext", 3 | "version": "0.4.3", 4 | "devDependencies": { 5 | "gulp": "^3.8", 6 | "gulp-concat": "^2.4", 7 | "gulp-filesize": "0.0", 8 | "gulp-insert": "^0.4", 9 | "gulp-jshint": "^1.8", 10 | "gulp-load-plugins": "^0.7", 11 | "gulp-rename": "^1.2", 12 | "gulp-uglify": "^1.0", 13 | "gulp-util": "^3.0", 14 | "jshint-stylish": "^1.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/js/filter/controls.js: -------------------------------------------------------------------------------- 1 | /* 2 | * We are extending the controls directive of leaflet-directive in order to add initialization of the 3 | * filter component as part of the controls directive 4 | */ 5 | angular.module('leaflet-directive.ext.filter', ['leaflet-directive']).config([ '$provide', function($provide){ 6 | "use strict"; 7 | 8 | $provide.decorator('controlsDirective', [ '$delegate', '$timeout', 'leafletHelpers', function($delegate, $timeout, leafletHelpers){ 9 | // Grab a reference to the directive 10 | var directive = $delegate[0]; 11 | 12 | // Grab a reference to the link function 13 | var link = directive.link; 14 | 15 | // Implement a custom compile function that alters the link function 16 | directive.compile = function(){ 17 | return function(scope, element, attrs, controller) { 18 | // Apply the original directive's link function 19 | link.apply(this, arguments); 20 | 21 | // Initialize the filter 22 | if(!controller) { 23 | return; 24 | } 25 | 26 | var isDefined = leafletHelpers.isDefined, 27 | leafletScope = controller.getLeafletScope(), 28 | controls = leafletScope.controls; 29 | 30 | // Get the map 31 | controller.getMap().then(function(map) { 32 | // If the filter leaflet plugin is loaded and the filter config exists, then add it 33 | if (null != L && null != L.Control && isDefined(L.Control.Filter) && null != controls && isDefined(controls.filter)) { 34 | 35 | // Initialize the Filter Control 36 | var filterFeature = new L.FeatureGroup(); 37 | var filterOptions = { 38 | position: 'topright', 39 | filter: { rectangle: {} }, 40 | filterGroup: filterFeature 41 | }; 42 | angular.extend(filterOptions, controls.filter); 43 | controls.filter = filterOptions; 44 | map.addLayer(filterOptions.filterGroup); 45 | 46 | var filterControl = new L.Control.Filter(filterOptions); 47 | map.addControl(filterControl); 48 | 49 | leafletScope.$watch('controls.filter.shape', function(n, o){ 50 | filterControl.setFilter(n); 51 | }); 52 | 53 | // Handler for the filter event (see below) 54 | var filterHandler = function(e){ 55 | // update the shape if the filter object is set and it has changed 56 | if(null != controls && null != controls.filter){ 57 | // Finally, check to make sure that the change is actually a change 58 | if(!filterControl.equals(controls.filter.shape, e.geo)) { 59 | $timeout(function(){ 60 | controls.filter.shape = e.geo; 61 | }); 62 | } 63 | } 64 | }; 65 | 66 | // register for filter events 67 | map.on('filter:filter', filterHandler); 68 | leafletScope.$on('$destroy', function(){ 69 | map.off('filter:filter', filterHandler); 70 | }); 71 | } 72 | }); 73 | 74 | }; // end of return function 75 | }; 76 | 77 | return $delegate; 78 | }]); 79 | }]); -------------------------------------------------------------------------------- /src/js/hexbin/hexbin.js: -------------------------------------------------------------------------------- 1 | angular.module('leaflet-directive.ext.d3.hexbin').directive('hexbin', function() { 2 | 'use strict'; 3 | 4 | return { 5 | restrict : 'A', 6 | scope : false, 7 | replace : false, 8 | require : 'leaflet', 9 | link : function(scope, element, attrs, controller) { 10 | 11 | // Get the leaflet scope from the parent leaflet controller 12 | var leafletScope = controller.getLeafletScope(); 13 | 14 | controller.getMap().then(function(map) { 15 | // Initialize the hexbin layer 16 | var hexLayer = L.hexbinLayer(leafletScope.hexbin.config).addTo(map); 17 | var temp = leafletScope.hexbin; 18 | 19 | // Watch the hexbin scope variable 20 | leafletScope.$watchCollection('hexbin.data', function(){ 21 | hexLayer.data(leafletScope.hexbin.data); 22 | }); 23 | 24 | hexLayer.data(leafletScope.hexbin.data); 25 | }); 26 | 27 | } 28 | }; 29 | }); 30 | -------------------------------------------------------------------------------- /src/js/hexbin/leaflet.js: -------------------------------------------------------------------------------- 1 | angular.module('leaflet-directive.ext.d3.hexbin', ['leaflet-directive']).config([ '$provide', function($provide){ 2 | 'use strict'; 3 | 4 | $provide.decorator('leafletDirective', [ '$delegate', function($delegate){ 5 | // Just adding the scope variable called 'hexbin' 6 | $delegate[0].$$isolateBindings.hexbin = { 7 | attrName: 'hexbin', 8 | mode: '=', 9 | optional: true 10 | }; 11 | 12 | return $delegate; 13 | }]); 14 | }]); -------------------------------------------------------------------------------- /src/js/ping/leaflet.js: -------------------------------------------------------------------------------- 1 | angular.module('leaflet-directive.ext.d3.ping', ['leaflet-directive']).config([ '$provide', function($provide){ 2 | 'use strict'; 3 | 4 | $provide.decorator('leafletDirective', [ '$delegate', function($delegate){ 5 | // Just adding the scope variable called 'ping' 6 | $delegate[0].$$isolateBindings.ping = { 7 | attrName: 'ping', 8 | mode: '=', 9 | optional: true 10 | }; 11 | 12 | return $delegate; 13 | }]); 14 | }]); -------------------------------------------------------------------------------- /src/js/ping/ping.js: -------------------------------------------------------------------------------- 1 | angular.module('leaflet-directive.ext.d3.ping').directive('ping', function() { 2 | 'use strict'; 3 | 4 | return { 5 | restrict : 'A', 6 | scope : false, 7 | replace : false, 8 | require : 'leaflet', 9 | link : function(scope, element, attrs, controller) { 10 | 11 | // Get the leaflet scope from the parent leaflet controller 12 | var leafletScope = controller.getLeafletScope(); 13 | 14 | controller.getMap().then(function(map) { 15 | // Initialize the ping layer 16 | var pingLayer = L.pingLayer(leafletScope.ping.config).addTo(map); 17 | leafletScope.$on(leafletScope.ping.event, function(event, pingData){ 18 | pingLayer.ping(pingData); 19 | }); 20 | }); 21 | 22 | } 23 | }; 24 | }); 25 | --------------------------------------------------------------------------------