mohsen-angular-leaflet-directive
Version:
angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
1,252 lines (1,251 loc) • 197 kB
JavaScript
(function(angular){
var app = angular.module('webapp');
app.controller("BasicAccessLeafletObjectController", [ "$scope", "leafletLogger", "leafletData", function($scope, leafletLogger, leafletData) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
});
$scope.fitBounds = function() {
leafletData.getMap().then(function(map) {
map.fitBounds([ [40.712, -74.227], [40.774, -74.125] ]);
});
};
}]);
app.controller("BasicBoundsController", [ "$scope", "leafletData", "leafletBoundsHelpers", function($scope, leafletData, leafletBoundsHelpers) {
var bounds = leafletBoundsHelpers.createBoundsFromArray([
[ 51.508742458803326, -0.087890625 ],
[ 51.508742458803326, -0.087890625 ]
]);
angular.extend($scope, {
bounds: bounds,
center: {}
});
}]);
app.controller('BasicBoundsNominatimController', [ '$scope', function($scope) {
angular.extend($scope, {
bounds: {
address: 'Bath, UK'
}
});
}]);
app.controller('BasicCenterAutodiscoverController', [ '$scope', function($scope) {
angular.extend($scope, {
center: {
autoDiscover: true
}
});
}]);
app.controller('BasicCenterController', [ '$scope', function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
});
}]);
app.controller('BasicCenterGeoIPController', [ '$scope', '$http', function($scope, $http) {
angular.extend($scope, {
center: {
lat: 0,
lng: 0,
zoom: 2
}
});
$scope.searchIP = function(ip) {
var url = "http://freegeoip.net/json/" + ip;
$http.get(url).success(function(res) {
$scope.center = {
lat: res.latitude,
lng: res.longitude,
zoom: 10
};
$scope.ip = res.ip;
});
};
$scope.searchIP("");
}]);
app.controller('BasicCenterUrlHashController', [ '$scope', '$location', function($scope, $location) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
});
$scope.$on("centerUrlHash", function(event, centerHash) {
console.log("url", centerHash);
$location.search({ c: centerHash });
});
$scope.changeLocation = function(centerHash) {
$location.search({ c: centerHash });
};
}]);
app.controller('BasicCustomParametersController', [ '$scope', function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 8
},
defaults: {
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
zoomControlPosition: 'topright',
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
},
scrollWheelZoom: false
}
});
}]);
app.controller("BasicDoubleMapAccessMapObjectController", [ "$scope", "leafletLogger", "leafletData", function($scope, leafletLogger, leafletData) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 4
},
markers: {
london: {
lat: 51.505,
lng: -0.09,
draggable: true
}
},
defaults: {
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
}
});
$scope.logLeafletData = function(name) {
leafletData.getMap(name).then(function(map) {
leafletLogger.info(map);
});
};
}]);
app.controller("BasicDoubleMapEventsController", [ "$scope", "leafletLogger", "leafletData", "leafletEvents", function($scope, leafletLogger, leafletData, leafletEvents) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 4
},
markers: {
london: {
lat: 51.505,
lng: -0.09,
draggable: true
}
},
defaults: {
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
}
});
$scope.events = {
map: {
enable: leafletEvents.getAvailableMapEvents(),
logic: 'emit'
}
};
var mapEvents = leafletEvents.getAvailableMapEvents();
for (var k in mapEvents) {
var eventName = 'leafletDirectiveMap.' + mapEvents[k];
$scope.$on(eventName, function(event){
$scope.eventDetected = event.name;
});
}
angular.extend($scope, {
spain: {
lat: 40.095,
lng: -3.823,
zoom: 4
},
markers2: {
spain: {
lat: 51.505,
lng: -0.09,
draggable: true
}
},
defaults: {
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
}
});
$scope.events2 = {
map: {
enable: ['click', 'dblclick'],
logic: 'emit'
}
};
var mapEvents2 = $scope.events2.map.enable;
for (var j in mapEvents2) {
var eventName2 = 'leafletDirectiveMap.' + mapEvents[j];
$scope.$on(eventName2, function(event){
$scope.eventDetected2 = event.name;
});
}
}]);
app.controller("BasicDoubleMapSharingAttributesController", [ "$scope", "leafletLogger", "$http", "leafletData", function($scope, leafletLogger, $http, leafletData) {
angular.extend($scope, {
center: {
lat: 43.7350,
lng: -79.3734,
zoom: 11
},
defaults: {
scrollWheelZoom: false
},
markers1: {
one: {
lat: 43.75,
lng: -79.56
},
two: {
lat: 43.76,
lng: -79.50
}
},
markers2: {
one: {
lat: 43.75,
lng: -79.56
},
two: {
lat: 43.75,
lng: -79.45
},
three: {
lat: 43.81,
lng: -79.26
}
}
});
$http.get('json/toronto1.json').success(function(data, status) {
$scope.toronto1 = data;
});
$http.get('json/toronto2.json').success(function(data, status) {
$scope.toronto2 = data;
});
}]);
app.controller("BasicDoubleMapToggleController", [ "$scope", "leafletLogger", "leafletData", function($scope, leafletLogger, leafletData) {
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 5
},
paths: {
p1: {
color: 'blue',
weight: 8,
latlngs: [{
lat: 51.50,
lng: -0.082
}, {
lat: 48.83,
lng: 2.37
}, {
lat: 41.91,
lng: 12.48
}]
}
},
});
angular.extend($scope, {
center2: {
lat: 51.505,
lng: -0.09,
zoom: 5
},
tiles2: {
name: 'Mapbox Outdoors',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
options: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lia3no0m'
}
},
paths2: {
p1: {
color: 'red',
weight: 8,
latlngs: [{
lat: 51.50,
lng: -0.082
}, {
lat: 48.83,
lng: 2.37
}, {
lat: 41.91,
lng: 12.48
}]
}
},
});
}]);
app.config(function ($routeProvider) {
$routeProvider.when('/map', {
template: '<leaflet width="100%" height="480px"></leaflet>',
controller: 'BasicDynamicAddRemoveMapExample'
});
});
app.controller('BasicDynamicAddRemoveMapExample', [ '$scope', 'leafletData', function($scope, leafletData) {
} ]);
app.controller("BasicEventsController", [ "$scope", "leafletMapEvents", function($scope, leafletMapEvents) {
$scope.center = {
lat: 51.505,
lng: -0.09,
zoom: 8
};
$scope.eventDetected = "No events yet...";
var mapEvents = leafletMapEvents.getAvailableMapEvents();
for (var k in mapEvents){
var eventName = 'leafletDirectiveMap.' + mapEvents[k];
$scope.$on(eventName, function(event){
$scope.eventDetected = event.name;
});
}
}]);
app.controller("BasicFirstController", [ "$scope", function($scope) {
// Nothing here!
}]);
app.controller("BasicGeoJSONUpdateController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
angular.extend($scope, {
center: {
lat: 31.99,
lng: -33.43,
zoom: 3
},
geojson : {
data: {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-49.92187499999999,
13.239945499286312
],
[
-49.92187499999999,
54.57206165565852
],
[
-13.7109375,
54.57206165565852
],
[
-13.7109375,
13.239945499286312
],
[
-49.92187499999999,
13.239945499286312
]
]
]
}
}
]
},
style: {
fillColor: "green",
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
});
$scope.updateGeojson = function() {
$scope.geojson.data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-41.8359375,
28.92163128242129
],
[
-41.8359375,
38.272688535980976
],
[
-26.015625,
38.272688535980976
],
[
-26.015625,
28.92163128242129
],
[
-41.8359375,
28.92163128242129
]
]
]
}
}
]
};
}
}]);
app.controller('BasicHideShowMapController', function($scope, $timeout, leafletData) {
$scope.center = {
lat: 35,
lng: 0,
zoom: 8
};
$scope.showMap = false;
$scope.$watch("showMap", function(value) {
if (value === true) {
leafletData.getMap().then(function(map) {
$timeout(function() {
map.invalidateSize();
}, 300);
});
}
});
});
app.controller('BasicLegendController', [ '$scope', function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 12
},
legend: {
position: 'bottomleft',
colors: [ '#ff0000', '#28c9ff', '#0000ff', '#ecf386' ],
labels: [ 'National Cycle Route', 'Regional Cycle Route', 'Local Cycle Network', 'Cycleway' ]
},
defaults: {
tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
}
});
} ]);
app.controller('BasicMapWithoutAnimationsController', [ '$scope', function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 8
},
defaults: {
zoomAnimation: false,
markerZoomAnimation: false,
fadeAnimation: false
},
markers: {
london: {
lat: 51.505,
lng: -0.09,
}
}
});
} ]);
app.controller("BasicMaxBoundsController", [ "$scope", "leafletData", function($scope, leafletData) {
$scope.regions = {
london: {
northEast: {
lat: 51.51280224425956,
lng: -0.11681556701660155
},
southWest: {
lat: 51.50211782162702,
lng: -0.14428138732910156
}
},
lisbon: {
southWest: {
lat: 38.700247900602726,
lng: -9.165430068969727
},
northEast: {
lat: 38.72703673982525,
lng: -9.110498428344725
}
},
warszawa: {
southWest: {
lat: 52.14823737817847,
lng: 20.793685913085934
},
northEast: {
lat: 52.31645452105213,
lng: 21.233139038085938
}
}
};
angular.extend($scope, {
maxbounds: $scope.regions.london
});
} ]);
app.controller("BasicMaxBoundsPadController", ["$scope", "leafletBoundsHelpers", function($scope, leafletBoundsHelpers) {
var maxbounds = leafletBoundsHelpers.createBoundsFromArray([
[37.8866, -79.4877],
[39.7230, -74.9863]
]);
maxbounds.pad = 1.0;
angular.extend($scope, {
bounds: maxbounds,
center: {
lat: 37.8866,
lng: -79-4877,
zoom: 4
},
layers: {
baselayers: {
xyz: {
name: 'OpenStreetMap (XYZ)',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
overlays: {}
},
markers: {
northeast: {
lat: 39.7230,
lng: -74.9863,
focus: true,
title: "Northeast",
},
southwest: {
lat: 37.8866,
lng: -79.4877,
title: "Southwest",
}
},
maxbounds: maxbounds
});
}]);
app.controller('BasicTilesController', [ '$scope', function($scope) {
var tilesDict = {
openstreetmap: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
options: {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
},
opencyclemap: {
url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
options: {
attribution: 'All maps © <a href="http://www.opencyclemap.org">OpenCycleMap</a>, map data © <a href="http://www.openstreetmap.org">OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright">ODbL</a>'
}
},
mapbox_outdoors: {
name: 'Mapbox Outdoors',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
options: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lia3no0m'
}
},
mapbox_wheat: {
name: 'Mapbox Wheat Paste',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
options: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lia35jfp'
}
}
};
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 8
},
tiles: tilesDict.mapbox_wheat
});
$scope.changeTiles = function(tiles) {
$scope.tiles = tilesDict[tiles];
};
} ]);
app.controller('BasicTilesWMSController', [ '$scope', function($scope) {
var tilesDict = {
openstreetmap: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
options: {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
},
standard: {
name: 'MAP Standard',
type: 'wms',
url: 'https://api.minu.mn/wms',
layerParams: {
layers: 'mongolid:mimap',
format: 'image/png',
transparent: true,
tiled: true,
version: '1.3.0',
maxZoom: 19
}
},
blue: {
name: 'MAP Blue',
type: 'wms',
url: 'https://api.minu.mn/wms',
layerParams: {
layers: 'mongolid:mimap_blue', // it's published not yet.
format: 'image/png',
transparent: true,
tiled: true,
version: '1.3.0',
maxZoom: 19
}
}
};
angular.extend($scope, {
ulaanbaatar: {
lat: 47.918464,
lng: 106.917678,
zoom: 5
},
tiles: tilesDict.openstreetmap
});
$scope.changeTiles = function(tiles) {
$scope.tiles = tilesDict[tiles];
};
} ]);
app.controller('BasicTilesZoomChangerController', [ "$scope", function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 10
},
tiles: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
}
});
$scope.$watch("london.zoom", function(zoom) {
$scope.tiles.url = (zoom > 12)
? "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
});
} ]);
app.controller("ControlsCustomController", [ "$scope", function($scope) {
angular.extend($scope, {
london: {
lat: 37.8,
lng: -96,
zoom: 5
},
tiles: {
name: 'Mapbox Comic',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
options: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lpa06kfg'
}
},
controls: {
custom: new L.Control.Fullscreen()
}
});
}]);
app.controller("ControlsCustomLayerControlController", [ "$scope", function($scope) {
angular.extend($scope, {
layercontrol: {
icons: {
uncheck: "fa fa-toggle-off",
check: "fa fa-toggle-on"
}
},
madrid: {
lat: 40.415363,
lng: -3.707398,
zoom: 11
},
markers: {
m1: {
lat: 42.20133,
lng: 2.19110
}
},
layers: {
baselayers: {
osm: {
name: "OpenStreetMap",
type: "xyz",
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
layerOptions: {
subdomains: ["a", "b", "c"],
attribution: "© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
},
cycle: {
name: "OpenCycleMap",
type: "xyz",
url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
layerOptions: {
subdomains: ["a", "b", "c"],
attribution: "© <a href=\"http://www.opencyclemap.org/copyright\">OpenCycleMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
}
}
},
overlays: {
hillshade: {
name: "Hillshade Europa",
type: "wms",
url: "http://129.206.228.72/cached/hillshade",
visible: true,
layerOptions: {
layers: "europe_wms:hs_srtm_europa",
format: "image/png",
opacity: 0.25,
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
},
group: "Raster"
},
fire: {
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
},
em: {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
}
}
},
removeFireLayer: function() {
delete this.layers.overlays.fire;
},
addFireLayer: function() {
this.layers.overlays.fire = {
name: "Fire Stations",
type: "xyz",
url: "http://openfiremap.org/hytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
};
},
existsFireLayer: function() {
return ("fire" in this.layers.overlays);
},
removeEmergencyRooms: function() {
delete this.layers.overlays.em;
},
addEmergencyRooms: function() {
this.layers.overlays.em = {
name: "Emergency Rooms",
type: "xyz",
url: "http://openfiremap.org/eytiles/{z}/{x}/{y}.png",
layerOptions: {
attribution: "© <a href=\"http://www.openfiremap.org\">OpenFireMap</a> contributors - © <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
continuousWorld: true
},
group: "Open Fire Map"
};
},
existsEmergencyRooms: function() {
return ("em" in this.layers.overlays);
},
removeHillshadeLayer: function() {
delete this.layers.overlays.hillshade;
},
addHillshadeLayer: function() {
this.layers.overlays.hillshade = {
name: "Hillshade Europa",
type: "wms",
url: "http://129.206.228.72/cached/hillshade",
visible: true,
layerOptions: {
layers: "europe_wms:hs_srtm_europa",
format: "image/png",
opacity: 0.25,
attribution: "Hillshade layer by GIScience http://www.osm-wms.de",
crs: L.CRS.EPSG900913
},
group: "Raster"
};
},
existsHillshadeLayer: function() {
return ("hillshade" in this.layers.overlays);
}
});
} ]);
app.controller("ControlsDrawController", [ "$scope", "leafletData", function($scope, leafletData) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 4
},
controls: {
draw: {}
},
layers: {
baselayers: {
mapbox_light: {
name: 'Mapbox Light',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
layerOptions: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lia22g09'
},
layerParams: {
showOnSelector: false
}
}
},
overlays: {
draw: {
name: 'draw',
type: 'group',
visible: true,
layerParams: {
showOnSelector: false
}
}
}
}
});
leafletData.getMap().then(function(map) {
leafletData.getLayers().then(function(baselayers) {
var drawnItems = baselayers.overlays.draw;
map.on('draw:created', function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
console.log(JSON.stringify(layer.toGeoJSON()));
});
});
});
}]);
app.controller("ControlsFullscreenController", [ "$scope", function($scope) {
angular.extend($scope, {
london: {
lat: 37.8,
lng: -96,
zoom: 5
},
tiles: {
name: 'Mapbox Comic',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
options: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lpa06kfg'
}
},
controls: {
fullscreen: {
position: 'topleft'
}
}
});
}]);
app.controller("ControlsMinimapController", [ "$scope", "leafletData", function($scope, leafletData) {
angular.extend($scope, {
bogota: {
lat: 4.649,
lng: -74.086,
zoom: 5
},
tiles: {
name: 'Mapbox Comic',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
options: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lpa06kfg'
}
},
controls: {}
});
// Wait for center to be stablished
leafletData.getMap().then(function() {
angular.extend($scope.controls, {
minimap: {
type: 'minimap',
layer: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
},
toggleDisplay: true
}
});
});
}]);
app.controller("ControlsScaleController", [ "$scope", function($scope) {
angular.extend($scope, {
london: {
lat: 51.505,
lng: -0.09,
zoom: 4
},
controls: {
scale: true
}
});
}]);
app.controller("ControlsSearchController", [ "$scope", "leafletData", function($scope, leafletData) {
var markersData = [
{"loc":[41.575330,13.102411], "title":"aquamarine"},
{"loc":[41.575730,13.002411], "title":"black"},
{"loc":[41.807149,13.162994], "title":"blue"},
{"loc":[41.507149,13.172994], "title":"chocolate"},
{"loc":[41.847149,14.132994], "title":"coral"},
{"loc":[41.219190,13.062145], "title":"cyan"},
{"loc":[41.344190,13.242145], "title":"darkblue"},
{"loc":[41.679190,13.122145], "title":"darkred"},
{"loc":[41.329190,13.192145], "title":"darkgray"},
{"loc":[41.379290,13.122545], "title":"dodgerblue"},
{"loc":[41.409190,13.362145], "title":"gray"},
{"loc":[41.794008,12.583884], "title":"green"},
{"loc":[41.805008,12.982884], "title":"greenyellow"},
{"loc":[41.536175,13.273590], "title":"red"},
{"loc":[41.516175,13.373590], "title":"rosybrown"},
{"loc":[41.506175,13.173590], "title":"royalblue"},
{"loc":[41.836175,13.673590], "title":"salmon"},
{"loc":[41.796175,13.570590], "title":"seagreen"},
{"loc":[41.436175,13.573590], "title":"seashell"},
{"loc":[41.336175,13.973590], "title":"silver"},
{"loc":[41.236175,13.273590], "title":"skyblue"},
{"loc":[41.546175,13.473590], "title":"yellow"},
{"loc":[41.239190,13.032145], "title":"white"}
];
angular.extend($scope, {
center: {
lat: 41.575330,
lng: 13.102411,
zoom: 8
},
layers: {
baselayers: {
mapbox_light: {
name: 'Mapbox Light',
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
type: 'xyz',
layerOptions: {
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
mapid: 'bufanuvols.lia22g09'
},
layerParams: {
showOnSelector: false
}
}
},
overlays: {
search: {
name: 'search',
type: 'group',
visible: true,
layerParams: {
showOnSelector: false
}
}
}
},
controls: {},
markers: {}
});
markersData.filter(function(data) {
$scope.markers[data.title] = {
title: data.title,
lat: data.loc[0],
lng: data.loc[1],
layer: 'search',
label: {
message: data.title
}
};
});
leafletData.getLayers().then(function(baselayers) {
console.log(baselayers.overlays.search);
angular.extend($scope.controls, {
search: {
layer: baselayers.overlays.search
}
});
});
}]);
app.controller("GeoJSONCenterController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
angular.extend($scope, {
japan: {
lat: 27.26,
lng: 78.86,
zoom: 2
},
defaults: {
scrollWheelZoom: false
}
});
$scope.centerJSON = function() {
leafletData.getMap().then(function(map) {
var latlngs = [];
for (var i in $scope.geojson.data.features[0].geometry.coordinates) {
var coord = $scope.geojson.data.features[0].geometry.coordinates[i];
for (var j in coord) {
var points = coord[j];
for (var k in points) {
latlngs.push(L.GeoJSON.coordsToLatLng(points[k]));
}
}
}
map.fitBounds(latlngs);
});
};
// Get the countries geojson data from a JSON
$http.get("json/JPN.geo.json").success(function(data, status) {
angular.extend($scope, {
geojson: {
data: data,
style: {
fillColor: "green",
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
});
});
} ]);
app.controller("GeoJSONController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
angular.extend($scope, {
japan: {
lat: 38.51,
lng: 139,
zoom: 4
},
defaults: {
scrollWheelZoom: false
}
});
// Get the countries geojson data from a JSON
$http.get("json/JPN.geo.json").success(function(data, status) {
angular.extend($scope, {
geojson: {
data: data,
style: {
fillColor: "green",
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
});
});
} ]);
app.controller("GeoJSONNestedController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
leafletData.getGeoJSON().then(function(lObjs){
window.leafletDataGeoJSON = lObjs;
});
angular.extend($scope, {
japan: {
lat: 27.26,
lng: 78.86,
zoom: 2
},
defaults: {
scrollWheelZoom: false
},
geojson:{}
});
// Mouse over function, called from the Leaflet Map Events
var countryMouseover = function (feature, leafletEvent) {
var layer = leafletEvent.target;
layer.setStyle({
weight: 2,
color: '#666',
fillColor: 'white'
});
layer.bringToFront();
};
$scope.$on("leafletDirectiveGeoJson.mouseover", function(ev, leafletPayload) {
countryMouseover(leafletPayload.leafletObject.feature, leafletPayload.leafletEvent);
});
$scope.centerJSON = function(name) {
leafletData.getMap().then(function(map) {
window.leafletMap = map;
var latlngs = [];
for (var i in $scope.geojson[name].data.features[0].geometry.coordinates) {
var coord = $scope.geojson[name].data.features[0].geometry.coordinates[i];
for (var j in coord) {
var points = coord[j];
for (var k in points) {
latlngs.push(L.GeoJSON.coordsToLatLng(points[k]));
}
}
}
map.fitBounds(latlngs);
});
};
// Get the countries geojson data from a JSON
$http.get("json/JPN.geo.json").success(function(data, status) {
angular.extend($scope.geojson, {
japan: {
data: data,
resetStyleOnMouseout: true,
style: {
fillColor: "green",
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
});
});
$http.get("json/USA.geo.json").success(function(data, status) {
angular.extend($scope.geojson, {
usa:{
data: data,
resetStyleOnMouseout: true,
style: {
fillColor: "blue",
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
}
}
});
});
} ]);
app.controller("GeoJSONNonNestedController", [ '$scope', '$http', 'leafletData', function($scope, $http, leafletData) {
var getColor = function(id){
return id == 'USA'? 'blue' : 'green';
};
var getStyle = function(feature){
return {
fillColor: getColor(feature.id),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
};
var createGeoJsonObject = function (data){
return {
data: data,
style: getStyle
};
};
angular.extend($scope, {
japan: {
lat: 27.26,
lng: 78.86,
zoom: 2
},
defaults: {
scrollWheelZoom: false
},
});
$scope.centerJSON = function(index) {
leafletData.getMap().then(function(map) {
var latlngs = [];
for (var i in $scope.geojson.data.features[index].geometry.coordinates) {
var coord = $scope.geojson.data.features[index].geometry.coordinates[i];
for (var j in coord) {
var points = coord[j];
for (var k in points) {
latlngs.push(L.GeoJSON.coordsToLatLng(points[k]));
}
}
}
map.fitBounds(latlngs);
});
};
// Get the countries geojson data from a JSON
$http.get("json/JPN.geo.json").success(function(data, status) {
if(!$scope.geojson){
$scope.geojson = createGeoJsonObject(data);
}
});
$http.get("json/USA.geo.json").success(function(data, status) {
var features = $scope.geojson.data.features.concat(data.features);
var copy = angular.extend({}, $scope.geojson.data);
copy.features = features;
$scope.geojson.data = copy;
});
} ]);
app.controller("GoogleMapsController", [ "$scope", function($scope) {
angular.extend($scope, {
berlin: {
lat: 52.52,
lng: 13.40,
zoom: 14
},
markers: {
m1: {
lat: 52.52,
lng: 13.40
}
},
layers: {
baselayers: {
googleTerrain: {
name: 'Google Terrain',
layerType: 'TERRAIN',
type: 'google'
},
googleHybrid: {
name: 'Google Hybrid',
layerType: 'HYBRID',
type: 'google'
},
googleRoadmap: {
name: 'Google Streets',
layerType: 'ROADMAP',
type: 'google'
}
}
}
});
}]);
app.controller("GoogleMapsFullsizeController", [ "$scope", "$element", function($scope, $element) {
angular.extend($scope, {
berlin: {
lat: 52.52,
lng: 13.40,