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

Popular posts from this blog

PHP and MySQL WP -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

go - golang pprof for c library code -