counties.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Counties</title>
        <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
        />
        <!-- <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js"></script> -->
        <!-- <link
            href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css"
            rel="stylesheet"
        /> -->
        <style>
            body {
                margin: 10;
                padding: 10;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                /* height: 800px; */
                width: 95%;
            }
            .mapboxgl-popup {
                max-width: 400px;
                font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script type="module">
            import util from 'https://backspaces.github.io/agentscript/src/util.js'
            import './vendor/mapboxglcss.js'
            import mapboxgl from './vendor/mapbox-gl.esm.js'

            const modelParams = util.parseQueryString()
            const states = Object.keys(modelParams)[0] || ''
            console.log(states)

            mapboxgl.accessToken =
                'pk.eyJ1IjoiYmFja3NwYWNlcyIsImEiOiJjanVrbzI4dncwOXl3M3ptcGJtN3oxMmhoIn0.x9iSCrtm0iADEqixVgPwqQ'
            const map = new mapboxgl.Map({
                container: 'map', // container id
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [-100.334228, 40.236557], // https://www.latlong.net/
                zoom: 3,
                renderWorldCopies: false,
            })
            util.toWindow({ util, map })

            async function run() {
                const fips = await postalToFips(states)
                console.log('fips', fips)

                map.addLayer({
                    id: 'counties',
                    type: 'fill',
                    source: {
                        type: 'geojson',
                        data: './data/uscounties.json',
                    },
                    filter:
                        states.length === 0
                            ? ['to-boolean', true]
                            : ['in', ['get', 'STATE'], fips],
                    layout: {},
                    paint: {
                        'fill-color': [
                            'case',
                            ['boolean', ['feature-state', 'hover'], false],
                            'rgba(0,125,0,0.3)',
                            'rgba(0,0,0,0)',
                        ],
                        'fill-outline-color': 'red',
                    },
                })
                // if (states.length === 0) {
                map.addLayer({
                    id: 'states',
                    type: 'line',
                    source: {
                        type: 'geojson',
                        data: './data/usstates.geojson',
                    },
                    layout: {},
                    paint: {
                        'line-color': 'rgba(0,0,0,0.4)',
                        'line-width': 0.5,
                    },
                })
                // }

                // https://docs.mapbox.com/mapbox-gl-js/example/query-similar-features/
                // Create a popup, but don't add it to the map yet.
                const popup = new mapboxgl.Popup({
                    closeButton: false,
                })

                // https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
                let hoveredStateId = null

                map.on('mousemove', 'counties', function (e) {
                    map.getCanvas().style.cursor = 'default' //'crosshair'

                    if (e.features.length > 0) {
                        const feature = e.features[0]
                        if (hoveredStateId) {
                            map.setFeatureState(
                                { source: 'counties', id: hoveredStateId },
                                { hover: false }
                            )
                        }
                        hoveredStateId = feature.id
                        map.setFeatureState(
                            { source: 'counties', id: hoveredStateId },
                            { hover: true }
                        )

                        popup
                            .setLngLat(e.lngLat)
                            .setText(feature.properties.NAME)
                            .addTo(map)
                    }
                })
                map.on('mouseleave', 'counties', function () {
                    map.getCanvas().style.cursor = ''
                    popup.remove()
                })
            }
            map.on('load', function () {
                run()
            })

            async function postalToFips(states) {
                if (states.length > 0) {
                    const fips = await util.xhrPromise(
                        './data/fips.json',
                        'json'
                    )
                    const array = states
                        .toUpperCase()
                        .split(',')
                        .map(postal => fips[postal].fips)
                    return array.join(',')
                } else {
                    return ''
                }
            }
        </script>
    </body>
</html>