-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (86 loc) · 3.47 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
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
<style>
.btn {
margin:5px;padding:15px; border:1px solid black; border-radius:10px;
background: #3498db;
color:white;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-120063161-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-120063161-1');
</script>
</head>
<body>
<div id="map" style="position:absolute;top:0px;bottom:0px;right:0px;left:0px;"></div>
<div id="panel" style="position:fixed;z-index:99999;bottom:50px;right:50px">
<a href="https://github.com/sabas/iliadmap">Github</a>
</div>
</body>
<script>
var map = L.map('map').setView([44.40, 8.99], 8);
var hash = new L.Hash(map);
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var baseLayers = {
"OpenStreetMap": osm
};
var i4g = L.tileLayer('http://www.iliad.it/copertura/tiles/4G/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">Iliad</a>'
}).addTo(map);
var i3g = L.tileLayer('http://www.iliad.it/copertura/tiles/3G/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">Iliad</a>'
}).addTo(map);
var i2g = L.tileLayer('http://www.iliad.it/copertura/tiles/2G/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">Iliad</a>'
}).addTo(map);
var image = L.icon({
iconUrl: 'https://www.iliad.it/assets/store-locator/bullet-blue-icon.png',
iconSize: [18, 18],
iconAnchor: [9, 9],
popupAnchor: [0, -9]
});
var imageFC = L.icon({
iconUrl: 'https://www.iliad.it/assets/store-locator/iliad_store.png',
iconSize: [40,40],
iconAnchor: [20, 20],
popupAnchor: [0, -20]
});
var stores = L.featureGroup([]).addTo(map);
$.getJSON("https://cors-anywhere.herokuapp.com/https://www.iliad.it/assets/store-locator/borne_interactive.json", function( data ) {
$.each( data, function( key, val ) {
var img = image;
var zIndex = 100;
if( val.id_enseigne == 3 || val.id_enseigne == 8 ) {
img = imageFC;
zIndex = 200;
}
var content = '<div style="height:120px;">';
content += '<h4>'+val.enseigne_label+'</h4>'+val.adresse.replace("\n", '<br />');
if( val.horaire !== null && val.horaire !== '' ) {
content += '<br /><i>Orari: '+val.horaire+'</i>'
}
content += '<br /><a target="_blank" style="font-size:x-small;float:right;" href="https://www.openstreetmap.org/directions?to='+val.latitude+','+val.longitude+'">Itinerari</a>';
content += '</div>';
L.marker([val.latitude, val.longitude], {icon: img}).addTo(stores).bindPopup(content);
});
});
var overlays = {
"4G": i4g,
"3G": i3g,
"2G": i2g,
"Stores": stores
};
L.control.layers(baseLayers, overlays, {collapsed: false}).addTo(map);
</script>
</html>