Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Commit 66bc692

Browse files
tombatossalstombatossals
committed
feat(examples): Added a new paths example: paths-simple-example.html
1 parent 87f96f7 commit 66bc692

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

‎examples/paths-simple-example.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demoapp">
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+
<link rel="stylesheet" href="../bower_components/leaflet-dist/leaflet.css" />
8+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
9+
<script>
10+
angular.module("demoapp", ["leaflet-directive"]);
11+
function DemoController($scope) {
12+
var europeCapitals = {
13+
Madrid: {
14+
lat: 40.4,
15+
lng: -3.6833333
16+
},
17+
Rome: {
18+
lat: 41.9,
19+
lng: 12.4833333
20+
},
21+
London: {
22+
lat: 51.5,
23+
lng: -0.116667
24+
},
25+
Lisbon: {
26+
lat: 38.7166667,
27+
lng: -9.1333333
28+
},
29+
Berlin: {
30+
lat: 52.5166667,
31+
lng: 13.4
32+
},
33+
Paris: {
34+
lat: 48.866667,
35+
lng: 2.333333
36+
},
37+
Brussels: {
38+
lat: 50.8333,
39+
lng: 4
40+
},
41+
42+
};
43+
44+
var pathsDict = {
45+
polyline: {
46+
type: "polyline",
47+
latlngs: [ europeCapitals.London, europeCapitals.Madrid, europeCapitals.Rome ]
48+
},
49+
multiPolyline: {
50+
type: "multiPolyline",
51+
latlngs: [ [ europeCapitals.London, europeCapitals.Lisbon ], [ europeCapitals.Paris, europeCapitals.Madrid ] ]
52+
},
53+
polygon: {
54+
type: "polygon",
55+
latlngs: [ europeCapitals.London, europeCapitals.Lisbon , europeCapitals.Madrid, europeCapitals.Paris ]
56+
},
57+
multiPolygon: {
58+
type: "multiPolygon",
59+
latlngs: [
60+
[ europeCapitals.London, europeCapitals.Lisbon , europeCapitals.Madrid, europeCapitals.Paris ],
61+
[ europeCapitals.Berlin, europeCapitals.Rome, europeCapitals.Brussels ]
62+
]
63+
64+
},
65+
rectangle: {
66+
type: "rectangle",
67+
latlngs: [ europeCapitals.Berlin, europeCapitals.Lisbon ]
68+
},
69+
circle: {
70+
type: "circle",
71+
radius: 500 * 1000,
72+
latlngs: europeCapitals.Brussels
73+
},
74+
circleMarker: {
75+
type: "circleMarker",
76+
radius: 50,
77+
latlngs: europeCapitals.Rome
78+
}
79+
};
80+
81+
angular.extend($scope, {
82+
center: {
83+
lat: 51.505,
84+
lng: -0.09,
85+
zoom: 3
86+
},
87+
paths: {}
88+
});
89+
90+
$scope.addShape = function(shape) {
91+
$scope.paths = {};
92+
$scope.paths[shape] = pathsDict[shape];
93+
};
94+
};
95+
</script>
96+
<style>
97+
.angular-leaflet-map {
98+
width: 640px;
99+
height: 400px;
100+
}
101+
</style>
102+
</head>
103+
<body>
104+
<div class="container">
105+
<div ng-controller="DemoController">
106+
107+
<div class="row">
108+
<h2>Types of paths</h2>
109+
</div>
110+
111+
<div class="row">
112+
<div class="btn-group">
113+
<button type="button" ng-click="addShape('polyline')" class="btn btn-default">Polyline</button>
114+
<button type="button" ng-click="addShape('multiPolyline')" class="btn btn-default">multiPolyline</button>
115+
<button type="button" ng-click="addShape('polygon')" class="btn btn-default">Polygon</button>
116+
<button type="button" ng-click="addShape('multiPolygon')" class="btn btn-default">multiPolygon</button>
117+
<button type="button" ng-click="addShape('rectangle')" class="btn btn-default">Rectangle</button>
118+
<button type="button" ng-click="addShape('circle')" class="btn btn-default">Circle</button>
119+
<button type="button" ng-click="addShape('circleMarker')" class="btn btn-default">circleMarker</button>
120+
</div>
121+
</div>
122+
<br />
123+
<div class="row">
124+
<leaflet center="center" paths="paths"></leaflet>
125+
</div>
126+
</div>
127+
</div>
128+
129+
</body>
130+
</html>

0 commit comments

Comments
 (0)