-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
124 lines (120 loc) · 5.03 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/qgis2web.css"><link rel="stylesheet" href="css/fontawesome-all.min.css">
<style>
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<title></title>
</head>
<body>
<div id="map">
</div>
<script src="js/qgis2web_expressions.js"></script>
<script src="js/leaflet.js"></script>
<script src="js/leaflet.rotatedMarker.js"></script>
<script src="js/leaflet.pattern.js"></script>
<script src="js/leaflet-hash.js"></script>
<script src="js/Autolinker.min.js"></script>
<script src="js/rbush.min.js"></script>
<script src="js/labelgun.min.js"></script>
<script src="js/labels.js"></script>
<script src="data/Luoghi_1.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script>
var map = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1
})
var hash = new L.Hash(map);
map.attributionControl.setPrefix('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a> · <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> · <a href="https://qgis.org">QGIS</a>');
var autolinker = new Autolinker({truncate: {length: 30, location: 'smart'}});
var bounds_group = new L.featureGroup([]);
function setBounds() {
if (bounds_group.getLayers().length) {
map.fitBounds(bounds_group.getBounds());
}
}
map.createPane('pane_OSMStandard_0');
map.getPane('pane_OSMStandard_0').style.zIndex = 400;
var layer_OSMStandard_0 = L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
pane: 'pane_OSMStandard_0',
opacity: 1.0,
attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors, CC-BY-SA</a>',
minZoom: 1,
maxZoom: 28,
minNativeZoom: 0,
maxNativeZoom: 19
});
layer_OSMStandard_0;
map.addLayer(layer_OSMStandard_0);
function pop_Luoghi_1(feature, layer) {{
var popupContent = '<table>\
<tr>\
<td colspan="2">'+'<div><img class="myphoto" src="images/'+String(feature.properties['img2']).replace(/[\\\/:]/g, '_').trim()+'" /></div>'
+'<div class="ct-popup" style="text-align:center;">'
+'<button class="btn1" onClick="clickBtnPhoto(\''+String(feature.properties['img1']).replace(/[\\\/:]/g, '_').trim()+'\')">Photo 1</button> '
+'<button class="btn2" onClick="clickBtnPhoto(\''+String(feature.properties['img2']).replace(/[\\\/:]/g, '_').trim()+'\')">Photo 2</button> '
+'<button class="btn3" onClick="clickBtnPhoto(\''+String(feature.properties['img3']).replace(/[\\\/:]/g, '_').trim()+'\')">Photo 3</button>'
+'</div>';
}
'</td>\
</tr>\
</table>';
layer.bindPopup(popupContent, {maxHeight: 400});
}
function clickBtnPhoto(photo){
//console.log('click btn1 aaa')
//console.log(photo)
$('.myphoto').attr('src','images/'+photo);
}
function style_Luoghi_1_0() {
return {
pane: 'pane_Luoghi_1',
radius: 8.0,
opacity: 1,
color: 'rgba(61,128,53,1.0)',
dashArray: '',
lineCap: 'butt',
lineJoin: 'miter',
weight: 2.0,
fill: true,
fillOpacity: 1,
fillColor: 'rgba(84,176,74,1.0)',
interactive: true,
}
}
map.createPane('pane_Luoghi_1');
map.getPane('pane_Luoghi_1').style.zIndex = 401;
map.getPane('pane_Luoghi_1').style['mix-blend-mode'] = 'normal';
var layer_Luoghi_1 = new L.geoJson(json_Luoghi_1, {
attribution: '',
interactive: true,
dataVar: 'json_Luoghi_1',
layerName: 'layer_Luoghi_1',
pane: 'pane_Luoghi_1',
onEachFeature: pop_Luoghi_1,
pointToLayer: function (feature, latlng) {
var context = {
feature: feature,
variables: {}
};
return L.circleMarker(latlng, style_Luoghi_1_0(feature));
},
});
bounds_group.addLayer(layer_Luoghi_1);
map.addLayer(layer_Luoghi_1);
setBounds();
</script>
</body>
</html>