2d:null 2e:["$","title",null,{"children":"Basiskaart Zuid-Holland | T.E. Schouten | Observable"}] 33:T13eb,pzh_map = { const svg = d3.create('svg') .attr('viewBox', [0, 0, width, height]) .style('background', colors.svgBackground) // base styling svg.attr("fill", "none") .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") if (layers.indexOf("landmassa") >= 0) { // Landmass background svg.append("path") .attr("fill", colors.landmass) .attr("stroke", "none") .attr("d", path(topojson.feature(mapjson, mapjson.objects.landmassa))) // Landmass borders (borders -> use mesh) svg.append("path") .attr("stroke-width", 0.2) .attr("stroke", colors.landmassBorder) .attr("d", path(topojson.mesh(mapjson, mapjson.objects.landmassa))) } if (layers.indexOf("bebouwing") >= 0) { // Urban areas svg.append("path") .attr("fill", colors.bebouwing) .attr("stroke", "none") .attr("opacity", "0.7") .attr("d", path(topojson.feature(mapjson, mapjson.objects.bebouwing))) } if (layers.indexOf("rijkswegen") >= 0) { // Roads ('rijkswegen') svg.append("path") .attr("stroke-width", 1.6) .attr("stroke", colors.motorway) .attr("d", path(topojson.mesh(mapjson, mapjson.objects.rijkswegen))) } if (layers.indexOf("provinciegrenzen") >= 0) { // Prov border svg.append("path") .attr("stroke-width", 1) .attr("stroke-dasharray", "1 2") .attr("d", path(topojson.mesh(mapjson, mapjson.objects.provinciegrenzen, function(a, b) { return a !== b; }))) } // Urban areas svg.append("g") .selectAll("path") .data(topojson.feature(layerjson, layerjson.objects.n2000_simplified).features) .join("path") .attr("d", path) .attr("class", "n2k") .attr("stroke-width", .5) .attr("stroke", function(d) { if (d.properties.PAS_GEV == 'true') { return clrs.nox } else { return clrs.not_nox } }) .attr("fill", function(d) { if (d.properties.PAS_GEV == 'true') { return clrs.nox_a } else { return clrs.not_nox_a } }) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut); if (layers.indexOf("plaatsnamen") >= 0) { // Placelabels based on number of inhabitants svg.selectAll(".labels") .data(topojson.feature(mapjson, mapjson.objects.plaatsnamen).features) .join("text") .attr("class", "maplabels") .attr("text-anchor", "middle") .attr("stroke", "none") .attr("fill", colors.cityLabels) .attr("font-size", function(d) { if (d.properties.aantalinwo > 100000) { return "13px" } else { return "0px" } }) .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("dy", ".35em") .text(function(d, i) { return (d.properties.naamnl).toString(); }) } if (settings.indexOf("legend") >= 0) { svg.append("g") .attr("transform", "translate(50, 28)") .append("text") .attr("x", 0) .attr("y", 0) .attr("stroke", "none") .attr("fill", "black") .attr("id", "textOnHover") .attr("font-size", "46px") } // if (settings.indexOf("logo") >= 0) { // svg.append("rect") // .attr("stroke", "none") // .attr("y", height - 66 + "px") // .attr("x", width - 200 + "px") // .attr("width", "174px") // .attr("height", "41px") // .attr("fill", "#F5F5F5") // .attr("opacity", ".85") // // PZH-logo // svg.append("text") // .attr("stroke", "none") // .attr("fill", clr_logo) // .attr("text-anchor", "end") // .append("tspan") // .attr("font-size", "16px") // .attr("y", height - 52 + "px") // .attr("x", width - 130 + "px") // .text("provincie") // .append("tspan") // .attr("font-size", "28px") // .attr("y", height - 29 + "px") // .attr("x", width - 130 + "px") // .text("Zuid") // .append("tspan") // .attr("font-size", "28px") // .attr("y", height - 41 + "px") // .attr("x", width - 28 + "px") // .text("Holland"); // } if (settings.indexOf("border") >= 0) { // border svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("stroke", "white") .attr("stroke-width", 12) .attr("opacity", "0.8") } return svg.node() }34:T49d,handleMouseOver = function (d) { // Add interactivity mutable stored_state = { stroke: this.getAttribute('stroke'), fill: this.getAttribute('fill')} let nox_string = '' if (d.properties.PAS_GEV == 'true') { nox_string = 'Stikstofgevoelig' } else { nox_string = 'Niet stikstofgevoelig' } d3.select("#textOnHover") .attr("font-size", "16px") .append("tspan") .attr("x", 0) .attr("font-size", "18px") .text(`${d.properties.NAAM_N2K}`) .append("tspan") .attr("font-size", "14px") .attr("x", 0) .attr("dy", "1.3em") .text(`Nr: ${d.properties.NR} | ${d.properties.BESCHERMIN} | ${nox_string}`) // BESCHERMIN: "VR+HR" // KADASTER: "OZ4 63282/154" // NAAM_N2K: "Grevelingen" // NR: 115 // OBJECTID: 65 // PAS_GEV: "true" // SHAPE_Area: 137527835.202 // SHAPE_Leng: 88890.123293 // SITECODE_H: "NL4000021" // SITECODE_V: "NL4000021" // STAATSCOUR: "2013/19978" // STATUS: "Natura 2000-besluit 4 september 2013" // VHN_NEW: 3 d3.select(this).style("stroke", "rgba(255,127,0)"); d3.select(this).style("fill", "rgba(255,127,0,0.4)"); } 35:[{"id":"bdc06b7f717fe0cfd94d3057c1851c37c117001ada83a4b1eaeabc5038b42e7fb7692ea3f1bee3e9ef6b4fb380ddffc2c17fccc57924dd8dd2c8d3b0fb018be1","href":"https://static.observableusercontent.com/files/bdc06b7f717fe0cfd94d3057c1851c37c117001ada83a4b1eaeabc5038b42e7fb7692ea3f1bee3e9ef6b4fb380ddffc2c17fccc57924dd8dd2c8d3b0fb018be1","name":"base_v0.9.json","type":"application/json","lastModified":1641370962648.095,"size":857925},{"id":"11980924bb347f95884c3a5ecd35a620553f699fa227593116c185239efda38234c84c95afa670fea2fd4e3f1aecfb4930bc4f3481788951980e4f93346c12d9","href":"https://static.observableusercontent.com/files/11980924bb347f95884c3a5ecd35a620553f699fa227593116c185239efda38234c84c95afa670fea2fd4e3f1aecfb4930bc4f3481788951980e4f93346c12d9","name":"n2000_simplified.json","type":"application/json","lastModified":1641370962648.095,"size":315170}] 31:{"id":"a2d8d756073bb650","slug":"basiskaart-zuid-holland","title":"Basiskaart Zuid-Holland","thumbnail":"422dca0c672d8cd7253eb2731a4860954a11b9bfb4c24077ba49cfbc34d09a41","access_level":"public","create_time":"$D2022-01-05T08:22:42.648Z","update_time":"$D2022-01-05T09:20:56.968Z","view_time":null,"first_public_time":"$D2022-01-05T09:27:01.435Z","has_unpublished_edits":null,"fork":{"id":"11616b40eb6e8cc4","slug":"pzh-natura2000-gebieden","title":"PZH: Natura2000 gebieden","owner":{"id":"d19a230dabb035d0","login":"thijsschouten","name":"T.E. Schouten"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d19a230dabb035d0","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":"starter_2024"},"version":1542,"publish_version":1542,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8802c07e4374e6f","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":null}],"members":[{"type":"individual","id":"b8802c07e4374e6f","login":"thijsschouten","name":"T.E. Schouten","avatar_url":"https://avatars-next.observableusercontent.com/091c69f0b7b396df70696f26f5738dc8c19b50db5102fc472c06d6e7458dd1ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Basiskaart Zuid-Holland","cells":[{"id":641,"value":"md`# Basiskaart Zuid-Holland`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"md`## Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"viewof layers = checkbox({\n title: \"Layers\",\n options: Object.keys(mapjson.objects).sort(),\n value: Object.keys(mapjson.objects),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"viewof settings = checkbox({\n title: \"Map elements\",\n options: ['logo', 'title', 'subtitle', 'border', 'legend'],\n value: ['logo', 'border', 'legend'],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"md`### Custom Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"viewof colors = inputsGroup(\n [\n [\n color({\n value: \"#F5F5F5\",\n description: \"Landmass\"\n}),color({\n value: \"#c4c4c4\",\n description: \"Landmass Border\"\n}),\n color({\n value: \"#e8e8e8\",\n description: \"Urban areas\"\n}),\n color({\n value: \"#F5F5F5\",\n description: \"Meer\"\n}),\n color({\n value: \"#ffffff\" ,\n description: \"SVG background\"\n}),\n ],\n [\n color({\n value: \"#F5F5F5\",\n description: \"Nature\"\n}),\n color({\n value: \"#dbdbdb\",\n description: \"Motorway\"\n}),\n color({\n value: \"#686868\",\n description: \"City labels\"\n})\n ],\n ],\n\n [\n ['landmass', 'landmassBorder','bebouwing', 'third-slider', 'svgBackground'],\n ['nature', 'motorway', 'cityLabels'],\n ],\n { objOnly: true }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"clrs = ({ \n nox: \"rgb(77,175,74, 0)\",\n nox_a: \"rgba(77,175,74,0.45)\",\n not_nox: \"rgb(77,175,74,.7)\",\n not_nox_a: \"rgba(77,175,74,0.07)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"md`## Mouse events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"mutable stored_state = '' ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"handleMouseOut = function (d) { // Add interactivity\n d3.select(\"#textOnHover\").selectAll(\"tspan\").remove();\n \n let elem = this\n Object.keys(mutable stored_state).forEach( function(key) {\n d3.select(elem).style(key, mutable stored_state[key]);\n }) \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`---\n## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`Topojson contains these layers: \n*${Object.keys(mapjson.objects).join(\", \")}*. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// mapjson = FileAttachment(\"provincies(2).json\").json()\nmapjson = FileAttachment(\"base_v0.9.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"layerjson = FileAttachment(\"n2000_simplified.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"md`Set the projection to GeoMercator. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"projection = {\n // boundingbox pzh grens\n let b = [3.8390205402678315,51.65446250077237,5.031415074191863,52.3282369627679]\n \n // set geoMerator projection &\n // extract center from bb and translate\n // to pixel coordinates\n return d3.geoMercator()\n .center([(b[0]+b[2])/2, (b[1]+b[3])/2])\n .translate([width/2, height/2])\n .scale(35000);\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"md`## Import d3, topojson, fonts, various..`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"import {text, color, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1488,"value":"md`

Hello ello Den Haag

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"style = html`\n\n\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"function inputsGroup(views, names, args) {\n const form = html`

${views.map(\n row =>\n html`

${row.map(\n input =>\n html`

${input}

`\n )}

`;\n\n form.oninput = () => {\n const values = views.map(row => row.map(input => input.value));\n form.value = values;\n\n if (args && args.objOnly) form.value = {};\n if (names) {\n names.forEach((row, i) =>\n row.forEach(\n (c, j) => values[i][j] != null && (form.value[c] = values[i][j])\n )\n );\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"