Skip to content

Commit bceff46

Browse files
tombatossalstombatossals
committed
feat(examples): New bootstrap-ui integration with modal and a map with marker-clustering. Example by @Getz85 here:
#591
1 parent 3f2d10a commit bceff46

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎examples/markers-modal.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html ng-app="leafletMarkersApp">
3+
<head>
4+
<script src="../bower_components/angular/angular.min.js"></script>
5+
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
6+
<script src="../dist/angular-leaflet-directive.min.js"></script>
7+
<script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
8+
<script src="../bower_components/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"></script>
9+
<script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-animate.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>
13+
<script src="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.js"></script>
14+
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
15+
<link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
16+
<link rel="stylesheet" href="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.css">
17+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
18+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
19+
<link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.css" />
20+
<link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />
21+
<script>
22+
var app = angular.module('leafletMarkersApp', ['ui.bootstrap', 'ngAnimate', 'leaflet-directive']);
23+
24+
app.controller("leafletMarkerController", ['$scope', '$filter', '$modal', function ($scope, $filter, $modal) {
25+
$scope.openMap = function () {
26+
var modalInstance = $modal.open({
27+
templateUrl: 'modalmap.html',
28+
controller: 'modalMapController',
29+
windowClass: 'modal-map'
30+
});
31+
};
32+
}]);
33+
34+
app.controller("modalMapController", ['$scope', '$modalInstance', 'leafletData', function ($scope, $modalInstance, leafletData) {
35+
$scope.oneAtATime = false;
36+
$scope.cancel = function () {
37+
$modalInstance.dismiss('cancel');
38+
};
39+
40+
var markers = [];
41+
markers.push({
42+
lat: 52.229676,
43+
lng: 21.012229,
44+
draggable: false,
45+
group: 'markers'
46+
});
47+
markers.push({
48+
lat: 52.219081,
49+
lng: 21.025386,
50+
draggable: false,
51+
group: 'markers'
52+
});
53+
54+
55+
angular.extend($scope, {
56+
defaults: {
57+
maxZoom: 18,
58+
minZoom: 0
59+
},
60+
layers: {
61+
baselayers: {
62+
osm: {
63+
name: 'OpenStreetMap',
64+
type: 'xyz',
65+
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
66+
layerOptions: {
67+
subdomains: ['a', 'b', 'c'],
68+
attribution: '© OpenStreetMap contributors',
69+
continuousWorld: true
70+
}
71+
}
72+
}
73+
},
74+
center: {
75+
zoom: 10,
76+
lat: 52.229676,
77+
lng: 21.012229
78+
},
79+
markers: markers
80+
});
81+
82+
}]);
83+
</script>
84+
<style>
85+
body {
86+
margin: 10px;
87+
}
88+
89+
.global-map{
90+
height: 300px;
91+
}
92+
93+
.global-map > div:first-child{
94+
height: 100%;
95+
}
96+
97+
ol{
98+
list-style:decimal;
99+
margin-left:50px;
100+
}
101+
</style>
102+
</head>
103+
<body>
104+
<div class="container" ng-app="leafletMarkersApp">
105+
<div class="jumbotron" ng-controller="leafletMarkerController">
106+
<p>Open the modal twice:
107+
<ol>
108+
<li>Markers are present</li>
109+
<li>Markers are absent</li>
110+
</ol>
111+
</p>
112+
<p><a class="btn btn-lg btn-primary" href="#fork" ng-click="openMap()">Open the map</a>
113+
114+
</p>
115+
</div>
116+
<script type="text/ng-template" id="modalmap.html">
117+
<div class="modal-header">
118+
<button type="button" class="close" ng-click="cancel()">
119+
x
120+
</button>
121+
</div>
122+
<div class="modal-body global-map">
123+
<leaflet defaults="defaults" center="center" markers="markers" layers="layers" id="global-map"></leaflet > </div>
124+
</script>
125+
</div>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)