javascript - How to draw a hex grid overlay with d3.js on Google Maps -
i'm trying figure out how draw interactive hex grid on top of google maps using d3.js, can't seem find documentation necessary particular implementation.
this combination of ionic-starter-maps project d3.js geometry overlay demo mixed in (code video here). plan utilize hex grid information this article.
the 2 heavy lifting (i think) functions here:
function d3init() { width = map.getdiv().offsetwidth; height = map.getdiv().offsetheight; projection = d3.geo.equirectangular() .translate([0,0]) .scale(57.29578) .precision(.1) context = new polylinecontext(); path = d3.geo.path().projection(projection).context(context); equator = {type: 'linestring', coordinates: [[-180,20],[-90,0], [0,-20], [90,0], [180,20] ] } render(); } function render() { polyline.setoptions({ strokecolor: 'red', strokeweight: 2 }); context.setcurrent(polyline.getpath()); path(equator); }
most of examples find use svg method draw shapes, have lots of these hexes sounds canvas might better suited task.
how can cover map hex grid? best method adding geometry overlay, , should looking @ equator = {type: 'linestring',...
place add more coordinates hex grid?
Comments
Post a Comment