forked from chiaramistro/hacktoberfest
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (103 loc) · 3.05 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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Hacktoberfest 2020</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css"
/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
</head>
<body>
<div class="wrapper">
<h1>OPEN SOURCE STREET MAP</h1>
<a href="./weather.html"><h3>Weather Details</h3></a>
<div class="switch_box box_1">
<input type="checkbox" class="switch_1" />
</div>
</div>
<div id="osmMap"></div>
<script src="js/positions.js"></script>
<script src="js/themeToggle.js"></script>
<script>
function onResize() {
const height = document.querySelector(".wrapper").clientHeight + 20;
document.querySelector(
"#osmMap"
).style.height = `calc(100% - ${height}px)`;
}
onResize();
const marker = document.getElementById("#marker");
window.addEventListener("resize", onResize);
const markers = [];
const arr = positions || [];
for (let i = 0; i < arr.length; i++) {
markers.push(
new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([arr[i].lng, arr[i].lat])
),
name: arr[i].name,
})
);
}
var size = ol.size.toSize([2048, 2048]);
var scale = ol.size.toSize([0.05, 0.05]);
for (let i = 0; i < arr.length; i++) {
let xyz = arr[i].name;
markers[i].setStyle(
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.1, 0.1],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
src: "https://github.com/" + xyz + ".png",
size,
scale,
}),
text: new ol.style.Text({
text: xyz,
offsetY: 12,
scale: [1, 1],
textAlign: "center",
textBaseline: "top",
}),
})
);
}
/*
var size = ol.size.toSize([2048, 2048]);
var scale = ol.size.toSize([0.030, 0.030]);
var icon = new ol.style.Icon({
src: "img/marker.png",
size,
scale,
});
const style = new ol.style.Style({
image: icon,
});
*/
map = new ol.Map({
target: "osmMap",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: markers,
}),
//style,
}),
],
view: new ol.View({
center: ol.proj.fromLonLat([20.41, 8.82]),
zoom: 1,
}),
});
</script>
</body>
</html>