basic_multiscale_CSV.html

<div id="map" style="height: 100%; width: 100%"></div>

<script src="../../dist/gridviz.js"></script>
<script>
    //define map with initial view
    const map = new gridviz.Map(document.getElementById('map'), {
        x: 4500000,
        y: 2900000,
        z: 3000,
    }).addZoomButtons()

    //define multi resolution dataset
    const dataset = new gridviz.MultiResolutionDataset(
        //the resolutions
        [5000, 10000, 20000, 50000, 100000],
        //the function returning each dataset from the resolution
        (resolution) =>
            new gridviz.CSVGrid(
                map,
                'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_' +
                    Math.round(resolution / 1000) +
                    'km.csv',
                resolution
            )
    )

    //define color for each cell c
    const colorFunction = (cell, resolution) => {
        const density = (1000000 * cell.population) / (resolution * resolution)
        if (density > 1500) return '#993404'
        else if (density > 600) return '#d95f0e'
        else if (density > 200) return '#fe9929'
        else if (density > 60) return '#fec44f'
        else if (density > 15) return '#fee391'
        else return '#ffffd4'
    }

    //define style
    const style = new gridviz.ShapeColorSizeStyle({ color: colorFunction })

    //add layer to map
    map.layers = [new gridviz.GridLayer(dataset, [style])]
</script>