2d:null 2e:["$","title",null,{"children":"Impforte | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T17a8,viewof map = { let container = DOM.element("div", { id: "map", style: `width:${1168}px;height:${650}px`, alt: "Karte mit den Impforten; Visualisierte Daten: " + places }); yield container; const map = L.map("map", { minZoom: 9, maxZoom: 17 }).addControl(new customControl1()); console.log("mapsetview"); let zoomT = 0; let clicked = {}; if (width < 600) { zoomT = 8; } else { zoomT = zoomOrg; } map.setView([latOrg, lngOrg], zoomT); //OpenStreetMap_BlackAndWhite L.tileLayer("https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png", { opacity: 0.5, attribution: '© OpenStreetMap' }).addTo(map); var svgLayer = L.svg(); svgLayer.addTo(map); var svg = d3.select("#map").select("svg").attr("pointer-events", "auto"); var g = d3.select("#map").select("svg").select("g"); g.attr("class", " leaflet-zoom-hide"); // offizieller ZHweb Layer des GIS //(sehr langsam) /* L.tileLayer.wms('https://wms.zh.ch/ZHWEB', { maxZoom: 14, layers: 'Geometrie' }).addTo(map); */ function projectPoint(x, y) { var point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } var transform = d3.geoTransform({ point: projectPoint }); var path = d3.geoPath().projection(transform); var pathNull = d3.geoPath().projection(null); //Geojson let featureElement = svg .selectAll("path.plz") .data(mapPlz.features) .enter() .append("path") .attr("d", path) .attr("class", "plz") .attr("id", function (d) { return "plz_" + d.properties.PLZ; }) .style("cursor", "pointer") .style("pointer-events", function (d) { if (d.properties.Ortschaftsname == "See") { return "none"; } else { return "all"; } }) .style("stroke-width", 0.5) .style("stroke", function (d) { if (d.properties.Ortschaftsname == "See") { return "none"; } else { return "black"; } }) .style("fill-opacity", 0.1) .style("fill", function (d) { if (d.properties.Ortschaftsname == "See") { return "steelblue"; } else { return "white"; } }) .on("mouseover", function (event, d) { console.log("museover"); d3.select(this).style("fill", "red"); }) .on("mouseout", function () { d3.selectAll(".mouseover").remove(); d3.select(this).style("fill", "white"); }) .on("mousemove", function (event, d) { d3.selectAll(".mouseover").remove(); let x = d3.pointer(event)[0]; let y = d3.pointer(event)[1]; let mGroup = svg.append("g").attr("transform", "translate(20,-20)"); let rect = mGroup.append("rect"); let text = mGroup .append("text") .text(d.properties.PLZ + " " + d.properties.Ortschaftsname); console.log("Text node :" + text.node().getBBox().width); rect .attr("pointer-events", "none") .attr("class", "mouseover plz") .attr("x", x - 5) .attr("y", y - 5) .attr("height", 20) .attr("width", text.node().getBBox().width + 10) .style("fill", "white"); text .attr("pointer-events", "none") .attr("class", "mouseover plz") .attr("x", x) .attr("y", y + 10); }) .on("click", function (d) { let id = d3.select(this).attr("id"); console.log(id); zoomToPlz(id.split("_")[1]); clicked = d; console.log("clicked: " + clicked); }); var circles = svg .selectAll("circle.circles") .data(places) .enter() .append("circle") .attr("class", "circles") .attr("pointer-events", "none") .style("stroke", "white") .style("stroke-width", "1") .style("fill-opacity", 0.6) .style("fill", function (d) { return colorS(d.Art); }) .attr("r", 1.4 * zoomT); svg.select("#plz_" + plzSelect).style("fill", "red"); console.log("PLZ select: " + d3.select("#plz_" + plzSelect)); if (!d3.select("#plz_" + plzSelect).empty()) { zoomToPlz(plzSelect); } map.on("zoom", update); function zoomToPlz(id) { var center = pathNull.centroid(d3.select("#plz_" + id).datum()); console.log(center); map.setView([center[1], center[0]], 13); } function update() { console.log("update"); featureElement.attr("d", path); circles .attr("transform", function (d) { if (typeof d.LatLng !== "undefined") { return ( "translate(" + map.latLngToLayerPoint(d.LatLng).x + "," + map.latLngToLayerPoint(d.LatLng).y + ")" ); } }) .attr("r", 16); } update(); map.on("zoomend", function () { zoomT = map.getZoom(); if (zoomT >= 13) { d3.selectAll(".circles") .attr("r", 16) .attr("cursor", "pointer") .attr("pointer-events", "all") .on("mouseover", function () { d3.select(this).style("fill-opacity", 1); }) .on("mouseout", function () { d3.select(this).style("fill-opacity", 0.6); }) .on("click", function (event, d) { clicked = d; }); } else { d3.selectAll(".circles") .attr("r", 1.4 * zoomT) .style("fill-opacity", 0.6) .attr("pointer-events", "none"); } }); function resetZoom() { map.setView([latOrg, lngOrg], zoomOrg); //d3.selectAll('.gemeinde').style('fill-opacity', 0.3); } return Object.assign(container, { value: { zoomT }, onmousemove: (event) => { event.currentTarget.value = { zoom: map.getZoom(), clickedPlace: clicked }; event.currentTarget.dispatchEvent(new CustomEvent("input")); }, onclick: (event) => { event.currentTarget.value = { zoom: map.getZoom(), clickedPlace: clicked }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }34:T440,infoText = (function() { if ( typeof map.clickedPlace !== 'undefined' && typeof map.clickedPlace.Name !== 'undefined' ) { if (map.clickedPlace.Webseite !== null) { return html`

${map.clickedPlace.Art}

${map.clickedPlace.Name}
${map.clickedPlace.street}
${map.clickedPlace.postalcode} ${map.clickedPlace.city}

Webseite: ${map.clickedPlace.Webseite}

`; } else { return html`${map.clickedPlace.Art}
${map.clickedPlace.Name}
${map.clickedPlace.street}
${map.clickedPlace.postalcode} ${map.clickedPlace.city}

Webseite: nicht vorhanden
`; } } else { return html`

Zoomen Sie zu einem Kreis und klicken Sie darauf, um die Adresse der Impfgelegenheit anzuzeigen

`; } })()35:[{"id":"675543ab3465564360a19fa7386c288e796b035a2ee69bea5a274c01d79b896ad6d3a774aff0c161aab4b805fab3494d851298ab46d0bb36c8f77edc6cd4f1ae","href":"https://static.observableusercontent.com/files/675543ab3465564360a19fa7386c288e796b035a2ee69bea5a274c01d79b896ad6d3a774aff0c161aab4b805fab3494d851298ab46d0bb36c8f77edc6cd4f1ae","name":"Covid-Orte-Geocoded_Zentren@10.csv","type":"text/csv","lastModified":1617176503607.047,"size":2084}] 31:{"id":"66d446b02080eaad","slug":"impforte","title":"Impforte","thumbnail":"ac0f41be5a0a7fb1747246ef4396649bb59ae15c8164b2635e622110d1ccf8a4","access_level":"public","create_time":"$D2021-01-12T09:44:09.450Z","update_time":"$D2022-08-10T11:11:48.256Z","view_time":null,"first_public_time":"$D2021-01-12T10:43:13.830Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":611,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null}],"members":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Impforte","cells":[{"id":0,"value":"md`# Impforte`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`Kartensuche über Postleitzahl:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof plzSelect = text({placeholder: \"Postleitzahl\", description: \"Bitte geben Sie die gesuchte Postleitzahl ein und bestätigen Sie mit «ok».\", submit: \"ok\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"(function() {\n if (plzSelect.length == \"\") {\n return md`Bitte geben Sie eine Postleitzahl ein oder klicken Sie auf die Karte. `;\n } else {\n return md`${plzCheck(plzSelect)}`;\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"swatches({\n color: colorS\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"map.clickedPlace.Name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`# Anhang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"toc('h2, h3', 'Inhalt')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`## Daten`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mapPlz = d3.json(\"https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_plz/PLZ_gen_epsg4326_F_KTZH_2020.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"places = d3.tsv(\"https://raw.githubusercontent.com/openZH/covid19_impforte/master/data/Covid-Orte-Geocoded_Zentren.csv\").then(function(data) {\n data.forEach(function(d) {\n d.lat = +d.lat;\n d.long = +d.long;\n });\n return data;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"places.sort((a, b) => d3.ascending(a.Art, b.Art))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"arten = distincts(places, \"Art\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"colorS = d3.scaleOrdinal(arten, [statColors[0], statColors[2], statColors[8]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Parameter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"latOrg = 47.42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"lngOrg = 8.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"zoomOrg = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"statColors = [\n \"#3f8ab4\",\n \"#9FCBE5\",\n \"#65A96A\",\n \"#B4DEB8\",\n \"#CEBE5B\",\n \"#F3EBAE\",\n \"#D27F46\",\n \"#F7C5A1\",\n \"#CD4B4E\",\n \"#F3A5A7\",\n \"#9479A4\",\n \"#D2C1DA\",\n \"#1B252B\",\n \"#767C7F\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"swatches({\n color: d3.scaleOrdinal(statColors, statColors)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## Funktionen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"placesRe = places.forEach(function(d) {\n if (typeof d.lat === 'number') {\n d.LatLng = new L.LatLng(d.lat, d.long);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"plzCheck = function(id) {\n let found = \"Diese Postleitzahl existiert nicht im Kanton Zürich.\";\n for(let i=0;i`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"schrift = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"leaflet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"leaftletCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"