title: How to add a linestring/polyline to a custom MapBox template with GeoJSON
body: <p>I am currently working on modifying the store locator template from MapBox:
  <a href="https://github.com/mapbox/foursquare-store-locator" rel="nofollow">https://github.com/mapbox/foursquare-store-locator</a>
  <a href="https://www.mapbox.com/blog/foursquare-store-locator/" rel="nofollow">https://www.mapbox.com/blog/foursquare-store-locator/</a></p>
  
  <p>The problem is in adding a linestring/polyline to this modified framework.</p>
  
  <p>For example, I am not able to add a new map layer with the linestring GeoJSON data using this format:</p>
  
  <pre><code>L.map('map').
  </code></pre>
  
  <p>I can get the linestring to work with leafllet.js:</p>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/xpancom/hUy5g/16/" rel="nofollow">http://jsfiddle.net/xpancom/hUy5g/16/</a></p>
  
  <hr>
  
  <p>...but this utilizes the "L." from leaflet.js and doesn't work in the modified MapBox template.</p>
  
  <pre><code>L.geoJson(myLine1, {style: myStyle}).addTo(map);
  </code></pre>
  
  <p>The problem is the modified store locator app from MapBox doesn't appear to implement this same interface.</p>
  
  <p>Here is my current code that attempts to add the layer that has the linestrings:</p>
  
  <pre><code>foursquare.lines = function() {
  
    var lines = { 'type': 'FeatureCollection',
          'features': []
      };
  
  lines.features.push({
              type: 'Feature',
             // id: venue.id,
              geometry: {
                  type: 'LineString',
                  coordinates: [[
              60.317769,
              24.929009
            ],
            [
              24.9292486208828,
              60.1681323558666
            ],
            [
              24.951764345169067,
              60.168932342858554
            ],
            [
              24.93321418762207,
              60.16911913731421
            ],
            [
              24.952929,
              60.167312
            ],
            [
              24.944114685058594,
              60.170111798603266
            ],
            [
              24.94499444961548,
              60.171435300334004
            ]]
              },
              properties: {}
  
          }); //push
  
  //console.log(lines);
  
  if (MM_map.lineLayer) {
          MM_map.lineLayer.geojson(lines);
          alert("hi");
      } else {
          MM_map.lineLayer = mmg().geojson(lines);
          //alert("hello");
          console.log(lines);
      }
  
   MM_map.addLayer(MM_map.lineLayer);
  
    }; //foursquare.lines
  </code></pre>
  
  <p>The layer gets added as an empty div but the geojson and the lines object don't get processed and don't show.</p>
  
  <p>When I run console.log(lines) I get all the geojson data correctly it just doesn't get added using this line:</p>
  
  <pre><code>mmg().geojson(lines)
  </code></pre>
  
  <p>I really appreaciate any help on this. Thanks</p>