<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: 4200000,

y: 2600000,

z: 300,

backgroundColor: '#EADDCA',

}).addZoomButtons()

//define dataset

const dataset = new gridviz.TiledGrid(

map,

'https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/clc/500m/'

)

//define color style

const style = new gridviz.SquareColorCategoryWebGLStyle({

code: (cell) => cell.clc,

color: { 41: '#1ca3ec' },

filter: (cell) => cell.clc == '41',

})

//add layer to map

map.layers = [new gridviz.GridLayer(dataset, [style])]

</script>