viewof map = { let container = DOM.element("div", { style: `max-width:${1186}px;height:${650}px` }); yield container; let map = L.map(container).setView([47.33, 8.8], 10.5); let Esri_WorldGrayCanvas = L.tileLayer( "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}", { attribution: "Tiles © Esri — Esri, DeLorme, NAVTEQ", maxZoom: 16 } ).addTo(map); let Stamen_TonerLabels = L.tileLayer( "https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}{r}.{ext}", { attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors', subdomains: "abcd", minZoom: 0, maxZoom: 16, ext: "png" } ).addTo(map); // control that shows state info on hover var info = L.control("ctr"); info.onAdd = function (map) { this._div = L.DomUtil.create("div", "info"); this.update(); return this._div; }; info.update = function (props) { this._div.innerHTML = "

Badestellen-
information

" + (props ? "" + function () { if (map.clickedPlace.remark == "") { return map.clickedPlace.quality; } else { return htl.html` ${map.clickedPlace.quality}
${map.clickedPlace.remark}
`; } } + "
Letzte Messung:" + props.date + "
Messung durch:" : "

Klicken Sie für Details und Foto auf eine Badestelle.

"); }; info.addTo(map); let clicked = {}; //initialize svg to add to map L.svg({ clickable: true }).addTo(map); //Adds the layer to the map. // we have to make the svg layer clickable const overlay = d3.select(map.getPanes().overlayPane); const svg = overlay.select("svg").attr("pointer-events", "all"); const symbols = svg .selectAll("path") .data(uniqueLocations) .join("path") //.enter() //.append("path") .attr("id", "dots") .attr("transform", function (d) { return ( "translate(" + map.latLngToLayerPoint(d.LatLng).x + "," + map.latLngToLayerPoint(d.LatLng).y + ")" ); }) .attr( "d", d3 .symbol() .type(function (d) { if (d.quality == "Ausgezeichnet") { return d3.symbolCross; } else if (d.quality == "Gut") { return d3.symbolSquare; } else if (d.quality == "Ausreichend") { return d3.symbolCircle; } else if (d.quality == "Mangelhaft") { return d3.symbolTriangle; } }) .size(300) ) .attr("fill", (d) => color(d.quality)) //change the fill .attr("fill-opacity", 1) .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "pointer") .on("mouseover", function () { //function to add mouseover event d3.select(this) .transition() //D3 selects the object we have moused over in order to perform operations on it .duration("150") //how long we are transitioning between the two states (works like keyframes) .attr( "d", d3 .symbol() .type(function (d) { if (d.quality == "Ausgezeichnet") { return d3.symbolCross; } else if (d.quality == "Gut") { return d3.symbolSquare; } else if (d.quality == "Ausreichend") { return d3.symbolCircle; } else if (d.quality == "Mangelhaft") { return d3.symbolTriangle; } }) .size(500) ) .attr("fill", (d) => color(d.quality)) //change the fill .attr("fill-opacity", 1) .attr("pointer-events", "auto"); }) .on("mouseout", function () { d3.selectAll(".mouseover").remove(); //reverse the action based on when we mouse off the the circle d3.select(this) .transition() .duration("150") .attr( "d", d3 .symbol() .type(function (d) { if (d.quality == "Ausgezeichnet") { return d3.symbolCross; } else if (d.quality == "Gut") { return d3.symbolSquare; } else if (d.quality == "Ausreichend") { return d3.symbolCircle; } else if (d.quality == "Mangelhaft") { return d3.symbolTriangle; } }) .size(300) ) .attr("fill", (d) => color(d.quality)) //change the fill .attr("fill-opacity", 1) .attr("pointer-events", "auto"); }) .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") .html(d.location + "; gemessen am " + formatDate(d.date)); //.append("text") //.text((d) => d.location + "
" + d.date); rect .attr("pointer-events", "auto") .attr("class", "mouseover") .attr("x", map.latLngToLayerPoint(d.LatLng).x) .attr("y", map.latLngToLayerPoint(d.LatLng).y) .attr("height", text.node().getBBox().height + 10) .attr("width", text.node().getBBox().width + 10) .style("fill", "white"); text .attr("pointer-events", "auto") .attr("class", "mouseover") .attr("x", map.latLngToLayerPoint(d.LatLng).x + 5) .attr("y", map.latLngToLayerPoint(d.LatLng).y + 15); }); symbols.on("click", function (event, d) { const e = symbols.nodes(); const i = e.indexOf(this); // console.log("Event: " + d.location); clicked = d; // console.log("Clicked: " + clicked); }); const update = () => symbols.attr("transform", function (d) { return ( "translate(" + map.latLngToLayerPoint(d.LatLng).x + "," + map.latLngToLayerPoint(d.LatLng).y + ")" ); }); map.on("zoomend", update); return Object.assign(container, { onclick: (event, d) => { event.currentTarget.value = { clickedPlace: clicked }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }

Badestellen-information

Badestellen-
information