how can i add source and layer to my react-map-gl

Question

i'm trying to add source and layers on my map and it's not rendering even though the map is being rendered. But whenever i change the source type to vector it worked, but the type i want to use is geojson(in order to use polygons and polyline), but it doesn't seem to work.

I don't know what i'm doing wrong, i've been trying to fix this for hours, even read the documents, i still don't know what i'm doing wrong.

here is the code below.

import ReactMapGL, {Source, Layer} from 'react-map-gl'

      const data = {
        type: "Feature",
        geometry: {
        type: "Polygon",
        coordinates: [
        [
        -107.814303,
        37.935657
        ],
        [
        -107.814424,
        37.936094
        ],
        [
        -107.816288,
        37.936826
        ],
        [
        -107.814644,
        37.940931
        ],
        [
        -107.80993,
        37.939892
        ],
        [
        -107.807686,
        37.939376
        ],
        [
        -107.80932,
        37.935416
        ],
        [
        -107.809507,
        37.935014
        ],
        [
        -107.810191,
        37.934835
        ],
        [
        -107.810765,
        37.934708
        ],
        [
        -107.811377,
        37.934732
        ],
        [
        -107.813902,
        37.935372
        ],
        [
        -107.814303,
        37.935657
        ]
        ]
        }
        }


       <ReactMapGL
       mapStyle='mapbox://styles/mapbox/dark-v10'
       mapboxApiAccessToken={accessKey}
       onViewportChange={viewport => {
        setViewport(viewport)
    }}
       {...viewport}
       >
       <Source id="route" type="geojson" data={data} />
       <Layer
            id="route"
            type="line"
            source="route"
            paint={{
              'line-color': "green"
            }} />

       </ReactMapGL> }

Thanks for the help in advance.

Answer 1

Maybe this is what you are looking for.

<Layer
  {...{
    id: "zone",
    type: "fill",
    source: {
      type: "geojson",
      data: {
        type: "Feature",
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-118.5687542, 34.0412107],
              [-118.4082538, 33.8727824],
              [-118.3717758, 33.8729961],
              [-118.3688574, 33.9671539],
              [-118.3363247, 33.9894178],
              [-118.2811303, 34.0096732],
              [-118.1707964, 34.0336193],
              [-118.0576271, 34.0671419],
              [-118.0600304, 34.1575335],
              [-118.1163354, 34.2083719],
              [-118.5152764, 34.2268251],
              [-118.5687542, 34.0412107],
            ],
          ],
        },
      },
    },
    layout: {},
    paint: {
      "fill-color": "rgb(5, 30, 52)",
      "fill-opacity": 0.1,
    },
  }}
/>