title: d3.js, mapbox/leaflet and meteor - animations on maps
body: <p>I would like to add an animated line to my the mapbox/leaflet map I have incorporated into my meteor app (something akin to what can be seen here: <a href="http://bl.ocks.org/zross/2f2baa1699b8ae38c768" rel="nofollow">D3, Leaflet animation</a>). The aim is to draw a great circle/geodesic arc that connects two points - without using d3, I'm drawing a static arc with the following code:</p>
  
  <pre><code>Template.explore.rendered = () -&gt;
  
    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 for 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
  </code></pre>
  
  <p>I have since been attempting to integrate d3 with this code, but have had trouble pulling in the geojson variable. Using the code in the example posted previously (<a href="http://bl.ocks.org/zross/2f2baa1699b8ae38c768" rel="nofollow">http://bl.ocks.org/zross/2f2baa1699b8ae38c768</a>), I appended the SVG to the leaflet map as follows:</p>
  
  <pre><code>Template.explore.rendered = () -&gt;
  
      # Code as 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) -&gt;
        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) -&gt;
          d.properties.name
        ).attr('style', 'opacity:0.5')
        # Code continues as in example
  </code></pre>
  
  <p>However, I instead get a type error: <code>Uncaught TypeError: Cannot read property 'features' of undefined</code> that fails on this line:</p>
  
  <pre><code>lineFeatures = g.selectAll('path').data(collection.features).enter().append('path').attr('class', (d) -&gt;
              d.properties.name
            ).attr('style', 'opacity:0.5')
  </code></pre>
  
  <p>I'm wondering if the d3.json function is being called before the 'geojson' dataset is available, but am struggling to rectify this - any help would be much appreciated!</p>