examples/styles/text.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Gridviz text example</title>
        <style>
            html,
            body {
                height: 100%; /* Ensure the parent elements have a height so that the map can take up 100% correctly */
                margin: 0; /* Remove default margins to prevent scrolling */
                overflow: hidden; /* Prevent potential scrollbars */
            }
        </style>
    </head>
    <body>
        <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: 900,
            }).addZoomButtons()

            //define dataset
            const dataset = new gridviz.CSVGrid(
                map,
                'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_10km.csv',
                10000
            )

            //define text scale: a function [0,1] => text
            const textScale = gridviz.TextStyle.textScale(
                ['.', '-', '~', '+', '=', '#', '€', '@'],
                gridviz.powerScale(0.5)
            )

            //define style
            const style = new gridviz.TextStyle({
                text: (cell) => textScale(cell.population / 150000),
            })

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