Can't render GeoJSON data React-Leaflet & Typescript

Question

I've been trying to render GeoJSON data with React Leaflet & Typescript but can't seem to get it to work. I'm pretty sure my GeoJSON file is fine but typescript is complaining that is isn't the correct type. I am kinda stumped on what I'm supposed be passing the GeoJSON component if this isn't the correct type.

The error message getting:

Property 'type' is missing in type '({ type: string; geometry: { type: string; coordinates: number[]; }; properties: { prop0: string; prop1?: undefined; }; } | { type: string; geometry: { type: string; coordinates: number[][]; }; properties: { prop0: string; prop1: number; }; } | { ...; })[]' but required in type 'GeoJsonObject'.ts(2741)
index.d.ts(58, 5): 'type' is declared here.
GeoJSON.d.ts(7, 5): The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & GeoJSONProps & RefAttributes<GeoJSON<any, Geometry>>'

Here is the GeoJSON file im using:

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
      "properties": {"prop0": "value0"}
      },
    { "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
          ]
        },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
        }
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon",
         "coordinates": [
           [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
             [100.0, 1.0], [100.0, 0.0] ]
           ]

       },
       "properties": {
         "prop0": "value0",
         "prop1": {"this": "that"}
         }
       }
    ]
  }

and last but not least my react code:

import test from "../test.json"
...

<MapContainer style={{height: 400, width: 600}} zoom={12} center={[0,0]}>
              {this.state.geoJSON && ( <GeoJSON attribution="NEOM Map Data" data={test.features}/> )}
            </MapContainer>

I also tried to pass in the value of my test json as a prop to to my map component. In this case, typescript didnt complain about incorrect typings but doesn't seem to render anything? At least to me it looks like my map is completely empty.

score 0 · Answer 1 · answered Jun 02 '23 at 12:26

Do as you did before data={test} instead of data={test.features} to fix your TypeScript error. Here's the GeoJSON spec showing your json needs type https://datatracker.ietf.org/doc/html/rfc7946#section-3:

import test from "../test.json"
...

<MapContainer style={{height: 400, width: 600}} zoom={12} center={[0,0]}>
              {this.state.geoJSON && ( <GeoJSON attribution="NEOM Map Data" data={test}/> )}
            </MapContainer>

Your GeoJSON seems to be valid:
Why don't you try adding a GeoJSON react key prop as specified by this (Rendering GeoJSON with react-leaflet):

<MapContainer style={{height: 400, width: 600}} zoom={12} center={[0,0]}>
              {this.state.geoJSON && ( <GeoJSON key='my-geo-json' attribution="NEOM Map Data" data={test}/> )}
            </MapContainer>

Hey! Thanks for the answer. I just checked this again, this morning and realised that it wasn't rendering because i was zoomed in too close... stupid error on my part. While I have your attention though. I have a another geoJSON file that isn't rendering in the online viewer. The cause is apparently because it doesn't follow the right hand rule? You wouldn't know anything about that? I'm still very new to this. — xw-liron, Jun 05 '23 at 08:12
Ah good! Glad you solved it. No sorry. This post is the first time I've seen GeoJSON — Robert Rendell, Jun 05 '23 at 15:52

Can't render GeoJSON data React-Leaflet & Typescript

1 Answers1