-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (104 loc) · 3.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html data-ng-app="angularApplication">
<head>
<title>Mappa Desio</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="angular.panels.min.css" rel="stylesheet" type="text/css">
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places&key=AIzaSyDqrDjL6eFlE2Nho-BZ1ZYmfAxMAAgGrSo"></script>
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="ng-map.min.js"></script>
<script src="angular.panels.min.js"></script>
<style>
ng-map {
position:absolute;
width: 100%;
height: 100%;
}
.modal {
display: block;
z-index: -1;
}
.modal.fade.in {
z-index: 1050;
}
</style>
</head>
<body data-ng-controller="defaultController">
<!-- <div ng-repeat="f in pois">
<p>{{f.catasto_data[0].geometry.rings[0]}}</p>
</div>-->
<ng-map map-type-control="true" map-type-control-options="{position:'TOP_CENTER'}" default-style="false" zoom="14" center="MILANO" >
<marker ng-repeat="f in pois" position="{{f.INDIRIZZO}}" title="Sezione {{f.SEZIONE}}"></marker>
<shape ng-repeat="f in pois" name="polygon"
paths="{{f.catasto_data[0].geometry.rings[0]}}"
stroke-color="#FF0000"
stroke-opacity="0.8"
stroke-weight="2"
fill-color="#FF0000"
fill-opacity="0.35">
</shape>
<custom-control id="title" position="TOP_LEFT" index="1">
<div style="padding: 10px;">
<h3><b>Città di Milano</b></h3>
<p>Sedi delle sezioni elettorali (2016)</p>
</div>
</custom-control>
<custom-control id="by" position="BOTTOM_LEFT" index="1">
<div style="padding: 10px;">Created by Paolo Fisco @ipersoft</div>
</custom-control>
</ng-map>
<div data-panels="true"></div>
<script>
var app = angular.module('angularApplication', ['angular.panels','ngMap']);
//add panels
app.config(['panelsProvider','$windowProvider', function (panelsProvider,$windowProvider) {
var $window = $windowProvider.$get();
var sizePanel="";
if ($window.innerWidth<400) {
sizePanel="80%"
}
else
{
sizePanel="400px"
}
panelsProvider
.add({
id: 'panel',
position: 'left',
size:sizePanel,
templateUrl: 'https://github.com/infocitta/mappadesio_old/blob/gh-pages/panel.html',
controller: 'leftCtrl'
})
;
}]);
//default controller
app.controller('defaultController', ['$scope', 'panels','NgMap','$http','$window', function ($scope, panels,NgMap,$http,$window) {
NgMap.getMap().then(function(map) {
$scope.map = map;
});
$http.get("https://raw.githubusercontent.com/infocitta/seggimilano/master/dati.json")
.then(function(response) {
$scope.pois = response.data;
});
$scope.showPOI = function(event, poi) {
$scope.selectedPOI = poi;
panels.open("panel");
//$scope.map.showInfoWindow('myInfoWindow', this);
};
$scope.leftOpen = function (event,poi,cat) {
$scope.$broadcast('leftHello',poi,cat);
};
}]);
//left panel controller
app.controller('leftCtrl', ['$scope', 'panels', function ($scope, panels) {
$scope.$on('leftHello', function(event, poi,cat) {
$scope.selectedPOI = poi;
$scope.selectedCAT = cat;
panels.open("panel");
});
}]);
</script>
</body>
</html>