2d:null 2e:["$","title",null,{"children":"Untitled | Matthias Mazenauer | Observable"}] 33:Tf9e,{ let container = DOM.element('div', {id:'map', style: `width:${width}px;height:${width/1.6}px` }); yield container; const map = L.map('map').addControl(new customControl1()) console.log('mapsetview') let zoomT = 0; if (width<600) { zoomT = 7; } else { zoomT = zoomOrg; } map.setView([latOrg, lngOrg], zoomT) var svgLayer = L.svg(); svgLayer.addTo(map); var svg = d3.select("#map").select("svg").style('pointer-events', 'auto'); var g = d3.select("#map").select("svg").select('g'); g.attr("class", ' leaflet-zoom-hide'); //OpenStreetMap_BlackAndWhite L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { maxZoom: 12, attribution: '© OpenStreetMap' }).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) let featureElement = g.selectAll('path.cantons') .data(mapData) .enter() .append("path") .attr("d", path) .attr('class', 'cantons') .attr('cursor', 'pointer') .style('stroke-width', 0.5) .style('stroke', 'white') .style('fill-opacity', 0.7) .style('fill', function(d) { return colorScale(d.properties.tested_posPerCapita); }) .on('mouseover', function(d) { console.log(d.properties.tested_pos); console.log(d.properties.name); var bBox = d3.select(this).node().getBBox(); g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) .text(d.properties.name+': '); g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) .attr('dy', '1.2em') .text('Total positiv getestet: '+ch_DE.format(',')(d.properties.tested_pos)); g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) .attr('dy', '2.4em') .text("positiv getestet / 10'000 Einw.: "+ch_DE.format(',')(Math.round(d.properties.tested_posPerCapita*100)/100)+''); }) .on('mouseout', function() { //undo what ever you wanted to do with your Map-Data on Mouse-Out d3.selectAll('.mouse').remove(); }) .on('click', function(d) { var bBox = d3.select(this).node().getBBox(); d3.selectAll('.mouse').remove(); g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) .text(d.properties.name+': '); g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) .attr('dy', '1.2em') .text('Total positiv getestet: '+ch_DE.format(',')(d.properties.tested_pos)); g.append('text') .attr('class', 'mouse') .style('pointer-events', 'none') .attr('x', bBox.x+bBox.width/2) .attr('y', bBox.y+bBox.height/2) .attr('dy', '2.4em') .text("positiv getestet / 10'000 Einw.: "+ch_DE.format(',')(Math.round(d.properties.tested_posPerCapita*100)/100)+''); }) map.on('zoom', update) function update() { d3.selectAll('.image').remove(); console.log('update') featureElement.attr('d', path); } //update() map.on("zoomend", function(){ let zoomLev = map.getZoom(); }) function resetZoom() { map.setView([latOrg, lngOrg], zoomT); d3.selectAll('.image').remove(); //d3.selectAll('.gemeinde').style('fill-opacity', 0.3); } } 34:T600,mapData = new Promise(resolve => { sp.sparql(endPoint, query).get(data => { let dataArr = []; for (let i = 0; i < data.length; i++) { for (let a = 0; a < mappinkCtBfs.length; a++) { console.log(+mappinkCtBfs[a].bfs); if (data[i].CantonNum.valueOf() == +mappinkCtBfs[a].bfs) { for (let j = 0; j < dataCantonMax.cantons.length; j++) { if ( mappinkCtBfs[a].abk == dataCantonMax.cantons[j].abbreviation_canton_and_fl ) { let newObj = {}; newObj.properties = {}; newObj.properties.bfs = data[i].CantonNum.valueOf(); newObj.properties.name = data[i].Name; newObj.properties.population = data[i].Pop.valueOf(); newObj.properties.tested_pos = +dataCantonMax.cantons[j] .tested_pos; newObj.properties.confirmed = +dataCantonMax.cantons[j].confirmed; newObj.properties.population = data[i].Pop.valueOf(); newObj.properties.tested_posPerCapita = (+dataCantonMax.cantons[j].tested_pos / data[i].Pop.valueOf()) * 10000; newObj.type = 'Feature'; let wkt = new wicket.Wkt(); wkt.read(data[i].Geometry); newObj.geometry = wkt.toJson(); dataArr.push(newObj); //console.log(JSON.stringify(newData)); } } } } } //resolve(data) resolve(dataArr); }); })35:T2631,html`