viewof selection = {
const target = html`<div style="height: 600px;">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>`;
yield target; // Give the container dimensions.
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
const overlay = new ol.Overlay({
element: container,
autoPan: {
animation: {
duration: 250,
},
},
});
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
const vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'https://www.geotests.net/geoserver/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ljegou%3Ane_110m_admin_0_countries&maxFeatures=200&outputFormat=application%2Fjson',
serverType: 'geoserver'
});
const countries = new ol.layer.Vector({
source: vectorSource
});
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
countries
],
overlays: [overlay],
target,
view: new ol.View({
center: ol.proj.transform([1.5, 42.9], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
target.value = []; // Initial empty selection.
const select = new ol.interaction.Select();
select.on("select", event => {
target.value = select.getFeatures().getArray();
select.getFeatures().getArray()
target.dispatchEvent(new Event("input", {bubbles: true}));
const SOVEREIGNT = target.value[0].values_.SOVEREIGNT;
const FORMAL_EN = target.value[0].values_.FORMAL_EN;
content.innerHTML = 'Pays : '+SOVEREIGNT+'<br><code>' + FORMAL_EN + '</code>';
const coordinates = event.mapBrowserEvent.coordinate;
overlay.setPosition(coordinates);
})
map.addInteraction(select);
invalidation.then(() => map.dispose());
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.
