2d:null 2e:["$","title",null,{"children":"Linked Data Journey through Switzerland | Matthias Mazenauer | Observable"}] 33:T1af4,{ 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') map.setView([latOrg, lngOrg], zoomOrg) var svgLayer = L.svg(); svgLayer.addTo(map); var svg = d3.select("#map").select("svg").style('pointer-events', 'auto').attr("class", "leaflet-zoom-hide"); var g = d3.select("#map").select("svg").select('g'); g.attr("class", "leaflet-zoom-hide"); //OpenStreetMap_BlackAndWhite L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', { maxZoom: 55, attribution: '© OpenStreetMap' }).addTo(map); // 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) let featureElement = g.selectAll('path.gemeinde') .data(mapData) .enter() .append("path") .attr("d", path) .attr('class', 'gemeinde') .attr('cursor', 'pointer') .style('stroke-width', 0.5) .style('stroke', 'white') .style('fill-opacity', function(d) { if (d.properties.name == 'Zürich') { return 0.5; } else { return 0.5;} }) .style('fill', 'skyblue') .on('mouseover', function(d) { 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) .style('font-size', '30px') .style('fill', 'black') .text(d.properties.name); //.text(d.properties.name+': '+d.properties.population); }) .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(); zoomToMunicip(d); if (d.properties.name == 'Zürich') { d3.selectAll('.quartiere').attr('visibility','visible') .attr('pointer-events', 'all') } else { d3.selectAll('.quartiere').attr('visibility','hidden') .attr('pointer-events', 'none'); d3.selectAll('.fountains') .attr('visibility','hidden') } //var stops = getStops(1); //console.log(stops) d3.selectAll('.image').remove(); d3.selectAll('.quartiere').attr('visibility', 'visible') .attr('pointer-events', 'all'); d3.selectAll('.gemeinde').attr('visibility', 'hidden'); d3.select(this).attr('visibility', 'hidden') .attr('pointer-events', 'none'); d3.selectAll('.fountains').attr('visibility', 'visible') .attr('pointer-events', 'all'); }) let featureElement3 = g.selectAll('circle.fountains') .data(fountainsData).enter() .append("circle") .attr('class', 'fountains') .attr('cursor', 'pointer') .style('stroke-width', 0.5) .style('stroke', 'steelblue') .style('fill-opacity', 0.7) .style('fill','steelblue') .attr('visibility','hidden') .attr("r", function(d) { return '15px'; }) //.attr('pointer-events', 'none'); .on('mouseover', function(d) { console.log(d) d3.selectAll('.image').remove(); let xy = d3.select(this).attr('transform').replace('translate','').replace('(','').replace(')',''); console.log(xy) var bilder = g.append('image') .attr('class', 'image') //.style('pointer-events', 'none') .attr('x', xy.split(',')[0]) .attr('y', xy.split(',')[1]) .attr('width', 250) .attr('height', 250) .attr('xlink:href', d.properties.image) .on("click", function() { window.open(d.properties.item, "_blank", "width=300, height=300") }); }) .on('click', function() { //undo what ever you wanted to do with your Map-Data on Mouse-Out d3.selectAll('.mouse').remove(); }) let featureElement2 = g.selectAll('path.quartiere') .data(quartiereData) .enter() .append("path") .attr("d", path) .attr('class', 'quartiere') .attr('cursor', 'pointer') .style('stroke-width', 0.5) .style('stroke', 'steelblue') .style('fill-opacity', 1) .style('fill', function(d) { return colorScale(d.properties.popPerStops); }) .attr('visibility','hidden') .attr('pointer-events', 'none') .on('mouseover', function(d) { 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) .style('font-size', '30px') .style('fill', 'black') .text(d.properties.name+': '+ch_DE.format(',')(Math.round(d.properties.popPerStops))); }) .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) { d3.selectAll('.image').remove(); d3.selectAll('.quartiere').attr('visibility', 'visible') .attr('pointer-events', 'all'); d3.selectAll('.gemeinde').attr('visibility', 'hidden'); d3.select(this).attr('visibility', 'hidden') .attr('pointer-events', 'none'); d3.selectAll('.fountains').attr('visibility', 'visible') .attr('pointer-events', 'all'); zoomToMunicip(d); }) map.on('zoom', update) function zoomToMunicip(obj) { var centroid = d3.geoCentroid(obj); var bounds = d3.geoBounds(obj); console.log(obj); console.log(bounds); if(bounds[0][0]>-180) { //"FIX" because of the bounding box problem of some quarters map.fitBounds([[bounds[0][1],bounds[0][0]],[bounds[1][1],bounds[1][0]]]); //map.setView([centroid[1], centroid[0]], 11); } } function update() { d3.selectAll('.image').remove(); console.log('update') featureElement.attr('d', path); featureElement2.attr('d', path); featureElement3.attr("transform", function(d) { return "translate("+ map.latLngToLayerPoint(d.LatLng).x +","+ map.latLngToLayerPoint(d.LatLng).y +")"; } ) } update() map.on("zoomend", function(){ let zoomLev = map.getZoom(); }) }34:T6c3,quartiereStopsQuery = `PREFIX rdf: PREFIX rdfs: PREFIX geo: PREFIX skos: PREFIX qb: PREFIX dataset: PREFIX measure: PREFIX dimension: PREFIX code: SELECT ?Quarter ?GeoWKT ?QuarterLabel (MIN(?Population) AS ?QPopulation) (COUNT(?stop) AS ?QStops) (MIN(?Population)/COUNT(?stop) AS ?PopulationPerStop) WHERE { ?stop rdf:type ; ?lat ; ?long ; . BIND(STRDT(CONCAT('POINT(', ?long, ' ', ?lat, ')'), 'http://www.openlinksw.com/schemas/virtrdf#Geometry') AS ?Stopwkt). SERVICE { SELECT ?Quarter ?GeoWKT ?QuarterLabel ?Population WHERE { ?sub a qb:Observation ; qb:dataSet dataset:BEW-RAUM-ZEIT ; measure:BEW ?Population ; dimension:RAUM ?Quarter ; dimension:ZEIT ?Date . ?Quarter owl:sameAs ?WikidataUID ; skos:broader code:Quartier ; rdfs:label ?QuarterLabel ; geo:hasGeometry ?Geometry . ?Geometry geo:asWKT ?GeoWKT . FILTER(year(?Date) = 2020) } } FILTER (bif:st_within(?Stopwkt, ?GeoWKT)) } GROUP BY ?Quarter ?QuarterLabel ?GeoWKT ORDER BY ?PopulationPerStop`35:T2631,html`