The avatar for @cornhundred
Nicolas Fernandez
Public
Edited
Jun 16, 2024
Fork of Deck.gl Moon TileLayer Example
Insert cell
Insert cell
Insert cell
layers = [moonLayer_1, moonLayer_2, moonLayer_3, moonLayer_4]
Insert cell
x_translate = 25000
Insert cell
y_translate = 25000
Insert cell
ROOT_URL = original_url
Insert cell
Insert cell
moonLayer_1 = new deck.TileLayer({
id: 'moon_layer_1',
tileSize: dimensions.tileSize,
refinementStrategy: 'no-overlap',
highlightColor: [60, 60, 60, 100],
minZoom: -7,
maxZoom: 0,
coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
extent: [0, 0, dimensions.width , dimensions.height],
getTileData: getTileData,
onViewportLoad: getMetaData,
renderSubLayers: renderSubLayers,
// modelMatrix: modelMatrix
});
Insert cell
moonLayer_2 = new deck.TileLayer({
id: 'moon_layer_2',
tileSize: dimensions.tileSize,
refinementStrategy: 'no-overlap',
highlightColor: [60, 60, 60, 100],
minZoom: -7,
maxZoom: 0,
coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
extent: [0, 0, dimensions.width , dimensions.height],
getTileData: getTileData,
onViewportLoad: getMetaData,
renderSubLayers: renderSubLayers_2,
modelMatrix: modelMatrix
});
Insert cell
moonLayer_3 = new deck.TileLayer({
id: 'moon_layer_3',
tileSize: dimensions.tileSize,
refinementStrategy: 'no-overlap',
highlightColor: [60, 60, 60, 100],
minZoom: -7,
maxZoom: 0,
coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
extent: [0, 0, dimensions.width , dimensions.height],
getTileData: getTileData,
onViewportLoad: getMetaData,
renderSubLayers: renderSubLayers_3,
modelMatrix: new Matrix4().translate([0, y_translate, 0])
});
Insert cell
moonLayer_4 = new deck.TileLayer({
id: 'moon_layer_4',
tileSize: dimensions.tileSize,
refinementStrategy: 'no-overlap',
highlightColor: [60, 60, 60, 100],
minZoom: -7,
maxZoom: 0,
coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
extent: [0, 0, dimensions.width , dimensions.height],
getTileData: getTileData,
onViewportLoad: getMetaData,
renderSubLayers: renderSubLayers_4,
modelMatrix: new Matrix4().translate([x_translate, y_translate, 0])
});
Insert cell
deckgl.setProps({layers: layers});
Insert cell
deckgl = {
// This is an Observable hack: clear previously generated content
// reference: https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
container.innerHTML = '';
const view = new deck.OrthographicView({id: 'ortho'})
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
});
}
Insert cell
Insert cell
inst_height = 850
Insert cell
dimensions = ({
'height': 24000,
'width': 24000,
'tileSize':512
})
Insert cell
original_url = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/image-tiles/moon.image'
Insert cell
new_url = 'https://raw.githubusercontent.com/cornhundred/deck.gl-data/master/website/image-tiles/moon.image'
Insert cell
INITIAL_VIEW_STATE = ({
target: [13000 + x_translate, 13000 + y_translate, 0],
zoom: -6.5
})
Insert cell
Insert cell
ROOT_URL
Insert cell
getTileData = ({index}) => {
const { x, y, z } = index;
var full_url = `${ROOT_URL}/moon.image_files/${15 + z}/${x}_${y}.jpeg`
return loaders.load(full_url);
}
Insert cell
renderSubLayers = props => {
const {
bbox: {left, bottom, right, top}
} = props.tile;
const {width, height} = dimensions;

// console.log(`Rendering tile: left=${left}, bottom=${bottom}, right=${right}, top=${top}`);
// return new deck.BitmapLayer(props, {
// data: null,
// image: props.data,
// bounds: [
// clamp(left, 0, width),
// clamp(bottom, 0, height),
// clamp(right, 0, width),
// clamp(top, 0, height)
// ]
// })

const color = [255, 165, 0]

return new CustomBitmapLayer(props, {
data: null,
image: props.data,
bounds: [
mathGl.clamp(left, 0, width),
mathGl.clamp(bottom, 0, height),
mathGl.clamp(right, 0, width),
mathGl.clamp(top, 0, height)
],
color: color, // Custom color
opacityScale: 3.0, // Custom opacity scale
});
}
Insert cell
renderSubLayers_2 = props => {
const {
bbox: {left, bottom, right, top}
} = props.tile;
const {width, height} = dimensions;

// console.log(`Rendering tile: left=${left}, bottom=${bottom}, right=${right}, top=${top}`);
// return new deck.BitmapLayer(props, {
// data: null,
// image: props.data,
// bounds: [
// clamp(left, 0, width),
// clamp(bottom, 0, height),
// clamp(right, 0, width),
// clamp(top, 0, height)
// ]
// })

const color = [0, 255, 0]

return new CustomBitmapLayer(props, {
data: null,
image: props.data,
bounds: [
mathGl.clamp(left, 0, width),
mathGl.clamp(bottom, 0, height),
mathGl.clamp(right, 0, width),
mathGl.clamp(top, 0, height)
],
color: color, // Custom color
opacityScale: 3.0, // Custom opacity scale
});
}
Insert cell
renderSubLayers_3 = props => {
const {
bbox: {left, bottom, right, top}
} = props.tile;
const {width, height} = dimensions;

// console.log(`Rendering tile: left=${left}, bottom=${bottom}, right=${right}, top=${top}`);
// return new deck.BitmapLayer(props, {
// data: null,
// image: props.data,
// bounds: [
// clamp(left, 0, width),
// clamp(bottom, 0, height),
// clamp(right, 0, width),
// clamp(top, 0, height)
// ]
// })

const color = [0, 0, 255]

return new CustomBitmapLayer(props, {
data: null,
image: props.data,
bounds: [
mathGl.clamp(left, 0, width),
mathGl.clamp(bottom, 0, height),
mathGl.clamp(right, 0, width),
mathGl.clamp(top, 0, height)
],
color: color, // Custom color
opacityScale: 3.0, // Custom opacity scale
});
}
Insert cell
renderSubLayers_4 = props => {
const {
bbox: {left, bottom, right, top}
} = props.tile;
const {width, height} = dimensions;

// console.log(`Rendering tile: left=${left}, bottom=${bottom}, right=${right}, top=${top}`);
// return new deck.BitmapLayer(props, {
// data: null,
// image: props.data,
// bounds: [
// clamp(left, 0, width),
// clamp(bottom, 0, height),
// clamp(right, 0, width),
// clamp(top, 0, height)
// ]
// })

const color = [0, 0, 0]

return new CustomBitmapLayer(props, {
data: null,
image: props.data,
bounds: [
mathGl.clamp(left, 0, width),
mathGl.clamp(bottom, 0, height),
mathGl.clamp(right, 0, width),
mathGl.clamp(top, 0, height)
],
color: color, // Custom color
opacityScale: 3.0, // Custom opacity scale
});
}
Insert cell
CustomBitmapLayer = {
return class CustomBitmapLayer extends deck.BitmapLayer {
getShaders() {
const shaders = super.getShaders();
// Directly injecting shader code
shaders.inject = {
'fs:#decl': `uniform vec3 uColor; uniform float uOpacityScale;`,
'fs:DECKGL_FILTER_COLOR': `
// Convert color to grayscale and apply opacity scale
float grayscale = ((color.r + color.g + color.b) / 3.0) * uOpacityScale;
// Clamp grayscale to valid range
grayscale = clamp(grayscale, 0.0, 1.0);
// Apply custom color and scaled opacity
color = vec4(uColor, grayscale);
`
};
return shaders;
}
// Properly passing uniforms through updateState lifecycle hook
updateState(params) {
super.updateState(params);
// Extracting custom props
const {props, oldProps} = params;
if (props.color !== oldProps.color || props.opacityScale !== oldProps.opacityScale) {
// Update uniforms when props change
this.setState({
uniforms: {
uColor: props.color.map(c => c / 255), // Normalize RGB to [0, 1] range
uOpacityScale: props.opacityScale
}
});
}
}
draw(opts) {
// Ensuring custom uniforms are passed to the shader program
const {uniforms} = this.state;
super.draw({
...opts,
uniforms: {
...opts.uniforms,
...uniforms, // Spread in custom uniforms
},
});
}
}
}
Insert cell
getMetaData = async () => {
// console.log('getMetaData')

const dziSource = `${ROOT_URL}/moon.image.dzi`;
const response = await fetch(dziSource);
const xmlText = await response.text();
const dziXML = new DOMParser().parseFromString(xmlText, 'text/xml');

if (Number(dziXML.getElementsByTagName('Image')[0].attributes.Overlap.value) !== 0) {
// eslint-disable-next-line no-undef, no-console
console.warn('Overlap parameter is nonzero and should be 0');
}
// may set dimensions here using mutable
// console.log(Number(dziXML.getElementsByTagName('Size')[0].attributes.Height.value))

// // trying to bring in getMetaData function
// var dimensions = {}
// dimensions.height = Number(dziXML.getElementsByTagName('Size')[0].attributes.Height.value),
// dimensions.width = Number(dziXML.getElementsByTagName('Size')[0].attributes.Width.value),
// dimensions.tileSize = Number(dziXML.getElementsByTagName('Image')[0].attributes.TileSize.value)

};
Insert cell
Insert cell
deck = require.alias({
// optional dependencies
h3: {}
// })('deck.gl@latest/dist.min.js')
// })('deck.gl@8.3.7/dist.min.js')
// })('deck.gl@8.4.0-alpha.2/dist.min.js')
})('deck.gl@9.0.5/dist.min.js')




// deck.gl@8.3.7/dist.min.js
Insert cell
// https://observablehq.com/@jamesleesaunders/calculating-vector-rotations
mathGl = require('https://bundle.run/math.gl@2.3.3')
Insert cell
clamp = mathGl.clamp
Insert cell
Matrix4 = mathGl.Matrix4
Insert cell
modelMatrix = new Matrix4().translate([x_translate, 0, 0]);
Insert cell
loaders = deck && window.loaders
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more