Lab-3-Web-Map-Application/map1.html at main · rta2810/Lab-3-Web-Map-Application · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>US COVID-19 Rates</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        .map-overlay { position: absolute; bottom: 0; right: 0; background: rgba(255, 255, 255, 0.8); margin-right: 20px; font-family: Arial, sans-serif; overflow: auto; border-radius: 3px; }
        #legend { padding: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); line-height: 18px; height: 150px; margin-bottom: 40px; width: 100px; }
        .legend-key { display: inline-block; border-radius: 20%; width: 10px; height: 10px; margin-right: 5px; }
        #title { position: absolute; top: 0; left: 0; margin-top: 20px; margin-left: 20px; padding: 10px; background-color: white; border-radius: 3px; font-family: Arial, sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="title">
        <h2>US COVID-19 Rates (2020)</h2>
        <p>Data: NY Times / Census Bureau</p>
    </div>
    <div class='map-overlay' id='legend'></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoidHllYW5razQ2NyIsImEiOiJjbWt0NzM2aXMxMTl0M2VvZDhxNGg1cGJiIn0.6KyP80qDn6aZnqlm5xg1Hw';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v10',
            center: [-98, 38.88],
            zoom: 3,
            projection: 'albers'
        });
        const layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
        const colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
        map.on('load', () => {
            map.addSource('covid-rates', { type: 'geojson', data: 'assets/us-covid-2020-rates.json' });
            map.addLayer({
                'id': 'rates-layer',
                'type': 'fill',
                'source': 'covid-rates',
                'paint': {
                    'fill-color': [
                        'interpolate', ['linear'], ['get', 'rates'],
                        0, '#FFEDA0', 10, '#FED976', 20, '#FEB24C', 50, '#FD8D3C',
                        100, '#FC4E2A', 200, '#E31A1C', 500, '#BD0026', 1000, '#800026'
                    ],
                    'fill-opacity': 0.75
                }
            });
            const legend = document.getElementById('legend');
            layers.forEach((layer, i) => {
                const color = colors[i];
                const item = document.createElement('div');
                const key = document.createElement('span');
                key.className = 'legend-key';
                key.style.backgroundColor = color;
                const value = document.createElement('span');
                value.innerHTML = `${layer}`;
                item.appendChild(key);
                item.appendChild(value);
                legend.appendChild(item);
            });
        });
        map.on('click', 'rates-layer', (e) => {
            new mapboxgl.Popup()
                .setLngLat(e.lngLat)
                .setHTML(`<strong>County:</strong> ${e.features[0].properties.county}<br><strong>Rate:</strong> ${e.features[0].properties.rates}`)
                .addTo(map);
        });
        map.on('mouseenter', 'rates-layer', () => map.getCanvas().style.cursor = 'pointer');
        map.on('mouseleave', 'rates-layer', () => map.getCanvas().style.cursor = '');
    </script>
</body>
</html>