├── .editorconfig ├── .gitignore ├── .jshintrc ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── coffeelint.json ├── dist ├── ui-leaflet.js ├── ui-leaflet.min.no-header.js ├── ui-leaflet_dev_mapped.js └── ui-leaflet_dev_mapped.js.map ├── 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 └── workflow │ ├── build-tool │ ├── grunt.md │ └── proposed-next-gen-build-framework.md │ ├── git │ └── branches.md │ └── website.md ├── examples ├── 0000-viewer.html ├── 0100-basic-first-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-custom-center-url-hash-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 ├── 0215-layers-overlays-markercluster-example.html ├── 0216-layers-overlays-markers-nested-example.html ├── 0217-layers-overlays-paths-example.html ├── 0218-layers-wms-with-different-projection-example.html ├── 0219-layers-heatmap-example.html ├── 0220-layers-overlays-hide-on-zoomout-example.html ├── 0221-layers-refresh-overlay-every-minute-example.html ├── 0222-layers-esri-base-layer-example.html ├── 0223-layers-esri-feature-layer-example.html ├── 0224-layers-esri-tiled-map-layer-example.html ├── 0225-layers-esri-image-layer-example.html ├── 0226-layers-esri-clustered-layer-example.html ├── 0227-layers-esri-heatmap-layer-example.html ├── 0228-layers-yandex-example.html ├── 0229-layers-overlay-geojson-example.html ├── 0230-layers-mapboxgl-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.html ├── 0308-paths-events-example-with-id.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-no-watch.html ├── 0513-markers-clustering-10000-markers-example.html ├── 0514-markers-events-example.html ├── 0515-markers-events-example-with-id.html ├── 0516-markers-delayed-events.html ├── 0517-markers-angular-template-example.html ├── 0518-markers-two-maps-events-example.html ├── 0600-mixed-image-legend-example.html ├── 0601-mixed-geojson-events-example.html ├── 0602-mixed-geojson-events-example-w-id.html ├── 0603-mixed-mapbox-tiles-geojson-example.html ├── 0604-mixed-layers-overlays-geojson-example.html ├── 0605-mixed-markers-nested-events-example.html ├── 0606-mixed-no-watch-example.html ├── 0607-mixed-esri-multilayer-legend-service-example.html ├── 0608-mixed-esri-legenddata-service-example.html ├── 0609-mixed-overlays-markers-nested-no-watch-example.html ├── 0610-mixed-esri-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 │ │ ├── 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 │ │ ├── BasicTilesZoomChangerController.js │ │ ├── ControlsCustomController.js │ │ ├── ControlsCustomLayerControlController.js │ │ ├── ControlsDrawController.js │ │ ├── ControlsFullscreenController.js │ │ ├── ControlsMinimapController.js │ │ ├── ControlsScaleController.js │ │ ├── ControlsSearchController.js │ │ ├── CustomCenterUrlHashController.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 │ │ ├── LegendEsriLegendDataLegendServiceController.js │ │ ├── LegendEsriLegendServiceController.js │ │ ├── LegendEsriMultilayerLegendServiceController.js │ │ ├── MapboxGLController.js │ │ ├── MarkersAddRemoveController.js │ │ ├── MarkersAngularTemplateController.js │ │ ├── MarkersChangeOpacityController.js │ │ ├── MarkersClustering10000MarkersController.js │ │ ├── MarkersClustering10000MarkersNoWatchController.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 │ │ ├── MixedMOverlaysMarkersNoWatchController.js │ │ ├── MixedMapboxTilesGeojsonController.js │ │ ├── MixedMarkersNestedEventsController.js │ │ ├── PathEventsController.js │ │ ├── PathEventsWithIDController.js │ │ ├── PathPopupController.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.coffee ├── angular_architecture_graph.js ├── babel.js ├── bower.js ├── bump.js ├── clean.js ├── concat.js ├── concurrent.js ├── connect.js ├── conventionalChangelog.js ├── coveralls.js ├── jshint.js ├── ngAnnotate.js ├── open.js ├── pkg.js ├── protractor.js ├── shell.js ├── uglify.js ├── utils │ ├── banner.js │ ├── getAvailPort.js │ └── karma.js └── watch.js ├── index.html ├── logo.svg ├── 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 │ ├── eventManager.js │ ├── 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 │ ├── logger.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.conf.js ├── protractor.conf.js └── unit │ ├── bootstrap.coffee │ ├── boundsDirectiveSpec.js │ ├── centerDirectiveSpec.coffee │ ├── decorationsDirectiveSpec.js │ ├── eventsDirectiveSpec.js │ ├── geojsonDirectiveSpec.coffee │ ├── layersDirective │ ├── layersDirective.creationSpec.js │ ├── layersDirective.overlays.markersSpec.coffee │ ├── layersDirective.overlays.pathsSpec.js │ ├── layersDirective.overlaysSpec.js │ ├── layersDirective.twomapsSpec.js │ ├── layersDirective.watch.markersSpec.js │ └── layersDirective.watchSpec.js │ ├── leafletData │ ├── leafletDataService.DirectiveControlsSpec.coffee │ └── leafletDataSpec.coffee │ ├── leafletDirectiveSpec.js │ ├── markersDirectiveSpec.coffee │ ├── maxboundsDirectiveSpec.js │ ├── pathsDirectiveSpec.js │ ├── plugin │ └── markerPluginVectorMarkersSpec.js │ ├── services │ ├── leafletGeoHelpersSpec.coffee │ ├── leafletHelpersSpec.coffee │ ├── leafletIteratorsSpec.coffee │ └── leafletMarkersHelpersSpec.coffee │ └── tilesDirectiveSpec.js └── website ├── css.inc ├── css └── style.css ├── dist └── js │ └── ui-leaflet-webpage.js ├── javascript.inc ├── partials ├── examples.html ├── examples │ ├── bounds.html │ ├── center-url-hash.html │ ├── center.html │ ├── custom-parameters.html │ ├── customized-markers.html │ ├── dragging-markers.html │ ├── events.html │ ├── geojson.html │ ├── google-maps.html │ ├── imageoverlay.html │ ├── layers-simple.html │ ├── legend.html │ ├── marker.html │ ├── maxbounds.html │ ├── overlays-simple.html │ ├── path.html │ ├── simple-map.html │ ├── tiles-zoom-changer.html │ └── tiles.html ├── extend.html ├── main.html └── main │ ├── multilayer.html │ └── worldmap.html └── src └── js ├── app.js └── controllers ├── BoundsController.js ├── CenterController.js ├── CenterUrlHashController.js ├── CustomParametersController.js ├── CustomizedMarkersController.js ├── DraggingMarkersController.js ├── EventsController.js ├── GeoJSONController.js ├── GoogleMapsController.js ├── HeaderController.js ├── ImageOverlayController.js ├── LayersSimpleController.js ├── LegendController.js ├── MainController.js ├── MarkerController.js ├── MaxboundsController.js ├── MenuController.js ├── MultiLayerMapController.js ├── OverlaysSimpleController.js ├── PathController.js ├── SimpleMapController.js ├── TilesController.js ├── TilesZoomChangerController.js └── WorldMapController.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/ui-leaflet.pre.js 9 | dist/coverage/ 10 | dist/src/ 11 | js/angular-leaflet-directive-webpage.ngmin.js 12 | 13 | # Related ecosystem 14 | # =========== 15 | node_modules 16 | bower_components 17 | coverage 18 | saucelabs.json 19 | 20 | # General 21 | # =========== 22 | temp 23 | *.log 24 | *.swp 25 | .*.swp 26 | *~ 27 | *.iml 28 | .idea 29 | .project 30 | core 31 | lib 32 | tags 33 | .tags 34 | TAGS 35 | .TAGS 36 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "browser": true, 5 | "bitwise": true, 6 | "curly": false, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 4, 10 | "latedef": false, 11 | "newcap": true, 12 | "noarg": true, 13 | "regexp": true, 14 | "undef": true, 15 | "unused": true, 16 | "trailing": true, 17 | "smarttabs": true, 18 | "latedef": { 19 | "nofunc": true 20 | }, 21 | "globals": { 22 | "angular": false, 23 | "L": false, 24 | "lvector": false, 25 | "cartodb": false, 26 | "jasmine": false, 27 | "isCommonJS": false, 28 | "exports": false, 29 | "spyOn": false, 30 | "it": false, 31 | "xit": false, 32 | "expect": false, 33 | "runs": false, 34 | "waits": false, 35 | "waitsFor": false, 36 | "beforeEach": false, 37 | "afterEach": false, 38 | "describe": false, 39 | "xdescribe": false, 40 | "protractor": false, 41 | "browser": false, 42 | "by": false, 43 | "element": false 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # OS 2 | # =========== 3 | .DS_Store 4 | Thumbs.db 5 | 6 | # Project 7 | # =========== 8 | dist/coverage/ 9 | dist/src/ 10 | dist/ui-leaflet.pre.js 11 | js/angular-leaflet-directive-webpage.ngmin.js 12 | 13 | # Related ecosystem 14 | # =========== 15 | node_modules 16 | bower_components 17 | coverage 18 | saucelabs.json 19 | 20 | # General 21 | # =========== 22 | temp 23 | *.log 24 | *.swp 25 | .*.swp 26 | *~ 27 | *.iml 28 | .idea 29 | .project 30 | core 31 | lib 32 | tags 33 | .tags 34 | TAGS 35 | .TAGS 36 | 37 | #BOWER (as dependency) ignore 38 | website/ 39 | src 40 | doc 41 | examples 42 | test 43 | *.md 44 | Gruntfile.js 45 | package.json 46 | bower.json 47 | 48 | dist/coverage/ 49 | logo.svg 50 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "4" 5 | 6 | env: 7 | global: 8 | - secure: "Ugov4QqHxEN4976jaQvtQigwwB7wiG0vxiE4pIDiZKJ67py0d0kLZXI4CzNs8zV5EOrkR+ug2cs9vTmA8CdSmhQcx4SVwFoim/ReoQb9AK76+tgEso+F3nZpE1jeIorKN2/LAXtwkHOZa9WaDwhMlCULJxJ8DZoMsXkc5Xq3c6A=" 9 | - secure: "QW7a9wCfc4u+MGnPyLzE+HHRhAhTf0a1mqixoUB2MVNL/hZ7+nXAOL/oz3LxodPpwH3NEl4RyqteGS15XpJvZKuKXiyHWbrfSLHz7DD1LYuIzc7UOgyBTXF0C97DP5ae7zui+qvDOe67ud+qBerroP9jdcx+mSVQgMIAfF1uWY4=" 10 | - secure: "gflE27IYzgjICndyY7800KdoNKem0oMWKtIjXQuSTJFuWJvBVWkUajT8maNbv1+c46r6iFptd27m5Arzl9hqAh2deHqLxwRGqietcY737q7oRJzKRfA4MGycF8fKHEh8U5KupXTC7UXuESLWGA+bpWA6KNJ5CImAw2MWJXmsX9c=" 11 | 12 | before_install: 13 |   - npm install -g npm 14 | 15 | before_script: 16 |   - npm install -g grunt-cli 17 |   - npm install -g bower 18 | - bower install --config.interactive=false 19 | 20 | notifications: 21 | slack: ng-leaflet:DYS8q20K3um7RVFU8D8yGCIq 22 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | global._ = require('lodash'); 2 | 3 | const karmaRunner = require('./grunt/utils/karma'); 4 | 5 | module.exports = (grunt) => { 6 | require('load-grunt-config')(grunt); 7 | grunt.registerTask('karma', 'karma runner', function() { 8 | return karmaRunner('../../test/karma.conf.js', grunt)(this.async()); 9 | }); 10 | grunt.registerTask("force", function(set) { 11 | if (set === "on") { 12 | grunt.option("force", true); 13 | } else if (set === "off") { 14 | grunt.option("force", false); 15 | } 16 | }); 17 | }; 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) https://github.com/angular-ui/ui-leaflet 4 | 5 | Original Copyright (c) https://github.com/tombatossals/angular-leaflet-directive 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | -------------------------------------------------------------------------------- /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 | 8 | ``` 9 | 10 | It will map an object _bounds_ of our controller scope with the corresponding object on our leaflet directive isolated scope. It's a bidirectional relationship, so a change in this object on the controller scope object will affect the map bounds, or an interaction on the map which changes the map position will update our _bounds_ values. Let's define the bounds model with an example: 11 | 12 | ``` 13 | $scope.bounds = { 14 | southWest: { 15 | lat:51.508742458803326, 16 | lng: -0.087890625, 17 | }, 18 | northEast: { 19 | lat:51.508742458803326, 20 | lng:-0.087890625, 21 | } 22 | 23 | } 24 | ``` 25 | 26 | Defining the bounds is a little complex, so we have a helper which will allow us to be more concise on the definition making use of and array with two arrays with to values inside (lat, lng). To use it, we must make use of the _leafletBoundsHelpers_ service on our controller. For example: 27 | 28 | ``` 29 | app.controller("DemoController", [ "$scope", "leafletBoundsHelpers", function($scope, leafletBoundsHelpers) { 30 | var bounds = leafletBoundsHelpers.createBoundsFromArray([ 31 | [ 51.508742458803326, -0.087890625 ], 32 | [ 51.508742458803326, -0.087890625 ] 33 | ]); 34 | angular.extend($scope, { 35 | bounds: bounds 36 | }); 37 | }); 38 | ``` 39 | 40 | And that's all, we can see how the _$scope.bounds_ object is updated when we are interacting with the map, like [this example](http://angular-ui.github.io/ui-leaflet/examples/bounds-example.html). 41 | -------------------------------------------------------------------------------- /doc/maxbounds-attribute.md: -------------------------------------------------------------------------------- 1 | 'maxbounds' 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 | 8 | ``` 9 | 10 | It will map an object _maxbounds_ of our controller scope with the corresponding object on our leaflet directive isolated scope. It's not a bidirectional relationship, only the changes made to our _maxbounds_ object on the controller scope will affect the map, but no vice versa. 11 | 12 | ``` 13 | $scope.maxbounds = { 14 | southWest: { 15 | lat:51.508742458803326, 16 | lng: -0.087890625 17 | }, 18 | northEast: { 19 | lat:51.508742458803326, 20 | lng:-0.087890625 21 | } 22 | 23 | } 24 | ``` 25 | 26 | Defining the bounds is a little complex, so we have a helper which will allow us to be more concise on the definition making use of and array with two arrays with to values inside (lat, lng). To use it, we must make use of the _leafletBoundsHelpers_ service on our controller. For example: 27 | 28 | ``` 29 | app.controller("DemoController", [ "$scope", "leafletBoundsHelpers", function($scope, leafletBoundsHelpers) { 30 | var maxbounds = leafletBoundsHelpers.createBoundsFromArray([ 31 | [ 51.508742458803326, -0.087890625 ], 32 | [ 51.508742458803326, -0.087890625 ] 33 | ]); 34 | angular.extend($scope, { 35 | maxbounds: maxbounds 36 | }); 37 | }); 38 | ``` 39 | 40 | And that's all, we can see how the map is affected when we change the _maxbounds_ scope values, like [this example](http://angular-ui.github.io/ui-leaflet/examples/maxbounds-example.html). 41 | -------------------------------------------------------------------------------- /doc/tiles-attribute.md: -------------------------------------------------------------------------------- 1 | 'tiles' 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 | 8 | ``` 9 | 10 | It will map an object _tiles_ of our controller scope with the corresponding object on our leaflet directive isolated scope. It's not a bidirectional relationship, only the changes made to our _tiles_ object on the controller scope will affect the map, but no vice versa. 11 | 12 | This object is basically composed of two attributes: **url** and **options**. Let's see them in an example definition: 13 | ``` 14 | $scope.tiles = { 15 | url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", 16 | options: { 17 | attribution: '© 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://angular-ui.github.io/ui-leaflet/examples/tiles-example.html). 28 | * [tiles-zoom-changer-example.html](http://angular-ui.github.io/ui-leaflet/examples/tiles-zoom-changer-example.html). 29 | -------------------------------------------------------------------------------- /doc/workflow/build-tool/grunt.md: -------------------------------------------------------------------------------- 1 | Grunt Documentation 2 | =================== 3 | 4 | Starting place for documentation specific to this projects grunt build process. 5 | -------------------------------------------------------------------------------- /doc/workflow/build-tool/proposed-next-gen-build-framework.md: -------------------------------------------------------------------------------- 1 | Next-Gen Build Tool Framework 2 | ============================= 3 | 4 | Currently grunt is the de-facto way of doing things on this project. However, grunt is quite outdated when compared to 5 | gulp, brunch.io, and etc. 6 | 7 | Point is if someone has a stick up their butt to do this we should migrate this project targeting angular 1.X before moving to or 8 | supporting angular 2.X . 9 | 10 | 11 | @nmccready is quite familiar with grunt, gulpjs, and brunch.io . But he feels that the project is not quite worth the effort in migrating yet. 12 | 13 | 14 | Therefore if someone else who has experience in gulp, or brunch.io and has a fire in their belly to take this on for fun please raide your hand. :) 15 | -------------------------------------------------------------------------------- /doc/workflow/git/branches.md: -------------------------------------------------------------------------------- 1 | Github Branching Scheme 2 | ======================= 3 | 4 | There should be minimal branches in the main upstream of angular-ui/ui-leaflet. 5 | 6 | Currently there should only be: 7 | 8 | - master (2.X) 9 | - gh-pages (active website) 10 | - leaflet-1.X (IE Some major next release branch) (3.X) 11 | - 1.X is the branch where code is still compatible post 1.0.0 12 | 13 | Any an all other items as a dev **INCLUDING** admins and devs that have write permissions to the repo. Should work within their own fork 14 | and PR changes to this repository. 15 | 16 | There are exceptions to this like accidents and major/minor collaboration branches (where many devs touch same code work together piror to being ready). 17 | 18 | As an admin and dev with write permissions the majority of the time you should be submitting PRS. However if you need to push your changes to the upstream then please do the following. 19 | 20 | Example Working in master: 21 | - `git checkout master` 22 | - `git merge upstream/master` (your in master) 23 | - `git push upstream` 24 | 25 | Safer Example Working in master: 26 | 27 | - `git checkout -t origin/master -b upstreamMaster` 28 | - `git merge upstream/master` (your in upstreamMaster) 29 | - `git push upstream` 30 | 31 | Origin should be your personal fork and upstream should be angular-ui . If we need to explain this fully then you probably should not have admin nor write perms. 32 | 33 | ## Huge PRs (Many Commits) 34 | 35 | If you can and you know what you are doing please rebase via `git rebase -i` to squash commits. 36 | 37 | ## Remember 38 | With great power comes great responsibility. If it is abused it will be taken awayith! 39 | -------------------------------------------------------------------------------- /doc/workflow/website.md: -------------------------------------------------------------------------------- 1 | Website Workflow Documentation 2 | ============================== 3 | 4 | The branches *master* and *gh-pages* are now one in the same except that gh-pages has bower_components (--force) saved to the branch. 5 | 6 | Reasoning: 7 | 8 | - less confusion where and how gh-pages are deployed 9 | - code and docs exist in the same branch. There are **NO** **Excuses** to not update documentation now with things being in the same place. 10 | - documentation is now under the same version control and pull process and history of this libraries releases 11 | 12 | 13 | To run just the website via grunt do: 14 | 15 | - `grunt website` 16 | 17 | - Open browser to [localhost:8888](http://localhost:8888). 18 | 19 | - When done: PR or push code up. 20 | 21 | - merge master into gh-pages (via PR acceptance or manual git cli merge) 22 | 23 | - If there are new bower_components or new bower dependencies `bower install` and then `git add -A bower_components --force`. 24 | 25 | - Finally PR or push up modified bower_components or include in previous PR above 26 | -------------------------------------------------------------------------------- /examples/0100-basic-first-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 |

