javascript - D3 Canvas Globe With Text At LongLat -
my question today d3 , display text on globe @ long/lat using canvas. i've got globe built using mbostock's world tour, has list of long/lats , rotates globe focus on them. i've got markers @ points, i'd display text next of points. @ point in time, it's city names, intention display more information globe more fleshed out. i've created plunk code: https://plnkr.co/edit/czfof4bkpv93l3yxwu3n?p=preview
the relevant code in plunk is:
return function(t) { projection.rotate(r(t)); c.clearrect(0, 0, width, height); c.fillstyle = "#ccc", c.beginpath(), path(land), c.fill(); (var j = 0; j < points.length; j++) { c.fillstyle = "#000", c.beginpath(), path(points[j]), c.fill(); } c.strokestyle = "#000", c.linewidth = 2, c.beginpath(), path(globe), c.stroke(); }; basically i'm asking way display text right of specific long/lat coordinates on globe using canvas. , appreciated. thank in advance!
the easiest way add text in tween function after draw features:
c.filltext(points[i].location,projection(points[i].coordinates)[0]+10,projection(points[i].coordinates)[1]+2); with variable projection, projection([long,lat]) returns [x,y], in other words gives forward projection of given point represented latitude , longitude, returning coordinate in map coordinate space (your svg or canvas).
once have projected coordinates, can manipulate needed. in case added ten x value push place name further right. see this plunker.
Comments
Post a Comment