viewof parking = { let container = DOM.element("div", { id: "map", class: "slide slide--small", style: `width:${width}px;height:${350}px`, alt: "Parkhäuser Basel-Stadt" }); 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 //http://a.tile.stamen.com/toner/${z}/${x}/${y}.png //https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png //https://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png //https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg L.tileLayer( "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg", { opacity: 0.8, attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.

' } ).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); var circles = svg .selectAll("circle.circles") .data(parkplaetze.records) .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 colorP(d.fields.free); }) .attr("r", 1.4 * zoomT) .on("mouseover", function (event, d) { svg .append("g") .attr("id", "mouseText") .attr("pointer-events", "none") .append("text") .attr("x", event.layerX) .attr("y", event.layerY) .text(d.fields.name + ": " + d.fields.description); }) .on("mouseout", function (event, d) { d3.select("#mouseText").remove(); }); //Geojson function update() { console.log("update"); //featureElement.attr("d", path); circles .attr("transform", function (d) { console.log(d); if (typeof d.fields.geo_point_2d !== "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; }); update(); } else { update(); d3.selectAll(".circles") .attr("r", 1.4 * zoomT) .style("fill-opacity", 0.6) .attr("pointer-events", "none"); } }); 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")); } }); }