OLViewer = async function* (attachement, viewHeight = 1080) {
const ol = await require("ol@7.1.0/dist/ol.js").catch(() => window.ol);
if (!ol._style)
ol._style = document.head.appendChild(
html`<link rel=stylesheet href="${await require.resolve(
"ol@7.1.0/ol.css"
)}">`
);
const img = await attachement.image();
const url = await attachement.url();
const target = html`<div tabindex="1" style="height: ${
(img.height / img.width) * viewHeight
}px;">`;
yield target; // Give the container dimensions.
const ImageLayer = ol.layer.Image;
const Map = ol.Map;
const Projection = ol.proj.Projection;
const Static = ol.source.ImageStatic;
const View = ol.View;
const { getCenter } = ol.extent;
const { defaults } = ol.interaction.defaults;
const { FullScreen } = ol.control;
const extent = [0, 0, img.width, img.height];
const projection = new Projection({
code: "xkcd-image",
units: "pixels",
extent: extent
});
const map = (target.value = new Map({
controls: defaults().extend([new FullScreen()]), // this removes the normal buttons, why?
layers: [
new ImageLayer({
source: new Static({
url: url,
projection: projection,
imageExtent: extent
})
})
],
target,
view: new View({
projection: projection,
center: getCenter(extent),
zoom: 2,
maxZoom: 8
})
// use ctrl/cmd + drag for rotation //
// interactions: defaults({ altShiftDragRotate: false }).extend([
// new DragRotate({ condition: platformModifierKeyOnly })
// ])
}));
// cursor
map.getViewport().style.cursor = "-webkit-grab";
map.on("pointerdrag", function (evt) {
map.getViewport().style.cursor = "-webkit-grabbing";
});
map.on("pointerup", function (evt) {
map.getViewport().style.cursor = "-webkit-grab";
});
invalidation.then(() => map.dispose());
return target;
}
attachement = FileAttachment("OpenLayers-370x206.png")
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.
