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

`; yield target; // Give the container dimensions. var size = 0; var placement = 'point'; var lyr_Terrain_4 = new ol.layer.Tile({ title: 'Terrain', type: 'base', opacity: 1, minResolution: 335.3954888725654, source: new ol.source.XYZ({ attributions: ' ', url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}' }) }); var format_Karsts_8 = new ol.format.GeoJSON(); var features_Karsts_8 = format_Karsts_8.readFeatures(json_Karsts_8, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }); var jsonSource_Karsts_8 = new ol.source.Vector({ attributions: ' ' }); jsonSource_Karsts_8.addFeatures(features_Karsts_8); var lyr_Karsts_8 = new ol.layer.Vector({ declutter: true, source: jsonSource_Karsts_8, style: style_Karsts_8, interactive: true, title: '

Karsts', minResolution: 400 }); var format_provinces_14 = new ol.format.GeoJSON(); var features_provinces_14 = format_provinces_14.readFeatures( json_provinces_14, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' } ); var jsonSource_provinces_14 = new ol.source.Vector({ attributions: ' ' }); jsonSource_provinces_14.addFeatures(features_provinces_14); var lyr_provinces_14 = new ol.layer.Vector({ declutter: true, source: jsonSource_provinces_14, style: style_provinces_14, interactive: true, title: '

provinces' }); var format_prefectures_13 = new ol.format.GeoJSON(); var features_prefectures_13 = format_prefectures_13.readFeatures( json_prefectures_13, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' } ); var jsonSource_prefectures_13 = new ol.source.Vector({ attributions: ' ' }); jsonSource_prefectures_13.addFeatures(features_prefectures_13); var lyr_prefectures_13 = new ol.layer.Vector({ declutter: true, source: jsonSource_prefectures_13, maxResolution: 2800.4466152261966, style: style_prefectures_13, interactive: true, title: '

prefectures' }); var format_grottes_15 = new ol.format.GeoJSON(); var features_grottes_15 = format_grottes_15.readFeatures(json_grottes_15, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }); var jsonSource_grottes_15 = new ol.source.Vector({ attributions: ' ' }); jsonSource_grottes_15.addFeatures(features_grottes_15); var cluster_grottes_15 = new ol.source.Cluster({ distance: 100, source: jsonSource_grottes_15 }); var lyr_grottes_15 = new ol.layer.Vector({ declutter: true, source: cluster_grottes_15, style: style_grottes_15, interactive: true, title: '

Grottes' }); var mousePositionControl = new ol.control.MousePosition({ coordinateFormat: new ol.coordinate.createStringXY(4), projection: "EPSG:4326", className: "custom-mouse-position" }), attribution = new ol.control.Attribution({ collapsible: true }), fullscreen = new ol.control.FullScreen(), scaleline = new ol.control.ScaleLine(); const map = new ol.Map({ controls: new ol.control.defaults({ attribution: false }).extend([ attribution, fullscreen, mousePositionControl, scaleline ]), layers: [ //new ol.layer.Tile({ // source: new ol.source.OSM() //}) lyr_Terrain_4, lyr_Karsts_8, lyr_provinces_14, lyr_prefectures_13, lyr_grottes_15 ], target, view: new ol.View({ center: ol.proj.fromLonLat([105, 37]), zoom: 4 //minZoom: 4 }) }); target.value = []; // Initial empty selection. const divtooltip = d3 .select("body") .append("div") .attr("id", "divtooltip") // .attr("class", "tooltip") .style("opacity", 1); // Add custom interaction to the map const select = new ol.interaction.Select({ style: style_select }); select.on("select", event => { target.value = select.getFeatures().getArray(); target.dispatchEvent(new CustomEvent("input")); }); // select interaction working on "pointermove" const selectPointerMove = new ol.interaction.Select({ condition: ol.events.condition.pointerMove, style: style_select }); selectPointerMove.on("mousemove", event => { target.value = selectPointerMove.getFeatures().getArray(); target.dispatchEvent(new CustomEvent("input")); let content = document.getElementById('divtooltip'); let coordinate = event.mapBrowserEvent.coordinate; content.innerHTML = "You clicked: "; }); map.addInteraction(selectPointerMove); map.addInteraction(select); invalidation.then(() => map.dispose()); return target; }32:T556,tabloid = { var table = ''; if (buff.length) { table += '

'; if (buff[0].features) { for ( var i = 0; i < Object.keys(buff[0].features[0].values_).length; i++ ) { table += ""; } } else { for (var i = 0; i < Object.keys(buff[0]).length; i++) { table += ""; } } table += ""; if (buff[0].features) { for (var key in buff[0].features) { table += '"; i++; } } else { table += ''; Object.keys(buff[0]).forEach(key => { table += ''; }); table += ''; } table += "

" + Object.keys(buff[0].features[0].values_)[i] + "	" + Object.keys(buff[0])[i] + "
	' + buff[0].features[key].values_.gro_nom + '	' + buff[0].features[key].values_.gro_id + "	" + buff[0].features[key].values_.gro_prof + "	" + buff[0].features[key].values_.gro_deve + "	More infos
' + buff[0][key] + '

"; } return table; }33:Teeb,html``34:T414,style_provinces_14 = function(feature, resolution) { var context = { feature: feature, variables: {} }; var value = ""; var labelText = ""; var size = 0; var labelFont = "18px \'Lucida Grande\', sans-serif"; var labelFill = "rgba(0, 0, 0, 1)"; var bufferColor = "#ffffff"; var bufferWidth = 1.0; var textAlign = "left"; var offsetX = 8; var offsetY = 3; var placement = 'point'; if (feature.get("NAME_PY") !== null && resolution > 0 && resolution < 6441) { labelText = String(feature.get("NAME_PY")); } var style = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0,0,0,0.5)', lineDash: null, lineCap: 'butt', lineJoin: 'miter', width: 0.3 }), fill: new ol.style.Fill({ color: 'rgba(0,0,0,0.05)' }), text: createTextStyle( feature, resolution, labelText, labelFont, labelFill, placement, bufferColor, bufferWidth ) }) ]; return style; }35:T41c,style_prefectures_13 = function(feature, resolution) { var context = { feature: feature, variables: {} }; var value = ""; var labelText = ""; var size = 0; var labelFont = "15.6px \'Lucida Grande\', sans-serif"; var labelFill = "rgba(0, 0, 0, 1)"; var bufferColor = "#ffffff"; var bufferWidth = 1.0; var textAlign = "left"; var offsetX = 8; var offsetY = 3; var placement = 'point'; if (feature.get("PY_NAME") !== null && resolution > 0 && resolution < 448) { labelText = String(feature.get("PY_NAME")); } var style = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(228,26,28,1.0)', lineDash: null, lineCap: 'butt', lineJoin: 'miter', width: 0.5 }), fill: new ol.style.Fill({ color: 'rgba(228,26,28,0)' }), text: createTextStyle( feature, resolution, labelText, labelFont, labelFill, placement, bufferColor, bufferWidth ) }) ]; return style; }36:T561,style_grottes_15 = function(feature, resolution) { var context = { feature: feature, variables: {} }; var placement = ''; var value = ""; var labelText = ""; var clusteredFeatures = feature.get("features"); var labelFont = "bold 18px sans-serif"; var labelFill = "rgba(0, 0, 0, 1)"; var bufferColor = "rgba(0, 0, 0, 0)"; var bufferWidth = 0; var size = clusteredFeatures.length; var textAlign = "center"; var offsetX = 0; var offsetY = 0; if (size == 1) { textAlign = "left"; offsetX = 8; offsetY = 3; var feature = clusteredFeatures[0]; if ("" !== null) { labelText = String(""); } var key = value + "_" + labelText; } else { labelText = size.toString(); size = 2 * (Math.log(size) / Math.log(2)); } var style = [ new ol.style.Style({ image: new ol.style.Circle({ radius: 4.0 + size, stroke: new ol.style.Stroke({ color: 'rgba(225,225,225,1.0)', lineDash: null, lineCap: 'butt', lineJoin: 'miter', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,1.0)' }) }), text: createTextStyle( feature, resolution, labelText, labelFont, labelFill, placement, bufferColor, bufferWidth ) }) ]; return style; }37:[{"id":"cddb485cff7fd26c54e3873f391a72a779093e39a8a1b3012d119b83234df5ed1b2849209df779ea290e91b842eab458033c7561ffa4324d8ded4cc6e4a72dca","href":"https://static.observableusercontent.com/files/cddb485cff7fd26c54e3873f391a72a779093e39a8a1b3012d119b83234df5ed1b2849209df779ea290e91b842eab458033c7561ffa4324d8ded4cc6e4a72dca","name":"prefectures_13@1.js","type":"application/javascript","lastModified":1578395142049.296,"size":11712815},{"id":"54218401391ddda584e94d41d1dde675da5e367626eee3ae64d4d567e2b964d1c365367b3b51f3695a95d83a61808812e4e246153c49a21d00b6acf68e939261","href":"https://static.observableusercontent.com/files/54218401391ddda584e94d41d1dde675da5e367626eee3ae64d4d567e2b964d1c365367b3b51f3695a95d83a61808812e4e246153c49a21d00b6acf68e939261","name":"provinces_14.js","type":"application/javascript","lastModified":1578392937047.316,"size":4727371},{"id":"9a7ebf579c46c532d95aa9b5a898ecddd2ec1ba2316c2abba798ca7cc5964d8f6054d1a3b08d1ea307cbe250b8951935b45b09a7d07c9631fa21945b4d4acb29","href":"https://static.observableusercontent.com/files/9a7ebf579c46c532d95aa9b5a898ecddd2ec1ba2316c2abba798ca7cc5964d8f6054d1a3b08d1ea307cbe250b8951935b45b09a7d07c9631fa21945b4d4acb29","name":"Karsts_8.js","type":"application/javascript","lastModified":1578392864485.481,"size":197981},{"id":"e5ccddbe4745c2571b70f6e4e73b9c6f5f2fb596bff4f95ff9984e42cebe7b6f15902bb264a9d94bc976eb1cec8fca61e1385e5a4b52c6784a47cbcb6eb4d1c0","href":"https://static.observableusercontent.com/files/e5ccddbe4745c2571b70f6e4e73b9c6f5f2fb596bff4f95ff9984e42cebe7b6f15902bb264a9d94bc976eb1cec8fca61e1385e5a4b52c6784a47cbcb6eb4d1c0","name":"grottes_15.json","type":"application/json","lastModified":1611764857593.872,"size":569609}] 2f:{"title":"Grottes et karsts de chine","cells":[{"id":0,"value":"meta_titr = md`# Grottes et karsts de chine`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"html`${tabloid}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"teczone = md`### Tec Zone\nMy first Openlayers implementation in observable context based on [hello-openlayers-select](https://observablehq.com/@mbostock/hello-openlayers-select) .\nA mixed salade made from [QGIS](https://github.com/qgis/QGIS) > [qgis2web](https://github.com/tomchadwin/qgis2web) > [Openlayers 6.5.0](https://openlayers.org) > [D3js](https://d3js.org/) > Observable \n\nThe qgis2web approch match very well with the observable context (each layers have 2 files one for the layers and one for the styles ) so it's easy to give one cell for one file content ...\n\n...on works ... to arrive to something like this [this](http://www.grottes-et-karsts-de-chine.org/npds/qgis2web/index.html) \n\nThe caves points are clustered and the default style for the select is customized. Click on a selected element display a table below the map with all (brut) data of the json files.\n\n\nto do : \n full screeen does'nt work in observable context \n add layer switcher \n see how to deal with too big attached file\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"buff = selection.map(f => f.getProperties())","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`#### OL style fonctions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"createTextStyle = function(\n feature,\n resolution,\n labelText,\n labelFont,\n labelFill,\n placement,\n bufferColor,\n bufferWidth\n) {\n if (feature.hide || !labelText) {\n return;\n }\n\n if (bufferWidth == 0) {\n var bufferStyle = null;\n } else {\n var bufferStyle = new ol.style.Stroke({\n color: bufferColor,\n width: bufferWidth\n });\n }\n\n var textStyle = new ol.style.Text({\n font: labelFont,\n text: labelText,\n textBaseline: \"middle\",\n textAlign: \"left\",\n offsetX: 8,\n offsetY: 3,\n placement: placement,\n maxAngle: 0,\n fill: new ol.style.Fill({\n color: labelFill\n }),\n stroke: bufferStyle\n });\n\n return textStyle;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"style_Karsts_8 = function(feature, resolution) {\n var context = {\n feature: feature,\n variables: {}\n };\n var value = \"\";\n var labelText = \"\";\n var size = 0;\n var labelFont = \"10px, sans-serif\";\n var labelFill = \"rgba(0, 0, 0, 1)\";\n var bufferColor = \"\";\n var bufferWidth = 0;\n var textAlign = \"left\";\n var offsetX = 8;\n var offsetY = 3;\n var placement = 'point';\n if (\"\" !== null) {\n labelText = String(\"\");\n }\n var style = [\n new ol.style.Style({\n fill: new ol.style.Fill({ color: 'rgba(145,35,145,0.3)' }),\n text: createTextStyle(\n feature,\n resolution,\n labelText,\n labelFont,\n labelFill,\n placement,\n bufferColor,\n bufferWidth\n )\n })\n ];\n\n return style;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"style_select = function(feature, resolution) {\n var context = {\n feature: feature,\n variables: {}\n };\n var size = 0;\n\n console.log(feature);\n if (feature.get(\"features\")) {\n console.log(\"ok\");\n size = feature.get(\"features\").length;\n if (size > 1) {\n size = 2 * (Math.log(size) / Math.log(2));\n }\n console.log(size);\n }\n //console.log(size);\n var style = [\n new ol.style.Style({\n stroke: new ol.style.Stroke({\n color: 'black',\n width: 1.4\n }),\n fill: new ol.style.Fill({ color: 'rgba(255,255,255,0.5)' })\n }),\n new ol.style.Style({\n image: new ol.style.Circle({\n color: 'rgba(228,26,28,1.0)',\n radius: 4 + size,\n fill: new ol.style.Fill({\n color: 'rgba(255,255,255,0.5)'\n }),\n stroke: new ol.style.Stroke({\n color: 'black',\n width: 1.4\n })\n }),\n zIndex: Infinity\n })\n ];\n\n return style;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`#### Local data ressources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"json_Karsts_8 = FileAttachment(\"Karsts_8.js\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"json_provinces_14 = FileAttachment(\"provinces_14.js\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"json_grottes_15 = FileAttachment(\"grottes_15.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"json_prefectures_13 = FileAttachment(\"prefectures_13@1.js\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`#### Libs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"d3 = require(\"https://d3js.org/d3.v6.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(\n const ol = await require(\"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js\").catch(\n () => window.ol\n );\n if (!ol.css)\n ol.css = document.head.appendChild(\n html``\n );\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"html`

allo

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"{\n document.head.appendChild(\n html``\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"$$ = require(\"jquery@3.4.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"bs = require(\"bootstrap@4.5.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":956,"value":"topojson = require(\"https://unpkg.com/topojson@3.0.2/dist/topojson.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"po = require(\"popper.js@1.16.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"$$(function() {\n $('[data-toggle=\"tooltip\"]').tooltip();\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}