Skip to content

Commit d25962d

Browse files
elesdoarelesdoar
committed
feat(control): Add minimap control option
Added new minimap option to controls: - add suport for https://github.com/Norkart/Leaflet-MiniMap control - add minimap plugin as dev dependency at bower - add example 0404-controls-minimap-example.html - add support for mapbox v4 - fix tombatossals#797 issue
1 parent 615d11e commit d25962d

9 files changed

+200
-17
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@
4242
"Leaflet.ExtraMarkers": "https://github.com/coryasilva/Leaflet.ExtraMarkers/archive/v1.0.1.tar.gz",
4343
"Leaflet.fullscreen": "http://github.com/Leaflet/Leaflet.fullscreen/archive/v0.0.4.tar.gz",
4444
"Leaflet.PolylineDecorator": "bbecquet/Leaflet.PolylineDecorator",
45-
"ionrangeslider": "~1.9.3"
45+
"ionrangeslider": "~1.9.3",
46+
"leaflet-minimap": "~2.2.0"
4647
},
4748
"overrides": {
4849
"Leaflet.utfgrid": {

‎dist/angular-leaflet-directive.js‎

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -711,6 +711,12 @@ angular.module("leaflet-directive").factory('leafletHelpers', ["$q", "$log", fun
711711
}
712712
},
713713

714+
MiniMapControlPlugin: {
715+
isLoaded: function() {
716+
return angular.isDefined(L.Control.MiniMap);
717+
}
718+
},
719+
714720
AwesomeMarkersPlugin: {
715721
isLoaded: function() {
716722
return angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon);
@@ -1204,10 +1210,10 @@ angular.module("leaflet-directive")
12041210
utfgrid.on('click', function(e) {
12051211
$rootScope.$broadcast('leafletDirectiveMap.utfgridClick', e);
12061212
});
1207-
1213+
12081214
utfgrid.on('mousemove', function(e) {
12091215
$rootScope.$broadcast('leafletDirectiveMap.utfgridMousemove', e);
1210-
});
1216+
});
12111217

12121218
return utfgrid;
12131219
};
@@ -1222,7 +1228,13 @@ angular.module("leaflet-directive")
12221228
mapbox: {
12231229
mustHaveKey: true,
12241230
createLayer: function(params) {
1225-
var url = '//{s}.tiles.mapbox.com/v3/' + params.key + '/{z}/{x}/{y}.png';
1231+
var version = 3;
1232+
if(isDefined(params.options.version) && params.options.version === 4) {
1233+
version = params.options.version;
1234+
}
1235+
var url = version === 3?
1236+
'//{s}.tiles.mapbox.com/v3/' + params.key + '/{z}/{x}/{y}.png':
1237+
'//api.tiles.mapbox.com/v4/' + params.key + '/{z}/{x}/{y}.png?access_token=' + params.apiKey;
12261238
return L.tileLayer(url, params.options);
12271239
}
12281240
},
@@ -1522,6 +1534,7 @@ angular.module("leaflet-directive")
15221534
type: layerDefinition.layerType,
15231535
bounds: layerDefinition.bounds,
15241536
key: layerDefinition.key,
1537+
apiKey: layerDefinition.apiKey,
15251538
pluginOptions: layerDefinition.pluginOptions,
15261539
user: layerDefinition.user
15271540
};
@@ -2817,7 +2830,7 @@ angular.module("leaflet-directive").directive('center',
28172830
};
28182831
}]);
28192832

