How to render geojson polygon in React leaflet MapContainer?

Question

Stack : Reactjs, Leafletjs, EsriLeafletjs

I am trying to display one Polygon in GeoJson on a leaflet map container. My main issue is when I use Leaflet.geoJson(data) it return invalid JSON object.

Please have a look ...

My JSON file looks like this. It is containing one polygon. https://gist.githubusercontent.com/UmairMughal901/d43ee77a9be27f2dcd006038fe8f07e7/raw/8650f4f3585ff0c1706da7a434251cfc70f1907b/map.geojson

My Map Component

    import React, { useEffect, useRef } from 'react';
    import * as L from 'leaflet';
    import 'leaflet/dist/leaflet.css';
    import * as EL from "esri-leaflet";
    import axios from 'axios';
    import { GeoJSON } from 'react-leaflet';

    export default function Mapfun() {
      const mapCanvas = useRef(null);
    
      const dataParcel = axios.get('https://gist.githubusercontent.com/UmairMughal901/d43ee77a9be27f2dcd006038fe8f07e7/raw/8650f4f3585ff0c1706da7a434251cfc70f1907b/map.geojson').then(resp => {
    
        console.log(resp.data);
      });
    
    
      useEffect(() => {
        mapCanvas.current = L.map('mapdiv', {
          center: [31, 72],
          zoom: 6,
          layers: [
            L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
              attribution:
                '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }),
            EL.featureLayer({ url: 'http://localhost:6080/arcgis/rest/services/Pu/PB_/MapServer/11' }),
  //Main Issue here          
L.geoJSON(dataParcel),
    
    
          ]
        })
    
        
      }
        );
    
      //todo 
    
    
      return (
        <div id='mapdiv' style={{ width: '100%' }}>
        </div>
    
      )
    }

Answer 1

const dataParcel = axios.get is not what you think it is. axios.get is an asynchronous function, so dataParcel is not the result of what was returned from the Promise, but rather the promise itself. You need to do this in proper async/await syntax. In react-leaflet, this is made even easier. You don't need to be working with L.map at all, reat-leaflet has you covered.

Create a component specifically for your data fetching, which will fetch data on mount, and render a react-leaflet GeoJSON when the data is ready:

const MyData = () => {
  // create state variable to hold data when it is fetched
  const [data, setData] = React.useState();

  // useEffect to fetch data on mount
  useEffect(() => {
    // async function!
    const getData = async () => {
      // 'await' the data
      const response = await axios.get("url");
      // save data to state
      setData(response.data);
    };
    getData();
  }, []);

  // render react-leaflet GeoJSON when the data is ready
  if (data) {
    return <GeoJSON data={data} />;
  } else {
    return null;
  }
};


// Use your component in a MapContainer
const Map = (props) => {
  return (
    <MapContainer {...mapcontainerprops}>
      <MyData />
    </MapContainer>
  );
};

Working Codesandbox

_{Also, for funsies, if you are working with esri-leaflet components in a react-leaflet application, you might try react-esri-leaflet.}