31:T80a,myMap = { button; // Create and yeild div to place map in let container = DOM.element('div', {style: `width:${width}px;height:${width/1.5}px`}); yield container; // Create a map object and add a layer to it. let map = L.map(container, {center: [47, 2], zoom: 6}); L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { }).addTo(map); // To turn points into circleMarkers const circleOptions = { fillColor: "RoyalBlue", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.6, radius: 6 }; // Add geoJSON data to map for (var i = 0; i < data.length; i++) { var popup = L.popup({ minWidth: 310, closeOnClick: false, autoClose: false }).setContent("" + data[i][2] + " " + data[i][1] + "
" + '(observations start in ' + data[i][6] + ')' + "
" + '

' + '

1870

' + '

2018

' + '

' ); circleOptions.fillOpacity = 1. - (data[i][6] - 1870) / (2018 - 1900); L.circleMarker([data[i][3], data[i][4]], circleOptions) .bindPopup(popup) .addTo(map); } map.eachLayer(function(layer) { L.setOptions(layer, {riseOnHover: true}); }); //================================================= map.on('click', function(e) { map.eachLayer(function(layer) { if (layer instanceof L.CircleMarker) { layer.closePopup() } }) }); //================================================= var a = Array.from({length: 2}, () => Math.floor(Math.random() * data.length)); i = 0; map.eachLayer(function(layer) { if (layer instanceof L.CircleMarker) { if (a.indexOf(i) != -1) { layer.openPopup(); } i = i + 1; } }); }32:T4d5,md`Here is an interactive map with the following features : * You can display the warming stripes for a site by clicking on a marker. * Multiple displays are possible giving the user the possibility to compare one site to another (click on the map to remove all selected sites). * The color scale goes from blue to red representing respectively colder years and warmer years, respectively, relative to the mean calculated accross 30 years of the 1980-2009 period for each site. * Only observation sites with the complete 30 years of the 1980-2009 period have been selected. * The gray color represents missing values since the beginning of the observation period for each site. * The opacity of the markers indicates the starting year of observations (darker respresents an earlier starting date). * Files processed use the mean temperature indice (TG) and are available from the European Climate Assessment & Dataset project (ECA&D) from https://www.ecad.eu/indicesextremes * Processing (anomalies, warming stripes creation) has been done with a Python notebook available from : https://github.com/PBrockmann/ClimateStripes * More information on warning stripes can be found at : https://en.wikipedia.org/wiki/Warming_stripes `33:[] 2f:{"title":"Warming Stripes for different observation sites","cells":[{"id":0,"value":"md`# Warming Stripes for different observation sites`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`\n

\n\nData from the European Climate Assessment & Dataset project (ECA&D)\n\nUpdated 2019/12/02\n\nNew version from with same levels for all sites:
\nhttps://observablehq.com/@pbrockmann/climate-stripes-for-different-observation-sites\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof button = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`\nThanks to :\n * Ed Hawkins and the site https://showyourstripes.info/\n * Felix Kohlgrüber for his works on Warming Stripes visible from a Observable notebook https://observablehq.com/@fkohlgrueber/warming-stripes\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"src = \"https://raw.githubusercontent.com/PBrockmann/ClimateStripes/master/data.json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = (await fetch(src)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}