basic_multiscale_tiled_CSV.html

<div id="map" style="height: 500px; width: 800px"></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
        [1000, 2000, 5000, 10000, 20000, 50000, 100000],
        //the function returning each dataset from the resolution
        resolution => new gridviz.TiledGrid(map, 'https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/population2/' + resolution + 'm/')
    )

    //define color for each cell c
    const colorFunction = (cell, resolution) => {
        const density = 1000000 * cell.TOT_P_2021 / (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>