title: How to fix type error when drawing a line with Mapbox
body: <p>I'm working on a project in which I use the Mapbox API to show cycling routes. </p>
  
  <p>I followed Mapbox's own example on the API, which can be found here: </p>
  
  <p><a href="https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/" rel="nofollow noreferrer">https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/</a></p>
  
  <p>Somehow I am having an error which seems to be caused by incorrect type but I really dont understand it, let alone solve it.</p>
  
  <p>This code works, just like in the example.</p>
  
  <pre><code>this.map.addLayer({
        id: 'geojson',
        type: 'line',
        source: {
          type: 'geojson',
          data: {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: [
                [-122.48369693756104, 37.83381888486939],
                [-122.48348236083984, 37.83317489144141],
                [-122.48339653015138, 37.83270036637107],
                [-122.48356819152832, 37.832056363179625],
                [-122.48404026031496, 37.83114119107971],
                [-122.48404026031496, 37.83049717427869],
              ]
            }
          }
        },
        layout: {
          'line-join': 'round',
          'line-cap': 'round'
        },
        paint: {
          'line-color': '#888',
          'line-width': 8
        }
  </code></pre>
  
  <p>But when I remove the hardcoded geopoints and change it with an array of LatLong values, based on the earlier API call I made to Mapbox to get a cycling route, I am getting an error:</p>
  
  <pre><code>this.map.addLayer({
        id: 'geojson',
        type: 'line',
        source: {
          type: 'geojson',
          data: {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: this.directionsResult.routes[0].geometry.coordinates
            }
          }
        },
        layout: {
          'line-join': 'round',
          'line-cap': 'round'
        },
        paint: {
          'line-color': '#888',
          'line-width': 8
        }
      });
  </code></pre>
  
  <p>The error message is:</p>
  
  <pre><code>(property) mapboxgl.Layer.source?: string | mapboxgl.GeoJSONSourceRaw | mapboxgl.VideoSourceRaw | mapboxgl.ImageSourceRaw | mapboxgl.CanvasSourceRaw | mapboxgl.VectorSource | mapboxgl.RasterSource | mapboxgl.RasterDemSource
  Type '{ type: string; data: { type: string; properties: {}; geometry: { type: string; coordinates: LatLong[]; }; }; }' is not assignable to type 'string | GeoJSONSourceRaw | VideoSourceRaw | ImageSourceRaw | CanvasSourceRaw | VectorSource | RasterSource | RasterDemSource'.
    Type '{ type: string; data: { type: string; properties: {}; geometry: { type: string; coordinates: LatLong[]; }; }; }' is not assignable to type 'GeoJSONSourceRaw'.
      Types of property 'type' are incompatible.
        Type 'string' is not assignable to type '"geojson"'.ts(2322)
  index.d.ts(1298, 9): The expected type comes from property 'source' which is declared here on type 'Layer'.
  </code></pre>
  
  <p>When I compare the notation of the hardcoded geopoints with my result I get back from the Directions API, they appear to have the exact same type and notation: </p>
  
  <pre><code>let coords = this.directionsResult.routes[0].geometry.coordinates;
  let geometry = [
        [-122.48369693756104, 37.83381888486939],
        [-122.48348236083984, 37.83317489144141],
        [-122.48339653015138, 37.83270036637107],
        [-122.48356819152832, 37.832056363179625],
        [-122.48404026031496, 37.83114119107971],
        [-122.48404026031496, 37.83049717427869]
      ];
  
  console.log(coords);
  console.log(geometry);
  </code></pre>
  
  <p>Which gives me the following console output:</p>
  
  <pre><code>(17) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
  map-box.component.ts:94 
  
  (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
  </code></pre>
  
  <p>Anybody with some help suggestions on what I am doing wrong here? Thanks!</p>