31:T7f7,viewof selection = { const target = html`

`; 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+'
' + FORMAL_EN + ''; const coordinates = event.mapBrowserEvent.coordinate; overlay.setPosition(coordinates); }) map.addInteraction(select); invalidation.then(() => map.dispose()); return target; }32:[] 2f:{"title":"Test d'OpenLayers avec une source WFS GeoServer Sigma et des popups","cells":[{"id":0,"value":"# Test d'OpenLayers avec une source WFS GeoServer Sigma et des popups","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"selection.map(f => f.get(\"SOVEREIGNT\"))[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":" ol = { // OpenLayers doesn’t publish a build to npm. :(\n const ol = await require(\"https://cdn.jsdelivr.net/npm/ol@v10.7.0/dist/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``); \n \n console.log(ol)\n \n return ol;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"Inspiré de : https://observablehq.com/@mbostock/hello-openlayers,\n https://observablehq.com/@mbostock/hello-openlayers-select,\n https://observablehq.com/@tburleigh/openlayers-inverted-vector-layer,\n et https://observablehq.com/@upuli24/human-trafficking-around-the-globe-2002-2018","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}