viewof map = { const container = html`

`; yield container; var baseline = false; const map = container.value = new mapboxgl.Map({ container, style: 'mapbox://styles/akpresto/ck87tl6yu0e1s1is0q7u6vdr0', scrollZoom: false, center: [-71.0972178, 42.3466764], zoom: 13.6 }); invalidation.then(() => map.remove()); const boundingbox = container.getBoundingClientRect(); var canvas = d3.select(container) .append("canvas") .style("position", "absolute") .style("top", 0) .style("left", 0) .attr("width", boundingbox.width) .attr("height", boundingbox.height) .style("pointer-events", "none"); function projectPoint(lon, lat) { var point = map.project(new mapboxgl.LngLat(lon, lat)); this.stream.point(point.x, point.y); } var context = canvas.node().getContext("2d"); var rect_width = 1; var rect_height = 1; if (baseline){ data.forEach(function(d,i){ context.globalAlpha = 1; context.fillStyle = d3.interpolateBlues(d.score/100); var p = map.project(new mapboxgl.LngLat(d.lon, d.lat)); context.fillRect(p.x, p.y, rect_width, rect_height); }) } else { var map_size = 320; var flood_grid = []; for (var i = 0; i < map_size; i++){ flood_grid.push([]); for (var j = 0; j < map_size; j++){ flood_grid[i][j] = -1; } } data.forEach(function(d){ var p = map.project(new mapboxgl.LngLat(d.lon, d.lat)); flood_grid[Math.round(p.x)][Math.round(p.y)] = d.score; }) function smooth(flood_grid){ for (var i = 0; i < map_size; i++){ for (var j = 0; j < map_size; j++){ // if it's -1 and there's a value within 2 in either direction: interpolate // (what about the edges?) if (flood_grid[i][j] == -1 && j > 0 && i > 0 && j < 319 && i < 319){ //FIXME -- make this nicer var x_left = flood_grid[i-1][j], x_left_d = 1; if (x_left == -1 && i > 1){ x_left = flood_grid[i-2][j]; x_left_d = 2;} if (x_left == -1 && i > 2){ x_left = flood_grid[i-3][j]; x_left_d = 3;} if (x_left == -1 && i > 3){ x_left = flood_grid[i-4][j]; x_left_d = 4;} //if (x_left == -1 && i > 4){ x_left = flood_grid[i-5][j]; x_left_d = 5;} //if (x_left == -1 && i > 5){ x_left = flood_grid[i-6][j]; x_left_d = 6;} //if (x_left == -1 && i > 6){ x_left = flood_grid[i-7][j]; x_left_d = 7;} var x_right = flood_grid[i+1][j], x_right_d = 1; if (x_right == -1 && i < 318){ x_right = flood_grid[i+2][j]; x_right_d = 2;} if (x_right == -1 && i < 317){ x_right = flood_grid[i+3][j]; x_right_d = 3;} if (x_right == -1 && i < 316){ x_right = flood_grid[i+4][j]; x_right_d = 4;} //if (x_right == -1 && i < 315){ x_right = flood_grid[i+5][j]; x_right_d = 5;} //if (x_right == -1 && i < 314){ x_right = flood_grid[i+6][j]; x_right_d = 6;} //if (x_right == -1 && i < 313){ x_right = flood_grid[i+7][j]; x_right_d = 7;} var y_down = flood_grid[i][j+1], y_down_d = 1; if (y_down == -1 && j < 318){ y_down = flood_grid[i][j+2]; y_down_d = 2;} if (y_down == -1 && j < 317){ y_down = flood_grid[i][j+3]; y_down_d = 3;} if (y_down == -1 && j < 316){ y_down = flood_grid[i][j+4]; y_down_d = 4;} //if (y_down == -1 && j < 315){ y_down = flood_grid[i][j+5]; y_down_d = 5;} //if (y_down == -1 && j < 314){ y_down = flood_grid[i][j+6]; y_down_d = 6;} //if (y_down == -1 && j < 313){ y_down = flood_grid[i][j+7]; y_down_d = 7;} var y_up = flood_grid[i][j-1], y_up_d = 1; if (y_up == -1 && j > 1){ y_up = flood_grid[i][j-2]; y_up_d = 2;} if (y_up == -1 && j > 2){ y_up = flood_grid[i][j-3]; y_up_d = 3;} if (y_up == -1 && j > 3){ y_up = flood_grid[i][j-4]; y_up_d = 4;} //if (y_up == -1 && j > 4){ y_up = flood_grid[i][j-5]; y_up_d = 5;} //if (y_up == -1 && j > 5){ y_up = flood_grid[i][j-6]; y_up_d = 6;} //if (y_up == -1 && j > 6){ y_up = flood_grid[i][j-7]; y_up_d = 7;} // interpolate from both directions if (x_left > 0 && x_right > 0 && y_up > 0 && y_down > 0){ var x_interp = x_right * (x_left_d)/(x_left_d + x_right_d) + x_left * (x_right_d)/(x_right_d + x_left_d); var y_interp = y_up * (y_down_d)/(y_down_d + y_up_d) + y_down * (y_up_d)/(y_up_d + y_down_d); flood_grid[i][j] = (x_interp + y_interp)/2; } else if (x_left > 0 && x_right > 0){ var x_interp = x_right * (x_left_d)/(x_left_d + x_right_d) + x_left * (x_right_d)/(x_right_d + x_left_d); flood_grid[i][j] = x_interp; } else if (y_up > 0 && y_down > 0){ var y_interp = y_up * (y_down_d)/(y_down_d + y_up_d) + y_down * (y_up_d)/(y_up_d + y_down_d); flood_grid[i][j] = y_interp; } else { if ((x_left > 0 || x_right > 0) && (y_up == 0 && y_down == 0)){ var x_interp = x_right * (x_left_d)/(x_left_d + x_right_d) + x_left * (x_right_d)/(x_right_d + x_left_d); flood_grid[i][j] = x_interp; } else if ((y_up > 0 || y_down > 0) && (x_left == 0 && x_right == 0)){ var y_interp = y_up * (y_down_d)/(y_down_d + y_up_d) + y_down * (y_up_d)/(y_up_d + y_down_d); flood_grid[i][j] = y_interp; } } } } } } smooth(flood_grid); smooth(flood_grid); smooth(flood_grid); smooth(flood_grid); //smooth(flood_grid); console.log('flood grid: ', flood_grid); flood_grid.forEach(function(row,i){ row.forEach(function(d,j){ if (d > 0){ context.globalAlpha = 0.8; context.fillStyle = d3.interpolateBlues(d/100); //var p = map.project(new mapboxgl.LngLat(d.lon, d.lat)); context.fillRect(i, j, rect_width, rect_height); } }) }) } }