d3.js, mapbox/leaflet and meteor - animations on maps -

d3.js, mapbox/leaflet and meteor - animations on maps -

i add together animated line mapbox/leaflet map have incorporated meteor app (something akin can seen here: d3, leaflet animation). aim draw great circle/geodesic arc connects 2 points - without using d3, i'm drawing static arc next code:

template.explore.rendered = () -> l.mapbox.accesstoken = 'access_token_mapbox' map = l.mapbox.map('map', 'map_id', zoomcontrol: false) countrypair = countrypairs.findone() geojson = { 'type': 'featurecollection' 'features': [ { 'type': 'feature' 'geometry': 'type': 'point' 'coordinates': [ countrypair.country_a_longitude_dec countrypair.country_a_latitude_dec ] 'properties': 'name': 'country a' } { 'type': 'feature' 'geometry': 'type': 'point' 'coordinates': [ countrypair.country_b_longitude_dec countrypair.country_b_latitude_dec ] 'properties': 'name': 'country b' } ] } markerlayer = l.mapbox.featurelayer(geojson).addto(map) map.fitbounds markerlayer.getbounds(), paddingtopleft: [ 30 70 ] paddingbottomright: [ 600 30 ] # code geodesic start = x: countrypair.country_a_longitude_dec y: countrypair.country_a_latitude_dec end = x: countrypair.country_b_longitude_dec y: countrypair.country_b_latitude_dec generator = new (arc.greatcircle)(start, end, name: 'great arc') line = generator.arc(100, offset: 10) l.geojson(line.json()).addto map

i have since been attempting integrate d3 code, have had problem pulling in geojson variable. using code in illustration posted (http://bl.ocks.org/zross/2f2baa1699b8ae38c768), appended svg leaflet map follows:

template.explore.rendered = () -> # code above... markerlayer = l.mapbox.featurelayer(geojson).addto(map) svg = d3.select(map.getpanes().overlaypane).append('svg') g = svg.append('g').attr('class', 'leaflet-zoom-hide') d3.json geojson, (error, collection) -> transform = d3.geo.transform(point: projectpoint) d3path = d3.geo.path().projection(transform) linefeatures = g.selectall('path').data(collection.features).enter().append('path').attr('class', (d) -> d.properties.name ).attr('style', 'opacity:0.5') # code continues in illustration

however, instead type error: uncaught typeerror: cannot read property 'features' of undefined fails on line:

linefeatures = g.selectall('path').data(collection.features).enter().append('path').attr('class', (d) -> d.properties.name ).attr('style', 'opacity:0.5')

i'm wondering if d3.json function beingness called before 'geojson' dataset available, struggling rectify - help much appreciated!

this isn't propper reply don't have reputation comment (weird).

integrate these 2 beasts painful task. i've got result svg overlay layer.

a plunker demonstrate. hope can helpful.

d3.js meteor leaflet mapbox