Public
Edited
Dec 7
viewof selection = {
const target = html`<div style="height: 600px;">`;
yield target; // Give the container dimensions.
const view = new ol.View({
//center: ol.proj.transform([2, 46], 'EPSG:4326', 'EPSG:404000'),
zoom: 6,
projection: projection
})
const format = 'image/png';
const bounds = [-180.03333335, -89.96675665,
179.96684665, 90.03333335];
const wmsSource = new ol.source.TileWMS({
url: 'https://www.geotests.net/geoserver/ljegou/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
"STYLES": '',
"LAYERS": 'ljegou:world.topo.bathy.200404.3x5400x2700',
"exceptions": 'application/vnd.ogc.se_inimage',
tilesOrigin: -180.03333335 + "," + -89.96675665
},
serverType: 'geoserver'
});
const monde = new ol.layer.Tile({
source: wmsSource,
});
var projection = new ol.proj.Projection({
code: 'EPSG:404000',
units: 'degrees',
global: false
});
const map = new ol.Map({
layers: [monde],
target: target,
view: view
});
map.getView().fit(bounds, map.getSize());
invalidation.then(() => map.dispose());
map.on('singleclick', function (evt) {
document.getElementById('info').innerHTML = '';
const viewResolution = /** @type {number} */ (view.getResolution());
const url = wmsSource.getFeatureInfoUrl(
evt.coordinate,
viewResolution,
'EPSG:3857',
{'INFO_FORMAT': 'text/html'},
);
if (url) {
fetch(url)
.then((response) => response.text())
.then((html) => {
document.getElementById('info').innerHTML = html;
});
}
});
return target;
}
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.
