<html>

<head>
    <title>USCounties</title>
</head>

<body>
    <div id="map"></div>
    <script type="module">
        import * as util from '../src/utils.js'
        import * as gis from '../src/gis.js'
        import * as mltools from './mltools.js'
        import statecodes from '../models/data/statecodes.js'

        const uscountiesUrl = 'https://backspaces.s3.amazonaws.com/uscounties.json'
        const usstatesUrl = 'https://backspaces.s3.amazonaws.com/usstates.json'
        const uscounties = await fetch(uscountiesUrl).then(res => res.json())
        const usstates = await fetch(usstatesUrl).then(res => res.json())

        const usaCenter = gis.usaCenter
        const terrain = gis.template('usgs')

        const map = await mltools.newMap(usaCenter, 4)

        mltools.addRasterLayer(map, 'terrain', terrain)

        mltools.addGeojsonFillLayer(map, 'countiesFill', uscounties, 'orange', 0.3)

        mltools.addGeojsonLineLayer(map, 'countiesBorder', 'countiesFill', 'red', 2)

        mltools.addGeojsonLineLayer(map, 'usstates', usstates, 'blue')

        const msg = props => props.NAME + ', ' + statecodes[props.STATE].name
        mltools.addLayerClickPopup(map, 'countiesFill', msg, 'bottom-left')

        mltools.addLayerCursor(map, 'countiesFill')

        util.toWindow({ util, gis, map, mltools, usstates })
    </script>
</body>

</html>