{ // filling Land with Hexagons; see what Land is, also how H3 fill works. const height = width / 2; const ctx = DOM.context2d(width, height); const line = d3.line().context(ctx); function clear() { ctx.fillStyle = "white"; ctx.fillRect(0, 0, width, height); ctx.strokeStyle = "#ccc"; ctx.lineWidth = 1; let grid = 20; for (let x = 0; x < width; x += grid) { ctx.moveTo(x, 0); ctx.lineTo(x, height); } for (let y = 0; y < height; y += grid) { ctx.moveTo(0, y); ctx.lineTo(width, y); } ctx.stroke(); } let x = d3 .scaleLinear() .domain([-180, 180]) .range([0, width]); let y = d3 .scaleLinear() .domain([-90, 90]) .range([height, 0]); function drawpoly(arr, thresh_px, scale) { if (scale){ x = d3 .scaleLinear() .domain(d3.extent(arr, ([x0, y0]) => x0)) .range([0, width]); y = d3 .scaleLinear() .domain(d3.extent(arr, ([x0, y0]) => y0)) .range([height, 0]); } // translate from lat/lng to screen coordinates let tmp = arr.map(([x0, y0]) => [x(x0), y(y0)]); // filter out points that are too close together (takes forever to draw without this) // TODO: some real simplification, this is pretty hacky. var v0 = tmp[0]; let pts = []; if (0 < thresh_px){ for (var i = 1; i < tmp.length - 1; i++) { var v1 = tmp[i]; var dist = ((v0[0] - v1[0])**2 + (v0[1] - v1[1])**2)**.5; if (thresh_px < dist){ pts.push(v1); v0 = v1; } } } else pts = tmp; // if no points left, nothing left to do. if (pts.length < 1) return; // wraparound causes barf; check for it and split. let sign = i => i < 0 ? -1 : i > 0 ? 1 : 0; let x0 = sign(pts[0][0]); let cuts = [] for (var i = 1; i < pts.length; i++) { var x1 = sign(pts[i][0]); if (sign(x1) != x0) cuts.push(i); } if (cuts.length > 0) pts = pts.slice(0, cuts[0]-1); // draw the outline made by points. ctx.strokeStyle = "#000"; ctx.lineWidth = .5; ctx.fillStyle = "#00ffff55"; // line(pts); //ctx.stroke(); //ctx.fill(); // h3 ctx.beginPath(); let inFill = h3.compact( h3.polyfill( pts.map(([x0, y0]) => { return [x.invert(x0), y.invert(y0)] ;//.reverse(); }), 3, // resolution (size of hexagon) true // specify geojson and avoid the call to .reverse() above. ) ); // draw our H3 cells ctx.fillStyle = "#ff00ff55"; ctx.lineWidth = 1; ctx.strokeStyle = "#FFFFFF"; let colors = { 2: "#AAAAAA", 1: "#00AAAA", 0: "#AA00AA", 3: "#000000" }; inFill = inFill .map(id => [id, h3.h3GetResolution(id), h3.h3ToGeoBoundary(id, true).reverse()]); // paint each resolution separately for (var i = 3; i >= 0; i--){ ctx.beginPath(); inFill .filter(([id, res, coords]) => res == i) .forEach(([id, res, coords]) => { ctx.fillStyle = colors[res]; line(coords.map(([x0, y0]) => [x(x0), y(y0)])); }); ctx.fill(); ctx.stroke(); } } clear(); //land.features[0].geometry.coordinates.map( larr => larr.map(arr => drawpoly(arr, 10, false))); //drawpoly(land.features[0].geometry.coordinates[17][0], 100, true); ctx.strokeStyle = "#fff"; ctx.lineWidth = 1; ctx.beginPath(); let features = land.features[0].geometry.coordinates; console.log("printing features", features.length); for (var i = 0; i < features.length; i++){ if (i == 10) continue; // antarctica for (var j = 0; j < features[i].length; j++) drawpoly(features[i][j], 5, false); } console.log("done"); return ctx.canvas; }