2e:null 2f:["$","title",null,{"children":"Test d'OpenLayers avec une source WFS GeoServer Sigma et des popups | Sigma | Observable"}] 34: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; }35:[] 32:{"id":"bcf1ef94083687e6","slug":"openlayers-source-wfs","title":"Test d'OpenLayers avec une source WFS GeoServer Sigma et des popups","thumbnail":"2ae6791a4dfef1cd4652beeb983042f01de57b721ca85321edc35a0451f23792","access_level":"public","create_time":"$D2022-12-17T10:34:38.850Z","update_time":"$D2025-12-04T17:36:06.658Z","view_time":null,"first_public_time":"$D2022-12-18T10:37:01.739Z","has_unpublished_edits":null,"fork":{"id":"b844e8dc966b9306","slug":null,"title":"Test de l'API OPenLayers","owner":{"id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma"}},"stars":0,"starred":false,"owner":{"type":"team","id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma","avatar_url":"https://avatars-next.observableusercontent.com/e9322803ac5739951b87803227b90baceb0802254d302b995376a94204c226e7","tier":"pro_2024"},"version":191,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null}],"members":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null,"role":"editor"},{"type":"team","id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma","avatar_url":"https://avatars-next.observableusercontent.com/e9322803ac5739951b87803227b90baceb0802254d302b995376a94204c226e7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4343dbcc9aaf7764","slug":"webmapping","title":"WebMapping","owner":{"id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"selection.map(f => f.get(\"SOVEREIGNT\"))[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"