index.html

<html>
    <head>
        <title>2020 Election Results by Voter Density, with Swing States!</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css" crossorigin="anonymous">
        <script src="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/pmtiles@3.0.5/dist/pmtiles.js"></script>
        <style>
            body {
                margin: 0;
            }
            #map {
                height:100%; width:100%;
            }
            .maplibregl-popup > * {
                border-radius: 6px;
                opacity: 0.75;
            }
            .maplibregl-popup-content > * {
                /* make popup content denser */
                margin: 0;
                padding: 0;
                width: 180px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">

            // add the PMTiles plugin to the maplibregl global.
            let pm = new pmtiles.Protocol();
            maplibregl.addProtocol("pmtiles",pm.tile);

            let PMTILES_URL = "./MyData.pmtiles";
            const p = new pmtiles.PMTiles(PMTILES_URL);
            pm.add(p);

            // we first fetch the header so we can get the center lon, lat of the map.
            p.getHeader().then(h => {
                const map = new maplibregl.Map({
                    container: 'map',
                    zoom: h.minZoom + 3,
                    center: [-97.1288037, 38.3901899],
                    style: {
                        version: 8,
                        sources: {
                            'MyData': {
                                type: "vector",
                                url: "pmtiles://" + PMTILES_URL,
                                attribution: '<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">CC BY-NC-SA</a> Stephanie May with data from 4.0 <a href="https://electionlab.mit.edu/data">MIT Election Lab</a>, <a href="https://www.naturalearthdata.com/">Natural Earth</a>',
                            },
                            "openmaptiles": {
                                type: "vector",
                                scheme: "xyz",
                                url: "https://tiles.stadiamaps.com/data/openmaptiles.json",
                                attribution: '<a href="https://stadiamaps.com">Stadia Maps</a>'
                            },
                        },
                        "sprite": "https://tiles.stadiamaps.com/styles/alidade-smooth/sprite",
                        "glyphs": "https://tiles.stadiamaps.com/fonts/{fontstack}/{range}.pbf",
                        layers: [
                            {
                                'id': 'background',
                                'type': 'background',
                                'paint': { 'background-color' : '#A1A1A1' }
                            },
                            {
                                'id': 'land',
                                'source': 'MyData',
                                'source-layer': 'land',
                                'type': 'fill',
                                'paint': {
                                    'fill-color': '#ffffff',
                                    'fill-opacity': 0.8
                                }

                            },
                            {
                                'id': 'states',
                                'source': 'MyData',
                                'source-layer': 'states',
                                'type': 'fill',
                                'paint': {  'fill-color': '#ffffff',
                                            'fill-outline-color': [ 'case', ['==', ['get', 'swing'], 1], 'black', 'transparent'],
                                        }
                            },
                            {
                                'id': 'counties',
                                'source': 'MyData',
                                'source-layer': 'counties',
                                'type': 'fill',
                                'paint': {
                                    'fill-color': ['get','fill_color'],
                                }
                            },
                            {
                                'id': 'major_city_label',
                                'type': 'symbol',
                                'source': 'openmaptiles',
                                'source-layer': 'place',
                                'minzoom': 4,
                                'filter': [
                                    "all",
                                    ["==", "$type", "Point"],
                                    [
                                    "all",
                                    ["<=", "rank", 4],
                                    ["==", "class", "city"]
                                    ]
                                ],
                                'layout': {
                                    'text-size': {'stops': [[4, 11], [12, 18]], 'base': 1},
                                    'icon-image': {'base': 1, 'stops': [[0, 'circle-11'], [8, '']]},
                                    'text-font': ['Stadia Regular'],
                                    'text-justify': 'left',
                                    'text-offset': [0.5, 0.2],
                                    'icon-size': 0.4,
                                    'text-anchor': {'base': 1, 'stops': [[0, 'left'], [8, 'center']]},
                                    'text-field': [
                                    'concat',
                                    ['get', 'name:latin'],
                                    [
                                        "case",
                                        [
                                        "all",
                                        ["has", "name:nonlatin"],
                                        ["is-supported-script", ["get", "name:nonlatin"]]
                                        ],
                                        ["concat", "\n", ["get", "name:nonlatin"]],
                                        ""
                                    ]
                                    ],
                                    'text-line-height': 1.55
                                },
                                "paint": {
                                    "text-color": "rgb(117, 129, 145)",
                                    "text-halo-color": "rgb(242,243,240)",
                                    "text-halo-width": 1,
                                    "text-halo-blur": 1,
                                    "icon-opacity": 0.7
                                }
                            },
                            {
                                'id': 'state_labels',
                                'source': 'MyData',
                                'source-layer': 'swing_state_labels',
                                'type': 'symbol',
                                'minzoom': 3,
                                'layout': {
                                    'text-field': ['get','name'],
                                    'text-size': {'stops': [[3, 10], [10, 18]], 'base': 1},
                                    'text-font': ['Stadia Regular'],
                                    "text-transform": "uppercase",
                                    "text-letter-spacing": 0.2,
                                    "symbol-avoid-edges": true,
                                },
                                'paint': {
                                    "text-color": "rgb(117, 129, 145)",
                                    "text-halo-color": "rgb(242,243,240)",
                                    "text-halo-width": 1,
                                    "text-halo-blur": 1,
                                }
                            },
                        ]
                    }
                });

                map.on('click', (event) => {
                    // of all possible features under the cursor, filter to just the counties
                    let features = map.queryRenderedFeatures(event.point)
                        .filter(feature => feature.layer.id === "counties");

                    if (features.length === 0) {
                        // no counties found under cursor
                        return;
                    }

                    let feature = features[0];

                    // create a popup, set its map position and html content, and add it to the map
                    let popup = new maplibregl.Popup({ closeButton: false });
                    popup.setLngLat(event.lngLat);
                    popup.setHTML(`
                        <p>
                            <b>${feature.properties.winner}</b> won <b>${feature.properties.name} County, ${feature.properties.state}</b> in 2020 with  
                            <b>${feature.properties.votes}</b> votes, approximately <b>${feature.properties.votes_sqkm}</b> 
                            votes per square kilometer.
                        </p>
                    `);
                    popup.addTo(map);
                });
            });
        </script>
    </body>
</html>