spamaps/index.html at main · thomasguillory/spamaps · 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
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
108
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <title>Points on a map</title>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id='map'></div>
    <script>

    const GEOJSON_URL = 'https://thomasguillory.github.io/spamaps/data/score_output_50plus.geojson'

    // The value for 'accessToken' begins with 'pk...'
    mapboxgl.accessToken = 'pk.eyJ1IjoidGhvbWFzZ3VpbGxvcnkiLCJhIjoiY2xsZmM1cTdtMHl2czNxcWg5ejJpczF3ayJ9.gNzd4k3rBT3klzQB0wqpLA';
    const map = new mapboxgl.Map({
      container: 'map',
      // Replace YOUR_STYLE_URL with your style URL.
      style: 'mapbox://styles/thomasguillory/clnuon9d2000701pf8ewl3t00',
      center: [2.7532058924911227, 46.70243835214378],
      zoom: 5
    });

    map.on('load', () => {
        // Add zoom
        map.addControl(new mapboxgl.NavigationControl({
            showCompass: false,
            visualizePitch: false
        }));

        map.addSource('points', {
            type: 'geojson',
            data: GEOJSON_URL
        });

        // Add a symbol layer
        map.addLayer({
            id: 'points',
            type: 'circle',
            source: 'points',
            paint: {
                'circle-radius': 5,
                'circle-color': '#223bff',
                'circle-stroke-color': 'white',
                'circle-stroke-width': 1,
                'circle-opacity': 1
            }
        })

        map.addLayer({
            id: 'points-name',
            type: 'symbol',
            source: 'points',
            minzoom: 8,
            layout: {
                'text-field': ['get', 'name'],
                'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                'text-size': 12,
                'text-offset': [0, -2]
            },
            paint: {
                'text-halo-color': 'white',
                'text-halo-width': 5,
            }
        });

        map.on('click', 'points', (e) => {
          if (e.features.length > 0) {
            const htmlListContent = Object.entries(e.features[0].properties).map((p) => {
              if (p[0].indexOf('website') > -1)
                return `<li>${p[0]}: <a href="${p[1]}" target="_blank">${p[1]}</a></li>`
              return `<li>${p[0]}: ${p[1]}</li>`
            }).join('')
            const htmlContent = `<ul>${htmlListContent}</ul>`
            new mapboxgl.Popup()
              .setLngLat(e.lngLat)
              .setHTML(htmlContent)
              .addTo(map);

          }
        })

        // var geoJson = L.geoJson(geojson, {
        //     pointToLayer: function (feature, latlng) {
        //         return L.circleMarker(latlng, {
        //             radius: 10
        //         })
        //     }
        // }).addTo(map);
    });

    </script>
  </body>
</html>