2820-
angular.module("leaflet-directive").directive('controls', ["$log", "leafletHelpers", function ($log, leafletHelpers) {
2833+
angular.module("leaflet-directive").directive('controls', ["$log", "leafletHelpers", "leafletLayerHelpers", function ($log, leafletHelpers, leafletLayerHelpers) {
28212834
return {
28222835
restrict: "A",
28232836
scope: false,
@@ -2830,6 +2843,7 @@ angular.module("leaflet-directive").directive('controls', ["$log", "leafletHelpe
28302843
}
28312844

28322845
var isDefined = leafletHelpers.isDefined,
2846+
createLayer = leafletLayerHelpers.createLayer,
28332847
leafletScope = controller.getLeafletScope(),
28342848
controls = leafletScope.controls;
28352849

@@ -2859,6 +2873,35 @@ angular.module("leaflet-directive").directive('controls', ["$log", "leafletHelpe
28592873
}
28602874
}
28612875

2876+
if(isDefined(controls.minimap)) {
2877+
if (leafletHelpers.MiniMapControlPlugin.isLoaded()) {
2878+
if(isDefined(controls.minimap.layer)) {
2879+
var layer = createLayer(controls.minimap.layer);
2880+
delete controls.minimap.layer;
2881+
2882+
if(isDefined(layer)) {
2883+
if(isDefined(leafletScope.center)) {
2884+
var moveend = function(/* event */) {
2885+
var minimapControl = new L.Control.MiniMap(layer, controls.minimap);
2886+
map.addControl(minimapControl);
2887+
map.off('moveend', moveend);
2888+
};
2889+
map.on('moveend', moveend);
2890+
} else {
2891+
var minimapControl = new L.Control.MiniMap(layer, controls.minimap);
2892+
map.addControl(minimapControl);
2893+
}
2894+
} else {
2895+
$log.warn('[AngularJS - Leaflet] Layer could not be created.');
2896+
}
2897+
} else {
2898+
$log.warn('[AngularJS - Leaflet] Layer option should be defined.');
2899+
}
2900+
} else {
2901+
$log.error('[AngularJS - Leaflet] Minimap plugin is not loaded.');
2902+
}
2903+
}
2904+
28622905
if (isDefined(controls.custom)) {
28632906
for(var i in controls.custom) {
28642907
map.addControl(controls.custom[i]);

‎dist/angular-leaflet-directive.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-leaflet-directive_dev_mapped.js‎

Lines changed: 47 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-leaflet-directive_dev_mapped.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/0404-controls-minimap-example.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<script src="../bower_components/angular/angular.min.js"></script>
6+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
7+
<script src="../bower_components/leaflet-minimap/dist/Control.MiniMap.min.js"></script>
8+
<script src="../dist/angular-leaflet-directive.min.js"></script>
9+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
10+
<link rel="stylesheet" href="../bower_components/leaflet-minimap/dist/Control.MiniMap.min.css" />
11+
12+
<script>
13+
var app = angular.module("demoapp", ["leaflet-directive"]);
14+
app.controller("ControlsMinimapController", [ "$scope", function($scope) {
15+
angular.extend($scope, {
16+
bogota: {
17+
lat: 4.649,
18+
lng: -74.086,
19+
zoom: 5
20+
},
21+
tiles: {
22+
name: 'Mapbox Comic',
23+
url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
24+
type: 'xyz',
25+
options: {
26+
apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
27+
mapid: 'bufanuvols.lpa06kfg'
28+
}
29+
},
30+
controls: {
31+
minimap: {
32+
layer: {
33+
name: 'Mapbox Comic',
34+
key: 'bufanuvols.lpa06kfg',
35+
apiKey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
36+
type: 'mapbox',
37+
layerParams: {
38+
version: 4
39+
}
40+
},
41+
toggleDisplay: true
42+
}
43+
}
44+
});
45+
}]);
46+
</script>
47+
</head>
48+
<body ng-controller="ControlsMinimapController">
49+
<leaflet center="bogota" controls="controls" tiles="tiles" width="100%" height="480px"></leaflet>
50+
<h1>Minimap control example</h1>
51+
<p>Minimap control with the <a href="https://github.com/Norkart/Leaflet-MiniMap">Leaflet minimap</a> plugin.</p>
52+
</body>
53+
</html>

‎src/directives/controls.js‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module("leaflet-directive").directive('controls', function ($log, leafletHelpers) {
1+
angular.module("leaflet-directive").directive('controls', function ($log, leafletHelpers, leafletLayerHelpers) {
22
return {
33
restrict: "A",
44
scope: false,
@@ -11,6 +11,7 @@ angular.module("leaflet-directive").directive('controls', function ($log, leafle
1111
}
1212

1313
var isDefined = leafletHelpers.isDefined,
14+
createLayer = leafletLayerHelpers.createLayer,
1415
leafletScope = controller.getLeafletScope(),
1516
controls = leafletScope.controls;
1617

@@ -40,6 +41,35 @@ angular.module("leaflet-directive").directive('controls', function ($log, leafle
4041
}
4142
}
4243

44+
if(isDefined(controls.minimap)) {
45+
if (leafletHelpers.MiniMapControlPlugin.isLoaded()) {
46+
if(isDefined(controls.minimap.layer)) {
47+
var layer = createLayer(controls.minimap.layer);
48+
delete controls.minimap.layer;
49+
50+
if(isDefined(layer)) {
51+
if(isDefined(leafletScope.center)) {
52+
var moveend = function(/* event */) {
53+
var minimapControl = new L.Control.MiniMap(layer, controls.minimap);
54+
map.addControl(minimapControl);
55+
map.off('moveend', moveend);
56+
};
57+
map.on('moveend', moveend);
58+
} else {
59+
var minimapControl = new L.Control.MiniMap(layer, controls.minimap);
60+
map.addControl(minimapControl);
61+
}
62+
} else {
63+
$log.warn('[AngularJS - Leaflet] Layer could not be created.');
64+
}
65+
} else {
66+
$log.warn('[AngularJS - Leaflet] Layer option should be defined.');
67+
}
68+
} else {
69+
$log.error('[AngularJS - Leaflet] Minimap plugin is not loaded.');
70+
}
71+
}
72+
4373
if (isDefined(controls.custom)) {
4474
for(var i in controls.custom) {
4575
map.addControl(controls.custom[i]);

‎src/services/leafletHelpers.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,12 @@ angular.module("leaflet-directive").factory('leafletHelpers', function ($q, $log
198198
}
199199
},
200200

201+
MiniMapControlPlugin: {
202+
isLoaded: function() {
203+
return angular.isDefined(L.Control.MiniMap);
204+
}
205+
},
206+
201207
AwesomeMarkersPlugin: {
202208
isLoaded: function() {
203209
return angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon);

‎src/services/leafletLayerHelpers.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ angular.module("leaflet-directive")
2525
utfgrid.on('click', function(e) {
2626
$rootScope.$broadcast('leafletDirectiveMap.utfgridClick', e);
2727
});
28-
28+
2929
utfgrid.on('mousemove', function(e) {
3030
$rootScope.$broadcast('leafletDirectiveMap.utfgridMousemove', e);
31-
});
31+
});
3232

3333
return utfgrid;
3434
};
@@ -43,7 +43,13 @@ angular.module("leaflet-directive")
4343
mapbox: {
4444
mustHaveKey: true,
4545
createLayer: function(params) {
46-
var url = '//{s}.tiles.mapbox.com/v3/' + params.key + '/{z}/{x}/{y}.png';
46+
var version = 3;
47+
if(isDefined(params.options.version) && params.options.version === 4) {
48+
version = params.options.version;
49+
}
50+
var url = version === 3?
51+
'//{s}.tiles.mapbox.com/v3/' + params.key + '/{z}/{x}/{y}.png':
52+
'//api.tiles.mapbox.com/v4/' + params.key + '/{z}/{x}/{y}.png?access_token=' + params.apiKey;
4753
return L.tileLayer(url, params.options);
4854
}
4955
},
@@ -343,6 +349,7 @@ angular.module("leaflet-directive")
343349
type: layerDefinition.layerType,
344350
bounds: layerDefinition.bounds,
345351
key: layerDefinition.key,
352+
apiKey: layerDefinition.apiKey,
346353
pluginOptions: layerDefinition.pluginOptions,
347354
user: layerDefinition.user
348355
};

0 commit comments

Comments
 (0)