title: mapbox how can I add a label to a linestring?
body: <p>I would like to add text to a linestring. Basically the same way the name of a street shows up in google maps. So if I zoom in or move the map around, the text still shows up on the line.</p>
  
  <p>Do I need to add some sort of new layer with the same coordinates?</p>
  
  <p>Here is a <a href="http://jsfiddle.net/brianssheldon/wm18a33d/3/" rel="noreferrer">jsfiddle</a> to start with.</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id='map'&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  mapboxgl.accessToken = 'pk.eyJ1Ijoib2tpZWJ1YmJhIiwiYSI6ImNpdHZscGs3ajAwNXYyb284bW4ydWUzbGsifQ.1PoNrSP0F65WolWgqKhV4g';
  
  var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-88.4, 33.4],
      zoom: 10
  });
  
  map.on('load', function () {
      map.addSource("route", {
          "type": "geojson",
          "data": {
              "type": "Feature",
              "properties": {},
              "geometry": {
                  "type": "LineString",
                  "coordinates": [
                      [-88.451092, 33.325422],
                      [-88.248037, 33.436312]
                  ]
              }
          }
      });
  
      map.addLayer({
          "id": "route",
          "type": "line",
          "source": "route",
          "layout": {
              "line-join": "round",
              "line-cap": "round"
          },
          "paint": {
              "line-color": "#888",
              "line-width": 8
          }
      });
  
  
  
  });
  
  
          body { margin:0; padding:0; }
          #map { position:absolute; top:0; bottom:0; width:100%; }
  </code></pre>