-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
58 lines (52 loc) · 1.67 KB
/
index.js
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
const BASE_URL_PATH = "https://wygzk.wiremockapi.cloud/beachs";
const cardsBeach = document.getElementsByClassName("beach-list__box");
let activeMap = false;
let x, y;
const locations = [];
const map = L.map("map");
const insertElementOnCard = async () => {
const response = await fetch(BASE_URL_PATH);
const data = await response.json();
let index = 0;
for (card of cardsBeach) {
const domImg = document.createElement("img");
card.setAttribute(
"onclick",
`renderMap(${data[index].location[0]},${data[index].location[1]})`
);
const textContent = card.firstElementChild.textContent;
domImg.src = data[index].image;
domImg.style.width = "100%";
domImg.style.height = "30%";
domImg.ariaLabel = textContent;
domImg.alt = textContent;
locations.push(data[index].location);
index++;
card.appendChild(domImg);
}
};
document.addEventListener("mousemove", function (event) {
x = event.screenX;
y = event.screenY;
});
const renderMap = (lat, long) => {
const mapContainer = document.getElementsByClassName("map__container")[0];
if (!activeMap) {
mapContainer.style.display = "flex";
mapContainer.style.justifyContent = "center";
mapContainer.style.alignItems = "center";
mapContainer.style.marginTop = `${y}px`;
map.setView([lat, long], 4);
L.marker([lat, long]).addTo(map);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
activeMap = true;
} else {
mapContainer.style.display = "none";
activeMap = false;
}
};
insertElementOnCard();