31:T618,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; const map = L.map(container, { maxZoom: 13, minZoom: 6, }) .setView([52.243333, 5.634167], 7) .setMaxBounds([ [49, 3.3], [55.4, 7.4] ]); let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap contributors', }).addTo(map); const geomapVector = L.vectorGrid.slicer(topojson.feature(geologicalmap, geologicalmap.objects.geologieNL), { vectorTileLayerStyles: { sliced: ({mapCode}, zoom) => ({ stroke: true, weight: 0.05, opacity: 0.9, color: `#333`, fill: true, fillColor: `rgb(${key[mapCode].color})`, fillOpacity: 0.8 }) }, interactive: true, getFeatureId: ({properties}) => properties.id }) .on(`mouseover`, ({layer}) => { const { properties } = layer; geomapVector.setFeatureStyle(properties.id, hoverStyle); mutable formation = `

${properties.epoch}

${properties.period}

${key[properties.mapCode].info}` // maybe used tagged template literal? layer.bringToFront(); }) .on(`mouseout`, ({layer}) => geomapVector.resetFeatureStyle(layer.properties.id)) .addTo(map); // map.fitBounds(grandCentralLayer.getBounds()); }32:T57d6,key = ({ Sb1: { info: 'Bligh Bank Lp.; zeezand', color: '230,255,191' }, Sb2: { info: 'Terschellingerbank Lp.; omgewerkt (peri-)glaciaal slibhoudend zeezand (slib <10%)', color: '191,255,166' }, Sb3: { info: 'Buitenbanken Lp.; omgewerkt grindhoudend rivierzand', color: '255,191,0' }, Sb4: { info: 'Indefatigable Grounds Lp.; omgewerkt glaciaal grind en grindhoudend zand', color: '255,230,217' }, U1: { info: 'Urania Formatie Western Mud Hole Lp.;zeer fijn omgewerkt (peri-)glaciaal zand en slib (slib >10%)', color: '153,255,128' }, U2: { info: 'Urania Formatie Well Hole Lp.; uiterst fijn tot zeer fijn (slbihoudend) zeezand en slib', color: '204,204,102' }, Na1: { info: 'Laagpakket van Schoorl / Zandvoort; duin- en strandzand', color: '255,255,204' }, Na2: { info: 'Formatie van Naaldwijk; zeeklei en -zand', color: '230,230,74' }, Na3: { info: 'Formatie van Naaldwijk / Formatie van Nieuwkoop; zeeklei en -zand met inschakelingen van veen', color: '145,171,0' }, Na4: { info: 'Formatie van Naaldwijk op Formatie van Nieuwkoop; zeeklei op veen', color: '217,191,125' }, Na5: { info: 'Formatie van Naaldwijk op Pleistocene formaties; zeeklei en -zand op zand', color: '230,242,125' }, Na6: { info: 'Laagpakket van Walcheren; zeeklei en -zand', color: '230,230,77' }, Na7: { info: 'Laagpakket van Walcheren / Formatie van Nieuwkoop; zeeklei en -zand met inschakelingen van veen', color: '217,191,128' }, Na8: { info: 'Laagpakket van Walcheren op Formatie van Nieuwkoop; zeeklei op veen', color: '179,153,51' }, Na9: { info: 'Laagpakket van Walcheren op Formatie van Nieuwkoop op Laagpakket van Schoorl / Zandvoort; zeeklei op veen op duin- en strandzand', color: '204,255,128' }, Na10: { info: 'Laagpakket van Walcheren op Laagpakket van Schoorl / Zandvoort; zeeklei op duin- en strandzand', color: '102,179,51' }, Na11: { info: 'Laagpakket van Walcheren op Formatie van Nieuwkoop / Formatie van Echteld; zeeklei en -zand op veen met inschakelingen van rivierklei en -zand', color: '204,230,102' }, Na12: { info: 'Laagpakket van Walcheren op Formatie van Echteld; zeeklei op rivierzand en -klei', color: '179,217,51' }, Na13: { info: 'Laagpakket van Walcheren op Formatie van Nieuwkoop, Hollandveen Lp. op Laagpakket van Wormer; zeeklei op veen op zeeklei en -zand', color: '179,242,77' }, Na14: { info: 'Laagpakket van Walcheren op Laagpakket van Wormer; zeeklei en -zand', color: '230,242,128' }, Na15: { info: 'Laagpakket van Walcheren op Pleistocene formaties; zeeklei op zand', color: '153,179,89' }, Na16: { info: 'Laagpakket van Wormer; zeeklei en -zand', color: '89,153,77' }, Na17: { info: 'Laagpakket van Wormer / Formatie van Nieuwkoop; zeeklei en -zand met inschakelingen van veen', color: '191,128,89' }, Ni1: { info: 'Formatie van Nieuwkoop; veen', color: '153,115,64' }, Ni2: { info: 'Hollandveen Lp. op Formatie van Naaldwijk, Lp. van Wormer; veen op zeeklei en -zand', color: '230,204,166' }, Ni3: { info: 'Formatie van Nieuwkoop / Formatie van Echteld; veen met inschakelingen van rivierklei en -zand', color: '230,145,84' }, Ni4: { info: 'Formatie van Nieuwkoop op Formatie van Naaldwijk}, Laagpakket van Schoorl / Zandvoort; veen op duin- en strandzand', color: '128,77,77' }, Ni5: { info: 'Laagpakket van Griendtsveen; veen', color: '230,255,242' }, Ec1: { info: 'Formatie van Echteld; rivierklei op rivierzand', color: '179,255,217' }, Ec2: { info: 'Formatie van Echteld / Formatie van Nieuwkoop; rivierklei en -zand met inschakelingen van veen', color: '153,255,217' }, Ec3: { info: 'Formatie van Echteld / Formatie van Nieuwkoop op Formatie van Naaldwijk; rivierklei en -zand met inschakelingen van veen op zeeklei en -zand', color: '166,230,191' }, Ec4: { info: 'Formatie van Echteld / Formatie van Nieuwkoop op Formatie van Boxtel; rivierklei en -zand met inschakelingen van veen op zand', color: '153,204,179' }, Ec5: { info: 'Formatie van Echteld op Formatie van Boxtel; rivierklei op zand', color: '140,179,153' }, Ec6: { info: 'Formatie van Echteld op Formatie van Kreftenheye; rivierklei op rivierzand en -grind', color: '128,153,128' }, Ec7: { info: 'Formatie van Echteld op Formatie van Beegden; rivierklei op rivierzand en -grind', color: '255,255,140' }, Bx1: { info: 'Laagpakket van Kootwijk; stuifzand', color: '204,191,77' }, Bx2: { info: 'Laagpakket van Singraven; beekzand en -leem.

Zie ook De uitlegpagina over Zuid-Limburg

', color: '153,153,77' }, Bx3: { info: 'Laagpakket van Singraven; veen', color: '242,255,140' }, Bx4: { info: 'Laagpakket van Delwijnen; rivierduinzand', color: '255,217,102' }, Bx5: { info: 'Laagpakket van Wierden; dekzand', color: '255,191,38' }, Bx6: { info: 'Formatie van Boxtel met een dek van het Laagpakket van Wierden; fluvioperiglaciale afzettingen (leem en zand) met een zanddek', color: '230,217,128' }, Bx7: { info: 'Laagpakket van Schimmert; leem (löss).

Zie ook De uitlegpagina over Zuid-Limburg

', color: '230,204,51' }, Bx8: { info: 'Laagpakket van Schimmert op gestuwde afzettingen; zandige leem (löss) op gestuwd zand en -grind', color: '204,102,25' }, Bx9: { info: 'Laagpakket van Wierden op Formatie van Boxtel; dekzand op veen', color: '217,230,255' }, Be1: { info: 'Laagpakket van Oost-Maarland; rivierklei op rivierzand en -grind

Zie ook De uitlegpagina over Zuid-Limburg

', color: '191,217,255' }, Be2: { info: 'Formatie van Beegden; rivierklei op rivierzand en -grind', color: '140,191,255' }, Be3: { info: 'Formatie van Beegden; rivierzand en -grind', color: '115,166,255' }, Be4: { info: 'Formatie van Beegden veelal met een dek van de Formatie van Boxtel, Laagpakket van Wierden; rivierzand en -grind veelal met een zanddek', color: '89,140,255' }, Be5: { info: 'Formatie van Beegden met een dek van de Formatie van Boxtel, Laagpakket van Schimmert; rivierzand en -grind met een dek van leem.

Zie ook De uitlegpagina over Zuid-Limburg

', color: '204,217,230' }, Kr1: { info: 'Formatie van Kreftenheye; rivierzand en -grind', color: '166,191,230' }, Kr2: { info: 'Laagpakket van Well met een dek van de Formatie van Beegden; rivierzand en -grind met een dun dek van zand en klei', color: '255,204,204' }, Dr1: { info: 'Laagpakket van Gieten; grondmorene (zandige en grindige leem, keileem)', color: '255,140,204' }, Dr2: { info: 'Laagpakket van Gieten met een dek van de Formatie van Boxtel, Laagpakket van Wierden; grondmorene met een zanddek', color: '255,179,204' }, Dr3: { info: 'Laagpakket van Gieten op gestuwde afzettingen; grondmorene op gestuwd zand en grind', color: '255,77,204' }, Dr4: { info: 'Laagpakket van Gieten en oudere gestuwde afzettingen; grondmorene en oudere gestuwde afzettingen', color: '191,153,179' }, Dr5: { info: 'Laagpakket van Schaarsbergen; glaciofluviale afzettingen (grof zand en grind)', color: '230,153,25' }, Dn1: { info: 'Formatie van Drachten met een dek van de Fm. van Boxtel, Laagpakket van Wierden; fluvioperiglaciale afzettingen (leem en zand) met een zanddek', color: '0,255,204' }, Ur1: { info: 'Laagpakket van Lingsfort; rivierzand en -grind', color: '230,242,204' }, Pe1: { info: 'Formatie van Peelo; glaciofluviale afzettingen (grof tot fijn zand) en glaciolacustriene afzettingen (zwak siltige klei}, potklei)', color: '166,179,217' }, St1: { info: 'Formatie van Sterksel met een dek van de Formatie van Boxtel; rivierzand en -grind met een zanddek', color: '77,77,255' }, Sy1: { info: 'Formatie van Stamproy met een dek van de Formatie van Boxtel; fijn tot grof zand en leem met een zanddek', color: '255,102,153' }, Wa1: { info: 'Formatie van Waalre met een dek van de Formatie van Boxtel; rivierzand en -klei met een zanddek', color: '179,217,255' }, UAP1: { info: 'Formatie van Urk, Appelscha en Peize; door zouttektoniek omhooggedrukt rivierzand en -grind', color: '204,166,255' }, G1: { info: 'Gestuwde Pleistocene formaties, veelal rivierzand en -grind', color: '128,89,128' }, G2: { info: 'Gestuwde Tertiaire formaties, veelal zeeklei en -zand', color: '255,255,191' }, Ki1: { info: 'Kiezeloölietformatie Laagpakket van Waubach; rivierzand en -grind

Zie ook De uitlegpagina over Zuid-Limburg

', color: '255,242,128' }, Ki2: { info: 'Kiezeloölietformatie Laagpakket van Waubach met een dek van de Formatie van Boxtel, Laagpakket van Schimmert; rivierzand en -grind met een dek van leem

Zie ook De uitlegpagina over Zuid-Limburg

', color: '255,242,64' }, Oo1: { info: 'Formatie van Oosterhout; zeezand', color: '242,217,0' }, Br1: { info: 'Formatie van Breda veelal met een dek van de Formatie van Boxtel; strandzand, zeezand en -klei veelal met een dek van leem, zand of hellingafzettingen.

Zie ook De uitlegpagina over Zuid-Limburg

', color: '204,255,0' }, Ru1: { info: 'Rupelformatie Laagpakket van Boom veelal met een dek van de Formatie van Boxtel; zeeklei veelal met een zanddek.

Zie ook De uitlegpagina over Zuid-Limburg

', color: '191,242,0' }, Ru2: { info: 'Rupelformatie Laagpakket van Boom / Bilzen veelal met een dek van de Formatie van Boxtel; strandzand, zeezand en -klei veelal met een dek van leem of hellingafzettingen

Zie ook De uitlegpagina over Zuid-Limburg

', color: '102,204,0' }, To1: { info: 'Formatie van Tongeren veelal met een dek van de Formatie van Boxtel; zeezand en -klei veelal met een dek van leem of hellingafzettingen.

Zie ook De uitlegpagina over Zuid-Limburg

', color: '3,128,128' }, Do1: { info: 'Formatie van Dongen veelal met een dek van de Formatie van Boxtel; zeezand en -klei veelal met een zanddek', color: '166,230,153' }, Mt1: { info: 'Formatie van Maastricht veelal met een dek van de Formatie van Boxtel; kalksteen veelal met een dek van leem of hellingafzettingen

Zie ook De uitlegpagina over Zuid-Limburg

', color: '128,230,128' }, Gu1: { info: 'Formatie van Gulpen veelal met een dek van de Formatie van Boxtel; kalksteen veelal met een dek van leem of hellingafzettingen

Zie ook De uitlegpagina over Zuid-Limburg

', color: '64,230,77' }, Va1: { info: 'Formatie van Vaals veelal met een dek van de Formatie van Boxtel; zand(steen) of klei veelal met een dek van leem of hellingafzettingen

Zie ook De uitlegpagina over Zuid-Limburg

', color: '0,217,0' }, Ak1: { info: 'Formatie van Aken veelal met een dek van de Formatie van Boxtel; zand(steen) en klei veelal met een dek van leem of hellingafzettingen

Zie ook De uitlegpagina over Zuid-Limburg

', color: '0,191,0' }, VZK1: { info: 'Vlieland Zandsteen en Kleisteen Fm. veelal met een dek van de Formatie van Boxtel; mariene zand- en kleisteen veelal met een zanddek

Zie ook De uitlegpagina over Zuid-Limburg

', color: '128,102,179' }, MR1: { info: 'Muschelkalk en Röt Fm. veelal met een dek van de Formatie van Boxtel; kalksteen en kleisteen veelal met een zanddek.', color: '128,102,179' }, Ep1: { info: 'Formatie van Epen, veelal met een dek van de Formatie van Boxtel; schalies en zandsteen}, veelal met een dek van leem of hellingafzettingen

Zie ook De uitlegpagina over Zuid-Limburg

', color: '130,106,127' }, }) 33:[] 2f:{"title":"Leaflet Geological Map of the Netherlands / Geologische Kaart Nederland","cells":[{"id":0,"value":"md`# Leaflet Geological Map of the Netherlands / Geologische Kaart Nederland`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`A quick Leaflet.js geological map of the Netherlands. For a more complete version see [GeologischeKaart.nl](https://geologischekaart.nl). If it says \\`map = TypeError: Cannot read property 'slicer' of undefined\\` just run the cell again\n\nMap data from the [Dutch Geological Survey](https://www.grondwatertools.nl/geologische-overzichtskaart)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof formationInof = html`${formation}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"mutable formation = `

Hover met je muis over een geologische laag

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"hoverStyle = ({\n stroke: true,\n weight: 2,\n color: `#1E1E1E`,\n fill: true,\n fillColor: `#666`,\n fillOpacity: 0.6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"geologicalmap = (await fetch('https://gist.githubusercontent.com/JulesBlm/4061452a791c805e36b72ef1ba606f45/raw/f79a8193041bf4fdbb412dfddac89d636a6bb6ba/geologyNL.topojson')).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`## Dependancies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"vectorLayer = L, require('leaflet.vectorgrid').catch(() => L.vectorGrid)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}