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.

current demo i'm working with

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

Popular posts from this blog

php - Admin SDK -- get information about the group -

dns - How To Use Custom Nameserver On Free Cloudflare? -

Python Error - TypeError: input expected at most 1 arguments, got 3 -