ReactMapGL add points from geoJSON

Question

I'm trying to add geoJSON points to my ReactMapGL but it doesn't seem to be rendering...there aren't any errors from console either

my code is as follows

const Map = ({ question, updateCurrent }) => {
  const [viewport, setViewport] = useState({
    width: 400,
    height: 400,
    latitude: -41.189,
    longitude: 175.309,
    zoom: 4.49,
  })
  const mapData = {
    features: [
      {
        type: 'Feature',
        properties: {
          name: 'Canterbury',
        },
        geometry: {
          coordinates: [172.479644, -43.475418],
          type: 'Point',
        },
        id: '28682b312c41375af64f65b452c4c32c',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Southland',
        },
        geometry: {
          coordinates: [167.905597, -45.838703],
          type: 'Point',
        },
        id: '317db867d0fc3c2f629cf4cea1df3077',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Gisborne',
        },
        geometry: {
          coordinates: [177.926385, -38.53651],
          type: 'Point',
        },
        id: '3b30468c228e2ee576cc1943f86dfe75',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Manawatu - Wanganui',
        },
        geometry: {
          coordinates: [175.434562, -39.524608],
          type: 'Point',
        },
        id: '79df70a0e4371c7eb0d7db4db9a86b06',
      },
      {
        type: 'Feature',
        properties: {
          name: 'West Coast',
        },
        geometry: {
          coordinates: [172.185093, -41.514477],
          type: 'Point',
        },
        id: '7f471be1cdfe51a2b5d7ca0c5c826c64',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Nelson / Tasman / Marlborough',
        },
        geometry: {
          coordinates: [172.981906, -41.267511],
          type: 'Point',
        },
        id: '806c715276e1ef82edd796e5934f8e4a',
      },
      {
        type: 'Feature',
        properties: {
          name: 'Wellington - Wairarapa',
        },
        geometry: {
          coordinates: [175.486838, -41.197457],
          type: 'Point',
        },
        id: '9768592cef2eee2dc7f6e874e1944084',
      },
   ],
    type: 'FeatureCollection',
  }
  return (
    <Container>
      <ReactMapGL
        {...viewport}
        width="80vw"
        height="70vh"
        mapStyle="mapbox://styles/mapbox/light-v9"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      >
        <Source id="New Zealand" type="geojson" data={mapData} />
        <Layer
          id="anything"
          type="fill"
          source="New Zealand"
          paint={{ 'fill-color': '#228b22', 'fill-opacity': 0.4 }}
        />
      </ReactMapGL>
    </Container>
  )
}

My current output is

And my expected output is this (From mapbox Studio)

Could someone help me out please? I can't seem to find too much info about this

Answer 1

Your source data consists of only points yet in your Layer you've set type="fill". Fill type only applies to polygons not points or lines. You'll want to add either a circle or symbol layer instead for points.