Notebooks 2.0 is here.
show_moon = true
ROOT_URL = original_url
// ROOT_URL = ''
// ROOT_URL = new_url
{
// console.log('defining layer!')
const autoHighlight = true
const moonLayer = new deck.TileLayer({
pickable: autoHighlight,
tileSize: dimensions.tileSize,
autoHighlight,
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
});
var layers = []
if (show_moon === true){
layers = [moonLayer]
} else {
layers = []
}
deckgl.setProps({layers: layers});
}
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,
});
}
inst_height = 850
dimensions = ({
'height': 24000,
'width': 24000,
'tileSize':512
})
original_url = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/image-tiles/moon.image'
new_url = 'https://raw.githubusercontent.com/cornhundred/deck.gl-data/master/website/image-tiles/moon.image'
INITIAL_VIEW_STATE = ({
target: [13000, 13000, 0],
zoom: -5
})
getTileData = ({x, y, z}) => {
// console.log('getTileData', x, y, z)
var full_url = `${ROOT_URL}/moon.image_files/${15 + z}/${x}_${y}.jpeg`
console.log('full url', full_url)
return loaders.load(full_url);
}
renderSubLayers = props => {
const {
bbox: {left, bottom, right, top}
} = props.tile;
const {width, height} = dimensions;
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)
]
});
}
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)
};
// deck = require.alias({
// // optional dependencies
// h3: {},
// s2Geometry: {}
// })('deck.gl@8.3.7/dist.min.js')
deck = require.alias({
// optional dependencies
h3: {},
s2Geometry: {}
})('deck.gl@8.4.6/dist.min.js')
// https://observablehq.com/@jamesleesaunders/calculating-vector-rotations
mathGl = require('https://bundle.run/math.gl@2.3.3')
clamp = mathGl.clamp
// // via https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
// loaders = require('@loaders.gl/3d-tiles@2.2.8/dist/dist.js')
loaders
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.
