JavaScript-InteractiveMapCOVID19/index.html at master · ortegasixto11/JavaScript-InteractiveMapCOVID19 · GitHub

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Interactive Map COVID-19 with Leaftleft</title>
        <style>
            #mapid {
                width: 99vw;
                height: 97vh;
            }
        </style>
    </head>
    <body>
        <div id="mapid"></div>

        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
        <script>
            var myMap = L.map("mapid").setView([0, 0], 3);

            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(myMap);

            async function asyncGetData() {
                const data = await fetch("https://wuhan-coronavirus-api.laeyoung.endpoint.ainize.ai/jhu-edu/latest");
                const result = await data.json();
                return result;
            }

            async function asyncRenderData() {
                const data = await asyncGetData();
                data.forEach(element => {
                    let country =
                        element.provincestate === ""
                            ? element.countryregion
                            : `${element.provincestate} (${element.countryregion})`;
                    const marker = L.marker([element.location.lat, element.location.lng]).addTo(myMap).bindPopup(`
                        <strong>${country}</strong>
                        <p style="color:orange;">Confirmados: <strong>${element.confirmed}</strong><p>
                        <p style="color:red;">Fallecidos: <strong>${element.deaths}</strong><p>
                        <p style="color:green;">Recuperados: <strong>${element.recovered}</strong><p>
                        `);
                    marker.on("mouseover", function() {
                        this.openPopup();
                    });
                    marker.on("mouseout", function() {
                        this.closePopup();
                    });
                });
            }

            asyncRenderData();
        </script>
    </body>
</html>