HailMap = { const width = 950 const height = 650 let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; let map = L.map(container).setView([39.56, -96.31], 4); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); /*let voronoiGenerator = d3.voronoi() .x(d => d.x) .y(d => d.y) .extent([[0,0],[map.getPixelBounds().max.x,map.getPixelBounds().max.y]]); let voronoiGenerator = d3.geoVoronoi({ type: "FeatureCollection", features: geojson }) //.x(d => d.x) //.y(d => d.y)*/ //initialize svg to add to map L.svg().addTo(map) //Create selection using D3 const overlay = d3.select(map.getPanes().overlayPane) const svg = overlay.select('svg') // create a group that is hidden during zooming const g = svg.append('g').attr('class', 'leaflet-zoom-hide') // Use Leaflets projection API for drawing svg path (creates a stream of projected points) // const projectPoint = function(x, y) { // const point = map.latLngToLayerPoint(new L.LatLng(y, x)) // this.stream.point(point.x, point.y) // } // Use d3's custom geo transform method to implement the above // const proj = d3.geoTransform({point: projectPoint}) // creates geopath from projected points (SVG) //const pathCreator = d3.geoPath().projection(proj).pointRadius(2); const lines = g.selectAll(".voronoi") /*.data(voronoiGenerator(geojson).polygons()) .enter().append("path") .attr("class", "voronoi") .attr("stroke-width",0.5) .attr("stroke",'black')*/ let curGran = 'nada' let newGran; let geojson; let color; let limits; let legend = L.control({ position: "bottomleft" }); let secondLegend = L.control({ position: "bottomleft" }); let div = L.DomUtil.create("div", "info legend"); let divTwo = L.DomUtil.create("div", "info legend"); let labels; let legendInfo = "

" let secondLegendInfo = "

" // Generate voronoi const onPan = async () => { let zoom = map.getZoom() /*squares.on('mouseover', () => { console.log('yo!') })*/ let bounds = map.getBounds() let upL = [bounds['_northEast'].lat + 2,bounds['_southWest'].lng - 2] let loR = [bounds['_southWest'].lat - 2,bounds['_northEast'].lng + 2] let gridName; if (zoom < 6) { newGran = 'coarse' gridName = '80km' } else if (zoom < 9) { newGran = 'fine' gridName = '40km' } else { newGran = 'soFine' gridName = '20km' } // Wait for the geojson to resolve before continuing with code if (newGran != curGran) { map.removeControl(legend); // * Need code to update legend & color map geojson = await geojsonMaker(newGran) //checkZoom() color = d3.scaleSequential(d3.extent(geojson.map(entry => entry.properties.days)), interpolator) limits = [] let step = 10 //for (let i=0; i < d3.extent(geojson.map(entry => entry.properties.days))[1]/step; i++) { for (let i=0; i < d3.max(geojson.map(entry => entry.properties.days))/step; i++) { limits.push(i*step); } labels = [] secondLegend.onAdd = function () { divTwo.innerHTML = secondLegendInfo; divTwo.innerHTML += `

${gridName} Grid

` return divTwo; } legend.onAdd = function() { div.innerHTML = legendInfo; limits.forEach(function(limit, index) { labels.push(`

${index*step}

`); }); div.innerHTML += labels.join(""); return div; }; // Adding legend to the map legend.addTo(map); secondLegend.addTo(map); } curGran = newGran; geojson.forEach(d => { //const p = proj(d.geometry.coordinates); d.x = map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).x d.y = map.latLngToLayerPoint([d.geometry.coordinates[1],d.geometry.coordinates[0]]).y return d; }) // testing //let testPtUL = map.latLngToLayerPoint([75,-160]) //let testPtLR = map.latLngToLayerPoint([10,-50]) // Get points to set extent of where the voronoi operates (saves time) let testPtUL = map.latLngToLayerPoint(upL) let testPtLR = map.latLngToLayerPoint(loR) let newVoronoi = d3.voronoi() .extent([[testPtUL.x,testPtUL.y],[testPtLR.x,testPtLR.y]]) .x(d => d.x) .y(d => d.y) /* let newVoronoi = d3.geoVoronoi({ type: "FeatureCollection", features: geojson }) .x(d => d.properties.site.properties.x) .y(d => d.properties.site.properties.y)*/ d3.selectAll('.voronoi').remove() lines.attr('opacity', 0.4) .data(newVoronoi(geojson).polygons().filter(item => item)) .enter().append('path') .classed('voronoi leaflet-interactive',true) //.attr('fill', d => color(d.properties.site.properties.days)) .attr('fill', d => color(d.data.properties.days)) .attr("d", d => d ? `M${d.join("L")}Z` : null) .attr('opacity', d => { if (d.data.properties.days == 0) { //if (d.properties.site.properties.days == 0) { return 0 } else { return 0.3 } }); let squares = d3.select(map.getContainer()).selectAll('.voronoi'); squares.on('mouseover', function(d) { let legend = d3.select(map.getContainer()).select('.count') legend.text(`${d.data.properties.days} days`); d3.select(this).attr('stroke-width',3).attr('stroke','black') }).on('mouseout', function() { d3.select(this).attr('stroke-width',0) }) //console.log(map.getZoom()) /*g.selectAll('.voronoi').remove() g.selectAll(".voronoi") .data(voronoiGenerator(geojson).polygons()) .enter().append("path") .attr("class", "voronoi") .style("stroke", "steelblue") .style("stroke-width", .5) .attr("d", d => d ? `M${d.join("L")}Z` : null);*/ } // initialize positioning onPan() // reset whenever map is moved //map.on('zoomend', onZoom) map.on('moveend', onPan) invalidation.then(() => map.remove()); }