Skip to content

Commit c33a714

Browse files
tombatossalstombatossals
committed
Merge pull request tombatossals#533 from mvsouza/master
Multiple maps with distinct distinct layers and markers
2 parents 057bb3f + e5fdf8d commit c33a714

File tree

4 files changed

+214
-20
lines changed

4 files changed

+214
-20
lines changed

‎dist/angular-leaflet-directive.js

+7-9
Original file line numberDiff line numberDiff line change
@@ -544,20 +544,18 @@ angular.module("leaflet-directive").directive('geojson', ["$log", "$rootScope",
544544
}]);
545545

546546
angular.module("leaflet-directive").directive('layers', ["$log", "$q", "leafletData", "leafletHelpers", "leafletLayerHelpers", "leafletControlHelpers", function ($log, $q, leafletData, leafletHelpers, leafletLayerHelpers, leafletControlHelpers) {
547-
var _leafletLayers;
548-
549547
return {
550548
restrict: "A",
551549
scope: false,
552550
replace: false,
553551
require: 'leaflet',
554-
controller: function () {
555-
_leafletLayers = $q.defer();
556-
this.getLayers = function() {
557-
return _leafletLayers.promise;
552+
controller: ["$scope", function ($scope) {
553+
$scope._leafletLayers = $q.defer();
554+
this.getLayers = function () {
555+
return $scope._leafletLayers.promise;
558556
};
559-
},
560-
link: function(scope, element, attrs, controller) {
557+
}],
558+
link: function(scope, element, attrs, controller){
561559
var isDefined = leafletHelpers.isDefined,
562560
leafletLayers = {},
563561
leafletScope = controller.getLeafletScope(),
@@ -575,7 +573,7 @@ angular.module("leaflet-directive").directive('layers', ["$log", "$q", "leafletD
575573
}
576574

577575
// We have baselayers to add to the map
578-
_leafletLayers.resolve(leafletLayers);
576+
scope._leafletLayers.resolve(leafletLayers);
579577
leafletData.setLayers(leafletLayers, attrs.id);
580578

581579
leafletLayers.baselayers = {};

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

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/directives/layers.js

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
angular.module("leaflet-directive").directive('layers', function ($log, $q, leafletData, leafletHelpers, leafletLayerHelpers, leafletControlHelpers) {
2-
var _leafletLayers;
3-
42
return {
53
restrict: "A",
64
scope: false,
75
replace: false,
86
require: 'leaflet',
9-
controller: function () {
10-
_leafletLayers = $q.defer();
11-
this.getLayers = function() {
12-
return _leafletLayers.promise;
7+
controller: function ($scope) {
8+
$scope._leafletLayers = $q.defer();
9+
this.getLayers = function () {
10+
return $scope._leafletLayers.promise;
1311
};
1412
},
15-
link: function(scope, element, attrs, controller) {
13+
link: function(scope, element, attrs, controller){
1614
var isDefined = leafletHelpers.isDefined,
1715
leafletLayers = {},
1816
leafletScope = controller.getLeafletScope(),
@@ -30,7 +28,7 @@ angular.module("leaflet-directive").directive('layers', function ($log, $q, leaf
3028
}
3129

3230
// We have baselayers to add to the map
33-
_leafletLayers.resolve(leafletLayers);
31+
scope._leafletLayers.resolve(leafletLayers);
3432
leafletData.setLayers(leafletLayers, attrs.id);
3533

3634
leafletLayers.baselayers = {};

‎test/unit/layersDirectiveSpec.js

+198
Original file line numberDiff line numberDiff line change
@@ -1504,4 +1504,202 @@ describe('Directive: leaflet', function() {
15041504
expect(Object.keys(paths).length).toEqual(0);
15051505
});
15061506
});
1507+
1508+
it('should have two maps with distinct layers', function() {
1509+
var scope2 = $rootScope.$new();
1510+
angular.extend(scope, {
1511+
layers1: {
1512+
baselayers: {
1513+
osm: {
1514+
name: 'OpenStreetMap2',
1515+
type: 'xyz',
1516+
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
1517+
layerOptions: {
1518+
subdomains: ['a', 'b', 'c'],
1519+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
1520+
continuousWorld: true
1521+
}
1522+
}
1523+
},
1524+
overlays: {
1525+
shapes1: {
1526+
name: 'shapes1',
1527+
type: 'group',
1528+
visible: true
1529+
}
1530+
}
1531+
},
1532+
markers1: {
1533+
m1: {
1534+
lat: 1.2,
1535+
lng: 0.3,
1536+
layer: 'shapes1'
1537+
}
1538+
}
1539+
});
1540+
angular.extend(scope2, {
1541+
layers2:
1542+
{
1543+
baselayers: {
1544+
osm: {
1545+
name: 'OpenStreetMap2',
1546+
type: 'xyz',
1547+
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
1548+
layerOptions: {
1549+
subdomains: ['a', 'b', 'c'],
1550+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
1551+
continuousWorld: true
1552+
}
1553+
}
1554+
},
1555+
overlays: {
1556+
shapes2: {
1557+
name: 'shapes2',
1558+
type: 'group',
1559+
visible: true
1560+
}
1561+
}
1562+
},
1563+
markers2: {
1564+
m1: {
1565+
lat: 1.2,
1566+
lng: 0.3,
1567+
layer: 'shapes2'
1568+
}
1569+
}
1570+
});
1571+
1572+
var elements = [];
1573+
elements.push(angular.element('<leaflet id="map1" layers="layers1" markers="markers1"></leaflet>'));
1574+
elements.push(angular.element('<leaflet id="map2" layers="layers2" markers="markers2"></leaflet>'));
1575+
1576+
var ctrl = [];
1577+
ctrl.push($compile(elements[0])(scope));
1578+
ctrl.push($compile(elements[1])(scope2));
1579+
scope.$digest();
1580+
scope2.$digest();
1581+
1582+
leafletData.getMap("map1").then(function(map) {
1583+
leafletData.getLayers("map1").then(function(layers) {
1584+
expect(map.hasLayer(layers.overlays.shapes2)).toBe(false);
1585+
expect(map.hasLayer(layers.overlays.shapes1)).toBe(true);
1586+
});
1587+
});
1588+
1589+
leafletData.getMap("map2").then(function(map) {
1590+
leafletData.getLayers("map2").then(function(layers) {
1591+
expect(map.hasLayer(layers.overlays.shapes1)).toBe(false);
1592+
expect(map.hasLayer(layers.overlays.shapes2)).toBe(true);
1593+
});
1594+
});
1595+
1596+
});
1597+
it('should have two maps with distinct markers', function() {
1598+
var scope2 = $rootScope.$new();
1599+
angular.extend(scope, {
1600+
layers1: {
1601+
baselayers: {
1602+
osm: {
1603+
name: 'OpenStreetMap2',
1604+
type: 'xyz',
1605+
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
1606+
layerOptions: {
1607+
subdomains: ['a', 'b', 'c'],
1608+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
1609+
continuousWorld: true
1610+
}
1611+
}
1612+
},
1613+
overlays: {
1614+
layer1: {
1615+
name: 'layer1',
1616+
type: 'group',
1617+
visible: true
1618+
}
1619+
}
1620+
},
1621+
markers1: {
1622+
m1: {
1623+
lat: 1.2,
1624+
lng: 0.3,
1625+
layer: 'layer1'
1626+
}
1627+
}
1628+
});
1629+
angular.extend(scope2, {
1630+
layers2:
1631+
{
1632+
baselayers: {
1633+
osm: {
1634+
name: 'OpenStreetMap2',
1635+
type: 'xyz',
1636+
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
1637+
layerOptions: {
1638+
subdomains: ['a', 'b', 'c'],
1639+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
1640+
continuousWorld: true
1641+
}
1642+
}
1643+
},
1644+
overlays: {
1645+
layer2: {
1646+
name: 'layer2',
1647+
type: 'group',
1648+
visible: true
1649+
}
1650+
}
1651+
},
1652+
markers2: {
1653+
m2: {
1654+
lat: 1.2,
1655+
lng: 0.3,
1656+
layer: 'layer2'
1657+
}
1658+
}
1659+
});
1660+
1661+
var elements = [];
1662+
elements.push(angular.element('<leaflet id="map1" layers="layers1" markers="markers1"></leaflet>'));
1663+
elements.push(angular.element('<leaflet id="map2" layers="layers2" markers="markers2"></leaflet>'));
1664+
1665+
var ctrl = [];
1666+
ctrl.push($compile(elements[0])(scope));
1667+
ctrl.push($compile(elements[1])(scope2));
1668+
scope.$digest();
1669+
scope2.$digest();
1670+
1671+
leafletData.getMap("map1").then(function(map) {
1672+
var markers;
1673+
leafletData.getMarkers("map1").then(function(leafletMarkers) {
1674+
markers = leafletMarkers;
1675+
});
1676+
1677+
leafletData.getLayers("map1").then(function(layers) {
1678+
expect(Object.keys(markers).length).toEqual(1);
1679+
expect(markers.m1 instanceof L.Marker).toBe(true);
1680+
expect(markers.m2 instanceof L.Marker).toBe(false);
1681+
expect(layers.overlays.layer1 instanceof L.LayerGroup).toBe(true);
1682+
1683+
expect(layers.overlays.layer1.hasLayer(markers.m1)).toBe(true);
1684+
expect(map.hasLayer(markers.m1)).toBe(true);
1685+
});
1686+
});
1687+
1688+
leafletData.getMap("map2").then(function(map) {
1689+
var markers;
1690+
leafletData.getMarkers("map2").then(function(leafletMarkers) {
1691+
markers = leafletMarkers;
1692+
});
1693+
leafletData.getLayers("map2").then(function(layers) {
1694+
expect(Object.keys(markers).length).toEqual(1);
1695+
expect(markers.m1 instanceof L.Marker).toBe(false);
1696+
expect(markers.m2 instanceof L.Marker).toBe(true);
1697+
1698+
expect(layers.overlays.layer2 instanceof L.LayerGroup).toBe(true);
1699+
expect(layers.overlays.layer2.hasLayer(markers.m2)).toBe(true);
1700+
expect(map.hasLayer(markers.m2)).toBe(true);
1701+
});
1702+
});
1703+
});
1704+
15071705
});

0 commit comments

Comments
 (0)