31:Tbb4,#### 1) Import PlotOverlay and getActivePlotOverlays To use overlays import PlotOver and getActivePlotOverlays from @geodan/story-functions ```js import {PlotOverlay, getActivePlotOverlays} from "@geodan/story-functions" ``` #### 2) Create some overlays Create some overlays for your plots, the id can be used to activate/deactivate an overlay, an overlay can contain multiple marks which will be shown. The plotId needs to be set to the id of the plot you want to show the overlay on, this is the same id you supply to the function in plot: see step 4. ```js plotOverlays = [ { id: "myExampleOverlay", plotId: "MyPlot", marks: [ Plot.line([{x:2,y:2},{x:3,y:3}],{x:'x',y:'y', stroke: "orange", strokeWidth: 8}), Plot.line([{x:2,y:3},{x:3,y:4}],{x:'x',y:'y', stroke: "blue", strokeWidth: 8}) ] } ]; ``` #### 3) Create instance of PlotOverlay In your notebook instantiate PlotOverlay ```js myPlotOverlay = new PlotOverlay(plotOverlays); ``` In the above example you can directly pass the overlays but it's also possible to add them at a later time using `myPlotOverlay.addOverlay()` or `myPlotOverlay.addOverlays()` #### 4) Make you plot reactive to show/hide overlays When creating a plot, place `...getActivePlotOverlays(id)` under marks, this function will return all activated overlays for the given id. When active overlays changes the plot gets updated. ```js Plot.plot({ marks: [ Plot.line([{x: 1,y:1},{x:2,y:2},{x:3,y:3},{x:4,y:4}],{x:'x',y:'y'}), ...getActivePlotOverlays("MyPlot") ] }) ``` #### 4) Activate overlays There are multiple ways to show overlays ##### 4.1) Activate manually Activate an overlay by calling `myPlotOverlay.activateOverlay(id)` the id needs to be in the list of added overlays. Multiple overlays on multiple plots can be active at the same time. ##### 4.2) Create a hover text The PlotView class holds a function which can be used to create a HTML element which activates/deactivates an overlay when hovering over a text. In a HTML cell call `myPlotOverlay.createHover('plotId', 'text to show', 'color of the text')` to create a hoverable text. ```js This is a \${myPlotOverlay.createHover("myExampleOverlay", "HOVER", "hotpink")} ``` ##### 4.3) Directly access plotActiveOverlays To directly set an overlay which is not in the supplied overlays, call `myPlotOverlay.setActiveOverlays()` When doing so you are not able to control overlays independently, you need to clear all active overlays when you want to remove the overlay. It is better to add the overlay `myPlotOverlay.addOverlay({})` and call `myPlotOverlay.activateOverlay(id)` ```js myPlotoverlay.clearActiveOverlays(); ``` #### 5) Remove overlays Overlays can be removed from a plot by calling `myPlotOverlay.deactivateOverlay(id)` this removes the overlay from the active overlays for given overlay id. When using the hover text (4.2) this is done automatically. To clear all overlays, call `myPlotOverlay.clearActiveOverlays()`32:T436,mapData = [ {entity_id: "b17c99c0-65af-4451-a700-a21b24fc611e", name: "P+R Stationsweg", geom: "{\"type\":\"Point\",\"coordinates\":[4.78184,51.595]}"}, {entity_id: "c724ecc9-e6ae-42aa-b462-8ce7cf48912a", name: "Garage De Barones", geom: "{\"type\":\"Point\",\"coordinates\":[4.772406,51.58734]}"}, {entity_id: "4498b82f-6da9-4887-b2a1-be921341d1d0", name: "Garage Chasséparking", geom: "{\"type\":\"Point\",\"coordinates\":[4.7841225,51.5864117]}"}, {entity_id: "c22bc535-e3cb-41e6-a4aa-0870f94ee478", name: "Garage Concordiastraat", geom: "{\"type\":\"Point\",\"coordinates\":[4.7755108,51.584334]}"}, {entity_id: "07f8962e-d251-4055-b9a8-0752024b355e", name: "Garage De Prins", geom: "{\"type\":\"Point\",\"coordinates\":[4.7710920668267,51.5914616]}"}, {entity_id: "6ea457a0-c73c-4b1a-8602-ff6af1114fe3", name: "Garage Het Turfschip", geom: "{\"type\":\"Point\",\"coordinates\":[4.78579695004958,51.5889012656505]}"}, {entity_id: "d5565e93-2f9f-4074-8548-e631b72bae66", name: "P+R Station", geom: "{\"type\":\"Point\",\"coordinates\":[4.777855,51.596259]}"} ]33:T4b6,class PlotOverlay { overlays = []; constructor(overlays) { this.overlays = overlays ?? []; } addOverlay(overlay) { this.addOverlays([overlay]); } addOverlays(overlays) { this.overlays = [...this.overlays, ...overlays]; } getActiveOverlays() { return mutable plotActiveOverlays; } setActiveOverlays(overlays) { mutable plotActiveOverlays = [...overlays]; } clearActiveOverlays() { mutable plotActiveOverlays = []; } activateOverlay(id) { mutable plotActiveOverlays = [...mutable plotActiveOverlays, ...this.overlays.filter((o) => o.id === id)]; } deactivateOverlay(id) { mutable plotActiveOverlays = [...mutable plotActiveOverlays.filter((o) => o.id !== id)]; } createHover(id, content, color) { const element = html` ${content} ` element.style.color = color ?? 'black'; element.style.textDecoration = "underline"; element.style.cursor = "pointer"; element.addEventListener('mouseenter', () => { this.activateOverlay(id) }); element.addEventListener('mouseout', () => { this.deactivateOverlay(id) }); return element; } }34:T57c,function* createMap(geoJSON, options = {}) { const { width = "900px", height = "400px", style = "https://fileserv.beta.geodan.nl/mapbox/styles/basiskaart_style_grey.json", center = [4.775357, 51.590140], zoom = 13, scrollZoom = true } = options; const container = html`

