<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: 50, y: 50, z: 0.3 }).addZoomButtons()

//define mixed-resolution dataset

const dataset = new gridviz.JSGrid(

//the cells maximum resolution

20,

//the cells, one by one, in plain javascript

[

{ x: 0, y: 0, value: 43, res: 10 },

{ x: 0, y: 10, value: 7, res: 5 },

{ x: 10, y: 10, value: 61, res: 10 },

{ x: 10, y: 80, value: 1, res: 10 },

{ x: 10, y: 90, value: 38, res: 10 },

{ x: 20, y: 20, value: 5, res: 20 },

{ x: 40, y: 20, value: 67, res: 10 },

{ x: 30, y: 70, value: 67, res: 10 },

{ x: 50, y: 70, value: 25, res: 20 },

{ x: 60, y: 30, value: 96, res: 10 },

{ x: 70, y: 70, value: 1, res: 5 },

{ x: 70, y: 90, value: 46, res: 10 },

],

//the function returning the cell resolutions: the "res" property

{ mixedResolution: (cell) => cell.res }

)

//make style

const style = new gridviz.ShapeColorSizeStyle({

//color, based on value property

color: (cell) => 'rgb(100,100,' + Math.floor((255 * cell.value) / 70) + ')',

//size the cells according to their resolution

size: dataset.mixedResolution,

//apply an offset to ensure cell position

offset: (cell, resolution, z) => {

const d = resolution * (1 - dataset.mixedResolution(cell) / resolution) * 0.5

return { dx: -d, dy: -d }

},

})

//make layer

const layer = new gridviz.GridLayer(dataset, [style])

//add layer to map

map.layers = [layer]

//

map.redraw()

</script>