CODEWITHSUNDEEP
leafletgeojsonreact-leaflet
Eli Mullan
Eli Mullan

Reputation: 1

react-leaflet , when a country is selected I want to highlight that country borders

I am trying to use geoJson layer and pass it the selectedCountry .

I get this error : "BordersGeoJSON.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'geoJSON')" I have checked that selectedCountry is a valid geoJSON object. The console log looks like this:

{type: 'Feature', properties: {…}, geometry: {…}} geometry : {type: 'Polygon', coordinates: Array(1)} properties : {name: 'Ireland', iso_a2: 'IE', iso_a3: 'IRL', iso_n3: '372'} type : "Feature" [[Prototype]] : Object

My code is this:

import { useEffect } from 'react';
import { L } from 'leaflet';

const BordersGeoJSON = ({mapRef, selectedCountry}) => {
  useEffect(() => {
    if (mapRef && selectedCountry) {
        console.log(selectedCountry)
      const layer = L.geoJSON(selectedCountry, {
        style: () => ({ color: "red" }),
      });
      layer.addTo(mapRef.leafletElement);
    }
  }, [mapRef, selectedCountry]);

  return null;
};

export default BordersGeoJSON
  1. I have tried to use selectedCountry geometry only but I get the same error
  2. I have tried using directly the geoJSON file instead of selectedCountry but I get the same error

Here it is on sandbox : https://codesandbox.io/s/vigilant-galois-7y1xd3?file=/src/components/leaflet/BasicMap/PointsOfInterest.js

Upvotes: 0

Views: 576

Answers (1)

Eli Mullan
Eli Mullan

Reputation: 1

I got it working.

I have changed things to use GeoJson component and use the selectedCountry state. GeoJson needs a key to update every time selectedCountry changes .

here is the code :

import { useEffect, useState } from 'react';
import {GeoJSON } from 'react-leaflet';


const BordersGeoJSON = ({bounds, selectedCountry}) => { 
  const [geoJsonKey, addToGeoJsonKey] = useState(1);

  useEffect(() => {
    addToGeoJsonKey(geoJsonKey + 1)
  }, [selectedCountry])

  return (
    <>
    { selectedCountry && 
      <GeoJSON
        key={geoJsonKey}
        data={selectedCountry}
        style={() => ({ color: 'blue' })}
        
      />
    }
    </>    
  );
};

export default BordersGeoJSON

Upvotes: 0

Related Questions