First steps, basic example

21 | 22 | 23 | -------------------------------------------------------------------------------- /examples/0101-basic-lf-center-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 22 | 28 | 29 | 30 | 31 |

Center map example

32 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /examples/0102-basic-center-autodiscover-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 26 | 27 | 28 | 29 |

Center autodiscover example

30 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /examples/0104-basic-custom-parameters-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 32 | 33 | 34 | 35 |

Using custom default parameters

36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/0105-basic-bounds-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 27 | 28 | 29 | 30 |

Map bounds example

31 |

South west

32 |
33 | Lat : 34 | Lng : 35 |
36 | 37 |

North east

38 |
39 | Lat : 40 | Lng : 41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /examples/0110-basic-map-without-animations-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 33 | 34 | 35 | 36 |

Map with disabled animations example

37 | 38 | 39 | -------------------------------------------------------------------------------- /examples/0113-basic-geojson-simple-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 42 | 43 | 44 | 45 |

Simple GeoJSON example

46 | 47 | 48 | -------------------------------------------------------------------------------- /examples/0115-basic-events-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 30 | 31 | 32 | 33 |

Events example

34 |

All map events are propagated by default.

35 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /examples/0116-basic-access-leaflet-object-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 28 | 34 | 35 | 36 | 37 |

Direct access to the Leaflet Map Object

38 |

39 |
40 |

Latitude : Longitude :

41 |

Zoom :

42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/0117-basic-routing-show-hide-map-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 24 | 25 | 26 | 27 |

Angular routing show/hide map example

28 |

Show map / Hide map

29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/0123-basic-hide-show-map-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 31 | 32 | 33 | 34 |

Hide/Show map example

35 |

Select to show the map

36 |

Center: {{ center }}

37 | 38 | 39 | -------------------------------------------------------------------------------- /examples/0402-controls-scale-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 25 | 26 | 27 | 28 |

Scale control example

29 | 30 | 31 | -------------------------------------------------------------------------------- /examples/0501-markers-events-add-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 35 | 36 | 37 | 38 |

Markers with events example

39 |

Click on the map to add a marker

40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/0508-markers-change-opacity-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 31 | 32 | 33 | 34 |

Change icon opacity

35 |

Move the slider to change the icon opacity.