`; yield container; const map = (container.value = new maplibre.Map({ container, center: center, zoom: zoom, style: style, scrollZoom: scrollZoom })); map.on('load', function () { map.addSource('mapData', { 'type': 'geojson', 'data': geoJSON }); map.addLayer({ 'id': 'symbolLayer', 'source': 'mapData', 'type': 'circle', 'paint': { 'circle-radius': 8, 'circle-color': '#eb9b34' } }); map.addLayer({ id: "labelLayer", type: "symbol", source: 'mapData', layout: { "text-font": ["Noto Sans Italic"], "text-field": ["get", "name"], "text-anchor": "top", "text-size": 12, "text-offset": [0, 0.8] }, paint: { "text-color": "black", "text-halo-color": "#ffffff", "text-halo-width": 3, "text-halo-blur": 1 } }); }); invalidation.then(() => map.remove()); return map; }35:[] 2f:{"title":"Story Functions","cells":[{"id":0,"value":"# Story Functions","pinned":false,"hidden":false,"mode":"md"},{"id":489,"value":"A collection of some handy functions that we use in mulitple notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Plot Overlay","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"Add overlays to your plots, this can be useful to easily add/remove data from your plot or highlight something in the data.","pinned":false,"hidden":false,"mode":"md"},{"id":457,"value":"### Example","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"Create a ${myPlotOverlay.createHover(\"myExampleOverlay\", \"HOVERABLE\", \"hotpink\")} text using createHover() which automatically actives and deactivates an overlay when the users mouse enters or leaves the text.\n\n
\nAnother option is to call activateOverlay and deactivateOverlay to\n \nor overlays manually.\n\n
\nOr \n \nset an overlay active without being in the overlays list and removing others. All active overlays can be cleared using ","pinned":false,"hidden":false,"mode":"html"},{"id":20,"value":"Plot.plot({\n marks: [\n Plot.line([{x: 1,y:1},{x:2,y:2},{x:3,y:3},{x:4,y:4}],{x:'x',y:'y'}),\n ...getActivePlotOverlays(\"MyPlot\")\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"plotOverlays = [\n {\n id: \"myExampleOverlay\",\n plotId: \"MyPlot\",\n marks: [\n Plot.line([{x:2,y:2},{x:3,y:3}],{x:'x',y:'y', stroke: \"orange\", strokeWidth: 8}),\n Plot.line([{x:2,y:3},{x:3,y:4}],{x:'x',y:'y', stroke: \"blue\", strokeWidth: 8})\n ]\n },\n {\n id: \"myExampleOverlayManual\",\n plotId: \"MyPlot\",\n marks: [\n Plot.line([{x:1,y:2},{x:2,y:4}],{x:'x',y:'y', stroke: \"green\", strokeWidth: 8}),\n Plot.line([{x:3,y:2},{x:4,y:3}],{x:'x',y:'y', stroke: \"yellow\", strokeWidth: 8})\n ]\n }\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"myPlotOverlay = new PlotOverlay(plotOverlays);","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"### Howto","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"## Map","pinned":false,"hidden":false,"mode":"md"},{"id":496,"value":"### Example","pinned":false,"hidden":false,"mode":"md"},{"id":513,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"mapDataGeoJSON = toGeoJSONFeatureCollection(mapData, { propertyFields: [ \"entity_id\", \"name\" ]});","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"myMap = createMap(mapDataGeoJSON, { width: \"1000px\", height: \"400px\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":501,"value":"### Plot Overlay","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"mutable plotActiveOverlays = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"Unable to put getActivePlotOverlays into the PlotOverlay class, when doing so plotActiveOverlays will update our class everytime. Should be possible to work around this somehow.","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"function getActivePlotOverlays(plotId) {\n return plotActiveOverlays.filter((o) => o.plotId === plotId).map((o) => { return o.marks });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"### Map","pinned":false,"hidden":false,"mode":"md"},{"id":506,"value":"maplibre = await require(\"maplibre-gl\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"function toGeoJSONFeatureCollection(data, options = {}) {\n const {\n idField = \"entity_id\",\n geomField = \"geom\",\n parseGeoJSON = true,\n propertyFields = []\n } = options;\n\n const features = data.map(obj => {\n const feature = {\n type: \"Feature\",\n id: obj[idField],\n properties: {},\n geometry: parseGeoJSON ? JSON.parse(obj[geomField]) : obj[geomField]\n };\n\n propertyFields.forEach(prop => {\n feature.properties[prop] = obj[prop];\n });\n\n return feature;\n });\n\n return {\n type: \"FeatureCollection\",\n features\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"## Weather","pinned":false,"hidden":false,"mode":"md"},{"id":632,"value":"// Add a weather icon to your weather data\n// Entries in array need to have radiation and precipitation property\n// Supply hours value if data is averaged over x amount of hours\n\nfunction addWeatherIcon(data, hours = 1) {\n const radiationTreshold = 2 * hours;\n const precipitationTreshold = 0.12 * hours;\n \n data.forEach((d) => {\n d.weather_icon = d.radiation > radiationTreshold ? '🔆' : d.precipitation > precipitationTreshold ? '🌧' : '☁️';\n });\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}