react-leaflet GeoJSON with typescript not rendering geojson Points-CodePudding

Im trying to render points to the map using geojson points. I have an react application and I'm using react-leaflet. For unknown reasons the does not render any points on the map.

I have tried importing a json file, but then I get an error saying

      TS2322: Type '{ type: string; features: { type: string; properties: { name: string; amenity: string; popupContent: string; }; geometry: { type: string; coordinates: number[]; }; }[]; }' is not assignable to type 'GeoJsonObject'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type '"FeatureCollection" | "Feature" | "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon" | "GeometryCollection"'.

my json file looks like this:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
          "name": "Coors Field",
          "amenity": "Baseball Stadium",
          "popupContent": "This is where the Rockies play!"
      },
      "geometry": {
          "type": "Point",
          "coordinates":  [59.433421, 24.75224]
      }
    }
  ]
}

My map code:

import sensors from "./../Sensors/sensors.json";
import {TileLayer, MapContainer,GeoJSON} from "react-leaflet";
...

   <MapContainer
            style={{ height: "80vh", width: "100vw" }}
            center={center}
            zoom={12}
            scrollWheelZoom={true}
          >
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={[59.43046, 24.728563]} title="Test">
              /{" "}
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>
            <GeoJSON data={sensors} key="mydata" />
          </MapContainer>

Another workaround which I tried was to create a .tsx file to export a variable as with the expected object type for the "data"

 export const featureCollection: GeoJSON.FeatureCollection<any> = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature" as "Feature",
          geometry: {
            type: "Point" as "Point",
            coordinates: [59.433421, 24.75224],
          },
          properties: {
            name: "SomeSensor",
          },
        },
      ],
    };

All of my efforts still have left me with a nonworking solution.

Can anyone suggest what I might be doing wrong ?

CodePudding user response：

Make sure you have installed @types/leaflet and @types/react-leaflet to be able to get the typings as defined in these two libraries.

You do not have to declare a type for your json

Also make sure you overwrite the default or use an L.icon to be able to see the marker png images on the map

Here is a working demo with your example