36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /examples/images/andes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/images/andes.jpg -------------------------------------------------------------------------------- /examples/img/100x100_PNG/bigben100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/100x100_PNG/bigben100.png -------------------------------------------------------------------------------- /examples/img/100x100_PNG/colosseum100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/100x100_PNG/colosseum100.png -------------------------------------------------------------------------------- /examples/img/100x100_PNG/egypt100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/100x100_PNG/egypt100.png -------------------------------------------------------------------------------- /examples/img/100x100_PNG/eiffel100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/100x100_PNG/eiffel100.png -------------------------------------------------------------------------------- /examples/img/100x100_PNG/liberty100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/100x100_PNG/liberty100.png -------------------------------------------------------------------------------- /examples/img/100x100_PNG/tajmahal100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/100x100_PNG/tajmahal100.png -------------------------------------------------------------------------------- /examples/img/San-francisco-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/San-francisco-map.png -------------------------------------------------------------------------------- /examples/img/leaf-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/leaf-green.png -------------------------------------------------------------------------------- /examples/img/leaf-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/leaf-orange.png -------------------------------------------------------------------------------- /examples/img/leaf-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-ui/ui-leaflet/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/examples/img/leaf-shadow.png -------------------------------------------------------------------------------- /examples/js/controllers/BasicAccessLeafletObjectController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicAccessLeafletObjectController", [ "$scope", "$log", "leafletData", function($scope, $log, leafletData) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 4 7 | } 8 | }); 9 | $scope.fitBounds = function() { 10 | leafletData.getMap().then(function(map) { 11 | map.fitBounds([ [40.712, -74.227], [40.774, -74.125] ]); 12 | }); 13 | }; 14 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicBoundsController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicBoundsController", [ "$scope", "leafletData", "leafletBoundsHelpers", function($scope, leafletData, leafletBoundsHelpers) { 2 | var bounds = leafletBoundsHelpers.createBoundsFromArray([ 3 | [ 51.508742458803326, -0.087890625 ], 4 | [ 51.508742458803326, -0.087890625 ] 5 | ]); 6 | angular.extend($scope, { 7 | bounds: bounds, 8 | center: {} 9 | }); 10 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicBoundsNominatimController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicBoundsNominatimController', [ '$scope', function($scope) { 2 | angular.extend($scope, { 3 | bounds: { 4 | address: 'Bath, UK' 5 | } 6 | }); 7 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicCenterAutodiscoverController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicCenterAutodiscoverController', [ '$scope', function($scope) { 2 | angular.extend($scope, { 3 | center: { 4 | autoDiscover: true 5 | } 6 | }); 7 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicCenterGeoIPController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicCenterGeoIPController', [ '$scope', '$http', function($scope, $http) { 2 | angular.extend($scope, { 3 | center: { 4 | lat: 0, 5 | lng: 0, 6 | zoom: 2 7 | } 8 | }); 9 | $scope.searchIP = function(ip) { 10 | var url = "http://freegeoip.net/json/" + ip; 11 | $http.get(url).success(function(res) { 12 | $scope.center = { 13 | lat: res.latitude, 14 | lng: res.longitude, 15 | zoom: 10 16 | }; 17 | $scope.ip = res.ip; 18 | }); 19 | }; 20 | $scope.searchIP(""); 21 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicCenterUrlHashController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicCenterUrlHashController', [ '$scope', '$location', function($scope, $location) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 4 7 | } 8 | }); 9 | $scope.$on("centerUrlHash", function(event, centerHash) { 10 | console.log("url", centerHash); 11 | $location.search({ c: centerHash }); 12 | }); 13 | $scope.changeLocation = function(centerHash) { 14 | $location.search({ c: centerHash }); 15 | }; 16 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicCustomParametersController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicCustomParametersController', [ '$scope', function($scope) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 8 7 | }, 8 | defaults: { 9 | tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", 10 | zoomControlPosition: 'topright', 11 | tileLayerOptions: { 12 | opacity: 0.9, 13 | detectRetina: true, 14 | reuseTiles: true, 15 | }, 16 | scrollWheelZoom: false 17 | } 18 | }); 19 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicDoubleMapAccessMapObjectController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicDoubleMapAccessMapObjectController", [ "$scope", "$log", "leafletData", function($scope, $log, leafletData) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 4 7 | }, 8 | markers: { 9 | london: { 10 | lat: 51.505, 11 | lng: -0.09, 12 | draggable: true 13 | } 14 | }, 15 | defaults: { 16 | tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", 17 | } 18 | }); 19 | $scope.logLeafletData = function(name) { 20 | leafletData.getMap(name).then(function(map) { 21 | $log.info(map); 22 | }); 23 | }; 24 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicDoubleMapSharingAttributesController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicDoubleMapSharingAttributesController", [ "$scope", "$log", "$http", "leafletData", function($scope, $log, $http, leafletData) { 2 | angular.extend($scope, { 3 | center: { 4 | lat: 43.7350, 5 | lng: -79.3734, 6 | zoom: 11 7 | }, 8 | defaults: { 9 | scrollWheelZoom: false 10 | }, 11 | markers1: { 12 | one: { 13 | lat: 43.75, 14 | lng: -79.56 15 | }, 16 | two: { 17 | lat: 43.76, 18 | lng: -79.50 19 | } 20 | }, 21 | markers2: { 22 | one: { 23 | lat: 43.75, 24 | lng: -79.56 25 | }, 26 | two: { 27 | lat: 43.75, 28 | lng: -79.45 29 | }, 30 | three: { 31 | lat: 43.81, 32 | lng: -79.26 33 | } 34 | } 35 | }); 36 | $http.get('json/toronto1.json').success(function(data, status) { 37 | $scope.toronto1 = data; 38 | }); 39 | $http.get('json/toronto2.json').success(function(data, status) { 40 | $scope.toronto2 = data; 41 | }); 42 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicDynamicAddRemoveMapExample.js: -------------------------------------------------------------------------------- 1 | app.config(function ($routeProvider) { 2 | $routeProvider.when('/map', { 3 | template: '', 4 | controller: 'BasicDynamicAddRemoveMapExample' 5 | }); 6 | }); 7 | app.controller('BasicDynamicAddRemoveMapExample', [ '$scope', 'leafletData', function($scope, leafletData) { 8 | } ]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicEventsController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicEventsController", [ "$scope", "leafletMapEvents", function($scope, leafletMapEvents) { 2 | $scope.center = { 3 | lat: 51.505, 4 | lng: -0.09, 5 | zoom: 8 6 | }; 7 | $scope.eventDetected = "No events yet..."; 8 | var mapEvents = leafletMapEvents.getAvailableMapEvents(); 9 | for (var k in mapEvents){ 10 | var eventName = 'leafletDirectiveMap.' + mapEvents[k]; 11 | $scope.$on(eventName, function(event){ 12 | $scope.eventDetected = event.name; 13 | }); 14 | } 15 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicFirstController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicFirstController", [ "$scope", function($scope) { 2 | // Nothing here! 3 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicHideShowMapController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicHideShowMapController', function($scope, $timeout, leafletData) { 2 | $scope.center = { 3 | lat: 35, 4 | lng: 0, 5 | zoom: 8 6 | }; 7 | $scope.showMap = false; 8 | $scope.$watch("showMap", function(value) { 9 | if (value === true) { 10 | leafletData.getMap().then(function(map) { 11 | $timeout(function() { 12 | map.invalidateSize(); 13 | }, 300); 14 | }); 15 | } 16 | }); 17 | }); -------------------------------------------------------------------------------- /examples/js/controllers/BasicLFCenterController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicLFCenterController', [ '$scope', function($scope) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 4 7 | } 8 | }); 9 | }]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicLegendController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicLegendController', [ '$scope', function($scope) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 12 7 | }, 8 | legend: { 9 | position: 'bottomleft', 10 | colors: [ '#ff0000', '#28c9ff', '#0000ff', '#ecf386' ], 11 | labels: [ 'National Cycle Route', 'Regional Cycle Route', 'Local Cycle Network', 'Cycleway' ] 12 | }, 13 | defaults: { 14 | tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png" 15 | } 16 | }); 17 | } ]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicMapWithoutAnimationsController.js: -------------------------------------------------------------------------------- 1 | app.controller('BasicMapWithoutAnimationsController', [ '$scope', function($scope) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 8 7 | }, 8 | defaults: { 9 | zoomAnimation: false, 10 | markerZoomAnimation: false, 11 | fadeAnimation: false 12 | }, 13 | markers: { 14 | london: { 15 | lat: 51.505, 16 | lng: -0.09, 17 | } 18 | } 19 | }); 20 | } ]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicMaxBoundsController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicMaxBoundsController", [ "$scope", "leafletData", function($scope, leafletData) { 2 | $scope.regions = { 3 | london: { 4 | northEast: { 5 | lat: 51.51280224425956, 6 | lng: -0.11681556701660155 7 | }, 8 | southWest: { 9 | lat: 51.50211782162702, 10 | lng: -0.14428138732910156 11 | } 12 | }, 13 | lisbon: { 14 | southWest: { 15 | lat: 38.700247900602726, 16 | lng: -9.165430068969727 17 | }, 18 | northEast: { 19 | lat: 38.72703673982525, 20 | lng: -9.110498428344725 21 | } 22 | }, 23 | warszawa: { 24 | southWest: { 25 | lat: 52.14823737817847, 26 | lng: 20.793685913085934 27 | }, 28 | northEast: { 29 | lat: 52.31645452105213, 30 | lng: 21.233139038085938 31 | } 32 | } 33 | }; 34 | angular.extend($scope, { 35 | maxbounds: $scope.regions.london 36 | }); 37 | } ]); -------------------------------------------------------------------------------- /examples/js/controllers/BasicMaxBoundsPadController.js: -------------------------------------------------------------------------------- 1 | app.controller("BasicMaxBoundsPadController", ["$scope", "leafletBoundsHelpers", function($scope, leafletBoundsHelpers) { 2 | var maxbounds = leafletBoundsHelpers.createBoundsFromArray([ 3 | [37.8866, -79.4877], 4 | [39.7230, -74.9863] 5 | ]); 6 | maxbounds.pad = 1.0; 7 | angular.extend($scope, { 8 | bounds: maxbounds, 9 | center: { 10 | lat: 37.8866, 11 | lng: -79-4877, 12 | zoom: 4 13 | }, 14 | layers: { 15 | baselayers: { 16 | xyz: { 17 | name: 'OpenStreetMap (XYZ)', 18 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 19 | type: 'xyz' 20 | } 21 | }, 22 | overlays: {} 23 | }, 24 | markers: { 25 | northeast: { 26 | lat: 39.7230, 27 | lng: -74.9863, 28 | focus: true, 29 | title: "Northeast", 30 | }, 31 | southwest: { 32 | lat: 37.8866, 33 | lng: -79.4877, 34 | title: "Southwest", 35 | } 36 | }, 37 | maxbounds: maxbounds 38 | }); 39 | }]); -------------------------------------------------------------------------------- /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 | type: 'mapbox', 16 | user: 'elesdoar', 17 | key: 'citojtj9e00022iqjmdzhrdwd', 18 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg', 19 | layerParams: { 20 | showOnSelector: false 21 | } 22 | } 23 | }, 24 | overlays: { 25 | draw: { 26 | name: 'draw', 27 | type: 'group', 28 | visible: true, 29 | layerParams: { 30 | showOnSelector: false 31 | } 32 | } 33 | } 34 | } 35 | }); 36 | leafletData.getMap().then(function(map) { 37 | leafletData.getLayers().then(function(baselayers) { 38 | var drawnItems = baselayers.overlays.draw; 39 | map.on('draw:created', function (e) { 40 | var layer = e.layer; 41 | drawnItems.addLayer(layer); 42 | console.log(JSON.stringify(layer.toGeoJSON())); 43 | }); 44 | }); 45 | }); 46 | }]); -------------------------------------------------------------------------------- /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: '//api.mapbox.com/styles/v1/{user}/{mapId}/tiles/256/{z}/{x}/{y}?access_token={apiKey}', 11 | type: 'xyz', 12 | options: { 13 | user: 'elesdoar', 14 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg', 15 | mapId: 'cii0r8pax00zvaikonyem8014' 16 | } 17 | }, 18 | controls: { 19 | fullscreen: { 20 | position: 'topleft' 21 | } 22 | } 23 | }); 24 | }]); -------------------------------------------------------------------------------- /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: '//api.mapbox.com/styles/v1/{user}/{mapId}/tiles/256/{z}/{x}/{y}?access_token={apiKey}', 11 | type: 'xyz', 12 | options: { 13 | user: 'elesdoar', 14 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg', 15 | mapId: 'cii0r8pax00zvaikonyem8014' 16 | } 17 | }, 18 | controls: {} 19 | }); 20 | // Wait for center to be stablished 21 | leafletData.getMap().then(function() { 22 | angular.extend($scope.controls, { 23 | minimap: { 24 | type: 'minimap', 25 | layer: { 26 | name: 'OpenStreetMap', 27 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 28 | type: 'xyz' 29 | }, 30 | toggleDisplay: true 31 | } 32 | }); 33 | }); 34 | }]); -------------------------------------------------------------------------------- /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/CustomCenterUrlHashController.js: -------------------------------------------------------------------------------- 1 | app.controller('CustomCenterUrlHashController', [ '$scope', '$location', function($scope, $location) { 2 | angular.extend($scope, { 3 | london: { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 4 7 | } 8 | }); 9 | $scope.$on("centerUrlHash", function(event, centerHash) { 10 | console.log("url", centerHash); 11 | $location.search({ center: centerHash }); 12 | }); 13 | $scope.changeLocation = function(centerHash) { 14 | $location.search({ center: centerHash }); 15 | }; 16 | }]); -------------------------------------------------------------------------------- /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 | type: 'mapbox', 34 | user: 'elesdoar', 35 | key: 'citojtj9e00022iqjmdzhrdwd', 36 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg' 37 | } 38 | } 39 | } 40 | }); 41 | }]); -------------------------------------------------------------------------------- /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 Outdoors', 15 | type: 'mapbox', 16 | user: 'elesdoar', 17 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg', 18 | key: 'citng3g0g003s2it88y9lg769' 19 | } 20 | }, 21 | overlays: { 22 | wms: { 23 | name: 'EEUU States (WMS)', 24 | type: 'wms', 25 | visible: true, 26 | url: 'http://suite.opengeo.org/geoserver/usa/wms', 27 | layerParams: { 28 | showOnSelector: false, 29 | layers: 'usa:states', 30 | format: 'image/png', 31 | transparent: true 32 | } 33 | } 34 | } 35 | } 36 | }); 37 | }]); -------------------------------------------------------------------------------- /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/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 | type: 'mapbox', 13 | user: 'elesdoar', 14 | key: 'citojtj9e00022iqjmdzhrdwd', 15 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg' 16 | } 17 | }, 18 | overlays: { 19 | traffic: { 20 | name: "Traffic Jams", 21 | type: "xyz", 22 | url: "http://map.be-mobile.be/customer/mobileninja/nl/los/{z}/{x}/{y}.png", 23 | visible: 1, 24 | doRefresh: false 25 | } 26 | } 27 | } 28 | }); 29 | var refreshIntervalInSeconds = 60; 30 | var actualSeconds = 0; 31 | $interval(function() { 32 | if (actualSeconds === refreshIntervalInSeconds) { 33 | $scope.layers.overlays.traffic.doRefresh = true; 34 | console.log("Overlay refreshed.") 35 | actualSeconds = 0; 36 | } else { 37 | console.log("Next update of overlay in " + (refreshIntervalInSeconds - actualSeconds) + " seconds."); 38 | actualSeconds += 1; 39 | } 40 | }, 1000); 41 | }]); -------------------------------------------------------------------------------- /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 | type: 'mapbox', 19 | user: 'elesdoar', 20 | key: 'citojtj9e00022iqjmdzhrdwd', 21 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg' 22 | }, 23 | osm: { 24 | name: 'OpenStreetMap', 25 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 26 | type: 'xyz' 27 | } 28 | } 29 | } 30 | }); 31 | }]); -------------------------------------------------------------------------------- /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/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/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/MarkersDelayedEventsController.js: -------------------------------------------------------------------------------- 1 | app.controller("MarkersDelayedEventsController", ["$scope", "leafletMarkerEvents", function($scope, leafletMarkerEvents){ 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: leafletMarkerEvents.getAvailableEvents(), 31 | } 32 | }; 33 | $scope.eventDetected = "No events yet..."; 34 | var markerEvents = leafletMarkerEvents.getAvailableEvents(); 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", "leafletLogger", function($scope, leafletMarkerEvents, leafletLogger) { 2 | // leafletLogger.currentLevel = leafletLogger.LEVELS.debug; 3 | $scope.center = { 4 | lat: 51.505, 5 | lng: -0.09, 6 | zoom: 8 7 | }; 8 | $scope.markers = { 9 | london: { 10 | lat: 51.505, 11 | lng: -0.09, 12 | draggable: true, 13 | message: "I'm a draggable marker", 14 | focus: true 15 | } 16 | } 17 | $scope.events = { 18 | markers: { 19 | enable: leafletMarkerEvents.getAvailableEvents(), 20 | } 21 | }; 22 | $scope.eventDetected = "No events yet..."; 23 | var markerEvents = leafletMarkerEvents.getAvailableEvents(); 24 | for (var k in markerEvents){ 25 | var eventName = 'leafletDirectiveMarker.myMap.' + markerEvents[k]; 26 | $scope.$on(eventName, function(event, args){ 27 | $scope.eventDetected = event.name; 28 | }); 29 | } 30 | }]); -------------------------------------------------------------------------------- /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/MixedMOverlaysMarkersNoWatchController.js: -------------------------------------------------------------------------------- 1 | app.controller('MixedMOverlaysMarkersNoWatchController', function ($scope, leafletData, $timeout, leafletLogger) { 2 | leafletLogger.currentLevel = leafletLogger.LEVELS.debug; 3 | var _clonedMarkers; 4 | $timeout(function () { 5 | //should do nothing (not watched) and only see one destroy 6 | _clonedMarkers = angular.copy($scope.markers); 7 | },1000); 8 | $timeout(function () { 9 | leafletData.getDirectiveControls().then(function (controls) { 10 | //move all markers by a few decimal points 11 | for (var markerName in _clonedMarkers) { 12 | var marker = _clonedMarkers[markerName]; 13 | marker.lat += .05; 14 | } 15 | //force manual update 16 | controls.markers.create(_clonedMarkers ,$scope.markers); 17 | $scope.markers = _clonedMarkers; 18 | }); 19 | }, 4000); 20 | angular.extend($scope, { 21 | markersWatchOptions: { 22 | doWatch: false, 23 | isDeep: false, 24 | individual: { 25 | doWatch: false, 26 | isDeep: false 27 | } 28 | }, 29 | center: { 30 | lat: 42.20133, 31 | lng: 2.19110, 32 | zoom: 11 33 | }, 34 | markers: { 35 | m1: { 36 | lat: 42.20133, 37 | lng: 2.19110, 38 | message: "I'm a car" 39 | }, 40 | m2: { 41 | lat: 42.21133, 42 | lng: 2.18110, 43 | message: "I'm a car" 44 | } 45 | } 46 | }); 47 | }); -------------------------------------------------------------------------------- /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/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 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 31 | type: 'xyz' 32 | } 33 | }, 34 | overlays: { 35 | test: { 36 | name: 'Test', 37 | visible: true, 38 | type: 'group' 39 | } 40 | } 41 | } 42 | }); 43 | }); -------------------------------------------------------------------------------- /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 |
4 |

View this example as a stand-alone page

5 |

Source code of this example

6 |
7 | -------------------------------------------------------------------------------- /examples/partials/source.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /examples/views/template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Name: 4 | 5 |
6 |
7 | -------------------------------------------------------------------------------- /grunt/aliases.coffee: -------------------------------------------------------------------------------- 1 | module.exports = 2 | test:[ 'jshint', 'testunit', 'teste2e'] 3 | 4 | testunit: ['karma'] 5 | 6 | teste2e:[ 'shell:protractor_update', 'connect:testserver', 'protractor:run'] 7 | 8 | teste2efirefox:[ 'shell:protractor_update', 'connect:testserver', 'protractor:firefox'] 9 | 10 | testcoverage: ['karma'] 11 | 12 | coverage:['karma', 'open:coverage', 'connect:coverage'] 13 | 14 | install:[ 'shell:npm_install','bower:install','shell:protractor_update'] 15 | 16 | default:['build'] 17 | 18 | # cause zsh always puts me in grunt folder 19 | d:['default'] 20 | 21 | #force:on to keep failing specs from killing grunt 22 | dev:['force:on', 'connect:devserver', 'open:devserver', 'concurrent:dev' ] 23 | 24 | #continuos running specs 25 | spec: [ 'fastbuild', 'concurrent:unit' ] 26 | 27 | serve:['concurrent:watchServe'] 28 | 29 | s:['serve'] 30 | 31 | fastbuild:[ 'clean:dist', 'jshint' ,'babel', 'concat:dist', 'concat:distMapped', 'ngAnnotate'] 32 | 33 | dwatch:[ 'fastbuild', 'concurrent:unit' ] 34 | 35 | build:[ 'fastbuild', 'uglify', 'testunit', 'concat:license', 'clean:pre' ] 36 | 37 | travis:[ 'fastbuild', 'bower:install', 'testunit' ] 38 | 39 | changelog: ['conventionalChangelog'] 40 | 41 | 'bump@':[ 'bump-only', 'default', 'changelog', 'bump-commit' ] 42 | 43 | 'bump@minor':[ 'bump-only:minor', 'default', 'changelog', 'bump-commit' ] 44 | 45 | 'bump@major':[ 'bump-only:major', 'default', 'changelog', 'bump-commit' ] 46 | #To Update examples for Viewer 47 | examples:[ 'shell:examples', 'concat:examples' ] 48 | 49 | graph:['angular_architecture_graph'] 50 | 51 | website:['concurrent:website'] 52 | -------------------------------------------------------------------------------- /grunt/angular_architecture_graph.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | diagram: { 6 | files: { 7 | "dist/architecture": ["dist/<%= pkg.name %>.js"] 8 | } 9 | } 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /grunt/babel.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | options: { 6 | sourceMap: false, 7 | compact: false, 8 | presets: ['es2015'] 9 | }, 10 | dist: { 11 | files: [{ 12 | expand: true, 13 | cwd: 'src', 14 | src: ['**/*.js'], 15 | dest: 'dist/src', 16 | ext: '.js' 17 | }] 18 | } 19 | }; 20 | }; 21 | -------------------------------------------------------------------------------- /grunt/bower.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | install: { 6 | // options: { 7 | // targetDir: './bower_components', 8 | // cleanup: true 9 | // } 10 | } 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /grunt/bump.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | options: { 6 | files: ['package.json', 'bower.json'], 7 | updateConfigs: [], 8 | commit: true, 9 | commitMessage: 'Release v%VERSION%', 10 | commitFiles: [ 11 | 'CHANGELOG.md', 12 | 'package.json', 13 | 'bower.json', 14 | 'dist/<%= pkg.name %>.js', 15 | 'dist/<%= pkg.name %>.min.js', 16 | 'dist/<%= pkg.name %>.min.no-header.js', 17 | 'dist/<%= pkg.name %>.js', 18 | 'dist/<%= pkg.name %>_dev_mapped.js', 19 | 'dist/<%= pkg.name %>_dev_mapped.js.map' 20 | ], 21 | createTag: true, 22 | tagName: 'v%VERSION%', 23 | tagMessage: 'Version %VERSION%', 24 | push: false, 25 | pushTo: 'origin', 26 | gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' 27 | } 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /grunt/clean.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var pkg = require('./pkg'); 3 | 4 | module.exports = function (grunt, options) { 5 | return { 6 | dist: ["dist/"], 7 | pre: ['dist/*.pre.js'] 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /grunt/concat.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var concatDist, concatDistMapped = null; 4 | 5 | concatDist = { 6 | options: { 7 | banner: require('./utils/banner') + "(function(angular){\n" + "'use strict';\n", 8 | footer: '\n}(angular));' 9 | }, 10 | src: [ 11 | 'dist/src/directives/leaflet.js', 12 | 'dist/src/services/*.js', 13 | 'dist/src/**/*.js' 14 | 15 | ], 16 | dest: 'dist/<%= pkg.name %>.pre.js' 17 | }; 18 | 19 | concatDistMapped = _.clone(concatDist, true); 20 | concatDistMapped.options.sourceMap = true; 21 | concatDistMapped.options.sourceMapName = "dist/<%= pkg.name %>_dev_mapped.js.map"; 22 | concatDistMapped.dest = "dist/<%= pkg.name %>_dev_mapped.js"; 23 | 24 | 25 | module.exports = function (grunt, options) { 26 | return { 27 | dist: concatDist, 28 | distMapped: concatDistMapped, 29 | license: { 30 | src: [ 31 | 'src/header-MIT-license.txt', 32 | 'dist/<%= pkg.name %>.min.no-header.js' 33 | ], 34 | dest: 'dist/<%= pkg.name %>.min.js' 35 | }, 36 | examples: { 37 | options: { 38 | banner: '(function(angular){ \nvar app = angular.module(\'webapp\');\n', 39 | footer: '}(angular));' 40 | }, 41 | src: ['examples/js/controllers/*.js'], 42 | dest: 'examples/js/controllers.js' 43 | }, 44 | website: { 45 | options: { 46 | //separator: ';', 47 | banner: '(function (angular) {\n', 48 | footer: '})(window.angular);' 49 | }, 50 | src: ['website/src/js/app.js', 'website/src/js/**/*.js'], 51 | dest: 'website/dist/js/<%= pkg.name %>-webpage.js', 52 | } 53 | }; 54 | }; 55 | -------------------------------------------------------------------------------- /grunt/concurrent.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | watchServe: { 6 | tasks: ['watch:fast', 'connect:webserver'], 7 | options: { 8 | logConcurrentOutput: true 9 | } 10 | }, 11 | unit: { 12 | tasks: ['karma', 'watch:unit'], 13 | options: { 14 | logConcurrentOutput: true 15 | } 16 | }, 17 | dev: { 18 | tasks: ['karma', 'watch:unit', 'watch:source'], 19 | options: { 20 | logConcurrentOutput: true 21 | } 22 | }, 23 | website: { 24 | tasks: ['concat:website', 'watch:website', 'connect:webserver'], 25 | options: { 26 | logConcurrentOutput: true 27 | } 28 | } 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /grunt/connect.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var getAvailPort = require('./utils/getAvailPort'); 3 | var port = getAvailPort(8888); 4 | 5 | module.exports = function (grunt, options) { 6 | return { 7 | options: { 8 | base: '' 9 | }, 10 | webserver: { 11 | options: { 12 | port: port, 13 | keepalive: true 14 | } 15 | }, 16 | devserver: { 17 | options: { 18 | port: 8888 19 | } 20 | }, 21 | testserver: { 22 | options: { 23 | port: 9999 24 | } 25 | }, 26 | coverage: { 27 | options: { 28 | base: 'coverage/', 29 | directory: 'coverage/', 30 | port: 5555, 31 | keepalive: true 32 | } 33 | } 34 | }; 35 | }; 36 | -------------------------------------------------------------------------------- /grunt/conventionalChangelog.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var _pkg = require('../package.json'); 3 | var argv = require('yargs').argv; 4 | 5 | /* 6 | _pkg.nextVersion only works for patch updates 7 | 8 | Using changelog in the workflow is not really recommended right now as changelog is not really able to be modified until 9 | a new tag is released. 10 | 11 | Using Yargs as a workaround which grunt should be used in this way: 12 | 13 | `grunt changelog --ui_leaflet_ver SOME_TAG_NUMBER` 14 | */ 15 | 16 | module.exports = function (grunt, options) { 17 | return { 18 | options: { 19 | changelogOpts: { 20 | // conventional-changelog options go here 21 | preset: 'angular', 22 | releaseCount: 0 23 | }, 24 | context: { 25 | currentTag: 'v' + (argv.ui_leaflet_ver || _pkg.version) 26 | } 27 | }, 28 | release: { 29 | src: 'CHANGELOG.md' 30 | } 31 | }; 32 | }; 33 | -------------------------------------------------------------------------------- /grunt/coveralls.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | // Options 5 | return { 6 | options: { 7 | debug: true, 8 | coverage_dir: 'coverage' 9 | } 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /grunt/jshint.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var fs = require('fs'); 3 | 4 | module.exports = function (grunt, options) { 5 | return { 6 | options: JSON.parse(fs.readFileSync('.jshintrc')), 7 | source: { 8 | src: ['src/directives/*.js', 'src/services/*.js', 'website/js/**/*.js'] 9 | }, 10 | tests: { 11 | src: ['test/unit/*.js', 'test/e2e/*.js'] 12 | }, 13 | grunt: { 14 | src: ['Gruntfile.js'] 15 | } 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /grunt/ngAnnotate.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function ngAnnotate(grunt, options) { 4 | return { 5 | options: {}, 6 | dist: { 7 | files: { 8 | 'dist/<%= pkg.name %>.js': ['dist/<%= pkg.name %>.pre.js'] 9 | } 10 | } 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /grunt/open.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | devserver: { 6 | path: 'http://localhost:8888' 7 | }, 8 | coverage: { 9 | path: 'http://localhost:5555' 10 | } 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /grunt/pkg.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | var pkgFunction = function () { 5 | return grunt.file.readJSON('package.json') 6 | }; 7 | //THIS extension forces the banner or whatever uses pkgFunction to always get the latest version 8 | //where as pkg is only done once at grunt init. 9 | _.extend(options, { 10 | pkgFunction: pkgFunction 11 | }); 12 | return pkgFunction(); 13 | }; 14 | -------------------------------------------------------------------------------- /grunt/protractor.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | options: { 6 | keepAlive: false, 7 | configFile: 'test/protractor.conf.js', 8 | args: { 9 | specs: ['test/e2e/*.js'] 10 | } 11 | }, 12 | run: {}, 13 | saucelabs: { 14 | options: { 15 | args: { 16 | baseUrl: "http://<%= pkg.org %>.github.io/<%= pkg.name %>/examples/", 17 | sauceUser: process.env.SAUCE_USERNAME, 18 | sauceKey: process.env.SAUCE_ACCESS_KEY 19 | } 20 | } 21 | } 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /grunt/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | options: { 6 | stdout: true 7 | }, 8 | selenium: { 9 | command: 'node node_modules/protractor/bin/webdriver-manager start', 10 | options: { 11 | stdout: false, 12 | async: true 13 | } 14 | }, 15 | protractor_update: { 16 | command: 'node node_modules/protractor/bin/webdriver-manager update' 17 | }, 18 | npm_install: { 19 | command: 'npm install' 20 | }, 21 | examples: { 22 | command: 'node generate-examples.js' 23 | } 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /grunt/uglify.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt, options) { 4 | return { 5 | options: { 6 | banner: require('./utils/banner') 7 | }, 8 | dist: { 9 | files: { 10 | 'dist/<%= pkg.name %>.min.no-header.js': ['dist/<%= pkg.name %>.js'] 11 | } 12 | } 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /grunt/utils/banner.js: -------------------------------------------------------------------------------- 1 | module.exports = 2 | '/*!\n' + 3 | '* <%= pkg.name %> <%= pkgFunction().version %> <%= grunt.template.today(\"yyyy-mm-dd\") %>\n' + 4 | '* <%= pkg.description %>\n' + 5 | '* <%= pkg.repository.type %>: <%= pkg.repository.url %>\n' + 6 | '*/\n' 7 | -------------------------------------------------------------------------------- /grunt/utils/getAvailPort.js: -------------------------------------------------------------------------------- 1 | var exec = require('shelljs').exec; 2 | 3 | var isWin = /^win/.test(process.platform); 4 | 5 | var isPortOpen = function (port) { 6 | var cmd; 7 | if (isWin) 8 | cmd = 'netstat -an | find /i ":' + port + '" | find /i "listening"'; 9 | else 10 | cmd = 'lsof -i:' + port + " | tail -n 1 | awk '{print $2}'"; 11 | var portResponse = exec(cmd, { 12 | silent: true 13 | }).output; 14 | return portResponse ? false : true; 15 | } 16 | 17 | module.exports = function (startPort) { 18 | while (!isPortOpen(startPort)) { 19 | startPort += 1; 20 | } 21 | 22 | return startPort; 23 | } 24 | -------------------------------------------------------------------------------- /grunt/utils/karma.js: -------------------------------------------------------------------------------- 1 | const karmaLib = require('karma'); 2 | //<=0.12 || //^0.13 3 | const twelveKarma = karmaLib.server ? karmaLib.server.start : undefined; 4 | const thirteenKarma = karmaLib.Server || undefined; 5 | const Karma = thirteenKarma || twelveKarma; 6 | 7 | // console.log(Karma,true); 8 | module.exports = (pathToKarmaFile, grunt) => { 9 | var log; 10 | log = grunt.log.oklns; 11 | return (done, karmaConf) => { 12 | var e, server; 13 | if (karmaConf == null) { 14 | karmaConf = require.resolve(pathToKarmaFile); 15 | } 16 | log('-- Karma Setup --'); 17 | try { 18 | server = new Karma({ 19 | configFile: karmaConf, 20 | singleRun: true 21 | }, (code) => { 22 | log("Karma Callback Code: " + code); 23 | done(!code ? void 0 : false); 24 | }); 25 | if (server.start) 26 | server.start(); //^0.13 27 | } catch (_error) { 28 | e = _error; 29 | log("KARMA ERROR: " + e); 30 | return done(false); 31 | } 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /grunt/watch.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var getAvailPort = require('./utils/getAvailPort'); 3 | var port = getAvailPort(7777); 4 | 5 | var _files = ['src/**/*.js']; 6 | var _testFiles = ['test/unit/**.js', 'test/unit/**.coffee', 7 | 'test/e2e/**.js', 'test/unit/**/**.js', 'test/unit/**/**.coffee', 'test/e2e/**/**.js']; 8 | 9 | module.exports = function (grunt, options) { 10 | return { 11 | // NOT WORTH THE PINTA when having multiple watches 12 | // options: { 13 | // livereload: port 14 | // }, 15 | fast: { 16 | files: _files, 17 | tasks: [ 18 | 'fastbuild', 19 | 'uglify', 20 | 'concat:license' 21 | ] 22 | }, 23 | source: { 24 | files: _files, 25 | tasks: [ 26 | 'fastbuild', 27 | 'uglify', 28 | 'testunit', 29 | 'concat:license' 30 | ] 31 | }, 32 | unit: { 33 | files: _testFiles, 34 | tasks: [ 35 | 'fastbuild', 36 | 'karma' 37 | ] 38 | }, 39 | examples: { 40 | files: ['examples/*.html'], 41 | tasks: [ 42 | 'examples' 43 | ] 44 | }, 45 | website: { 46 | files: ['website/src/js/app.js', 'website/src/js/**/*.js'], 47 | tasks: ['jshint', 'concat:website', 'uglify'] //'ngmin' 48 | } 49 | }; 50 | }; 51 | -------------------------------------------------------------------------------- /src/directives/maxbounds.js: -------------------------------------------------------------------------------- 1 | angular.module('ui-leaflet').directive('maxbounds', function (leafletLogger, leafletMapDefaults, leafletBoundsHelpers, leafletHelpers) { 2 | // var $log = leafletLogger; 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 | isValidBounds = leafletBoundsHelpers.isValidBounds, 12 | isNumber = leafletHelpers.isNumber; 13 | 14 | 15 | controller.getMap().then(function(map) { 16 | leafletScope.$watch("maxbounds", function (maxbounds) { 17 | if (!isValidBounds(maxbounds)) { 18 | // Unset any previous maxbounds 19 | map.setMaxBounds(); 20 | return; 21 | } 22 | 23 | var leafletBounds = leafletBoundsHelpers.createLeafletBounds(maxbounds); 24 | if(isNumber(maxbounds.pad)) { 25 | leafletBounds = leafletBounds.pad(maxbounds.pad); 26 | } 27 | 28 | map.setMaxBounds(leafletBounds); 29 | if (!attrs.center && !attrs.lfCenter) { 30 | map.fitBounds(leafletBounds); 31 | } 32 | }); 33 | }); 34 | } 35 | }; 36 | }); 37 | -------------------------------------------------------------------------------- /src/header-MIT-license.txt: -------------------------------------------------------------------------------- 1 | /**! 2 | * The MIT License 3 | * 4 | * Copyright (c) the ui-leaflet Team, http://angular-ui.github.io/ui-leaflet 5 | * 6 | * Original Copyright (c) https://github.com/angular-ui/ui-leaflet 7 | * 8 | * Permission is hereby granted, free of charge, to any person obtaining a copy 9 | * of this software and associated documentation files (the "Software"), to deal 10 | * in the Software without restriction, including without limitation the rights 11 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the Software is 13 | * furnished to do so, subject to the following conditions: 14 | * 15 | * The above copyright notice and this permission notice shall be included in 16 | * all copies or substantial portions of the Software. 17 | * 18 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 | * THE SOFTWARE. 25 | * 26 | * ui-leaflet 27 | * https://github.com/angular-ui/ui-leaflet 28 | * 29 | * @authors https://github.com/angular-ui/ui-leaflet/graphs/contributors 30 | */ 31 | -------------------------------------------------------------------------------- /src/services/events/leafletGeoJsonEvents.js: -------------------------------------------------------------------------------- 1 | angular.module('ui-leaflet') 2 | .factory('leafletGeoJsonEvents', function ($rootScope, $q, leafletLogger, leafletHelpers, 3 | leafletEventsHelpersFactory, leafletData) { 4 | var safeApply = leafletHelpers.safeApply, 5 | EventsHelper = leafletEventsHelpersFactory; 6 | // $log = leafletLogger; 7 | 8 | var GeoJsonEvents = function(){ 9 | EventsHelper.call(this,'leafletDirectiveGeoJson', 'geojson'); 10 | }; 11 | 12 | GeoJsonEvents.prototype = new EventsHelper(); 13 | 14 | GeoJsonEvents.prototype.genDispatchEvent = function(maybeMapId, eventName, logic, leafletScope, lObject, name, model, layerName, extra) { 15 | var base = EventsHelper.prototype.genDispatchEvent.call(this, maybeMapId, eventName, logic, leafletScope, lObject, name, model, layerName), 16 | _this = this; 17 | 18 | return function(e){ 19 | if (eventName === 'mouseout') { 20 | if (extra.resetStyleOnMouseout) { 21 | leafletData.getGeoJSON(extra.mapId) 22 | .then(function(leafletGeoJSON){ 23 | //this is broken on nested needs to traverse or user layerName (nested) 24 | var lobj = layerName? leafletGeoJSON[layerName]: leafletGeoJSON; 25 | lobj.resetStyle(e.target); 26 | }); 27 | 28 | } 29 | safeApply(leafletScope, function() { 30 | $rootScope.$broadcast(_this.rootBroadcastName + '.mouseout', e); 31 | }); 32 | } 33 | base(e); //common 34 | }; 35 | }; 36 | 37 | GeoJsonEvents.prototype.getAvailableEvents = function(){ return [ 38 | 'click', 39 | 'dblclick', 40 | 'mouseover', 41 | 'mouseout', 42 | ]; 43 | }; 44 | 45 | return new GeoJsonEvents(); 46 | }); 47 | -------------------------------------------------------------------------------- /src/services/events/leafletLabelEvents.js: -------------------------------------------------------------------------------- 1 | angular.module('ui-leaflet') 2 | .factory('leafletLabelEvents', function ($rootScope, $q, leafletLogger, leafletHelpers, leafletEventsHelpersFactory) { 3 | var Helpers = leafletHelpers, 4 | EventsHelper = leafletEventsHelpersFactory; 5 | //$log = leafletLogger; 6 | 7 | var LabelEvents = function(){ 8 | EventsHelper.call(this,'leafletDirectiveLabel', 'markers'); 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 (maybeMapId, lObject, name, model, leafletScope, layerName) {}; 40 | 41 | return new LabelEvents(); 42 | }); 43 | -------------------------------------------------------------------------------- /src/services/leafletData.js: -------------------------------------------------------------------------------- 1 | angular.module('ui-leaflet').service('leafletData', function (leafletLogger, $q, leafletHelpers) { 2 | var getDefer = leafletHelpers.getDefer, 3 | getUnresolvedDefer = leafletHelpers.getUnresolvedDefer, 4 | setResolvedDefer = leafletHelpers.setResolvedDefer; 5 | // $log = leafletLogger; 6 | 7 | var _private = {}; 8 | var self = this; 9 | 10 | var upperFirst = function (string) { 11 | return string.charAt(0).toUpperCase() + string.slice(1); 12 | }; 13 | 14 | var _privateItems = [ 15 | 'map', 16 | 'tiles', 17 | 'layers', 18 | 'paths', 19 | 'markers', 20 | 'geoJSON', 21 | 'UTFGrid', //odd ball on naming convention keeping to not break 22 | 'decorations', 23 | 'directiveControls']; 24 | 25 | //init 26 | _privateItems.forEach(function(itemName){ 27 | _private[itemName] = {}; 28 | }); 29 | 30 | this.unresolveMap = function (mapId) { 31 | var id = leafletHelpers.obtainEffectiveMapId(_private.map, mapId); 32 | _privateItems.forEach(function (itemName) { 33 | _private[itemName][id] = undefined; 34 | }); 35 | }; 36 | 37 | //int repetitive stuff (get and sets) 38 | _privateItems.forEach(function (itemName) { 39 | var name = upperFirst(itemName); 40 | self['set' + name] = function (lObject, mapId) { 41 | var defer = getUnresolvedDefer(_private[itemName], mapId); 42 | defer.resolve(lObject); 43 | setResolvedDefer(_private[itemName], mapId); 44 | }; 45 | 46 | self['get' + name] = function (mapId) { 47 | var defer = getDefer(_private[itemName], mapId); 48 | return defer.promise; 49 | }; 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /src/services/leafletDirectiveControlsHelpers.js: -------------------------------------------------------------------------------- 1 | angular.module('ui-leaflet') 2 | .service('leafletDirectiveControlsHelpers', function (leafletLogger, leafletData, leafletHelpers) { 3 | var _isDefined = leafletHelpers.isDefined, 4 | _isString = leafletHelpers.isString, 5 | _isObject = leafletHelpers.isObject, 6 | _mainErrorHeader = leafletHelpers.errorHeader, 7 | $log = leafletLogger; 8 | 9 | var _errorHeader = _mainErrorHeader + '[leafletDirectiveControlsHelpers'; 10 | 11 | var extend = function(id, thingToAddName, createFn, cleanFn){ 12 | var _fnHeader = _errorHeader + '.extend] '; 13 | var extender = {}; 14 | if(!_isDefined(thingToAddName)){ 15 | $log.error(_fnHeader + 'thingToAddName cannot be undefined'); 16 | return; 17 | } 18 | 19 | if(_isString(thingToAddName) && _isDefined(createFn) && _isDefined(cleanFn)){ 20 | extender[thingToAddName] = { 21 | create: createFn, 22 | clean: cleanFn 23 | }; 24 | } 25 | else if(_isObject(thingToAddName) && !_isDefined(createFn) && !_isDefined(cleanFn)){ 26 | extender = thingToAddName; 27 | } 28 | else{ 29 | $log.error(_fnHeader + 'incorrect arguments'); 30 | return; 31 | } 32 | 33 | //add external control to create / destroy markers without a watch 34 | leafletData.getDirectiveControls(id) 35 | .then(function(controls){ 36 | angular.extend(controls, extender); 37 | leafletData.setDirectiveControls(controls, id); 38 | }); 39 | }; 40 | 41 | return { 42 | extend: extend 43 | }; 44 | }); 45 | -------------------------------------------------------------------------------- /src/services/leafletWatchHelpers.js: -------------------------------------------------------------------------------- 1 | angular.module('ui-leaflet') 2 | .service('leafletWatchHelpers', function (){ 3 | 4 | var _maybe = function(scope, watchFunctionName, thingToWatchStr, watchOptions, initCb){ 5 | var unWatch = scope[watchFunctionName](thingToWatchStr, function(newValue, oldValue) { 6 | //make the unWatch function available to the callback as well. 7 | initCb(newValue, oldValue, unWatch); 8 | if(watchOptions.type === null) 9 | unWatch(); 10 | }, watchOptions.type === 'watchDeep'); 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 - This object is used to determine the type of 20 | watch used. 21 | */ 22 | var _maybeWatch = function(scope, thingToWatchStr, watchOptions, initCb){ 23 | var watchMethod; 24 | 25 | if(watchOptions.type === 'watchCollection') { 26 | watchMethod = '$watchCollection'; 27 | } 28 | else { 29 | watchMethod = '$watch'; 30 | } 31 | 32 | 33 | return _maybe(scope, watchMethod, thingToWatchStr, watchOptions, initCb); 34 | }; 35 | 36 | return { 37 | maybeWatch: _maybeWatch 38 | }; 39 | }); 40 | -------------------------------------------------------------------------------- /src/services/logger.js: -------------------------------------------------------------------------------- 1 | angular.module('ui-leaflet').service('leafletLogger', function(nemSimpleLogger) { 2 | return nemSimpleLogger.spawn(); 3 | }); 4 | -------------------------------------------------------------------------------- /src/services/nominatim.js: -------------------------------------------------------------------------------- 1 | angular 2 | .module("ui-leaflet") 3 | .factory("nominatimService", function( 4 | $q, 5 | $http, 6 | leafletHelpers, 7 | leafletMapDefaults 8 | ) { 9 | return { 10 | query: function query(address, mapId) { 11 | var defaults = leafletMapDefaults.getDefaults(mapId); 12 | var url = defaults.nominatim.server; 13 | var df = $q.defer(); 14 | 15 | if (angular.version.major === 1 && angular.version.minor < 6) { 16 | $http 17 | .get(url, { 18 | params: { format: "json", limit: 1, q: address } 19 | }) 20 | .success(function(data) { 21 | resolvePromise(data, df); 22 | }); 23 | } else { 24 | $http 25 | .get(url, { 26 | params: { format: "json", limit: 1, q: address } 27 | }) 28 | .then(function(response) { 29 | resolvePromise(response.data, df); 30 | }); 31 | } 32 | return df.promise; 33 | } 34 | }; 35 | 36 | function resolvePromise(data, promise) { 37 | var isDefined = leafletHelpers.isDefined; 38 | if (data.length > 0 && isDefined(data[0].boundingbox)) { 39 | promise.resolve(data[0]); 40 | } else { 41 | promise.reject("[Nominatim] Invalid address"); 42 | } 43 | } 44 | }); 45 | -------------------------------------------------------------------------------- /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 | // Wait for zoom animation 15 | browser.driver.sleep(300); 16 | expect(element(by.model("london.zoom")).getAttribute("value")).toBe('5'); 17 | }); 18 | 19 | xit('should update the center value if the map is dragged', function() { 20 | expect(element(by.model("london.lat")).getAttribute("value")).toBe('51.505'); 21 | expect(element(by.model("london.lng")).getAttribute("value")).toBe('-0.09'); 22 | var el = element(by.xpath('.//img[contains(@class, "leaflet-tile-loaded")][1]')); 23 | var el2 = element(by.xpath('.//img[contains(@class, "leaflet-tile-loaded")][2]')); 24 | browser.actions() 25 | .mouseMove(el, {x: 5, y: 5}) 26 | .mouseDown() 27 | .mouseMove(el2) 28 | .mouseUp() 29 | .perform(); 30 | 31 | browser.waitForAngular(); 32 | expect(element(by.model("london.lat")).getAttribute("value")).toBe('51.505'); 33 | expect(element(by.model("london.lng")).getAttribute("value")).toBe('-0.09'); 34 | }); 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /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 | // Wait for zoom animation 22 | browser.driver.sleep(1500); 23 | expect(browser.driver.getCurrentUrl()).toMatch(/c=9.0153:6.9873:4$/); 24 | }); 25 | 26 | it('should update the url if the zoom is changed from the map', function() { 27 | element(by.xpath('.//*[@title="Zoom out"]')).click(); 28 | browser.driver.sleep(500); 29 | expect(browser.getCurrentUrl()).toMatch(/51.5050:-0.0900:3/); 30 | }); 31 | 32 | it('should update the map center model if the url changes', function() { 33 | element(by.xpath('//ul/li[1]/a[1]')).click(); 34 | expect(element(by.xpath('//ul/li[1]/input[1]')).getAttribute("value")).toBe("36.8899"); 35 | expect(element(by.xpath('//ul/li[2]/input[1]')).getAttribute("value")).toBe("-121.8008"); 36 | expect(element(by.xpath('//ul/li[3]/input[1]')).getAttribute("value")).toBe("12"); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /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 | expect(element(by.xpath('//img[contains(@src, "http://a.tile.openstreetmap.org/")]')).isPresent()).toBe(true); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /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 | expect(element(by.xpath('//img[contains(@src, "http://b.tile.openstreetmap.org")]')).isPresent()).toBe(true); 23 | }); 24 | }); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /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 | expect(element(by.xpath('//img[contains(@src, "http://khm1.googleapis.com")]')).isPresent()).toBe(true); 23 | }); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /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/unit/bootstrap.coffee: -------------------------------------------------------------------------------- 1 | window.ngLeafLetTestGlobals = {} 2 | 3 | afterEach -> 4 | window.doTestLog = false 5 | 6 | beforeEach -> 7 | digest = (scope, fn, $timeout = ngLeafLetTestGlobals.$timeout) -> 8 | 9 | while $timeout.hasPendingTasks() 10 | $timeout.flush() 11 | 12 | fn() if fn? 13 | scope.$digest() unless scope.$$phase 14 | @digest = digest 15 | 16 | angular.module('ui-leaflet') 17 | .config ($provide) -> 18 | if window.doTestLog 19 | $provide.value('$log', console) 20 | $provide.decorator '$timeout', ($delegate, $browser) -> 21 | $delegate.hasPendingTasks = -> 22 | $browser.deferredFns.length > 0 23 | 24 | $delegate 25 | .run (leafletLogger) -> 26 | leafletLogger.currentLevel = leafletLogger.LEVELS.info 27 | .service 'digestor', ($timeout, $rootScope) -> 28 | digest: (scope = $rootScope, fn) -> 29 | digest(scope, fn, $timeout) 30 | -------------------------------------------------------------------------------- /test/unit/decorationsDirectiveSpec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /*jshint -W117 */ 4 | /*jshint globalstrict: true*/ 5 | /* jasmine specs for directives go here */ 6 | 7 | describe('Directive: decorations', function() { 8 | var $compile, $rootScope, leafletData, leafletHelpers, mainCoordinates, mainDecorations; 9 | 10 | beforeEach(module('ui-leaflet')); 11 | beforeEach(inject(function(_$compile_, _$rootScope_, _leafletData_, _leafletHelpers_) { 12 | $compile = _$compile_; 13 | $rootScope = _$rootScope_; 14 | leafletData = _leafletData_; 15 | leafletHelpers = _leafletHelpers_; 16 | })); 17 | beforeEach(function() { 18 | mainCoordinates = [ 19 | [ 0.966, 2.02 ], 20 | [ 2.02, 4.04 ] 21 | ]; 22 | mainDecorations = { 23 | arrow: { 24 | coordinates: mainCoordinates, 25 | patterns: [{offset: '10%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}})}] 26 | }, 27 | markers: { 28 | coordinates: mainCoordinates, 29 | patterns: { offset: '5%', repeat: '10%', symbol: L.Symbol.marker()} 30 | } 31 | }; 32 | }); 33 | 34 | afterEach(inject(function($rootScope) { 35 | $rootScope.$apply(); 36 | })); 37 | 38 | it("should create a decoration on the map", function() { 39 | angular.extend($rootScope, { 40 | decorations: { 41 | arrow: mainDecorations.arrow 42 | } 43 | }); 44 | 45 | var element = angular.element(''); 46 | element = $compile(element)($rootScope); 47 | $rootScope.$digest(); 48 | leafletData.getDecorations().then(function(leafletDecorations) { 49 | var leafletArrow = leafletDecorations.arrow; 50 | 51 | // Unfortunately, the L.PolylineDecorator class does not currently expose any value accessors. 52 | expect(leafletArrow.options.patterns.offset).toBe('10%'); 53 | expect(leafletArrow.options.patterns.repeat).toBe(0); 54 | expect(leafletArrow.options.symbol).toEqual(L.Symbol.arrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}})); 55 | }); 56 | }); 57 | }); -------------------------------------------------------------------------------- /test/unit/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, $rootScope = null, $timeout, leafletData = null, leafletMapDefaults = null; 9 | 10 | beforeEach(module('ui-leaflet')); 11 | beforeEach(inject(function(_$compile_, _$rootScope_, _$timeout_, _leafletData_, _leafletMapDefaults_) { 12 | $compile = _$compile_; 13 | $rootScope = _$rootScope_; 14 | $timeout = _$timeout_; 15 | leafletData = _leafletData_; 16 | leafletMapDefaults = _leafletMapDefaults_; 17 | })); 18 | 19 | afterEach(inject(function($rootScope) { 20 | $rootScope.$apply(); 21 | })); 22 | 23 | it('should change the center if maxbounds specified', function() { 24 | angular.extend($rootScope, { 25 | maxbounds: { 26 | southWest: { 27 | lat: 52.14823737817847, 28 | lng: 20.793685913085934 29 | }, 30 | northEast: { 31 | lat: 52.31645452105213, 32 | lng: 21.233139038085938 33 | } 34 | }, 35 | defaults: { 36 | zoomAnimation: false 37 | } 38 | }); 39 | var element = angular.element(''); 40 | element = $compile(element)($rootScope); 41 | var leafletMap; 42 | leafletData.getMap().then(function(map) { 43 | leafletMap = map; 44 | }); 45 | $rootScope.$apply(); 46 | var decimalPlaces = 13; //PhantomJS appears to be diff then chrome 47 | expect(leafletMap.getCenter().lat.toFixed(decimalPlaces)).toBe((52.23242563023071).toFixed(decimalPlaces)); 48 | expect(leafletMap.getCenter().lng.toFixed(decimalPlaces)).toBe((21.013412475585938).toFixed(decimalPlaces)); 49 | }); 50 | 51 | }); 52 | -------------------------------------------------------------------------------- /test/unit/services/leafletIteratorsSpec.coffee: -------------------------------------------------------------------------------- 1 | describe 'leafletIterators', -> 2 | 3 | beforeEach -> 4 | module('ui-leaflet') 5 | inject (_$compile_, _$rootScope_, _leafletData_, _leafletIterators_) -> 6 | @$compile = _$compile_ 7 | @$rootScope = _$rootScope_ 8 | @leafletData = _leafletData_ 9 | @subject = _leafletIterators_ 10 | 11 | it 'exists', -> 12 | expect(@subject).toBeDefined() 13 | 14 | describe 'forEach/each', -> 15 | it 'prototypes should not be called', -> 16 | class Dummy 17 | prop1: 'prop1' 18 | prop2: 'prop2' 19 | d = new Dummy() 20 | d.prop3 = 'prop3' 21 | 22 | vals = [] 23 | @subject.each d, (val) -> 24 | vals.push val 25 | 26 | expect(vals.length).toBe 1 27 | expect(vals[0]).toBe d.prop3 28 | -------------------------------------------------------------------------------- /website/css.inc: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /website/javascript.inc: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /website/partials/examples.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Example workshop

5 |

You have plenty of examples contributed by the community, easily browseable here:

6 |

http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/basic/tiles-example.

7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |

Basic examples

15 |
16 |

Let's see some progressive examples showing how to use the library on your AngularJS code. Before continue, we must have some notions of how to initialize an AngularJS app. You can find more information about a basic setup of an AngularJS application on the official AngularJS page.

17 |
18 |
19 | 20 |
21 |
22 |
23 | 26 |
27 | 28 |
29 | -------------------------------------------------------------------------------- /website/partials/examples/customized-markers.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Click on the buttons to change the marker object default properties:

4 | 5 |

Customized markers example

6 |

You can change the marker default options to customize it like we see on this example.

7 | 11 |
12 |
13 |
14 | 15 | 16 |
17 |
18 |
19 |

You can see the code demonstrating this feature in the customized markers icons example.

20 |
21 | -------------------------------------------------------------------------------- /website/partials/examples/geojson.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

GeoJSON example

4 |

Let's see how to render and interact with a geoJSON file layered into our map.

5 | 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |

You can see the code demonstrating this feature in the GeoJSON example.

17 |
18 | -------------------------------------------------------------------------------- /website/partials/examples/google-maps.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Google Maps integration example

4 |

We must include the Google Maps Library and the Google Maps Leaflet Plugin on our page first, and will include any of the available Google maps layers via the layers functionality like you can see on the example.

5 | 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |

You can see the code demonstrating this feature in the Google Maps example.

17 |
18 | -------------------------------------------------------------------------------- /website/partials/examples/imageoverlay.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

ImageOverlay example

4 |

We can define a baselayer type of imageOverlay, so we will not be interacting with map tiles, but a single image, which can be panned and zoomed inside the leaflet map container.

5 | 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |

You can see a standalone example of this code here.

17 |
18 | -------------------------------------------------------------------------------- /website/partials/examples/layers-simple.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Layers simple example

4 |

We can define a lists of baselayers via the layers attribute, so the user will see a control to switch the active layer on the top right corner, like in this example.

5 | 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |
17 |

You can see a standalone example of this code here.

18 |
19 | -------------------------------------------------------------------------------- /website/partials/examples/legend.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Legend example

4 |

We can embed easily a static legend information panel on our map. Let's see how:

5 | 10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 | .legend { 18 | padding: 6px 8px; 19 | font: 14px/16px Arial, Helvetica, sans-serif; 20 | box-shadow: 0 0 15px rgba(0,0,0,0.2); 21 | background: rgba(255,255,255, 0.9); 22 | line-height: 18px; 23 | border-radius: 5px; 24 | color: #555; 25 | } 26 | 27 | .legend i { 28 | color: #777; 29 | width: 18px; 30 | height: 18px; 31 | float: left; 32 | margin-right: 8px; 33 | opacity: 0.7; 34 | }
35 |
36 |

You can see the code demonstrating this feature in the legend example.

37 |
38 | -------------------------------------------------------------------------------- /website/partials/examples/marker.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Main marker example

4 |

You can add a marker to your map easy using the marker property on the leaflet tag:

5 | 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |

You can also see the code demonstrating this feature in the main marker example demo.

17 |
18 | -------------------------------------------------------------------------------- /website/partials/examples/maxbounds.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |

Max Bounds example

9 |

We can limit the panning/zoom of the map into a region defined on the maxbounds coordinates, forcing the map to stay on the specified portion of map and not allowing going out of there.

10 | 14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |

You can see a standalone example of this code here.

26 |
27 | -------------------------------------------------------------------------------- /website/partials/examples/overlays-simple.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Overlays simple example

4 |

We can define a baselayer and a list of overlays via the layers attribute, so the user will see a control to activate/deactivate the overlays on the top right corner, like in this example.

5 | 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |

You can see a standalone example of this code here.

17 |
18 | -------------------------------------------------------------------------------- /website/partials/examples/path.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

City icons obtained from Iconka.

4 |

Path example

5 |

We can trace a path on our map with two-way binding. On the example you can see a path of tree points with a line colored green and a determined weight. We also paint 3 custom icons on every point of the path. This can be accomplished with this code:

6 | 10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |

You can see the code demonstrating this feature in the path example.

18 |
19 | -------------------------------------------------------------------------------- /website/partials/examples/simple-map.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Simple map example

4 |

This is the simpliest way to embed a Leaflet map on our application. We only have to add leaflet-directive to our AngularJS application dependencies, and use our custom tag <leaflet> on the HTML code. Easy as pie.

5 | 6 | 10 |
11 |
12 |
13 |
14 |

You can see a standalone example of this code here.

15 |
16 |
17 | -------------------------------------------------------------------------------- /website/partials/examples/tiles-zoom-changer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Current TileLayer Url: {{ tiles.url }}

4 |

Current Zoom Level: {{ cairo.zoom }}

5 |

Tiles Zoom Changer example

6 |

With the ability of changing the tiles easily we could, for example, change the tiles when the zoom reaches a value. Zoom in some times on this map to see this effect in action.

7 | 11 |
12 |
13 |
14 | 15 |

Current TileLayer Url: {{ tiles.url }}

16 |

Current Zoom Level: {{ cairo.zoom }}

17 |
18 |
19 |
20 |

You can see a standalone example of this code here.

21 |
22 | -------------------------------------------------------------------------------- /website/partials/examples/tiles.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |

Tiles example

6 |

We can change the active tiles easily via the tiles attribute. For example, we could change them when the user press a button, like in this demo.

7 | 11 |
12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

You can see a standalone example of this code here.

22 |
23 | -------------------------------------------------------------------------------- /website/partials/main/multilayer.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | 8 | 11 | 14 | 17 |
18 |
19 |

20 | Click on the buttons to change the active map layer. You can see a standalone example of this code 21 | here. 22 |

23 |
24 | -------------------------------------------------------------------------------- /website/partials/main/worldmap.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {{ selectedCountry.properties.name }} 5 |
6 | 7 |

This example is partially based on this Leaflet demo. CSS + Images of flags obtained from the World Flags Sprite project.

8 |

You can see a standalone example of this code here.

9 |
10 | -------------------------------------------------------------------------------- /website/src/js/app.js: -------------------------------------------------------------------------------- 1 | var app = angular.module("mainPage", ['ngRoute', 'ui-leaflet', 'nemLogging', 'hljs']), 2 | websitePath = 'website'; 3 | app.value('$anchorScroll', angular.noop) 4 | .config(['$provide','nemSimpleLoggerProvider', function($provide, nemSimpleLoggerProvider) { 5 | return $provide.decorator.apply(null, nemSimpleLoggerProvider.decorator); 6 | }]) 7 | .config(['nemDebugProvider', function(nemDebugProvider) { 8 | var debug = nemDebugProvider.debug; 9 | debug.enable("website:*"); 10 | }]) 11 | .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 12 | $routeProvider.when('/', { 13 | templateUrl: websitePath + '/partials/main.html' 14 | }).when('/getting-started', { 15 | templateUrl: websitePath + '/partials/main.html' 16 | }).when('/howto-extend', { 17 | templateUrl: websitePath + '/partials/extend.html' 18 | }).when('/examples/:example', { 19 | templateUrl: websitePath + '/partials/examples.html', 20 | reloadOnSearch: false 21 | }); 22 | $locationProvider.hashPrefix('!'); 23 | }]); 24 | -------------------------------------------------------------------------------- /website/src/js/controllers/BoundsController.js: -------------------------------------------------------------------------------- 1 | app.controller("BoundsController", [ '$scope', 'leafletBoundsHelpers', function($scope, leafletBoundsHelpers) { 2 | 3 | var bounds = leafletBoundsHelpers.createBoundsFromArray([ 4 | [ 51.508742458803326, -0.087890625 ], 5 | [ 51.508742458803326, -0.087890625 ] 6 | ]); 7 | 8 | angular.extend($scope, { 9 | bounds: bounds, 10 | center: {}, 11 | defaults: { 12 | scrollWheelZoom: false 13 | } 14 | }); 15 | }]); 16 | -------------------------------------------------------------------------------- /website/src/js/controllers/CenterController.js: -------------------------------------------------------------------------------- 1 | app.controller("CenterController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | center: { 5 | lat: 40.095, 6 | lng: -3.823, 7 | zoom: 4 8 | }, 9 | defaults: { 10 | scrollWheelZoom: false 11 | } 12 | }); 13 | }]); 14 | -------------------------------------------------------------------------------- /website/src/js/controllers/CenterUrlHashController.js: -------------------------------------------------------------------------------- 1 | app.controller("CenterUrlHashController", [ '$scope', '$location', function($scope, $location) { 2 | 3 | angular.extend($scope, { 4 | center: { 5 | lat: 40.095, 6 | lng: -3.823, 7 | zoom: 4 8 | }, 9 | defaults: { 10 | scrollWheelZoom: false 11 | } 12 | }); 13 | 14 | $scope.$on("centerUrlHash", function(event, centerHash) { 15 | $location.search({ c: centerHash }); 16 | }); 17 | }]); 18 | -------------------------------------------------------------------------------- /website/src/js/controllers/CustomParametersController.js: -------------------------------------------------------------------------------- 1 | app.controller("CustomParametersController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | london: { 5 | lat: 51.505, 6 | lng: -0.09, 7 | zoom: 8 8 | }, 9 | defaults: { 10 | tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", 11 | tileLayerOptions: { 12 | opacity: 0.9, 13 | detectRetina: true, 14 | reuseTiles: true, 15 | }, 16 | scrollWheelZoom: false 17 | } 18 | }); 19 | }]); 20 | -------------------------------------------------------------------------------- /website/src/js/controllers/CustomizedMarkersController.js: -------------------------------------------------------------------------------- 1 | app.controller("CustomizedMarkersController", [ '$scope', function($scope) { 2 | 3 | var local_icons = { 4 | default_icon: {}, 5 | leaf_icon: { 6 | iconUrl: 'examples/img/leaf-green.png', 7 | shadowUrl: 'examples/img/leaf-shadow.png', 8 | iconSize: [38, 95], // size of the icon 9 | shadowSize: [50, 64], // size of the shadow 10 | iconAnchor: [22, 94], // point of the icon which will correspond to marker's location 11 | shadowAnchor: [4, 62], // the same for the shadow 12 | popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor 13 | }, 14 | div_icon: { 15 | type: 'div', 16 | iconSize: [230, 0], 17 | html: 'Using Bold text as an icon: Lisbon', 18 | popupAnchor: [0, 0] 19 | }, 20 | orange_leaf_icon: { 21 | iconUrl: 'examples/img/leaf-orange.png', 22 | shadowUrl: 'examples/img/leaf-shadow.png', 23 | iconSize: [38, 95], 24 | shadowSize: [50, 64], 25 | iconAnchor: [22, 94], 26 | shadowAnchor: [4, 62] 27 | } 28 | }; 29 | 30 | angular.extend($scope, { 31 | icons: local_icons 32 | }); 33 | 34 | angular.extend($scope, { 35 | lisbon: { 36 | lat: 38.716, 37 | lng: -9.13, 38 | zoom: 8 39 | }, 40 | markers: { 41 | m1: { 42 | lat: 38.716, 43 | lng: -9.13, 44 | message: "I'm a static marker", 45 | icon: local_icons.default_icon, 46 | }, 47 | }, 48 | defaults: { 49 | scrollWheelZoom: false 50 | } 51 | }); 52 | }]); 53 | -------------------------------------------------------------------------------- /website/src/js/controllers/DraggingMarkersController.js: -------------------------------------------------------------------------------- 1 | app.controller("DraggingMarkersController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | center: { 5 | lat: 40.095, 6 | lng: -3.823, 7 | zoom: 6 8 | }, 9 | defaults: { 10 | scrollWheelZoom: false 11 | }, 12 | markers: { 13 | Madrid: { 14 | lat: 40.095, 15 | lng: -3.823, 16 | message: "This is Madrid. But you can drag me to another position", 17 | focus: true, 18 | draggable: true 19 | }, 20 | Barcelona: { 21 | lat: 41.38, 22 | lng: 2.18, 23 | message: "This is Barcelona. You can't drag me", 24 | focus: false, 25 | draggable: false 26 | } 27 | } 28 | }); 29 | }]); 30 | -------------------------------------------------------------------------------- /website/src/js/controllers/EventsController.js: -------------------------------------------------------------------------------- 1 | app.controller("EventsController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | center: { 5 | lat: 52.374004, 6 | lng: 4.890359, 7 | zoom: 7 8 | }, 9 | defaults: { 10 | scrollWheelZoom: false 11 | }, 12 | events: { 13 | map: { 14 | enable: ['zoomstart', 'drag', 'click', 'mousemove'], 15 | logic: 'emit' 16 | } 17 | } 18 | }); 19 | 20 | $scope.eventDetected = "No events yet..."; 21 | 22 | $scope.$on('leafletDirectiveMap.zoomstart', function(event){ 23 | $scope.eventDetected = "ZoomStart"; 24 | }); 25 | 26 | $scope.$on('leafletDirectiveMap.drag', function(event){ 27 | $scope.eventDetected = "Drag"; 28 | }); 29 | 30 | $scope.$on('leafletDirectiveMap.click', function(event){ 31 | $scope.eventDetected = "Click"; 32 | }); 33 | 34 | $scope.$on('leafletDirectiveMap.mousemove', function(event){ 35 | $scope.eventDetected = "MouseMove"; 36 | }); 37 | }]); 38 | -------------------------------------------------------------------------------- /website/src/js/controllers/GeoJSONController.js: -------------------------------------------------------------------------------- 1 | app.controller("GeoJSONController", [ '$scope', '$http', function($scope, $http) { 2 | 3 | angular.extend($scope, { 4 | japan: { 5 | lat: 37.26, 6 | lng: 138.86, 7 | zoom: 4 8 | }, 9 | defaults: { 10 | scrollWheelZoom: false 11 | } 12 | }); 13 | 14 | // Get the countries geojson data from a JSON 15 | $http.get("examples/json/JPN.geo.json").success(function(data, status) { 16 | angular.extend($scope, { 17 | geojson: { 18 | data: data, 19 | style: { 20 | fillColor: "green", 21 | weight: 2, 22 | opacity: 1, 23 | color: 'white', 24 | dashArray: '3', 25 | fillOpacity: 0.7 26 | } 27 | } 28 | }); 29 | }); 30 | }]); 31 | -------------------------------------------------------------------------------- /website/src/js/controllers/GoogleMapsController.js: -------------------------------------------------------------------------------- 1 | app.controller("GoogleMapsController", [ "$scope", function($scope) { 2 | 3 | angular.extend($scope, { 4 | berlin: { 5 | lat: 52.52, 6 | lng: 13.40, 7 | zoom: 14 8 | }, 9 | layers: { 10 | baselayers: { 11 | googleTerrain: { 12 | name: 'Google Terrain', 13 | layerType: 'TERRAIN', 14 | type: 'google' 15 | }, 16 | googleHybrid: { 17 | name: 'Google Hybrid', 18 | layerType: 'HYBRID', 19 | type: 'google' 20 | }, 21 | googleRoadmap: { 22 | name: 'Google Streets', 23 | layerType: 'ROADMAP', 24 | type: 'google' 25 | } 26 | } 27 | }, 28 | defaults: { 29 | scrollWheelZoom: false 30 | } 31 | }); 32 | }]); 33 | -------------------------------------------------------------------------------- /website/src/js/controllers/HeaderController.js: -------------------------------------------------------------------------------- 1 | app.controller("HeaderController", [ '$scope', '$location', function($scope, $location) { 2 | 3 | angular.extend($scope, { 4 | center: { 5 | lat: 40.095, 6 | lng: -3.823, 7 | zoom: 3 8 | }, 9 | defaults: { 10 | scrollWheelZoom: false, 11 | attributionControl: false, 12 | tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", 13 | tileLayerOptions: { 14 | opacity: 0.9, 15 | detectRetina: true, 16 | reuseTiles: true 17 | } 18 | } 19 | }); 20 | 21 | $scope.$on('leafletDirectiveMap.click', function(event){ 22 | $location.path("/"); 23 | }); 24 | }]); 25 | -------------------------------------------------------------------------------- /website/src/js/controllers/ImageOverlayController.js: -------------------------------------------------------------------------------- 1 | 2 | app.controller("ImageOverlayController", [ "$scope", "$log", "leafletData", "leafletBoundsHelpers", function($scope, $log, leafletData, leafletBoundsHelpers) { 3 | var maxBounds = leafletBoundsHelpers.createBoundsFromArray([[-540, -960], [540, 960]]); 4 | angular.extend($scope, { 5 | defaults: { 6 | scrollWheelZoom: false, 7 | crs: 'Simple', 8 | maxZoom: 2 9 | }, 10 | center: { 11 | lat: 0, 12 | lng: 0, 13 | zoom: 0 14 | }, 15 | maxBounds: maxBounds, 16 | layers: { 17 | baselayers: { 18 | andes: { 19 | name: 'Andes', 20 | type: 'imageOverlay', 21 | url: 'examples/img/andes.jpg', 22 | bounds: [[-540, -960], [540, 960]], 23 | layerParams: { 24 | noWrap: true, 25 | attribution: 'Creative Commons image found here' 26 | } 27 | } 28 | }, 29 | } 30 | }); 31 | } ]); 32 | -------------------------------------------------------------------------------- /website/src/js/controllers/LayersSimpleController.js: -------------------------------------------------------------------------------- 1 | app.controller("LayersSimpleController", ['$scope', '$log', function($scope, $log) { 2 | $log = $log.spawn("website:LayersSimpleController"); 3 | angular.extend($scope, { 4 | center: { 5 | lat: 25.0391667, 6 | lng: 121.525, 7 | zoom: 6 8 | }, 9 | markers: { 10 | taipei: { 11 | lat: 25.0391667, 12 | lng: 121.525, 13 | } 14 | }, 15 | layers: { 16 | baselayers: { 17 | mapbox_light: { 18 | name: 'Mapbox Light', 19 | type: 'mapbox', 20 | user: 'elesdoar', 21 | key: 'citojtj9e00022iqjmdzhrdwd', 22 | apiKey: 'pk.eyJ1IjoiZWxlc2RvYXIiLCJhIjoiY2l0bmcwaDNpMDQzMTJvbDRpaTltN2dlbiJ9.KDnhRVh9St6vpQovMI7iLg' 23 | }, 24 | osm: { 25 | name: 'OpenStreetMap', 26 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 27 | type: 'xyz' 28 | } 29 | } 30 | } 31 | }); 32 | $log.debug($scope); 33 | }]); 34 | -------------------------------------------------------------------------------- /website/src/js/controllers/LegendController.js: -------------------------------------------------------------------------------- 1 | app.controller("LegendController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | amsterdam: { 5 | lat: 52.35, 6 | lng: 4.91, 7 | zoom: 12 8 | }, 9 | legend: { 10 | position: 'bottomleft', 11 | colors: [ '#ff0000', '#28c9ff', '#0000ff', '#ecf386' ], 12 | labels: [ 'National Cycle Route', 'Regional Cycle Route', 'Local Cycle Network', 'Cycleway' ] 13 | }, 14 | defaults: { 15 | tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", 16 | scrollWheelZoom: false 17 | } 18 | }); 19 | }]); 20 | -------------------------------------------------------------------------------- /website/src/js/controllers/MainController.js: -------------------------------------------------------------------------------- 1 | app.controller("MainController", [ '$scope', '$route', '$routeParams', '$location', function($scope, $route, $routeParams, $location) { 2 | 3 | $scope.$watch(function() { return $location.path(); }, function(value) { 4 | if (!value) { 5 | return; 6 | } 7 | var section = value.match(/^\/([^\/])*/); 8 | if (section.length > 0) { 9 | $scope.activeTab = section[0].replace(/^\//, ""); 10 | } 11 | }); 12 | 13 | $scope.$watch(function() { return $routeParams.example ; }, function(value) { 14 | $scope.exampleTab = $routeParams.example; 15 | }); 16 | }]); 17 | -------------------------------------------------------------------------------- /website/src/js/controllers/MarkerController.js: -------------------------------------------------------------------------------- 1 | app.controller("MarkerController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | osloCenter: { 5 | lat: 59.91, 6 | lng: 10.75, 7 | zoom: 12 8 | }, 9 | markers: { 10 | osloMarker: { 11 | lat: 59.91, 12 | lng: 10.75, 13 | message: "I want to travel here!", 14 | focus: true, 15 | draggable: false 16 | } 17 | }, 18 | defaults: { 19 | scrollWheelZoom: false 20 | } 21 | }); 22 | }]); 23 | -------------------------------------------------------------------------------- /website/src/js/controllers/MaxboundsController.js: -------------------------------------------------------------------------------- 1 | app.controller("MaxboundsController", [ '$scope', function($scope) { 2 | 3 | var regions = { 4 | london: { 5 | northEast: { 6 | lat: 51.51280224425956, 7 | lng: -0.11681556701660155 8 | }, 9 | southWest: { 10 | lat: 51.50211782162702, 11 | lng: -0.14428138732910156 12 | } 13 | }, 14 | lisbon: { 15 | southWest: { 16 | lat: 38.700247900602726, 17 | lng: -9.165430068969727 18 | }, 19 | northEast: { 20 | lat: 38.72703673982525, 21 | lng: -9.110498428344725 22 | } 23 | }, 24 | warszawa: { 25 | southWest: { 26 | lat: 52.14823737817847, 27 | lng: 20.793685913085934 28 | }, 29 | northEast: { 30 | lat: 52.31645452105213, 31 | lng: 21.233139038085938 32 | } 33 | } 34 | }; 35 | 36 | $scope.setRegion = function(region) { 37 | if (!region) { 38 | $scope.maxbounds = {}; 39 | } else { 40 | $scope.maxbounds = regions[region]; 41 | } 42 | }; 43 | 44 | angular.extend($scope, { 45 | maxbounds: regions.london, 46 | defaults: { 47 | scrollWheelZoom: false 48 | } 49 | }); 50 | }]); 51 | -------------------------------------------------------------------------------- /website/src/js/controllers/OverlaysSimpleController.js: -------------------------------------------------------------------------------- 1 | app.controller("OverlaysSimpleController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | eeuu: { 5 | lat: 39, 6 | lng: -100, 7 | zoom: 4 8 | }, 9 | layers: { 10 | baselayers: { 11 | xyz: { 12 | name: 'OpenStreetMap (XYZ)', 13 | url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 14 | type: 'xyz' 15 | } 16 | }, 17 | overlays: { 18 | wms: { 19 | name: 'EEUU States (WMS)', 20 | type: 'wms', 21 | visible: true, 22 | url: 'http://suite.opengeo.org/geoserver/usa/wms', 23 | layerParams: { 24 | layers: 'usa:states', 25 | format: 'image/png', 26 | transparent: true 27 | } 28 | } 29 | } 30 | }, 31 | defaults: { 32 | scrollWheelZoom: false 33 | } 34 | }); 35 | } ]); 36 | -------------------------------------------------------------------------------- /website/src/js/controllers/SimpleMapController.js: -------------------------------------------------------------------------------- 1 | app.controller("SimpleMapController", [ '$scope', function($scope) { 2 | 3 | angular.extend($scope, { 4 | defaults: { 5 | scrollWheelZoom: false 6 | } 7 | }); 8 | }]); 9 | -------------------------------------------------------------------------------- /website/src/js/controllers/TilesController.js: -------------------------------------------------------------------------------- 1 | app.controller("TilesController", [ '$scope', function($scope) { 2 | 3 | var tilesDict = { 4 | openstreetmap: { 5 | url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", 6 | options: { 7 | attribution: '© OpenStreetMap contributors' 8 | } 9 | }, 10 | opencyclemap: { 11 | url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", 12 | options: { 13 | attribution: 'All maps © OpenCycleMap, map data © OpenStreetMap (ODbL' 14 | } 15 | } 16 | }; 17 | 18 | angular.extend($scope, { 19 | sidney: { 20 | lat: -33.8830, 21 | lng: 151.2166, 22 | zoom: 10 23 | }, 24 | tiles: tilesDict.opencyclemap, 25 | defaults: { 26 | scrollWheelZoom: false 27 | } 28 | }); 29 | 30 | $scope.changeTiles = function(tiles) { 31 | $scope.tiles = tilesDict[tiles]; 32 | }; 33 | } ]); 34 | -------------------------------------------------------------------------------- /website/src/js/controllers/TilesZoomChangerController.js: -------------------------------------------------------------------------------- 1 | app.controller("TilesZoomChangerController", [ '$scope', function($scope) { 2 | angular.extend($scope, { 3 | cairo: { 4 | lat: 30.05, 5 | lng: 31.25, 6 | zoom: 10 7 | }, 8 | tiles: { 9 | url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 10 | }, 11 | defaults: { 12 | scrollWheelZoom: false 13 | } 14 | }); 15 | 16 | $scope.$watch("cairo.zoom", function(zoom) { 17 | $scope.tiles.url = (zoom > 12) ? "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 18 | : "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"; 19 | }); 20 | }]); 21 | --------------------------------------------------------------------------------