├── .editorconfig
├── .gitignore
├── .jscsrc
├── .jshintrc
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── dist
├── angular-leaflet-directive.js
├── angular-leaflet-directive.min.js
└── angular-leaflet-directive.no-header.js
├── doc
├── bounds-attribute.md
├── center-attribute.md
├── defaults-attribute.md
├── layers-attribute.md
├── leaflet-directive.md
├── markers-attribute.md
├── maxbounds-attribute.md
├── paths-attribute.md
└── tiles-attribute.md
├── examples
├── 0000-viewer.html
├── 0100-basic-first-example.html
├── 0101-basic-center-example.html
├── 0101-basic-lf-center-example.html
├── 0102-basic-center-autodiscover-example.html
├── 0103-basic-center-url-hash-example.html
├── 0104-basic-custom-parameters-example.html
├── 0105-basic-bounds-example.html
├── 0106-basic-maxbounds-example.html
├── 0107-basic-tiles-example.html
├── 0108-basic-tiles-zoom-changer-example.html
├── 0109-basic-center-geoip-example.html
├── 0110-basic-map-without-animations-example.html
├── 0111-basic-legend-example.html
├── 0112-basic-maxbounds-pad-example.html
├── 0113-basic-geojson-simple-example.html
├── 0114-basic-geojson-center-example.html
├── 0115-basic-events-example.html
├── 0116-basic-access-leaflet-object-example.html
├── 0117-basic-routing-show-hide-map-example.html
├── 0118-basic-double-map-events-example.html
├── 0119-basic-double-map-access-map-object-example.html
├── 0120-basic-double-map-sharing-attributes-example.html
├── 0121-basic-double-map-toggle-example.html
├── 0122-basic-geojson-update-example.html
├── 0123-basic-hide-show-map-example.html
├── 0124-basic-geojson-non-nested-example.html
├── 0125-basic-geojson-nested-example.html
├── 0126-basic-bounds-nominatim-example.html
├── 0127-basic-tiles-wms-example.html
├── 0201-layers-simple-example.html
├── 0202-layers-overlays-simple-example.html
├── 0203-layers-imageoverlay-example.html
├── 0204-layers-dynamic-addition-example.html
├── 0205-layers-googlemaps-example.html
├── 0206-layers-googlemaps-fullsize-example.html
├── 0207-layers-hide-baselayer-on-selector-example.html
├── 0208-layers-esri-dynamic-layer-example.html
├── 0209-layers-esri-legend-service-example.html
├── 0210-layers-webgl-heatmap-example.html
├── 0211-layers-layergroup-simple-example.html
├── 0212-layers-hide-overlays-on-selector-example.html
├── 0213-layers-bingmaps-example.html
├── 0214-layers-utfgrid-example.html
├── 0216-layers-overlays-markercluster-example.html
├── 0218-layers-overlays-markers-nested-example.html
├── 0219-layers-overlays-paths-example.html
├── 0220-layers-wms-with-different-projection-example.html
├── 0221-layers-heatmap-example.html
├── 0222-layers-overlays-hide-on-zoomout-example.html
├── 0223-layers-refresh-overlay-every-minute-example.html
├── 0224-layers-esri-base-layer-example.html
├── 0225-layers-esri-feature-layer-example.html
├── 0226-layers-esri-tiled-map-layer-example.html
├── 0227-layers-esri-image-layer-example.html
├── 0228-layers-esri-clustered-layer-example.html
├── 0229-layers-esri-heatmap-layer-example.html
├── 0230-layers-yandex-example.html
├── 0231-layers-overlay-geojson-example.html
├── 0300-paths-simple-example.html
├── 0301-paths-types-example.html
├── 0302-paths-ajax-load-example.html
├── 0303-paths-3000-items-example.html
├── 0304-paths-advanced-example.html
├── 0305-paths-change-in-group-layer-example.html
├── 0306-paths-decorations-simple-example.html
├── 0307-paths-events-example-with-id.html
├── 0307-paths-events-example.html
├── 0400-controls-custom-layer-control-example.html
├── 0401-controls-draw-example.html
├── 0402-controls-scale-example.html
├── 0403-controls-fullscreen-example.html
├── 0404-controls-minimap-example.html
├── 0405-controls-search-example.html
├── 0406-controls-custom-example.html
├── 0500-markers-simple-example.html
├── 0501-markers-events-add-example.html
├── 0502-markers-add-remove-example.html
├── 0503-markers-icons-example.html
├── 0504-markers-popup-example.html
├── 0505-markers-label-example.html
├── 0506-markers-groups-example.html
├── 0507-markers-rotation-example.html
├── 0508-markers-change-opacity-example.html
├── 0509-markers-clustering-example.html
├── 0510-markers-clustering-without-overlays-example.html
├── 0511-markers-modal-markercluster-example.html
├── 0512-markers-clustering-10000-markers-example.html
├── 0513-markers-events-example-with-id.html
├── 0513-markers-events-example.html
├── 0514-markers-delayed-events.html
├── 0515-markers-angular-template-example.html
├── 0516-markers-two-maps-events-example.html
├── 0600-mixed-image-legend-example.html
├── 0601-mixed-geojson-events-example-w-id.html
├── 0601-mixed-geojson-events-example.html
├── 0602-mixed-mapbox-tiles-geojson-example.html
├── 0603-mixed-layers-overlays-geojson-example.html
├── 0604-mixed-markers-nested-events-example.html
├── 0605-mixed-overlays-markers-nested-no-watch-example.html
├── 0606-mixed-esri-legend-service-example.html
├── 0607-mixed-esri-multilayer-legend-service-example.html
├── css
│ └── viewer.css
├── images
│ └── andes.jpg
├── img
│ ├── 100x100_PNG
│ │ ├── bigben100.png
│ │ ├── colosseum100.png
│ │ ├── egypt100.png
│ │ ├── eiffel100.png
│ │ ├── liberty100.png
│ │ └── tajmahal100.png
│ ├── San-francisco-map.png
│ ├── leaf-green.png
│ ├── leaf-orange.png
│ └── leaf-shadow.png
├── js
│ ├── controllers.js
│ ├── controllers
│ │ ├── BasicAccessLeafletObjectController.js
│ │ ├── BasicBoundsController.js
│ │ ├── BasicBoundsNominatimController.js
│ │ ├── BasicCenterAutodiscoverController.js
│ │ ├── BasicCenterController.js
│ │ ├── BasicCenterGeoIPController.js
│ │ ├── BasicCenterUrlHashController.js
│ │ ├── BasicCustomParametersController.js
│ │ ├── BasicDoubleMapAccessMapObjectController.js
│ │ ├── BasicDoubleMapEventsController.js
│ │ ├── BasicDoubleMapSharingAttributesController.js
│ │ ├── BasicDoubleMapToggleController.js
│ │ ├── BasicDynamicAddRemoveMapExample.js
│ │ ├── BasicEventsController.js
│ │ ├── BasicFirstController.js
│ │ ├── BasicGeoJSONUpdateController.js
│ │ ├── BasicHideShowMapController.js
│ │ ├── BasicLFCenterController.js
│ │ ├── BasicLegendController.js
│ │ ├── BasicMapWithoutAnimationsController.js
│ │ ├── BasicMaxBoundsController.js
│ │ ├── BasicMaxBoundsPadController.js
│ │ ├── BasicTilesController.js
│ │ ├── BasicTilesWMSController.js
│ │ ├── BasicTilesZoomChangerController.js
│ │ ├── ControlsCustomController.js
│ │ ├── ControlsCustomLayerControlController.js
│ │ ├── ControlsDrawController.js
│ │ ├── ControlsFullscreenController.js
│ │ ├── ControlsMinimapController.js
│ │ ├── ControlsScaleController.js
│ │ ├── ControlsSearchController.js
│ │ ├── GeoJSONCenterController.js
│ │ ├── GeoJSONController.js
│ │ ├── GeoJSONNestedController.js
│ │ ├── GeoJSONNonNestedController.js
│ │ ├── GoogleMapsController.js
│ │ ├── GoogleMapsFullsizeController.js
│ │ ├── ImageLegendServiceController.js
│ │ ├── LayersBingMapsController.js
│ │ ├── LayersDynamicAdditionController.js
│ │ ├── LayersEsriBaseMapLayerController.js
│ │ ├── LayersEsriClusteredLayerController.js
│ │ ├── LayersEsriDynamicLayerController.js
│ │ ├── LayersEsriFeatureLayerController.js
│ │ ├── LayersEsriHeatmapLayerController.js
│ │ ├── LayersEsriImageLayerController.js
│ │ ├── LayersEsriLegendServiceController.js
│ │ ├── LayersEsriTiledMapLayerController.js
│ │ ├── LayersHeatmapController.js
│ │ ├── LayersHideBaselayerOnSelectorController.js
│ │ ├── LayersHideOverlaysOnSelectorController.js
│ │ ├── LayersImageOverlayController.js
│ │ ├── LayersLayergroupSimpleController.js
│ │ ├── LayersOverlayGeoJSONController.js
│ │ ├── LayersOverlaysHideOnZoomOutController.js
│ │ ├── LayersOverlaysMarkerclusterController.js
│ │ ├── LayersOverlaysMarkersNestedController.js
│ │ ├── LayersOverlaysPathsController.js
│ │ ├── LayersOverlaysSimpleController.js
│ │ ├── LayersRefreshOverlayEveryMinuteController.js
│ │ ├── LayersSimpleController.js
│ │ ├── LayersUTFGridController.js
│ │ ├── LayersWMSWithDifferentProjectionController.js
│ │ ├── LayersWebGLHeatmapController.js
│ │ ├── LayersYandexController.js
│ │ ├── LegendEsriLegendServiceController.js
│ │ ├── LegendEsriMultilayerLegendServiceController.js
│ │ ├── MarkersAddRemoveController.js
│ │ ├── MarkersAngularTemplateController.js
│ │ ├── MarkersChangeOpacityController.js
│ │ ├── MarkersClustering10000MarkersController.js
│ │ ├── MarkersClusteringController.js
│ │ ├── MarkersClusteringWithoutOverlaysController.js
│ │ ├── MarkersDelayedEventsController.js
│ │ ├── MarkersEventsAddController.js
│ │ ├── MarkersEventsController.js
│ │ ├── MarkersEventsWithIDController.js
│ │ ├── MarkersGroupController.js
│ │ ├── MarkersIconsController.js
│ │ ├── MarkersLabelController.js
│ │ ├── MarkersModalMarkerClusterController.js
│ │ ├── MarkersPopupController.js
│ │ ├── MarkersRotationController.js
│ │ ├── MarkersSimpleController.js
│ │ ├── MarkersTwoMapsEventsController.js
│ │ ├── MixedGeoJSONEventsController.js
│ │ ├── MixedGeoJSONEventsWithIDController.js
│ │ ├── MixedLayersOverlaysGeoJSONController.js
│ │ ├── MixedMOverlaysMarkersNestedNoWatchController.js
│ │ ├── MixedMapboxTilesGeojsonController.js
│ │ ├── MixedMarkersNestedEventsController.js
│ │ ├── PathEventsController.js
│ │ ├── PathEventsWithIDController.js
│ │ ├── PathSimpleController.js
│ │ ├── PathTypesController.js
│ │ ├── Paths3000ItemsController.js
│ │ ├── PathsAdvancedController.js
│ │ ├── PathsAjaxLoadController.js
│ │ ├── PathsChangeInGroupLayerController.js
│ │ └── PathsDecorationsSimpleController.js
│ └── viewer.js
├── json
│ ├── JPN.geo.json
│ ├── README
│ ├── USA.geo.json
│ ├── all.json
│ ├── countries.geo.json
│ ├── examples.json
│ ├── features.json
│ ├── heat-points.json
│ ├── major_cities.json
│ ├── mockupTenGrid.json
│ ├── mockupZeroOneGrid.json
│ ├── paths.json
│ ├── realworld.10000.json
│ ├── toronto1.json
│ └── toronto2.json
├── markers-cluster-issue.html
├── markers-updates.html
├── partials
│ ├── example.html
│ └── source.html
└── views
│ └── template.html
├── generate-examples.js
├── grunt
├── aliases.yaml
├── bower.json
├── clean.json
├── concat.json
├── connect.json
├── conventionalChangelog.json
├── jscs.json
├── jshint.json
├── karma.json
├── ngAnnotate.json
├── open.json
├── protractor.json
├── shell.json
├── uglify.json
└── watch.json
├── package.json
├── src
├── directives
│ ├── bounds.js
│ ├── center.js
│ ├── controls.js
│ ├── decorations.js
│ ├── eventBroadcast.js
│ ├── geojson.js
│ ├── layercontrol.js
│ ├── layers.js
│ ├── leaflet.js
│ ├── legend.js
│ ├── markers.js
│ ├── maxbounds.js
│ ├── paths.js
│ ├── tiles.js
│ └── watchOptions.js
├── header-MIT-license.txt
└── services
│ ├── events
│ ├── leafletEventsHelpers.js
│ ├── leafletGeoJsonEvents.js
│ ├── leafletLabelEvents.js
│ ├── leafletMapEvents.js
│ ├── leafletMarkerEvents.js
│ └── leafletPathEvents.js
│ ├── leafletBoundsHelpers.js
│ ├── leafletControlHelpers.js
│ ├── leafletData.js
│ ├── leafletDirectiveControlsHelpers.js
│ ├── leafletGeoJsonHelpers.js
│ ├── leafletHelpers.js
│ ├── leafletIterators.js
│ ├── leafletLayerHelpers.js
│ ├── leafletLegendHelpers.js
│ ├── leafletMapDefaults.js
│ ├── leafletMarkersHelpers.js
│ ├── leafletPathsHelpers.js
│ ├── leafletWatchHelpers.js
│ └── nominatim.js
└── test
├── e2e
├── 0100-basic-first-example.js
├── 0101-basic-center-example.js
├── 0103-basic-center-url-hash-example.js
├── 0104-basic-custom-parameters-example.js
├── 0105-basic-bounds-example.js
├── 0106-basic-maxbounds-example.js
├── 0107-basic-tiles-example.js
├── 0108-basic-tiles-zoom-changer-example.js
├── 0201-layers-simple-example.js
├── 0202-layers-overlays-simple-example.js
├── 0203-layers-imageoverlay-example.js
├── 0205-layers-googlemaps-example.js
├── 0301-paths-types-example.js
└── 0501-markers-events-add-example.js
├── karma-unit.conf.js
├── protractor.conf.js
└── unit
├── 000-leafletDirectiveSpec.js
├── 010-centerDirectiveSpec.js
├── 020-boundsDirectiveSpec.js
├── 030-tilesDirectiveSpec.js
├── 040-maxboundsDirectiveSpec.js
├── 050-pathsDirectiveSpec.js
├── 060-decorationsDirectiveSpec.js
├── 070-geojsonDirectiveSpec.js
├── 080-markersDirectiveSpec.js
├── 090-eventsDirectiveSpec.js
├── layersDirective
├── layersDirective.creationSpec.js
├── layersDirective.overlays.markersSpec.js
├── layersDirective.overlays.pathsSpec.js
├── layersDirective.overlaysSpec.js
├── layersDirective.twomapsSpec.js
├── layersDirective.watch.markersSpec.js
└── layersDirective.watchSpec.js
├── leafletData
├── leafletDataService.DirectiveControlsSpec.js
└── leafletDataSpec.js
├── plugin
└── markerPluginVectorMarkersSpec.js
└── services
├── leafletGeoHelpersSpec.js
├── leafletHelpersSpec.js
└── leafletIteratorsSpec.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 4
13 |
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OS
2 | # ===========
3 | .DS_Store
4 | Thumbs.db
5 |
6 | # Project
7 | # ===========
8 | dist/angular-leaflet-directive.pre.js
9 | dist/angular-leaflet-directive.min.no-header.js
10 | js/angular-leaflet-directive-webpage.ngmin.js
11 |
12 | # Related ecosystem
13 | # ===========
14 | node_modules
15 | bower_components
16 | coverage
17 | saucelabs.json
18 |
19 | # General
20 | # ===========
21 | temp
22 | *.log
23 | *.swp
24 | .*.swp
25 | *~
26 | *.iml
27 | .idea
28 | .project
29 | core
30 | lib
31 | tags
32 | .tags
33 | TAGS
34 | .TAGS
35 |
--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
1 | {
2 | "preset": "airbnb"
3 | }
4 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "curly": false,
7 | "eqeqeq": true,
8 | "immed": true,
9 | "indent": 4,
10 | "latedef": true,
11 | "newcap": true,
12 | "noarg": true,
13 | "regexp": true,
14 | "undef": true,
15 | "unused": true,
16 | "trailing": true,
17 | "smarttabs": true,
18 | "globals": {
19 | "angular": false,
20 | "L": false,
21 | "lvector": false,
22 | "cartodb": false,
23 | "jasmine": false,
24 | "isCommonJS": false,
25 | "exports": false,
26 | "spyOn": false,
27 | "it": false,
28 | "xit": false,
29 | "expect": false,
30 | "runs": false,
31 | "waits": false,
32 | "waitsFor": false,
33 | "beforeEach": false,
34 | "afterEach": false,
35 | "describe": false,
36 | "xdescribe": false,
37 | "protractor": false,
38 | "browser": false,
39 | "by": false,
40 | "element": false
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | cache:
4 | directories:
5 | - node_modules
6 | notifications:
7 | email: false
8 | node_js:
9 | - '4'
10 | before_install:
11 | - npm i -g npm@^2.0.0
12 | before_script:
13 | - npm prune
14 | - npm install -g grunt-cli
15 | - npm install -g bower
16 | - bower install --config.interactive=false
17 | after_success:
18 | - npm run semantic-release
19 | branches:
20 | except:
21 | - "/^v\\d+\\.\\d+\\.\\d+$/"
22 |
23 | env:
24 | global:
25 | - secure: "Ugov4QqHxEN4976jaQvtQigwwB7wiG0vxiE4pIDiZKJ67py0d0kLZXI4CzNs8zV5EOrkR+ug2cs9vTmA8CdSmhQcx4SVwFoim/ReoQb9AK76+tgEso+F3nZpE1jeIorKN2/LAXtwkHOZa9WaDwhMlCULJxJ8DZoMsXkc5Xq3c6A="
26 | - secure: "QW7a9wCfc4u+MGnPyLzE+HHRhAhTf0a1mqixoUB2MVNL/hZ7+nXAOL/oz3LxodPpwH3NEl4RyqteGS15XpJvZKuKXiyHWbrfSLHz7DD1LYuIzc7UOgyBTXF0C97DP5ae7zui+qvDOe67ud+qBerroP9jdcx+mSVQgMIAfF1uWY4="
27 | - secure: "gflE27IYzgjICndyY7800KdoNKem0oMWKtIjXQuSTJFuWJvBVWkUajT8maNbv1+c46r6iFptd27m5Arzl9hqAh2deHqLxwRGqietcY737q7oRJzKRfA4MGycF8fKHEh8U5KupXTC7UXuESLWGA+bpWA6KNJ5CImAw2MWJXmsX9c="
28 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function (grunt) {
2 |
3 | require('load-grunt-config')(grunt);
4 | grunt.config('pkg', grunt.file.readJSON('package.json'));
5 |
6 | };
7 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) https://github.com/tombatossals/angular-leaflet-directive
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
13 | all 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
21 | THE SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-leaflet-directive",
3 | "author": "https://github.com/tombatossals/angular-leaflet-directive/graphs/contributors",
4 | "description": "angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps",
5 | "version": "0.10.0",
6 | "homepage": "http://tombatossals.github.io/angular-leaflet-directive/",
7 | "keywords": [
8 | "angularjs",
9 | "javascript",
10 | "directive",
11 | "leaflet"
12 | ],
13 | "main": [
14 | "dist/angular-leaflet-directive.js"
15 | ],
16 | "dependencies": {
17 | "angular": "1.x",
18 | "leaflet": "0.7.x"
19 | },
20 | "devDependencies": {
21 | "jquery": "*",
22 | "semantic-ui": "*",
23 | "bootstrap": "*",
24 | "prism": "*",
25 | "angular-route": "1.x",
26 | "angular-animate": "1.x",
27 | "angular-mocks": "1.x",
28 | "leaflet.markercluster": "*",
29 | "leaflet.draw": "*",
30 | "Leaflet.label": "*",
31 | "leaflet-tilelayer-geojson": "*",
32 | "Leaflet.utfgrid": "danzel/Leaflet.utfgrid",
33 | "Leaflet.awesome-markers": "*",
34 | "leaflet-providers": "*",
35 | "leaflet.vector-markers": "*",
36 | "webgl-heatmap-leaflet": "*",
37 | "leaflet-plugins": "*",
38 | "esri-leaflet": "*",
39 | "proj4": "*",
40 | "font-awesome": "*",
41 | "proj4leaflet": "*",
42 | "Leaflet.MakiMarkers": "*",
43 | "Leaflet.heat": "https://github.com/Leaflet/Leaflet.heat/archive/gh-pages.tar.gz",
44 | "Leaflet.ExtraMarkers": "https://github.com/coryasilva/Leaflet.ExtraMarkers/archive/v1.0.1.tar.gz",
45 | "Leaflet.fullscreen": "http://github.com/Leaflet/Leaflet.fullscreen/archive/v0.0.4.tar.gz",
46 | "Leaflet.PolylineDecorator": "bbecquet/Leaflet.PolylineDecorator",
47 | "ionrangeslider": "*",
48 | "leaflet-minimap": "*",
49 | "esri-leaflet-clustered-feature-layer": "~1.0.x",
50 | "esri-leaflet-heatmap-feature-layer": "~1.0.x",
51 | "leaflet-search": "*"
52 | },
53 | "ignore": [
54 | "**/.*",
55 | "src",
56 | "doc",
57 | "examples",
58 | "test",
59 | "*.md",
60 | "Gruntfile.js",
61 | "package.json",
62 | "bower.json"
63 | ]
64 | }
65 |
--------------------------------------------------------------------------------
/doc/bounds-attribute.md:
--------------------------------------------------------------------------------
1 | 'bounds' Attribute Documentation
2 | ==================================
3 |
4 | This sub-directive needs the **leaflet** main directive, so it is normally used as an attribute of the *leaflet* tag, like this:
5 |
6 | ```
7 | OpenStreetMap contributors'
18 | }
19 | }
20 | ```
21 |
22 | The options passed to this object could have a lot of attributes, and are the same passed to the leaflet tile object, documented [here](http://leafletjs.com/reference.html#tilelayer-options).
23 |
24 |
25 | And that's all, we can see how the map is affected when we change the _tiles_ scope object values, like these examples:
26 |
27 | * [tiles-example.html](http://tombatossals.github.io/angular-leaflet-directive/examples/tiles-example.html).
28 | * [tiles-zoom-changer-example.html](http://tombatossals.github.io/angular-leaflet-directive/examples/tiles-zoom-changer-example.html).
29 |
--------------------------------------------------------------------------------
/examples/0100-basic-first-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | First steps, basic example
20 |
21 |
22 |
--------------------------------------------------------------------------------
/examples/0101-basic-center-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Center map example
31 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/examples/0101-basic-lf-center-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Center map example
31 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/examples/0102-basic-center-autodiscover-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Center autodiscover example
29 |
34 |
35 | Discover position
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/examples/0104-basic-custom-parameters-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Using custom default parameters
35 |
36 |
37 |
--------------------------------------------------------------------------------
/examples/0105-basic-bounds-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Map bounds example
30 | South west
31 |
35 |
36 | North east
37 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/examples/0108-basic-tiles-zoom-changer-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dynamic tile changer based on zoom level
37 | Zoom to level 13 to see how the tiles change:
38 |
39 | Current TileLayer Url:
40 | Current Zoom Level:
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/examples/0109-basic-center-geoip-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Center by IP (GeoIP) example
46 | Insert the IP you want to know its location:
47 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/examples/0110-basic-map-without-animations-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Map with disabled animations example
36 |
37 |
38 |
--------------------------------------------------------------------------------
/examples/0111-basic-legend-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Legend example
52 |
53 |
54 |
--------------------------------------------------------------------------------
/examples/0113-basic-geojson-simple-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Simple GeoJSON example
45 |
46 |
47 |
--------------------------------------------------------------------------------
/examples/0115-basic-events-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Events example
33 | All map events are propagated by default.
34 |
35 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/examples/0116-basic-access-leaflet-object-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Direct access to the Leaflet Map Object
37 | Fitbounds outside leaflet-directive!
38 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/examples/0117-basic-routing-show-hide-map-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Angular routing show/hide map example
27 | Show map / Hide map
28 |
29 |
30 |
--------------------------------------------------------------------------------
/examples/0123-basic-hide-show-map-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hide/Show map example
34 | Select to show the map
35 | Center: {{ center }}
36 |
37 |
38 |
--------------------------------------------------------------------------------
/examples/0126-basic-bounds-nominatim-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Bounds Nominatim map example
29 | You can position the map with no need to use coordinates, just address names, using the Nominatim service of OpenStreetMap. Take a look at the address property of the bounds object:
35 | Baselayer with overlays
47 | You can add overlays to a baselayer, which will show a layer selector on the top right corner, defining layers like in this example.
48 |
49 |
50 |
--------------------------------------------------------------------------------
/examples/0226-layers-esri-tiled-map-layer-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Esri ArcGIS Tiled Map Layer
44 | Use the Layer Switch Control on the top rigth of the map to show another Esri Tiled Map Layers.
45 |
46 |
47 |
--------------------------------------------------------------------------------
/examples/0302-paths-ajax-load-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Load remote paths example
43 | Click on red route (Popup) or hover over green route (Label) to get more information
44 | Load Paths data!
45 | Change Paths!
46 |
47 |
48 |
--------------------------------------------------------------------------------
/examples/0402-controls-scale-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Scale control example
28 |
29 |
30 |
--------------------------------------------------------------------------------
/examples/0403-controls-fullscreen-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Fullscreen control example
42 | Fullscreen control with the Leaflet fullscreen plugin.
43 |
44 |
45 |
--------------------------------------------------------------------------------
/examples/0406-controls-custom-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Fullscreen control example
40 | Fullscreen control with the Leaflet fullscreen plugin.
41 |
42 |
43 |
--------------------------------------------------------------------------------
/examples/0501-markers-events-add-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Markers with events example
38 | Click on the map to add a marker
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/examples/0502-markers-add-remove-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Add/remove markers easily example
51 | Remove markers
52 | Add markers
53 |
54 |
55 |
--------------------------------------------------------------------------------
/examples/0505-markers-label-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Marker with label example
46 |
47 |
48 |
--------------------------------------------------------------------------------
/examples/0508-markers-change-opacity-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Change icon opacity
34 | Move the slider to change the icon opacity.
35 | Marker Events example
49 |
50 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/examples/0513-markers-events-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Marker Events example
49 |
50 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/examples/0602-mixed-mapbox-tiles-geojson-example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Mapbox tiles and Mapbox GeoJSON loading
42 | OpenStreetMap contributors'
7 | }
8 | },
9 | standard: {
10 | name: 'MAP Standard',
11 | type: 'wms',
12 | url: 'https://api.minu.mn/wms',
13 | layerParams: {
14 | layers: 'mongolid:mimap',
15 | format: 'image/png',
16 | transparent: true,
17 | tiled: true,
18 | version: '1.3.0',
19 | maxZoom: 19
20 | }
21 | },
22 | blue: {
23 | name: 'MAP Blue',
24 | type: 'wms',
25 | url: 'https://api.minu.mn/wms',
26 | layerParams: {
27 | layers: 'mongolid:mimap_blue', // it's published not yet.
28 | format: 'image/png',
29 | transparent: true,
30 | tiled: true,
31 | version: '1.3.0',
32 | maxZoom: 19
33 | }
34 | }
35 | };
36 | angular.extend($scope, {
37 | ulaanbaatar: {
38 | lat: 47.918464,
39 | lng: 106.917678,
40 | zoom: 5
41 | },
42 | tiles: tilesDict.openstreetmap
43 | });
44 | $scope.changeTiles = function(tiles) {
45 | $scope.tiles = tilesDict[tiles];
46 | };
47 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/BasicTilesZoomChangerController.js:
--------------------------------------------------------------------------------
1 | app.controller('BasicTilesZoomChangerController', [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 10
7 | },
8 | tiles: {
9 | url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
10 | }
11 | });
12 | $scope.$watch("london.zoom", function(zoom) {
13 | $scope.tiles.url = (zoom > 12)
14 | ? "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
15 | : "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
16 | });
17 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/ControlsCustomController.js:
--------------------------------------------------------------------------------
1 | app.controller("ControlsCustomController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 37.8,
5 | lng: -96,
6 | zoom: 5
7 | },
8 | tiles: {
9 | name: 'Mapbox Comic',
10 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
11 | type: 'xyz',
12 | options: {
13 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
14 | mapid: 'bufanuvols.lpa06kfg'
15 | }
16 | },
17 | controls: {
18 | custom: new L.Control.Fullscreen()
19 | }
20 | });
21 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/ControlsDrawController.js:
--------------------------------------------------------------------------------
1 | app.controller("ControlsDrawController", [ "$scope", "leafletData", function($scope, leafletData) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 4
7 | },
8 | controls: {
9 | draw: {}
10 | },
11 | layers: {
12 | baselayers: {
13 | mapbox_light: {
14 | name: 'Mapbox Light',
15 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
16 | type: 'xyz',
17 | layerOptions: {
18 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
19 | mapid: 'bufanuvols.lia22g09'
20 | },
21 | layerParams: {
22 | showOnSelector: false
23 | }
24 | }
25 | },
26 | overlays: {
27 | draw: {
28 | name: 'draw',
29 | type: 'group',
30 | visible: true,
31 | layerParams: {
32 | showOnSelector: false
33 | }
34 | }
35 | }
36 | }
37 | });
38 | leafletData.getMap().then(function(map) {
39 | leafletData.getLayers().then(function(baselayers) {
40 | var drawnItems = baselayers.overlays.draw;
41 | map.on('draw:created', function (e) {
42 | var layer = e.layer;
43 | drawnItems.addLayer(layer);
44 | console.log(JSON.stringify(layer.toGeoJSON()));
45 | });
46 | });
47 | });
48 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/ControlsFullscreenController.js:
--------------------------------------------------------------------------------
1 | app.controller("ControlsFullscreenController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 37.8,
5 | lng: -96,
6 | zoom: 5
7 | },
8 | tiles: {
9 | name: 'Mapbox Comic',
10 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
11 | type: 'xyz',
12 | options: {
13 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
14 | mapid: 'bufanuvols.lpa06kfg'
15 | }
16 | },
17 | controls: {
18 | fullscreen: {
19 | position: 'topleft'
20 | }
21 | }
22 | });
23 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/ControlsMinimapController.js:
--------------------------------------------------------------------------------
1 | app.controller("ControlsMinimapController", [ "$scope", "leafletData", function($scope, leafletData) {
2 | angular.extend($scope, {
3 | bogota: {
4 | lat: 4.649,
5 | lng: -74.086,
6 | zoom: 5
7 | },
8 | tiles: {
9 | name: 'Mapbox Comic',
10 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
11 | type: 'xyz',
12 | options: {
13 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
14 | mapid: 'bufanuvols.lpa06kfg'
15 | }
16 | },
17 | controls: {}
18 | });
19 | // Wait for center to be stablished
20 | leafletData.getMap().then(function() {
21 | angular.extend($scope.controls, {
22 | minimap: {
23 | type: 'minimap',
24 | layer: {
25 | name: 'OpenStreetMap',
26 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
27 | type: 'xyz'
28 | },
29 | toggleDisplay: true
30 | }
31 | });
32 | });
33 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/ControlsScaleController.js:
--------------------------------------------------------------------------------
1 | app.controller("ControlsScaleController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 4
7 | },
8 | controls: {
9 | scale: true
10 | }
11 | });
12 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/GeoJSONCenterController.js:
--------------------------------------------------------------------------------
1 | app.controller("GeoJSONCenterController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
2 | angular.extend($scope, {
3 | japan: {
4 | lat: 27.26,
5 | lng: 78.86,
6 | zoom: 2
7 | },
8 | defaults: {
9 | scrollWheelZoom: false
10 | }
11 | });
12 | $scope.centerJSON = function() {
13 | leafletData.getMap().then(function(map) {
14 | var latlngs = [];
15 | for (var i in $scope.geojson.data.features[0].geometry.coordinates) {
16 | var coord = $scope.geojson.data.features[0].geometry.coordinates[i];
17 | for (var j in coord) {
18 | var points = coord[j];
19 | for (var k in points) {
20 | latlngs.push(L.GeoJSON.coordsToLatLng(points[k]));
21 | }
22 | }
23 | }
24 | map.fitBounds(latlngs);
25 | });
26 | };
27 | // Get the countries geojson data from a JSON
28 | $http.get("json/JPN.geo.json").success(function(data, status) {
29 | angular.extend($scope, {
30 | geojson: {
31 | data: data,
32 | style: {
33 | fillColor: "green",
34 | weight: 2,
35 | opacity: 1,
36 | color: 'white',
37 | dashArray: '3',
38 | fillOpacity: 0.7
39 | }
40 | }
41 | });
42 | });
43 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/GeoJSONController.js:
--------------------------------------------------------------------------------
1 | app.controller("GeoJSONController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
2 | angular.extend($scope, {
3 | japan: {
4 | lat: 38.51,
5 | lng: 139,
6 | zoom: 4
7 | },
8 | defaults: {
9 | scrollWheelZoom: false
10 | }
11 | });
12 | // Get the countries geojson data from a JSON
13 | $http.get("json/JPN.geo.json").success(function(data, status) {
14 | angular.extend($scope, {
15 | geojson: {
16 | data: data,
17 | style: {
18 | fillColor: "green",
19 | weight: 2,
20 | opacity: 1,
21 | color: 'white',
22 | dashArray: '3',
23 | fillOpacity: 0.7
24 | }
25 | }
26 | });
27 | });
28 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/GoogleMapsController.js:
--------------------------------------------------------------------------------
1 | app.controller("GoogleMapsController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | berlin: {
4 | lat: 52.52,
5 | lng: 13.40,
6 | zoom: 14
7 | },
8 | markers: {
9 | m1: {
10 | lat: 52.52,
11 | lng: 13.40
12 | }
13 | },
14 | layers: {
15 | baselayers: {
16 | googleTerrain: {
17 | name: 'Google Terrain',
18 | layerType: 'TERRAIN',
19 | type: 'google'
20 | },
21 | googleHybrid: {
22 | name: 'Google Hybrid',
23 | layerType: 'HYBRID',
24 | type: 'google'
25 | },
26 | googleRoadmap: {
27 | name: 'Google Streets',
28 | layerType: 'ROADMAP',
29 | type: 'google'
30 | }
31 | }
32 | }
33 | });
34 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/GoogleMapsFullsizeController.js:
--------------------------------------------------------------------------------
1 | app.controller("GoogleMapsFullsizeController", [ "$scope", "$element", function($scope, $element) {
2 | angular.extend($scope, {
3 | berlin: {
4 | lat: 52.52,
5 | lng: 13.40,
6 | zoom: 14
7 | },
8 | markers: {
9 | m1: {
10 | lat: 52.52,
11 | lng: 13.40
12 | }
13 | },
14 | layers: {
15 | baselayers: {
16 | googleTerrain: {
17 | name: 'Google Terrain',
18 | layerType: 'TERRAIN',
19 | type: 'google'
20 | },
21 | googleHybrid: {
22 | name: 'Google Hybrid',
23 | layerType: 'HYBRID',
24 | type: 'google'
25 | },
26 | googleRoadmap: {
27 | name: 'Google Streets',
28 | layerType: 'ROADMAP',
29 | type: 'google'
30 | }
31 | }
32 | }
33 | });
34 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersBingMapsController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersBingMapsController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | bastia: {
4 | lat: 42.7029,
5 | lng: 9.4529,
6 | zoom: 13
7 | },
8 | markers: {
9 | bastia: {
10 | lat: 67.6755,
11 | lng: 9.4529
12 | }
13 | },
14 | layers: {
15 | baselayers: {
16 | bingAerial: {
17 | name: 'Bing Aerial',
18 | type: 'bing',
19 | key: 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
20 | layerOptions: {
21 | type: 'Aerial'
22 | }
23 | },
24 | bingRoad: {
25 | name: 'Bing Road',
26 | type: 'bing',
27 | key: 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
28 | layerOptions: {
29 | type: 'Road'
30 | }
31 | },
32 | bingAerialWithLabels: {
33 | name: 'Bing Aerial With Labels',
34 | type: 'bing',
35 | key: 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
36 | layerOptions: {
37 | type: 'AerialWithLabels'
38 | }
39 | },
40 | }
41 | }
42 | });
43 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersEsriClusteredLayerController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersEsriClusteredLayerController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | porland: {
4 | lat: 45.526,
5 | lng: -122.667,
6 | zoom: 15
7 | },
8 | layers: {
9 | baselayers: {
10 | streets: {
11 | name: "Streets",
12 | type: "agsBase",
13 | layer: "Streets",
14 | visible: false
15 | }
16 | },
17 | overlays: {
18 | simple: {
19 | name: "Simple",
20 | type: "agsClustered",
21 | url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
22 | visible: true
23 | }
24 | }
25 | }
26 | });
27 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersEsriDynamicLayerController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersEsriDynamicLayerController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | bogota: {
4 | lat: 4.649,
5 | lng: -74.086,
6 | zoom: 15
7 | },
8 | markers: {
9 | m1: {
10 | lat: 4.649,
11 | lng: -74.086,
12 | }
13 | },
14 | layers: {
15 | baselayers: {
16 | world: {
17 | name: "Imagery",
18 | type: "agsDynamic",
19 | url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
20 | visible: false,
21 | layerOptions: {
22 | layers: [0, 1, 2, 3],
23 | opacity: 1,
24 | attribution: "Copyright:© 2014 Esri, DeLorme, HERE, TomTom"
25 | }
26 | },
27 | topo: {
28 | name: "World Topographic",
29 | type: "agsDynamic",
30 | url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
31 | visible: false,
32 | layerOptions: {
33 | layers: [0],
34 | opacity: 0.9,
35 | attribution: "Copyright:© 2014 Esri, FAO, NOAA"
36 | }
37 | },
38 | },
39 | },
40 | });
41 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersEsriHeatmapLayerController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersEsriHeatmapLayerController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 40.706,
5 | lng: -73.926,
6 | zoom: 14
7 | },
8 | layers: {
9 | baselayers: {
10 | streets: {
11 | name: "Gray",
12 | type: "agsBase",
13 | layer: "Gray",
14 | visible: false
15 | }
16 | },
17 | overlays: {
18 | simple: {
19 | name: "Simple",
20 | type: "agsHeatmap",
21 | url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Graffiti_Reports/FeatureServer/0",
22 | visible: true,
23 | layerOptions: {
24 | radius: 14,
25 | gradient: {
26 | 0.2: "#ffffb2",
27 | 0.4: "#fd8d3c",
28 | 0.6: "#fd8d3c",
29 | 0.8: "#f03b20",
30 | 1: "#bd0026"
31 | }
32 | }
33 | }
34 | }
35 | }
36 | });
37 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersEsriImageLayerController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersEsriImageLayerController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 43.415,
5 | lng: -124.228,
6 | zoom: 13
7 | },
8 | layers: {
9 | baselayers: {
10 | gray: {
11 | name: "Gray",
12 | type: "agsBase",
13 | layer: "Gray",
14 | visible: false
15 | }
16 | },
17 | overlays: {
18 | infrared: {
19 | name: "Infrared Imagery",
20 | type: "agsImage",
21 | url: "http://imagery.oregonexplorer.info/arcgis/rest/services/NAIP_2011/NAIP_2011_Dynamic/ImageServer",
22 | visible: true,
23 | layerOptions: {
24 | bandIds: "3,0,1"
25 | }
26 | }
27 | }
28 | },
29 | });
30 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersEsriTiledMapLayerController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersEsriTiledMapLayerController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 30.70,
5 | lng: -81.47,
6 | zoom: 9
7 | },
8 | layers: {
9 | baselayers: {
10 | historic: {
11 | name: "Historic Topographic Maps",
12 | type: "agsTiled",
13 | url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer",
14 | visible: false
15 | },
16 | navigation: {
17 | name: "World Navigation Charts",
18 | type: "agsTiled",
19 | url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/World_Navigation_Charts/MapServer",
20 | visible: false
21 | }
22 | }
23 | },
24 | });
25 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersHeatmapController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersHeatmapController", ["$scope", "$http", function($scope, $http) {
2 | var points = [];
3 | var heatmap = {
4 | name: 'Heat Map',
5 | type: 'heat',
6 | data: points,
7 | visible: true
8 | };
9 | $http.get("json/heat-points.json").success(function(data) {
10 | $scope.layers.overlays = {
11 | heat: {
12 | name: 'Heat Map',
13 | type: 'heat',
14 | data: data,
15 | layerOptions: {
16 | radius: 20,
17 | blur: 10
18 | },
19 | visible: true
20 | }
21 | };
22 | });
23 | angular.extend($scope, {
24 | center: {
25 | lat: 37.774546,
26 | lng: -122.433523,
27 | zoom: 12
28 | },
29 | layers: {
30 | baselayers: {
31 | mapbox_light: {
32 | name: 'Mapbox Light',
33 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
34 | type: 'xyz',
35 | layerOptions: {
36 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
37 | mapid: 'bufanuvols.lia22g09'
38 | }
39 | }
40 | }
41 | }
42 | });
43 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersHideBaselayerOnSelectorController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersHideBaselayerOnSelectorController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 39,
5 | lng: -100,
6 | zoom: 4
7 | },
8 | layers: {
9 | baselayers: {
10 | xyz: {
11 | name: 'OpenStreetMap (XYZ)',
12 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
13 | type: 'xyz',
14 | layerOptions: {
15 | showOnSelector: false
16 | }
17 | }
18 | },
19 | overlays: {
20 | wms: {
21 | name: 'EEUU States (WMS)',
22 | type: 'wms',
23 | visible: true,
24 | url: 'http://suite.opengeo.org/geoserver/usa/wms',
25 | layerParams: {
26 | layers: 'usa:states',
27 | format: 'image/png',
28 | transparent: true
29 | }
30 | }
31 | }
32 | }
33 | });
34 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersHideOverlaysOnSelectorController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersHideOverlaysOnSelectorController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 39,
5 | lng: -100,
6 | zoom: 4
7 | },
8 | defaults: {
9 | scrollWheelZoom: false
10 | },
11 | layers: {
12 | baselayers: {
13 | xyz: {
14 | name: 'Mapbox Streets',
15 | url: 'http://a.tiles.mapbox.com/v3/examples.map-i86nkdio/{z}/{x}/{y}.png',
16 | type: 'xyz',
17 | layerOptions: {
18 | showOnSelector: true,
19 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
20 | mapid: 'bufanuvols.ll5em372'
21 | }
22 | }
23 | },
24 | overlays: {
25 | wms: {
26 | name: 'EEUU States (WMS)',
27 | type: 'wms',
28 | visible: true,
29 | url: 'http://suite.opengeo.org/geoserver/usa/wms',
30 | layerParams: {
31 | showOnSelector: false,
32 | layers: 'usa:states',
33 | format: 'image/png',
34 | transparent: true
35 | }
36 | }
37 | }
38 | }
39 | });
40 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersImageOverlayController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersImageOverlayController", [ "$scope", "$log", "leafletData", "leafletBoundsHelpers", function($scope, $log, leafletData, leafletBoundsHelpers) {
2 | var maxBounds = leafletBoundsHelpers.createBoundsFromArray([[-540, -960], [540, 960]]);
3 | angular.extend($scope, {
4 | defaults: {
5 | scrollWheelZoom: false,
6 | crs: 'Simple',
7 | maxZoom: 2
8 | },
9 | center: {
10 | lat: 0,
11 | lng: 0,
12 | zoom: 0
13 | },
14 | maxBounds: maxBounds,
15 | layers: {
16 | baselayers: {
17 | sanfrancisco: {
18 | name: 'Andes',
19 | type: 'imageOverlay',
20 | url: 'images/andes.jpg',
21 | bounds: [[-540, -960], [540, 960]],
22 | layerParams: {
23 | showOnSelector: false,
24 | noWrap: true,
25 | attribution: 'Creative Commons image found here '
26 | }
27 | }
28 | },
29 | }
30 | });
31 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersLayergroupSimpleController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersLayergroupSimpleController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 39,
5 | lng: -100,
6 | zoom: 3
7 | },
8 | layers: {
9 | baselayers: {
10 | xyz: {
11 | name: 'OpenStreetMap (XYZ)',
12 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
13 | type: 'xyz'
14 | }
15 | },
16 | overlays: {}
17 | }
18 | });
19 | var tileLayer = {
20 | name: 'Countries',
21 | type: 'xyz',
22 | url: 'http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.png',
23 | visible: true,
24 | layerOptions: {
25 | attribution: 'Map data © 2013 Natural Earth | Data © 2013 ROG/RSF ',
26 | maxZoom: 5
27 | }
28 | };
29 | var utfGrid = {
30 | name: 'UtfGrid',
31 | type: 'utfGrid',
32 | url: 'http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.grid.json?callback={cb}',
33 | visible: true,
34 | pluginOptions: {
35 | maxZoom: 5,
36 | resolution: 4
37 | }
38 | };
39 | var group = {
40 | name: 'Group Layer',
41 | type: 'group',
42 | visible: true,
43 | layerOptions: {
44 | layers: [ tileLayer, utfGrid],
45 | maxZoom: 5
46 | }
47 | };
48 | $scope.layers['overlays']['Group Layer'] = group;
49 | $scope.$on('leafletDirectiveMap.utfgridMouseover', function(event, leafletEvent) {
50 | $scope.country = leafletEvent.data.name;
51 | });
52 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersOverlayGeoJSONController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersOverlayGeoJSONController", [ "$scope", '$http', function($scope, $http) {
2 | angular.extend($scope, {
3 | world: {
4 | lat: 0,
5 | lng: 0,
6 | zoom: 3
7 | },
8 | layers: {
9 | baselayers: {
10 | osm: {
11 | name: 'OpenStreetMap',
12 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
13 | type: 'xyz'
14 | },
15 | },
16 | overlays:{}
17 | }
18 | });
19 | $http.get("json/countries.geo.json").success(function(data, status) {
20 | angular.extend($scope.layers.overlays, {
21 | countries: {
22 | name:'World Country Boundaries',
23 | type: 'geoJSONShape',
24 | data: data,
25 | visible: true,
26 | layerOptions: {
27 | style: {
28 | color: '#00D',
29 | fillColor: 'red',
30 | weight: 2.0,
31 | opacity: 0.6,
32 | fillOpacity: 0.2
33 | }
34 | }
35 | }
36 | });
37 | });
38 | $http.get("json/major_cities.json").success(function(data, status) {
39 | angular.extend($scope.layers.overlays, {
40 | cities: {
41 | name:'Major Cities (Awesome Markers)',
42 | type: 'geoJSONAwesomeMarker',
43 | data: data,
44 | visible: true,
45 | icon: {
46 | icon: 'heart',
47 | markerColor: 'red',
48 | prefix: 'fa'
49 | }
50 | }
51 | });
52 | });
53 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersOverlaysHideOnZoomOutController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersOverlaysHideOnZoomOutController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 39,
5 | lng: -100,
6 | zoom: 4
7 | },
8 | layers: {
9 | baselayers: {
10 | xyz: {
11 | name: 'OpenStreetMap (XYZ)',
12 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
13 | type: 'xyz'
14 | }
15 | },
16 | overlays: {
17 | wms: {
18 | name: 'EEUU States (WMS)',
19 | type: 'wms',
20 | visible: true,
21 | url: 'http://suite.opengeo.org/geoserver/usa/wms',
22 | layerParams: {
23 | layers: 'usa:states',
24 | format: 'image/png',
25 | transparent: true
26 | }
27 | }
28 | }
29 | }
30 | });
31 | $scope.$watch('center.zoom', function(newValue){
32 | $scope.layers.overlays.wms.visible = newValue >= 4;
33 | });
34 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersOverlaysSimpleController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersOverlaysSimpleController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 39,
5 | lng: -100,
6 | zoom: 4
7 | },
8 | layers: {
9 | baselayers: {
10 | xyz: {
11 | name: 'OpenStreetMap (XYZ)',
12 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
13 | type: 'xyz'
14 | }
15 | },
16 | overlays: {
17 | wms: {
18 | name: 'EEUU States (WMS)',
19 | type: 'wms',
20 | visible: true,
21 | url: 'http://suite.opengeo.org/geoserver/usa/wms',
22 | layerParams: {
23 | layers: 'usa:states',
24 | format: 'image/png',
25 | transparent: true
26 | }
27 | }
28 | }
29 | }
30 | });
31 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersRefreshOverlayEveryMinuteController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersRefreshOverlayEveryMinuteController", [ "$scope", "$interval", function($scope, $interval) {
2 | angular.extend($scope, {
3 | amberes: {
4 | lat: 51.2,
5 | lng: 4.4,
6 | zoom: 8
7 | },
8 | layers: {
9 | baselayers: {
10 | mapbox_light: {
11 | name: 'Mapbox Light',
12 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
13 | type: 'xyz',
14 | layerOptions: {
15 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
16 | mapid: 'bufanuvols.lia3no0m'
17 | }
18 | }
19 | },
20 | overlays: {
21 | traffic: {
22 | name: "Traffic Jams",
23 | type: "xyz",
24 | url: "http://map.be-mobile.be/customer/mobileninja/nl/los/{z}/{x}/{y}.png",
25 | visible: 1,
26 | doRefresh: false
27 | }
28 | }
29 | }
30 | });
31 | var refreshIntervalInSeconds = 60;
32 | var actualSeconds = 0;
33 | $interval(function() {
34 | if (actualSeconds === refreshIntervalInSeconds) {
35 | $scope.layers.overlays.traffic.doRefresh = true;
36 | console.log("Overlay refreshed.")
37 | actualSeconds = 0;
38 | } else {
39 | console.log("Next update of overlay in " + (refreshIntervalInSeconds - actualSeconds) + " seconds.");
40 | actualSeconds += 1;
41 | }
42 | }, 1000);
43 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersSimpleController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersSimpleController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 25.0391667,
5 | lng: 121.525,
6 | zoom: 6
7 | },
8 | markers: {
9 | taipei: {
10 | lat: 25.0391667,
11 | lng: 121.525,
12 | }
13 | },
14 | layers: {
15 | baselayers: {
16 | mapbox_light: {
17 | name: 'Mapbox Light',
18 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
19 | type: 'xyz',
20 | layerOptions: {
21 | apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
22 | mapid: 'bufanuvols.lia22g09'
23 | }
24 | },
25 | osm: {
26 | name: 'OpenStreetMap',
27 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
28 | type: 'xyz'
29 | }
30 | }
31 | }
32 | });
33 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersUTFGridController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersUTFGridController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: 0,
5 | lng: 0,
6 | zoom: 1
7 | },
8 | layers: {
9 | baselayers: {
10 | xyz: {
11 | name: 'OpenStreetMap',
12 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
13 | type: 'xyz'
14 | }
15 | },
16 | overlays: {
17 | demosutfgrid: {
18 | name: 'UTFGrid Interactivity',
19 | type: 'utfGrid',
20 | url: 'http://{s}.tiles.mapbox.com/v3/mapbox.geography-class/{z}/{x}/{y}.grid.json?callback={cb}',
21 | visible: true
22 | }
23 | }
24 | }
25 | });
26 | $scope.interactivity = "";
27 | $scope.flag = "";
28 | $scope.$on('leafletDirectiveMap.utfgridMouseover', function(event, leafletEvent) {
29 | // the UTFGrid information is on leafletEvent.data
30 | $scope.interactivity = leafletEvent.data.admin;
31 | $scope.flag = "data:image/png;base64," + leafletEvent.data.flag_png;
32 | });
33 | $scope.$on('leafletDirectiveMap.utfgridMouseout', function(event, leafletEvent) {
34 | $scope.interactivity = "";
35 | $scope.flag = "";
36 | });
37 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersWMSWithDifferentProjectionController.js:
--------------------------------------------------------------------------------
1 | // For more info take a look at https://github.com/kartena/Proj4Leaflet proj4leaflet.js
2 | app.controller('LayersWMSWithDifferentProjectionController', [ '$scope', '$location', function($scope) {
3 | $scope.map = {
4 | defaults: {
5 | crs: new L.Proj.CRS('EPSG:3006', '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
6 | {
7 | resolutions: [
8 | 8192, 4096, 2048, 1024, 512, 256, 128,
9 | 64, 32, 16, 8, 4, 2, 1, 0.5
10 | ],
11 | origin: [0, 0]
12 | }),
13 | continuousWorld: true
14 | },
15 | malmo: {
16 | lat: 55.5902,
17 | lng: 12.9956,
18 | zoom: 3
19 | },
20 | layers: {
21 | baselayers: {
22 | malmo: {
23 | name: 'Fishery',
24 | type: 'wms',
25 | url: 'http://geodatatest.havochvatten.se/geoservices/ows',
26 | visible: true,
27 | layerOptions: {
28 | layers: 'hav-fisketsgeografier:havet-ostersjons-delomraden',
29 | format: 'image/png',
30 | maxZoom: 14,
31 | minZoom: 0,
32 | continuousWorld: true,
33 | attribution: '© Havs- och vattenmyndigheten (Swedish Agency for Marine and Water Management) '
34 | }
35 | }
36 | }
37 | }
38 | };
39 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersWebGLHeatmapController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersWebGLHeatmapController", [ "$scope", function($scope) {
2 | var dataPoints = [
3 | [44.651144316,-63.586260171, 0.5],
4 | [44.75, -63.5, 0.8] ];
5 | angular.extend($scope, {
6 | center: {
7 | lat: 44.8091,
8 | lng: -63.3636,
9 | zoom: 9
10 | },
11 | layers: {
12 | baselayers: {
13 | osm: {
14 | name: 'OpenStreetMap',
15 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
16 | type: 'xyz'
17 | }
18 | },
19 | overlays: {
20 | heatmap: {
21 | name: 'Heat Map',
22 | type: 'webGLHeatmap',
23 | data: dataPoints,
24 | visible: true
25 | }
26 | }
27 | }
28 | });
29 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/LayersYandexController.js:
--------------------------------------------------------------------------------
1 | app.controller("LayersYandexController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | berlin: {
4 | lat: 52.52,
5 | lng: 13.40,
6 | zoom: 14
7 | },
8 | markers: {
9 | m1: {
10 | lat: 52.52,
11 | lng: 13.40
12 | }
13 | },
14 | layers: {
15 | baselayers: {
16 | yandex: {
17 | name: 'Yandex',
18 | type: 'yandex',
19 | layerOptions: {
20 | layerType: 'map',
21 | }
22 | },
23 | yandexTraffic: {
24 | name: 'Yandex Traffic',
25 | type: 'yandex',
26 | layerOptions: {
27 | layerType: 'map',
28 | traffic: true,
29 | }
30 | }
31 | }
32 | }
33 | });
34 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersAddRemoveController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersAddRemoveController', [ '$scope', function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 8
7 | },
8 | markers: {}
9 | });
10 | $scope.addMarkers = function() {
11 | angular.extend($scope, {
12 | markers: {
13 | m1: {
14 | lat: 51.505,
15 | lng: -0.09,
16 | message: "I'm a static marker",
17 | },
18 | m2: {
19 | lat: 51,
20 | lng: 0,
21 | focus: true,
22 | message: "Hey, drag me if you want",
23 | draggable: true
24 | }
25 | }
26 | });
27 | };
28 | $scope.removeMarkers = function() {
29 | $scope.markers = {};
30 | }
31 | $scope.addMarkers();
32 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersAngularTemplateController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersAngularTemplateController', [ '$scope', function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 8
7 | },
8 | data: {markers: {}}
9 | });
10 | $scope.addMarkers = function() {
11 | $scope.data.markers = {};
12 | angular.extend($scope.data, { angularInterpolatedMessage : "Angular interpolated message!"});
13 | angular.extend($scope.data, {
14 | markers: {
15 | m1: {
16 | lat: 51.505,
17 | lng: -0.09,
18 | compileMessage: false,
19 | message: "I'm a static marker",
20 | },
21 | m2: {
22 | lat: 51,
23 | lng: 0,
24 | focus: true,
25 | message: "
",
26 | draggable: true,
27 | },
28 | m3: {
29 | lat: 51,
30 | lng: -1,
31 | getMessageScope: function () { return $scope; },
32 | message: "{{data.angularInterpolatedMessage}}
",
33 | compileMessage: true
34 | }
35 | }
36 | });
37 | };
38 | $scope.removeMarkers = function() {
39 | $scope.data.markers = {};
40 | }
41 | $scope.addMarkers();
42 | } ]);
43 | app.controller('ViewController', ['$scope', function($scope) {
44 | $scope.user = {}
45 | $scope.greet = function(user) {
46 | alert('hello ' + user.name)
47 | }
48 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersChangeOpacityController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersChangeOpacityController', [ '$scope', function($scope) {
2 | angular.extend($scope, {
3 | chicago: {
4 | lat: 41.85,
5 | lng: -87.65,
6 | zoom: 8
7 | },
8 | markers: {
9 | m1: {
10 | lat: 41.85,
11 | lng: -87.65,
12 | message: "I'm a static marker with defaultIcon",
13 | focus: false,
14 | opacity: 1
15 | },
16 | }
17 | });
18 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersClustering10000MarkersController.js:
--------------------------------------------------------------------------------
1 | app.controller("MarkersClustering10000MarkersController", [ "$scope", "$http", function($scope, $http) {
2 | var addressPointsToMarkers = function(points) {
3 | return points.map(function(ap) {
4 | return {
5 | layer: 'realworld',
6 | lat: ap[0],
7 | lng: ap[1]
8 | };
9 | });
10 | };
11 | angular.extend($scope, {
12 | center: {
13 | lat: -37.9212959167,
14 | lng: 175.5604435167,
15 | zoom: 11
16 | },
17 | events: {
18 | map: {
19 | enable: ['moveend', 'popupopen'],
20 | logic: 'emit'
21 | },
22 | marker: {
23 | enable: [],
24 | logic: 'emit'
25 | }
26 | },
27 | layers: {
28 | baselayers: {
29 | osm: {
30 | name: 'OpenStreetMap',
31 | type: 'xyz',
32 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
33 | }
34 | },
35 | overlays: {
36 | realworld: {
37 | name: "Real world data",
38 | type: "markercluster",
39 | visible: true
40 | }
41 | }
42 | }
43 | });
44 | $http.get("json/realworld.10000.json").success(function(data) {
45 | $scope.markers = addressPointsToMarkers(data);
46 | });
47 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersClusteringWithoutOverlaysController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersClusteringWithoutOverlaysController', [ '$scope', function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 8
7 | },
8 | markers: {
9 | stoke: {
10 | group: 'london',
11 | lat: 51.5615,
12 | lng: -0.0731,
13 | label: {
14 | message: "Stoke",
15 | options: {
16 | noHide: true
17 | }
18 | }
19 | },
20 | dalston: {
21 | group: 'london',
22 | lat: 51.545,
23 | lng: -0.070,
24 | label: {
25 | message: "Dalston",
26 | options: {
27 | noHide: true
28 | }
29 | }
30 | },
31 | wandsworth: {
32 | group: 'london',
33 | lat: 51.4644,
34 | lng:-0.1924,
35 | label: {
36 | message: "Wandsworth",
37 | options: {
38 | noHide: true
39 | }
40 | }
41 | },
42 | battersea: {
43 | group: 'london',
44 | lat: 51.4638,
45 | lng: -0.1677,
46 | label: {
47 | message: "Battersea",
48 | options: {
49 | noHide: true
50 | }
51 | }
52 | }
53 | },
54 | });
55 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersDelayedEventsController.js:
--------------------------------------------------------------------------------
1 | app.controller("MarkersDelayedEventsController", ["$scope", "leafletEvents", function($scope, leafletEvents){
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 8
7 | },
8 | markers: {}
9 | });
10 | $scope.addMarkers = function() {
11 | angular.extend($scope, {
12 | markers: {
13 | m1: {
14 | lat: 51.505,
15 | lng: -0.09,
16 | message: "I'm a static marker",
17 | },
18 | m2: {
19 | lat: 51,
20 | lng: 0,
21 | focus: true,
22 | message: "Hey, drag me if you want",
23 | draggable: true
24 | }
25 | }
26 | });
27 | };
28 | $scope.events = {
29 | markers: {
30 | enable: leafletEvents.getAvailableMarkerEvents(),
31 | }
32 | };
33 | $scope.eventDetected = "No events yet...";
34 | var markerEvents = leafletEvents.getAvailableMarkerEvents();
35 | for (var k in markerEvents){
36 | var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
37 | $scope.$on(eventName, function(event, args){
38 | $scope.eventDetected = event.name;
39 | });
40 | }
41 | $scope.removeMarkers = function() {
42 | $scope.markers = {};
43 | }
44 | //$scope.addMarkers();
45 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersEventsAddController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersEventsAddController', [ '$scope', function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 8
7 | },
8 | events: {}
9 | });
10 | $scope.markers = new Array();
11 | $scope.$on("leafletDirectiveMap.click", function(event, args){
12 | var leafEvent = args.leafletEvent;
13 | $scope.markers.push({
14 | lat: leafEvent.latlng.lat,
15 | lng: leafEvent.latlng.lng,
16 | message: "My Added Marker"
17 | });
18 | });
19 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersEventsController.js:
--------------------------------------------------------------------------------
1 | app.controller("MarkersEventsController", [ "$scope", "leafletMarkerEvents", "$log", function($scope, leafletMarkerEvents, $log) {
2 | $scope.center = {
3 | lat: 51.505,
4 | lng: -0.09,
5 | zoom: 8
6 | };
7 | $scope.markers = {
8 | london: {
9 | lat: 51.505,
10 | lng: -0.09,
11 | draggable: true,
12 | message: "I'm a draggable marker",
13 | focus: true
14 | }
15 | }
16 | $scope.events = {
17 | markers: {
18 | enable: leafletMarkerEvents.getAvailableEvents(),
19 | }
20 | };
21 | $scope.eventDetected = "No events yet...";
22 | var markerEvents = leafletMarkerEvents.getAvailableEvents();
23 | for (var k in markerEvents){
24 | var eventName = 'leafletDirectiveMarker.myMap.' + markerEvents[k];
25 | $scope.$on(eventName, function(event, args){
26 | $scope.eventDetected = event.name;
27 | });
28 | }
29 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersEventsWithIDController.js:
--------------------------------------------------------------------------------
1 | app.controller("MarkersEventsWithIDController", [ "$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents) {
2 | $scope.center = {
3 | lat: 51.505,
4 | lng: -0.09,
5 | zoom: 8
6 | };
7 | $scope.markers = {
8 | london: {
9 | lat: 51.505,
10 | lng: -0.09,
11 | draggable: true,
12 | message: "I'm a draggable marker",
13 | focus: true
14 | }
15 | }
16 | $scope.events = {
17 | markers: {
18 | enable: leafletMarkerEvents.getAvailableEvents(),
19 | }
20 | };
21 | $scope.eventDetected = "No events yet...";
22 | var markerEvents = leafletMarkerEvents.getAvailableEvents();
23 | for (var k in markerEvents){
24 | var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
25 | $scope.$on(eventName, function(event, args){
26 | $scope.eventDetected = event.name;
27 | });
28 | }
29 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersLabelController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersLabelController', [ '$scope', function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 8
7 | },
8 | markers: {
9 | main_marker: {
10 | lat: 51.5,
11 | lng: 0,
12 | focus: true,
13 | //message: "Hey, drag me if you want",
14 | title: "Marker",
15 | draggable: true,
16 | label: {
17 | message: "Hey, drag me if you want",
18 | options: {
19 | noHide: true
20 | }
21 | }
22 | }
23 | }
24 | });
25 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersPopupController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersPopupController', [ '$scope', function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 8
7 | },
8 | markers: {
9 | m1: {
10 | lat: 51.505,
11 | lng: -0.09,
12 | focus: true,
13 | draggable: false,
14 | message: "Hi there!",
15 | icon: {}
16 | }
17 | },
18 | events: {
19 | markers: {
20 | enable: [ 'dragend' ]
21 | //logic: 'emit'
22 | }
23 | }
24 | });
25 | $scope.$on("leafletDirectiveMarker.dragend", function(event, args){
26 | console.log('hola');
27 | $scope.markers.m1.lat = args.model.lat;
28 | $scope.markers.m1.lng = args.model.lng;
29 | });
30 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersRotationController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersRotationController', [ '$scope', function($scope) {
2 | var markers = {
3 | m1: {
4 | lat: 41.95,
5 | lng: -87.65,
6 | message: "I'm a static marker at 0 degrees",
7 | focus: false,
8 | iconAngle: 0
9 | },
10 | m2: {
11 | lat: 41.85,
12 | lng: -87.95,
13 | message: "I'm a static marker at 270 degrees",
14 | focus: false,
15 | iconAngle: 270
16 | },
17 | m3: {
18 | lat: 41.85,
19 | lng: -87.05,
20 | message: "I'm a static marker at 90 degrees",
21 | focus: false,
22 | iconAngle: 90
23 | },
24 | m4: {
25 | lat: 41.35,
26 | lng: -87.65,
27 | message: "I'm a static marker at 180 degrees",
28 | focus: false,
29 | iconAngle: 180
30 | }
31 | };
32 | angular.extend($scope, {
33 | chicago: {
34 | lat: 41.85,
35 | lng: -87.65,
36 | zoom: 8
37 | },
38 | markers: markers
39 | });
40 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MarkersSimpleController.js:
--------------------------------------------------------------------------------
1 | app.controller('MarkersSimpleController', [ '$scope', function($scope) {
2 | var mainMarker = {
3 | lat: 51,
4 | lng: 0,
5 | focus: true,
6 | message: "Hey, drag me if you want",
7 | draggable: true
8 | };
9 | angular.extend($scope, {
10 | london: {
11 | lat: 51.505,
12 | lng: -0.09,
13 | zoom: 8
14 | },
15 | markers: {
16 | mainMarker: angular.copy(mainMarker)
17 | },
18 | position: {
19 | lat: 51,
20 | lng: 0
21 | },
22 | events: { // or just {} //all events
23 | markers:{
24 | enable: [ 'dragend' ]
25 | //logic: 'emit'
26 | }
27 | }
28 | });
29 | $scope.$on("leafletDirectiveMarker.dragend", function(event, args){
30 | $scope.position.lat = args.model.lat;
31 | $scope.position.lng = args.model.lng;
32 | });
33 | } ]);
--------------------------------------------------------------------------------
/examples/js/controllers/MixedMapboxTilesGeojsonController.js:
--------------------------------------------------------------------------------
1 | app.controller("MixedMapboxTilesGeojsonController", [ "$scope", "$http", function($scope, $http) {
2 | angular.extend($scope, {
3 | center: {
4 | lat: -33.8979173,
5 | lng: 151.2323598,
6 | zoom: 14
7 | },
8 | tiles: {
9 | name: 'Mapbox Park',
10 | url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
11 | type: 'xyz',
12 | options: {
13 | apikey: 'pk.eyJ1IjoiZmVlbGNyZWF0aXZlIiwiYSI6Ik1Gak9FXzAifQ.9eB142zVCM4JMg7btDDaZQ',
14 | mapid: 'feelcreative.llm8dpdk'
15 | }
16 | },
17 | geojson: {}
18 | });
19 | $http.get("https://a.tiles.mapbox.com/v4/feelcreative.llm8dpdk/features.json?access_token=pk.eyJ1IjoiZmVlbGNyZWF0aXZlIiwiYSI6Ik1Gak9FXzAifQ.9eB142zVCM4JMg7btDDaZQ").success(function(data) {
20 | $scope.geojson.data = data;
21 | console.log(data);
22 | });
23 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/MixedMarkersNestedEventsController.js:
--------------------------------------------------------------------------------
1 | app.controller("MixedMarkersNestedEventsController", ["$scope", "leafletEvents", function ($scope, leafletEvents) {
2 | $scope.map = {
3 | show: true
4 | };
5 | $scope.layers = {
6 | baselayers: {
7 | osm: {
8 | name: 'OpenStreetMap',
9 | type: 'xyz',
10 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
11 | layerOptions: {
12 | subdomains: ['a', 'b', 'c'],
13 | attribution: '© OpenStreetMap contributors',
14 | continuousWorld: true
15 | }
16 | }
17 | },
18 | overlays: {
19 | london: {
20 | name: 'London',
21 | type: 'group',
22 | visible: true
23 | }
24 | }
25 | };
26 | $scope.center = {
27 | lat: 51.505,
28 | lng: -0.09,
29 | zoom: 8
30 | };
31 | $scope.markers = {
32 | london: {
33 | 1: {
34 | lat: 51.505,
35 | lng: -0.09,
36 | draggable: true,
37 | focus: true
38 | }
39 | }
40 | };
41 | $scope.events = {
42 | markers: {
43 | enable: leafletEvents.getAvailableMarkerEvents()
44 | }
45 | };
46 | $scope.eventDetected = "No events yet...";
47 | var markerEvents = leafletEvents.getAvailableMarkerEvents();
48 | for (var k in markerEvents) {
49 | var eventName = 'leafletDirectiveMarker.' + markerEvents[k];
50 | $scope.$on(eventName, function (event, args) {
51 | $scope.eventDetected = event.name;
52 | $scope.args = {
53 | layerName: args.layerName,
54 | model: args.model,
55 | modelName: args.modelName
56 | };
57 | });
58 | }
59 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/PathEventsController.js:
--------------------------------------------------------------------------------
1 | app.controller("PathEventsController", function($scope, $log) {
2 | var paths = {};
3 | $scope.clicked = 0;
4 | var marylandIslands = {
5 | 'Fort Carroll': {
6 | lat: 39.214766,
7 | lng: -76.519003
8 | },
9 | 'Gibson Island': {
10 | lat: 39.077642,
11 | lng: -76.433344
12 | },
13 | 'Solomons Island': {
14 | lat: 38.320145,
15 | lng: -76.457334
16 | }
17 | };
18 | angular.forEach(marylandIslands, function (v, k) {
19 | paths[k] = {
20 | type: "circleMarker",
21 | latlngs: v,
22 | stroke: false,
23 | fillColor: "#00FFFF",
24 | fillOpacity: 0.7,
25 | radius: 10,
26 | clickable: true
27 | };
28 | });
29 | angular.extend($scope, {
30 | center: {
31 | lat:38.976492,
32 | lng:-76.49231,
33 | zoom: 8
34 | },
35 | layers: {
36 | baselayers: {
37 | xyz: {
38 | name: 'OpenStreetMap (XYZ)',
39 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
40 | type: 'xyz'
41 | }
42 | }
43 | },
44 | events: {
45 | path: {
46 | enable: [ 'click', 'mouseover' ]
47 | }
48 | },
49 | paths: paths
50 | });
51 | $scope.$on('leafletDirectivePath.myMap.click', function (event) {
52 | $scope.clicked++;
53 | });
54 | $scope.$on('leafletDirectivePath.myMap.mouseover', function (event, path) {
55 | $scope.mouseover = path.modelName;
56 | });
57 | });
--------------------------------------------------------------------------------
/examples/js/controllers/PathEventsWithIDController.js:
--------------------------------------------------------------------------------
1 | app.controller("PathEventsWithIDController", function($scope, $log) {
2 | var paths = {};
3 | $scope.clicked = 0;
4 | var marylandIslands = {
5 | 'Fort Carroll': {
6 | lat: 39.214766,
7 | lng: -76.519003
8 | },
9 | 'Gibson Island': {
10 | lat: 39.077642,
11 | lng: -76.433344
12 | },
13 | 'Solomons Island': {
14 | lat: 38.320145,
15 | lng: -76.457334
16 | }
17 | };
18 | angular.forEach(marylandIslands, function (v, k) {
19 | paths[k] = {
20 | type: "circleMarker",
21 | latlngs: v,
22 | stroke: false,
23 | fillColor: "#00FFFF",
24 | fillOpacity: 0.7,
25 | radius: 10,
26 | clickable: true
27 | };
28 | });
29 | angular.extend($scope, {
30 | center: {
31 | lat:38.976492,
32 | lng:-76.49231,
33 | zoom: 8
34 | },
35 | layers: {
36 | baselayers: {
37 | xyz: {
38 | name: 'OpenStreetMap (XYZ)',
39 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
40 | type: 'xyz'
41 | }
42 | }
43 | },
44 | events: {
45 | path: {
46 | enable: [ 'click', 'mouseover' ]
47 | }
48 | },
49 | paths: paths
50 | });
51 | $scope.$on('leafletDirectivePath.click', function (event) {
52 | $scope.clicked++;
53 | });
54 | $scope.$on('leafletDirectivePath.mouseover', function (event, path) {
55 | $scope.mouseover = path.modelName;
56 | });
57 | });
--------------------------------------------------------------------------------
/examples/js/controllers/PathSimpleController.js:
--------------------------------------------------------------------------------
1 | app.controller("PathSimpleController", [ "$scope", function($scope) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 4
7 | },
8 | europeanPaths: {
9 | p1: {
10 | color: 'red',
11 | weight: 8,
12 | latlngs: [
13 | { lat: 51.50, lng: -0.082 },
14 | { lat: 48.83, lng: 2.37 },
15 | { lat: 41.91, lng: 12.48 }
16 | ],
17 | message: "Route from London to Rome Distance: 1862km
",
18 | },
19 | p2: {
20 | color: 'green',
21 | weight: 8,
22 | latlngs: [
23 | { lat: 48.2083537, lng: 16.3725042 },
24 | { lat: 48.8534, lng: 2.3485 }
25 | ],
26 | label: {message: "Route from Vienna to Paris Distance: 1211km
"}
27 | }
28 | }
29 | });
30 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/PathsAjaxLoadController.js:
--------------------------------------------------------------------------------
1 | app.controller("PathsAjaxLoadController", [ "$scope", "$http", function($scope, $http) {
2 | angular.extend($scope, {
3 | london: {
4 | lat: 51.505,
5 | lng: -0.09,
6 | zoom: 4
7 | },
8 | europeanPaths: {}
9 | });
10 | $scope.loadPaths = function loadPaths() {
11 | $http.get('json/paths.json').success(function(data) {
12 | $scope.europeanPaths = data;
13 | });
14 | };
15 | $scope.changePaths = function changePaths() {
16 | console.log($scope.europeanPaths);
17 | $scope.europeanPaths.p1.latlngs[0] = {
18 | lat: 53,
19 | lng: -0.1
20 | };
21 | };
22 | }]);
--------------------------------------------------------------------------------
/examples/js/controllers/PathsChangeInGroupLayerController.js:
--------------------------------------------------------------------------------
1 | app.controller('PathsChangeInGroupLayerController', function($scope, leafletData) {
2 | $scope.changePaths = function() {
3 | $scope.paths = {
4 | p2: {
5 | color: '#FC0',
6 | weight: 8,
7 | latlngs: [ { lat: 52.50, lng: -0.082 }, { lat: 42.91, lng: 12.48 } ],
8 | layer: 'test'
9 | }
10 | };
11 | };
12 | angular.extend($scope, {
13 | center: {
14 | lat: 51.505,
15 | lng: -0.09,
16 | zoom: 4
17 | },
18 | paths : {
19 | p1: {
20 | color: '#000',
21 | weight: 8,
22 | latlngs: [{ lat: 51.50, lng: -0.082 }, { lat: 41.91, lng: 12.48 }],
23 | layer: 'test'
24 | }
25 | },
26 | layers: {
27 | baselayers: {
28 | osm: {
29 | name: 'OpenStreetMap',
30 | type: 'xyz',
31 | url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
32 | layerOptions: {
33 | subdomains: '1234',
34 | attribution: 'test'
35 | }
36 | }
37 | },
38 | overlays: {
39 | test: {
40 | name: 'Test',
41 | visible: true,
42 | type: 'group'
43 | }
44 | }
45 | }
46 | });
47 | });
--------------------------------------------------------------------------------
/examples/json/JPN.geo.json:
--------------------------------------------------------------------------------
1 | {"type":"FeatureCollection","features":[
2 | {"type":"Feature","id":"JPN","properties":{"name":"Japan"},"geometry":{"type":"MultiPolygon","coordinates":[[[[134.638428,34.149234],[134.766379,33.806335],[134.203416,33.201178],[133.79295,33.521985],[133.280268,33.28957],[133.014858,32.704567],[132.363115,32.989382],[132.371176,33.463642],[132.924373,34.060299],[133.492968,33.944621],[133.904106,34.364931],[134.638428,34.149234]]],[[[140.976388,37.142074],[140.59977,36.343983],[140.774074,35.842877],[140.253279,35.138114],[138.975528,34.6676],[137.217599,34.606286],[135.792983,33.464805],[135.120983,33.849071],[135.079435,34.596545],[133.340316,34.375938],[132.156771,33.904933],[130.986145,33.885761],[132.000036,33.149992],[131.33279,31.450355],[130.686318,31.029579],[130.20242,31.418238],[130.447676,32.319475],[129.814692,32.61031],[129.408463,33.296056],[130.353935,33.604151],[130.878451,34.232743],[131.884229,34.749714],[132.617673,35.433393],[134.608301,35.731618],[135.677538,35.527134],[136.723831,37.304984],[137.390612,36.827391],[138.857602,37.827485],[139.426405,38.215962],[140.05479,39.438807],[139.883379,40.563312],[140.305783,41.195005],[141.368973,41.37856],[141.914263,39.991616],[141.884601,39.180865],[140.959489,38.174001],[140.976388,37.142074]]],[[[143.910162,44.1741],[144.613427,43.960883],[145.320825,44.384733],[145.543137,43.262088],[144.059662,42.988358],[143.18385,41.995215],[141.611491,42.678791],[141.067286,41.584594],[139.955106,41.569556],[139.817544,42.563759],[140.312087,43.333273],[141.380549,43.388825],[141.671952,44.772125],[141.967645,45.551483],[143.14287,44.510358],[143.910162,44.1741]]]]}}
3 | ]}
4 |
--------------------------------------------------------------------------------
/examples/json/README:
--------------------------------------------------------------------------------
1 | countries.geo.json: https://raw.github.com/johan/world.geo.json/master/countries.geo.json
2 | all.json: https://raw.github.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.json
3 | major_cities: https://github.com/mahemoff/geodata
4 |
--------------------------------------------------------------------------------
/examples/json/paths.json:
--------------------------------------------------------------------------------
1 | {
2 | "p1": {
3 | "color": "red",
4 | "weight": 8,
5 | "latlngs": [
6 | { "lat": 51.50, "lng": -0.082 },
7 | { "lat": 48.83, "lng": 2.37 },
8 | { "lat": 41.91, "lng": 12.48 }
9 | ],
10 | "message": "Route from London to Rome Distance: 1862km
"
11 | },
12 | "p2": {
13 | "color": "green",
14 | "weight": 8,
15 | "latlngs": [
16 | { "lat": 48.2083537, "lng": 16.3725042 },
17 | { "lat": 48.8534, "lng": 2.3485 }
18 | ],
19 | "label": { "message": "Route from Vienna to Paris Distance: 1211km
"}
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/examples/partials/example.html:
--------------------------------------------------------------------------------
1 |
2 | This example only can be seen as stand-alone
3 | View this example as a stand-alone page
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/partials/source.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
--------------------------------------------------------------------------------
/grunt/aliases.yaml:
--------------------------------------------------------------------------------
1 | test:
2 | - 'jshint'
3 | - 'test-unit'
4 | - 'test-e2e'
5 |
6 | test-unit:
7 | - 'karma:unit'
8 |
9 | test-e2e:
10 | - 'shell:protractor_update'
11 | - 'connect:testserver'
12 | - 'protractor:run'
13 |
14 | test-e2e-firefox:
15 | - 'shell:protractor_update'
16 | - 'connect:testserver'
17 | - 'protractor:firefox'
18 |
19 | coverage:
20 | - 'karma:unit_coverage'
21 |
22 | install:
23 | - 'shell:npm_install'
24 | - 'bower:install'
25 | - 'shell:protractor_update'
26 |
27 | default:
28 | - 'build'
29 |
30 | fast-build:
31 | - 'clean:dist'
32 | - 'jshint'
33 | - 'jscs'
34 | - 'concat:dist'
35 | - 'ngAnnotate'
36 | - 'uglify'
37 | - 'concat:license'
38 | - 'concat:license-minified'
39 |
40 | build:
41 | - 'fast-build'
42 | - 'test-unit'
43 | - 'clean:pre'
44 |
45 | travis:
46 | - 'fast-build'
47 | - 'bower:install'
48 | - 'test-unit'
49 |
50 | examples:
51 | - 'shell:examples'
52 | - 'concat:examples'
53 |
--------------------------------------------------------------------------------
/grunt/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "install": {
3 | }
4 | }
5 |
--------------------------------------------------------------------------------
/grunt/clean.json:
--------------------------------------------------------------------------------
1 | {
2 | "dist": ["dist"],
3 | "pre": ["dist/*.pre.js"]
4 | }
5 |
--------------------------------------------------------------------------------
/grunt/concat.json:
--------------------------------------------------------------------------------
1 | {
2 | "dist": {
3 | "options": {
4 | "banner": "/*!\n* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today(\"yyyy-mm-dd\") %>\n* <%= pkg.description %>\n* <%= pkg.repository.type %>: <%= pkg.repository.url %>\n*/\n(function(angular){\n'use strict';\n",
5 | "footer": "\n}(angular));"
6 | },
7 | "src": [
8 | "src/directives/leaflet.js",
9 | "src/services/*.js",
10 | "src/**/*.js"
11 | ],
12 | "dest": "dist/angular-leaflet-directive.pre.js"
13 | },
14 | "license": {
15 | "src": [
16 | "src/header-MIT-license.txt",
17 | "dist/angular-leaflet-directive.no-header.js"
18 | ],
19 | "dest": "dist/angular-leaflet-directive.js"
20 | },
21 | "license-minified": {
22 | "src": [
23 | "src/header-MIT-license.txt",
24 | "dist/angular-leaflet-directive.min.no-header.js"
25 | ],
26 | "dest": "dist/angular-leaflet-directive.min.js"
27 | },
28 | "examples": {
29 | "options": {
30 | "banner": "(function(angular){ \nvar app = angular.module('webapp');\n",
31 | "footer": "}(angular));"
32 | },
33 | "src": ["examples/js/controllers/*.js"],
34 | "dest": "examples/js/controllers.js"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/grunt/connect.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 | "base": ""
4 | },
5 | "testserver": {
6 | "options": {
7 | "port": 9999
8 | }
9 | },
10 | "coverage": {
11 | "options": {
12 | "base": "coverage/",
13 | "directory": "coverage/",
14 | "port": 5555,
15 | "keepalive": true
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/grunt/conventionalChangelog.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 | "changelogOpts": {
4 | "preset": "angular"
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/grunt/jscs.json:
--------------------------------------------------------------------------------
1 | {
2 | "src": ["src/directives/*.js", "src/services/**/*.js", "test/**/*.js"],
3 | "options": {
4 | "config": ".jscsrc",
5 | "fix": true
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/grunt/jshint.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 | "jshintrc": true
4 | },
5 | "source": {
6 | "src": ["src/directives/*.js", "src/services/**/*.js"]
7 | },
8 | "tests": {
9 | "src": ["test/unit/*.js", "test/e2e/*.js"]
10 | },
11 | "grunt": {
12 | "src": ["Gruntfile.js"]
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/grunt/karma.json:
--------------------------------------------------------------------------------
1 | {
2 | "unit": {
3 | "configFile": "test/karma-unit.conf.js",
4 | "autoWatch": false,
5 | "singleRun": true
6 | },
7 | "unit_coverage": {
8 | "configFile": "test/karma-unit.conf.js",
9 | "autoWatch": false,
10 | "singleRun": true,
11 | "reporters": ["progress", "coverage"],
12 | "preprocessors": {
13 | "dist/angular-leaflet-directive.js": ["coverage"]
14 | },
15 | "coverageReporter": {
16 | "reporters": [
17 | { "type": "lcov", "dir": "coverage/", "subdir": "report" },
18 | { "type": "text-summary", "dir": "coverage/", "subdir": "report" }
19 | ]
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/grunt/ngAnnotate.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {},
3 | "dist": {
4 | "files": {
5 | "dist/angular-leaflet-directive.no-header.js": [ "dist/angular-leaflet-directive.pre.js" ]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/grunt/open.json:
--------------------------------------------------------------------------------
1 | {
2 | "devserver": {
3 | "path": "http://localhost:8888"
4 | },
5 | "coverage": {
6 | "path": "http://localhost:5555"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/grunt/protractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 | "keepAlive": false,
4 | "configFile": "test/protractor.conf.js",
5 | "nocolor": false,
6 | "args": {
7 | "specs": [ "test/e2e/*.js" ]
8 | }
9 | },
10 | "run": {},
11 | "saucelabs": {
12 | "options": {
13 | "args": {
14 | "baseUrl": "http://tombatossals.github.io/angular-leaflet-directive/examples/",
15 | "sauceUser": "<%= saucelabs.SAUCE_USERNAME %>",
16 | "sauceKey": "<% saucelabs.SAUCE_ACCESS_KEY %>"
17 | }
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/grunt/shell.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 | "stdout": true
4 | },
5 | "selenium": {
6 | "command": "node node_modules/protractor/bin/webdriver-manager start",
7 | "options": {
8 | "stdout": false,
9 | "async": true
10 | }
11 | },
12 | "protractor_update": {
13 | "command": "node node_modules/protractor/bin/webdriver-manager update"
14 | },
15 | "npm_install": {
16 | "command": "npm install"
17 | },
18 | "examples": {
19 | "command": "node generate-examples.js"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/grunt/uglify.json:
--------------------------------------------------------------------------------
1 | {
2 | "dist": {
3 | "options": {
4 | "banner": "/*!\n* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today(\"yyyy-mm-dd\") %>\n* <%= pkg.description %>\n* <%= pkg.repository.type %>: <%= pkg.repository.url %>\n*/\n(function(angular){\n'use strict';\n",
5 | "footer": "\n}(angular));"
6 | },
7 | "files": {
8 | "dist/<%= pkg.name %>.min.no-header.js": ["dist/<%= pkg.name %>.no-header.js"]
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/grunt/watch.json:
--------------------------------------------------------------------------------
1 | {
2 | "options": {
3 | "livereload": 7777
4 | },
5 | "fast": {
6 | "files": [ "src/**/*.js", "test/unit/**.js", "test/e2e/**.js" ],
7 | "tasks": [ "fast-build" ]
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "https://github.com/tombatossals/angular-leaflet-directive/graphs/contributors",
3 | "name": "angular-leaflet-directive",
4 | "version": "0.10.1",
5 | "description": "angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps",
6 | "homepage": "http://tombatossals.github.io/angular-leaflet-directive/",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/tombatossals/angular-leaflet-directive"
10 | },
11 | "keywords": [
12 | "angularjs",
13 | "leaflet",
14 | "cli"
15 | ],
16 | "license": "MIT",
17 | "devDependencies": {
18 | "grunt": "^0.4.5",
19 | "grunt-bower-task": "^0.4.0",
20 | "grunt-contrib-clean": "^0.6.0",
21 | "grunt-contrib-concat": "^0.5.1",
22 | "grunt-contrib-connect": "^0.11.2",
23 | "grunt-contrib-jshint": "^0.11.2",
24 | "grunt-contrib-uglify": "^0.10.0",
25 | "grunt-contrib-watch": "^0.6.1",
26 | "grunt-conventional-changelog": "^5.0.0",
27 | "grunt-graphviz": "^0.1.1",
28 | "grunt-jscs": "^2.3.0",
29 | "grunt-karma": "^0.12.1",
30 | "grunt-ng-annotate": "^1.0.1",
31 | "grunt-open": "^0.2.3",
32 | "grunt-protractor-runner": "^2.0.0",
33 | "grunt-shell": "^1.1.2",
34 | "grunt-shell-spawn": "^0.3.2",
35 | "jasmine-core": "^2.2.0",
36 | "jsdom": "^7.0.2",
37 | "karma": "^0.13.15",
38 | "karma-coverage": "^0.5.3",
39 | "karma-jasmine": "^0.3.6",
40 | "karma-phantomjs-launcher": "^0.2.1",
41 | "load-grunt-config": "^0.19.0",
42 | "matchdep": "^1.0.0",
43 | "mkdirp": "^0.5.0",
44 | "phantomjs": "1.9",
45 | "protractor": "^2.0.0",
46 | "q": "^1.2.0",
47 | "requirejs": "^2.1.20",
48 | "semantic-release": "^4.3.5",
49 | "shelljs": "^0.5.3"
50 | },
51 | "scripts": {
52 | "test": "grunt travis --verbose",
53 | "karmaChrome": "grunt test-unit-chrome",
54 | "karmaChromeOnce": "grunt karma:unit-chrome-once",
55 | "semantic-release": "semantic-release pre && npm publish && semantic-release post"
56 | },
57 | "main": "dist/angular-leaflet-directive",
58 | "dependencies": {
59 | "angular": "1.x",
60 | "leaflet": "0.7.x"
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/directives/maxbounds.js:
--------------------------------------------------------------------------------
1 | angular.module('leaflet-directive').directive('maxbounds', function($log, leafletMapDefaults, leafletBoundsHelpers, leafletHelpers) {
2 |
3 | return {
4 | restrict: 'A',
5 | scope: false,
6 | replace: false,
7 | require: 'leaflet',
8 |
9 | link: function(scope, element, attrs, controller) {
10 | var leafletScope = controller.getLeafletScope();
11 | var isValidBounds = leafletBoundsHelpers.isValidBounds;
12 | var isNumber = leafletHelpers.isNumber;
13 |
14 | controller.getMap().then(function(map) {
15 | leafletScope.$watch('maxbounds', function(maxbounds) {
16 | if (!isValidBounds(maxbounds)) {
17 | // Unset any previous maxbounds
18 | map.setMaxBounds();
19 | return;
20 | }
21 |
22 | var leafletBounds = leafletBoundsHelpers.createLeafletBounds(maxbounds);
23 | if (isNumber(maxbounds.pad)) {
24 | leafletBounds = leafletBounds.pad(maxbounds.pad);
25 | }
26 |
27 | map.setMaxBounds(leafletBounds);
28 | if (!attrs.center && !attrs.lfCenter) {
29 | map.fitBounds(leafletBounds);
30 | }
31 | });
32 | });
33 | },
34 | };
35 | });
36 |
--------------------------------------------------------------------------------
/src/directives/watchOptions.js:
--------------------------------------------------------------------------------
1 | /*
2 | Create multiple similar directives for watchOptions to support directiveControl
3 | instead. (when watches are disabled)
4 | NgAnnotate does not work here due to the functional creation
5 | */
6 | ['markers', 'geojson'].forEach(function(name) {
7 | angular.module('leaflet-directive').directive(name + 'WatchOptions', [
8 | '$log', '$rootScope', '$q', 'leafletData', 'leafletHelpers',
9 | function($log, $rootScope, $q, leafletData, leafletHelpers) {
10 |
11 | var isDefined = leafletHelpers.isDefined,
12 | errorHeader = leafletHelpers.errorHeader,
13 | isObject = leafletHelpers.isObject,
14 | _watchOptions = leafletHelpers.watchOptions;
15 |
16 | return {
17 | restrict: 'A',
18 | scope: false,
19 | replace: false,
20 | require: ['leaflet'],
21 |
22 | link: function(scope, element, attrs, controller) {
23 | var mapController = controller[0],
24 | leafletScope = mapController.getLeafletScope();
25 |
26 | mapController.getMap().then(function() {
27 | if (isDefined(scope[name + 'WatchOptions'])) {
28 | if (isObject(scope[name + 'WatchOptions']))
29 | angular.extend(_watchOptions, scope[name + 'WatchOptions']);
30 | else
31 | $log.error(errorHeader + '[' + name + 'WatchOptions] is not an object');
32 | leafletScope[name + 'WatchOptions'] = _watchOptions;
33 | }
34 | });
35 | },
36 | };
37 | }, ]);
38 | });
39 |
--------------------------------------------------------------------------------
/src/header-MIT-license.txt:
--------------------------------------------------------------------------------
1 | /**!
2 | * The MIT License
3 | *
4 | * Copyright (c) 2013 the angular-leaflet-directive Team, http://tombatossals.github.io/angular-leaflet-directive
5 | *
6 | * Permission is hereby granted, free of charge, to any person obtaining a copy
7 | * of this software and associated documentation files (the "Software"), to deal
8 | * in the Software without restriction, including without limitation the rights
9 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | * copies of the Software, and to permit persons to whom the Software is
11 | * furnished to do so, subject to the following conditions:
12 | *
13 | * The above copyright notice and this permission notice shall be included in
14 | * all copies or substantial portions of the Software.
15 | *
16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | * THE SOFTWARE.
23 | *
24 | * angular-leaflet-directive
25 | * https://github.com/tombatossals/angular-leaflet-directive
26 | *
27 | * @authors https://github.com/tombatossals/angular-leaflet-directive/graphs/contributors
28 | */
29 |
--------------------------------------------------------------------------------
/src/services/events/leafletGeoJsonEvents.js:
--------------------------------------------------------------------------------
1 | angular.module('leaflet-directive')
2 | .factory('leafletGeoJsonEvents', function($rootScope, $q, $log, leafletHelpers,
3 | LeafletEventsHelpersFactory, leafletData) {
4 | var safeApply = leafletHelpers.safeApply;
5 | var EventsHelper = LeafletEventsHelpersFactory;
6 |
7 | var GeoJsonEvents = function() {
8 | EventsHelper.call(this, 'leafletDirectiveGeoJson', 'geojson');
9 | };
10 |
11 | GeoJsonEvents.prototype = new EventsHelper();
12 |
13 | GeoJsonEvents.prototype.genDispatchEvent = function(maybeMapId, eventName, logic, leafletScope, lObject, name, model, layerName, extra) {
14 | var base = EventsHelper.prototype.genDispatchEvent.call(this, maybeMapId, eventName, logic, leafletScope, lObject, name, model, layerName);
15 | var _this = this;
16 |
17 | return function(e) {
18 | if (eventName === 'mouseout') {
19 | if (extra.resetStyleOnMouseout) {
20 | leafletData.getGeoJSON(extra.mapId)
21 | .then(function(leafletGeoJSON) {
22 | //this is broken on nested needs to traverse or user layerName (nested)
23 | var lobj = layerName ? leafletGeoJSON[layerName] : leafletGeoJSON;
24 | lobj.resetStyle(e.target);
25 | });
26 |
27 | }
28 |
29 | safeApply(leafletScope, function() {
30 | $rootScope.$broadcast(_this.rootBroadcastName + '.mouseout', e);
31 | });
32 | }
33 |
34 | base(e); //common
35 | };
36 | };
37 |
38 | GeoJsonEvents.prototype.getAvailableEvents = function() { return [
39 | 'click',
40 | 'dblclick',
41 | 'mouseover',
42 | 'mouseout',
43 | ];
44 | };
45 |
46 | return new GeoJsonEvents();
47 | });
48 |
--------------------------------------------------------------------------------
/src/services/events/leafletLabelEvents.js:
--------------------------------------------------------------------------------
1 | angular.module('leaflet-directive')
2 | .factory('leafletLabelEvents', function($rootScope, $q, $log, leafletHelpers, LeafletEventsHelpersFactory) {
3 | var Helpers = leafletHelpers;
4 | var EventsHelper = LeafletEventsHelpersFactory;
5 |
6 | var LabelEvents = function() {
7 | EventsHelper.call(this, 'leafletDirectiveLabel', 'markers');
8 | };
9 |
10 | LabelEvents.prototype = new EventsHelper();
11 |
12 | LabelEvents.prototype.genDispatchEvent = function(maybeMapId, eventName, logic, leafletScope, lObject, name, model, layerName) {
13 | var markerName = name.replace('markers.', '');
14 | return EventsHelper.prototype
15 | .genDispatchEvent.call(this, maybeMapId, eventName, logic, leafletScope, lObject, markerName, model, layerName);
16 | };
17 |
18 | LabelEvents.prototype.getAvailableEvents = function() {
19 | return [
20 | 'click',
21 | 'dblclick',
22 | 'mousedown',
23 | 'mouseover',
24 | 'mouseout',
25 | 'contextmenu',
26 | ];
27 | };
28 |
29 | LabelEvents.prototype.genEvents = function(maybeMapId, eventName, logic, leafletScope, lObject, name, model, layerName) {
30 | var _this = this;
31 | var labelEvents = this.getAvailableEvents();
32 | var scopeWatchName = Helpers.getObjectArrayPath('markers.' + name);
33 | labelEvents.forEach(function(eventName) {
34 | lObject.label.on(eventName, _this.genDispatchEvent(
35 | maybeMapId, eventName, logic, leafletScope, lObject.label, scopeWatchName, model, layerName));
36 | });
37 | };
38 |
39 | LabelEvents.prototype.bindEvents = function() {};
40 |
41 | return new LabelEvents();
42 | });
43 |
--------------------------------------------------------------------------------
/src/services/leafletData.js:
--------------------------------------------------------------------------------
1 | angular.module('leaflet-directive').service('leafletData', function($log, $q, leafletHelpers) {
2 | var getDefer = leafletHelpers.getDefer,
3 | getUnresolvedDefer = leafletHelpers.getUnresolvedDefer,
4 | setResolvedDefer = leafletHelpers.setResolvedDefer;
5 |
6 | var _private = {};
7 | var self = this;
8 |
9 | var upperFirst = function(string) {
10 | return string.charAt(0).toUpperCase() + string.slice(1);
11 | };
12 |
13 | var _privateItems = [
14 | 'map',
15 | 'tiles',
16 | 'layers',
17 | 'paths',
18 | 'markers',
19 | 'geoJSON',
20 | 'UTFGrid', //odd ball on naming convention keeping to not break
21 | 'decorations',
22 | 'directiveControls', ];
23 |
24 | //init
25 | _privateItems.forEach(function(itemName) {
26 | _private[itemName] = {};
27 | });
28 |
29 | this.unresolveMap = function(scopeId) {
30 | var id = leafletHelpers.obtainEffectiveMapId(_private.map, scopeId);
31 | _privateItems.forEach(function(itemName) {
32 | _private[itemName][id] = undefined;
33 | });
34 | };
35 |
36 | //int repetitive stuff (get and sets)
37 | _privateItems.forEach(function(itemName) {
38 | var name = upperFirst(itemName);
39 | self['set' + name] = function(lObject, scopeId) {
40 | var defer = getUnresolvedDefer(_private[itemName], scopeId);
41 | defer.resolve(lObject);
42 | setResolvedDefer(_private[itemName], scopeId);
43 | };
44 |
45 | self['get' + name] = function(scopeId) {
46 | var defer = getDefer(_private[itemName], scopeId);
47 | return defer.promise;
48 | };
49 | });
50 | });
51 |
--------------------------------------------------------------------------------
/src/services/leafletDirectiveControlsHelpers.js:
--------------------------------------------------------------------------------
1 | angular.module('leaflet-directive')
2 | .service('leafletDirectiveControlsHelpers', function($log, leafletData, leafletHelpers) {
3 | var _isDefined = leafletHelpers.isDefined;
4 | var _isString = leafletHelpers.isString;
5 | var _isObject = leafletHelpers.isObject;
6 | var _mainErrorHeader = leafletHelpers.errorHeader;
7 |
8 | var _errorHeader = _mainErrorHeader + '[leafletDirectiveControlsHelpers';
9 |
10 | var _extend = function(id, thingToAddName, createFn, cleanFn) {
11 | var _fnHeader = _errorHeader + '.extend] ';
12 | var extender = {};
13 | if (!_isDefined(thingToAddName)) {
14 | $log.error(_fnHeader + 'thingToAddName cannot be undefined');
15 | return;
16 | }
17 |
18 | if (_isString(thingToAddName) && _isDefined(createFn) && _isDefined(cleanFn)) {
19 | extender[thingToAddName] = {
20 | create: createFn,
21 | clean: cleanFn,
22 | };
23 | } else if (_isObject(thingToAddName) && !_isDefined(createFn) && !_isDefined(cleanFn)) {
24 | extender = thingToAddName;
25 | } else {
26 | $log.error(_fnHeader + 'incorrect arguments');
27 | return;
28 | }
29 |
30 | //add external control to create / destroy markers without a watch
31 | leafletData.getDirectiveControls().then(function(controls) {
32 | angular.extend(controls, extender);
33 | leafletData.setDirectiveControls(controls, id);
34 | });
35 | };
36 |
37 | return {
38 | extend: _extend,
39 | };
40 | });
41 |
--------------------------------------------------------------------------------
/src/services/leafletWatchHelpers.js:
--------------------------------------------------------------------------------
1 | angular.module('leaflet-directive')
2 | .service('leafletWatchHelpers', function() {
3 |
4 | var _maybe = function(scope, watchFunctionName, thingToWatchStr, watchOptions, initCb) {
5 | //watchOptions.isDeep is/should be ignored in $watchCollection
6 | var unWatch = scope[watchFunctionName](thingToWatchStr, function(newValue, oldValue) {
7 | initCb(newValue, oldValue);
8 | if (!watchOptions.doWatch)
9 | unWatch();
10 | }, watchOptions.isDeep);
11 |
12 | return unWatch;
13 | };
14 |
15 | /*
16 | @name: maybeWatch
17 | @description: Utility to watch something once or forever.
18 | @returns unWatch function
19 | @param watchOptions - see markersWatchOptions and or derrivatives. This object is used
20 | to set watching to once and its watch depth.
21 | */
22 | var _maybeWatch = function(scope, thingToWatchStr, watchOptions, initCb) {
23 | return _maybe(scope, '$watch', thingToWatchStr, watchOptions, initCb);
24 | };
25 |
26 | /*
27 | @name: _maybeWatchCollection
28 | @description: Utility to watch something once or forever.
29 | @returns unWatch function
30 | @param watchOptions - see markersWatchOptions and or derrivatives. This object is used
31 | to set watching to once and its watch depth.
32 | */
33 | var _maybeWatchCollection = function(scope, thingToWatchStr, watchOptions, initCb) {
34 | return _maybe(scope, '$watchCollection', thingToWatchStr, watchOptions, initCb);
35 | };
36 |
37 | return {
38 | maybeWatch: _maybeWatch,
39 | maybeWatchCollection: _maybeWatchCollection,
40 | };
41 | });
42 |
--------------------------------------------------------------------------------
/src/services/nominatim.js:
--------------------------------------------------------------------------------
1 | angular.module('leaflet-directive').factory('nominatimService', function($q, $http, leafletHelpers, leafletMapDefaults) {
2 | var isDefined = leafletHelpers.isDefined;
3 |
4 | return {
5 | query: function(address, mapId) {
6 | var defaults = leafletMapDefaults.getDefaults(mapId);
7 | var url = defaults.nominatim.server;
8 | var df = $q.defer();
9 |
10 | $http.get(url, { params: { format: 'json', limit: 1, q: address } }).success(function(data) {
11 | if (data.length > 0 && isDefined(data[0].boundingbox)) {
12 | df.resolve(data[0]);
13 | } else {
14 | df.reject('[Nominatim] Invalid address');
15 | }
16 | });
17 |
18 | return df.promise;
19 | },
20 | };
21 | });
22 |
--------------------------------------------------------------------------------
/test/e2e/0100-basic-first-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0100-basic-first-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0100-basic-first-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | }, 30000);
11 |
12 | it('should load the Leaflet map inside the directive tag', function() {
13 | element(by.className('angular-leaflet-map')).getText().then(function(text) {
14 | expect(text).toBe('+\n-\nLeaflet | © OpenStreetMap contributors');
15 | });
16 | });
17 |
18 | });
19 |
--------------------------------------------------------------------------------
/test/e2e/0101-basic-center-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0101-basic-center-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0101-basic-center-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | }, 30000);
11 |
12 | it('should update the zoom value in the input if clicked the zoom control', function() {
13 | element(by.className('leaflet-control-zoom-in')).click();
14 |
15 | // Wait for zoom animation
16 | browser.driver.sleep(300);
17 | expect(element(by.model('london.zoom')).getAttribute('value')).toBe('5');
18 | });
19 |
20 | xit('should update the center value if the map is dragged', function() {
21 | expect(element(by.model('london.lat')).getAttribute('value')).toBe('51.505');
22 | expect(element(by.model('london.lng')).getAttribute('value')).toBe('-0.09');
23 | var el = element(by.xpath('.//img[contains(@class, "leaflet-tile-loaded")][1]'));
24 | var el2 = element(by.xpath('.//img[contains(@class, "leaflet-tile-loaded")][2]'));
25 | browser.actions()
26 | .mouseMove(el, {x: 5, y: 5})
27 | .mouseDown()
28 | .mouseMove(el2)
29 | .mouseUp()
30 | .perform();
31 |
32 | browser.waitForAngular();
33 | expect(element(by.model('london.lat')).getAttribute('value')).toBe('51.505');
34 | expect(element(by.model('london.lng')).getAttribute('value')).toBe('-0.09');
35 | });
36 |
37 | });
38 |
--------------------------------------------------------------------------------
/test/e2e/0103-basic-center-url-hash-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0103-basic-center-url-hash-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0103-basic-center-url-hash-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | }, 30000);
11 |
12 | it('should update the url if the center value is changed from the form', function() {
13 | element(by.xpath('//ul/li[1]/input[1]')).clear();
14 | element(by.xpath('//ul/li[1]/input[1]')).sendKeys('9');
15 | browser.driver.sleep(500);
16 | element(by.xpath('//ul/li[2]/input[1]')).clear();
17 | element(by.xpath('//ul/li[2]/input[1]')).sendKeys('7');
18 | browser.driver.sleep(500);
19 | element(by.xpath('//ul/li[3]/input[1]')).clear();
20 | element(by.xpath('//ul/li[3]/input[1]')).sendKeys('4');
21 |
22 | // Wait for zoom animation
23 | browser.driver.sleep(1500);
24 | expect(browser.driver.getCurrentUrl()).toMatch(/c=9.0153:6.9873:4$/);
25 | });
26 |
27 | it('should update the url if the zoom is changed from the map', function() {
28 | element(by.xpath('.//*[@title="Zoom out"]')).click();
29 | browser.driver.sleep(500);
30 | expect(browser.getCurrentUrl()).toMatch(/51.5050:-0.0900:3/);
31 | });
32 |
33 | it('should update the map center model if the url changes', function() {
34 | element(by.xpath('//ul/li[1]/a[1]')).click();
35 | expect(element(by.xpath('//ul/li[1]/input[1]')).getAttribute('value')).toBe('36.8899');
36 | expect(element(by.xpath('//ul/li[2]/input[1]')).getAttribute('value')).toBe('-121.8008');
37 | expect(element(by.xpath('//ul/li[3]/input[1]')).getAttribute('value')).toBe('12');
38 | });
39 | });
40 |
--------------------------------------------------------------------------------
/test/e2e/0104-basic-custom-parameters-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0104-basic-custom-parameters-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0104-basic-custom-parameters-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should have loaded the opencyclemaps tiles', function() {
13 | expect(element(by.css('img.leaflet-tile-loaded')).getAttribute('src')).toContain('tile.opencyclemap.org');
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/test/e2e/0105-basic-bounds-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0105-basic-bounds-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0105-basic-bounds-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should update the bounds values in the input if clicked the zoom control', function() {
13 | expect(element(by.model('bounds.southWest.lat')).getAttribute('value')).toBe('51.507941142609155');
14 | expect(element(by.model('bounds.southWest.lng')).getAttribute('value')).toBe('-0.09059429168701172');
15 | expect(element(by.model('bounds.northEast.lat')).getAttribute('value')).toBe('51.50954376090435');
16 | expect(element(by.model('bounds.northEast.lng')).getAttribute('value')).toBe('-0.0851815938949585');
17 |
18 | element(by.xpath('.//*[@title="Zoom out"]')).click().then(function() {
19 | browser.driver.sleep(400);
20 | expect(element(by.model('bounds.southWest.lat')).getAttribute('value')).toBe('51.50713981232172');
21 | expect(element(by.model('bounds.southWest.lng')).getAttribute('value')).toBe('-0.09329795837402344');
22 | expect(element(by.model('bounds.northEast.lat')).getAttribute('value')).toBe('51.51034504891232');
23 | expect(element(by.model('bounds.northEast.lng')).getAttribute('value')).toBe('-0.08247256278991699');
24 | });
25 |
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/test/e2e/0106-basic-maxbounds-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0106-basic-maxbounds-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0106-basic-maxbounds-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should update the maxbounds values if clicked the buttons', function() {
13 | element(by.xpath('.//button[text()="London region"]')).click();
14 | expect(element(by.css('p.result')).getText()).toBe('Maxbounds: NE(lat: 51.51280224425956, lng: -0.11681556701660155) SW(lat: 51.50211782162702, lng: -0.14428138732910156)');
15 |
16 | element(by.xpath('.//button[text()="Lisbon region"]')).click();
17 | element(by.xpath('.//*[@title="Zoom out"]')).click();
18 | expect(element(by.css('p.result')).getText()).toBe('Maxbounds: NE(lat: 38.72703673982525, lng: -9.110498428344725) SW(lat: 38.700247900602726, lng: -9.165430068969727)');
19 |
20 | element(by.xpath('.//button[text()="Warszawa region"]')).click();
21 | var zoomout = element(by.xpath('.//*[@title="Zoom out"]'));
22 | zoomout.click();
23 | zoomout.click();
24 | zoomout.click();
25 | expect(element(by.css('p.result')).getText()).toBe('Maxbounds: NE(lat: 52.31645452105213, lng: 21.233139038085938) SW(lat: 52.14823737817847, lng: 20.793685913085934)');
26 |
27 | element(by.xpath('.//button[text()="Unset maxbounds"]')).click();
28 | expect(element(by.css('p.result')).getText()).toBe('');
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/test/e2e/0107-basic-tiles-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0107-basic-tiles-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0107-basic-tiles-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should update the map tiles if clicked on the tiles changer buttons', function() {
13 | expect(element(by.xpath('//img[contains(@src, "http://api.tiles.mapbox.com/v4/bufanuvols.lia35jfp/")]')).isPresent()).toBe(true);
14 |
15 | element(by.xpath('//button[text()="OpenStreetMaps"]')).click();
16 | expect(element(by.xpath('//img[contains(@src, "http://b.tile.openstreetmap.org")]')).isPresent()).toBe(true);
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/test/e2e/0108-basic-tiles-zoom-changer-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0108-basic-tiles-zoom-changer-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0108-basic-tiles-zoom-changer-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should update the map tiles if zoom in the map', function() {
13 | expect(element(by.xpath('//img[contains(@src, "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/")]')).isPresent()).toBe(true);
14 | var zoomin = element(by.xpath('.//*[@title="Zoom in"]'));
15 |
16 | zoomin.click();
17 | browser.driver.sleep(300);
18 | zoomin.click();
19 | browser.driver.sleep(300);
20 | zoomin.click();
21 | browser.wait(function() {
22 | return element(by.xpath('//img[contains(@src, "http://a.tile.openstreetmap.org/")]')).isPresent();
23 | }, 5000);
24 |
25 | expect(element(by.xpath('//img[contains(@src, "http://a.tile.openstreetmap.org/")]')).isPresent()).toBe(true);
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/test/e2e/0201-layers-simple-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0201-layers-simple-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0201-layers-simple-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should change the layer tiles if clicked on the leaflet control switch layer', function() {
13 | expect(element(by.xpath('//img[contains(@src, "http://api.tiles.mapbox.com/v4/bufanuvols.lia22g09/")]')).isPresent()).toBe(true);
14 | browser.actions().mouseMove(element(by.xpath('//a[contains(@class, "leaflet-control-layers-toggle")][1]'))).perform();
15 |
16 | browser.findElements(by.css('input.leaflet-control-layers-selector')).then(function(inputs) {
17 | var input = inputs[1];
18 | input.click().then(function() {
19 | browser.wait(function() {
20 | return element(by.xpath('//img[contains(@src, "http://b.tile.openstreetmap.org")]')).isPresent();
21 | }, 5000);
22 |
23 | expect(element(by.xpath('//img[contains(@src, "http://b.tile.openstreetmap.org")]')).isPresent()).toBe(true);
24 | });
25 | });
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/test/e2e/0202-layers-overlays-simple-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0202-layers-overlays-simple-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0202-layers-overlays-simple-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should change the layer tiles if clicked on the leaflet control switch layer', function() {
13 | expect(element(by.xpath('//img[contains(@src, "http://c.tile.openstreetmap.org/")]')).isPresent()).toBe(true);
14 | browser.actions().mouseMove(element(by.xpath('//a[contains(@class, "leaflet-control-layers-toggle")][1]'))).perform();
15 |
16 | browser.wait(function() {
17 | return element(by.xpath('//img[contains(@src, "http://suite.opengeo.org/geoserver/usa/wms")]')).isPresent();
18 | }, 5000);
19 |
20 | expect(element(by.xpath('//img[contains(@src, "http://suite.opengeo.org/geoserver/usa/wms")]')).isPresent()).toBe(true);
21 |
22 | var overlayButton = element(by.xpath('//input[@type=\'checkbox\'][1]'));
23 | overlayButton.click();
24 | browser.driver.sleep(300);
25 | expect(element(by.xpath('//img[contains(@src, "http://suite.opengeo.org/geoserver/usa/wms")]')).isPresent()).toBe(false);
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/test/e2e/0203-layers-imageoverlay-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0203-layers-imageoverlay-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0203-layers-imageoverlay-example.html');
7 | browser.wait(function() {
8 | return element(by.xpath('//img[contains(@src, "andes.jpg")]')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should load the static image of the andes on the map', function() {
13 | expect(element(by.xpath('//img[contains(@src, "andes.jpg")]')).isPresent()).toBe(true);
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/test/e2e/0205-layers-googlemaps-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0205-layers-googlemaps-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0205-layers-googlemaps-example.html');
7 | browser.wait(function() {
8 | return element(by.xpath('//img[contains(@src, "http://mt1.googleapis.com")]')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should change the Google Maps tiles if clicked on the leaflet control switch layer', function() {
13 | expect(element(by.xpath('//img[contains(@src, "http://mt1.googleapis.com")]')).isPresent()).toBe(true);
14 | browser.actions().mouseMove(element(by.xpath('//a[contains(@class, "leaflet-control-layers-toggle")][1]'))).perform();
15 |
16 | browser.driver.findElements(by.css('input.leaflet-control-layers-selector')).then(function(inputs) {
17 | var input = inputs[1];
18 | input.click();
19 | browser.wait(function() {
20 | return element(by.xpath('//img[contains(@src, "http://khm1.googleapis.com")]')).isPresent();
21 | }, 5000);
22 |
23 | expect(element(by.xpath('//img[contains(@src, "http://khm1.googleapis.com")]')).isPresent()).toBe(true);
24 | });
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/test/e2e/0501-markers-events-add-example.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | describe('Loading 0501-markers-events-add-example.html', function() {
4 |
5 | beforeEach(function() {
6 | browser.get('0501-markers-events-add-example.html');
7 | browser.wait(function() {
8 | return element(by.css('img.leaflet-tile-loaded')).isPresent();
9 | }, 5000);
10 | });
11 |
12 | it('should load a marker when clicked on the map', function() {
13 | element(by.css('img.leaflet-tile-loaded')).click();
14 | browser.driver.sleep(100);
15 | expect(element(by.css('img.leaflet-marker-icon')).isPresent()).toBe(true);
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/test/karma-unit.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(karma) {
2 | karma.set({
3 | // base path, that will be used to resolve files and exclude
4 | basePath: '../',
5 |
6 | // list of files / patterns to load in the browser
7 | files: [
8 | 'bower_components/leaflet/dist/leaflet-src.js',
9 | 'bower_components/angular/angular.js',
10 | 'bower_components/angular-mocks/angular-mocks.js',
11 | 'bower_components/leaflet.markercluster/dist/leaflet.markercluster.js',
12 | 'bower_components/leaflet.vector-markers/dist/Leaflet.vector-markers.js',
13 | 'bower_components/Leaflet.PolylineDecorator/leaflet.polylineDecorator.js',
14 | 'dist/angular-leaflet-directive.js',
15 | 'test/unit/*.js',
16 | 'test/unit/**/marker*.js',
17 | ],
18 |
19 | // Frameworks
20 | frameworks: ['jasmine'],
21 |
22 | // list of files to exclude
23 | exclude: [
24 | ],
25 |
26 | browsers: [
27 | 'PhantomJS',
28 | ],
29 |
30 | // test results reporter to use
31 | // possible values: dots || progress
32 | reporters: ['progress'],
33 |
34 | // web server port
35 | port: 9018,
36 |
37 | // cli runner port
38 | runnerPort: 9100,
39 |
40 | // enable / disable colors in the output (reporters and logs)
41 | colors: true,
42 |
43 | // level of logging
44 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
45 | logLevel: karma.LOG_INFO,
46 |
47 | // enable / disable watching file and executing tests whenever any file changes
48 | autoWatch: false,
49 |
50 | // Continuous Integration mode
51 | // if true, it capture browsers, run tests and exit
52 | singleRun: true,
53 | });
54 | };
55 |
--------------------------------------------------------------------------------
/test/unit/040-maxboundsDirectiveSpec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /*jshint -W117 */
4 | /*jshint globalstrict: true*/
5 | /* jasmine specs for directives go here */
6 |
7 | describe('Directive: leaflet', function() {
8 | var $compile = null;
9 | var $rootScope = null;
10 | var $timeout;
11 | var leafletData = null;
12 | var leafletMapDefaults = null;
13 |
14 | beforeEach(module('leaflet-directive'));
15 | beforeEach(inject(function(_$compile_, _$rootScope_, _$timeout_, _leafletData_, _leafletMapDefaults_) {
16 | $compile = _$compile_;
17 | $rootScope = _$rootScope_;
18 | $timeout = _$timeout_;
19 | leafletData = _leafletData_;
20 | leafletMapDefaults = _leafletMapDefaults_;
21 | }));
22 |
23 | afterEach(inject(function($rootScope) {
24 | $rootScope.$apply();
25 | }));
26 |
27 | it('should change the center if maxbounds specified', function() {
28 | angular.extend($rootScope, {
29 | maxbounds: {
30 | southWest: {
31 | lat: 52.14823737817847,
32 | lng: 20.793685913085934,
33 | },
34 | northEast: {
35 | lat: 52.31645452105213,
36 | lng: 21.233139038085938,
37 | },
38 | },
39 | defaults: {
40 | zoomAnimation: false,
41 | },
42 | });
43 | var element = angular.element('