-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (73 loc) · 3.02 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!-- GPS locate button -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.76.1/dist/L.Control.Locate.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<title>MNE Eagle Eye</title>
<link rel="icon" type="image/jpg" href="assets/favicon_1.svg"/>
</head>
<body>
<div id="map"></div>
<script src="cameras.geojson"> </script>
<!-- GPS locate button -->
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.76.1/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script>
const mymap = L.map('map', {minZoom: 8}).setView([42.4368, 19.2554], 14);
// OpenStreetMap Layer
osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
osm.addTo(mymap);
// Google Maps Satellite Layer
googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 21,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: '© <a href="https://www.google.com/intl/en_US/help/terms_maps/">Google Maps</a>'
});
// Google Maps normal layer
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 21,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: '© <a href="https://www.google.com/intl/en_US/help/terms_maps/">Google Maps</a>'
});
//camera-pin icon made by Pixel perfect https://www.flaticon.com/authors/pixel-perfect
const myIcon = new L.icon({
iconUrl: 'assets/camera_pin.svg',
iconSize: [32, 32],
iconAnchor: [16, 32]
});
function customIcon(feature, layer) {
layer.setIcon(myIcon);
if (feature.properties.photo == null) {
layer.bindPopup('<img src=assets/favicon_1.svg>' + feature.geometry.coordinates, {maxWidth: "auto"});
}else{
layer.bindPopup('<img src="' + feature.properties.photo + '" style="width:350px;height:auto;">' + feature.geometry.coordinates, {maxWidth: "auto"});
// layer.bindPopup('<img src="' + feature.properties.photo + '" style="width:500px;height:auto;">' + "<p></p>" + feature.properties.info, {maxWidth: "auto"} );
}
}
var baseLayers = {
"OpenStreetMap": osm,
"Google Maps": googleStreets,
"Google Maps Satellite": googleSat
};
L.control.layers(baseLayers).addTo(mymap);
L.geoJSON(cams, {
onEachFeature: customIcon
}).addTo(mymap);
// GPS locate button
L.control.locate().addTo(mymap);
</script>
</body>
</html>