Question 257667 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Geojson data is not properly visible on the archgis map

I am trying to show Pakistan flood data on the ArcGIS map. the map is loading fine. Geojsos’ point is showing as well but when I click it, it doesn’t show any data. Can you please look into this? I feel there is an issue with the layers but unable to troubleshoot. Please look into this?

Here is my map component:

import React, { useRef, useEffect, useState } from 'react';
import { loadModules } from 'esri-loader';


const loadEsriModules = async () => {
  const [MapView, WebMap, GeoJSONLayer] = await loadModules([
    'esri/views/MapView',
    'esri/WebMap',
    'esri/layers/GeoJSONLayer',
  ]);
  return { MapView, WebMap, GeoJSONLayer };
};

export default function PakFlood() {
  const mapEI = useRef(null);
  const [mapLoaded, setMapLoaded] = useState(false);

  useEffect(() => {
    const initMap = async () => {
      if (mapLoaded) {
        return; // Map has already been loaded, do not load again
      }

      const { MapView, WebMap, GeoJSONLayer } = await loadEsriModules();
      let view;

      if (typeof window !== 'undefined') {
        const webmap = new WebMap({
          basemap: 'topo-vector',
        });

        const centerCoordinates = [69.3451, 30.3753];

        view = new MapView({
          map: webmap,
          center: centerCoordinates,
          zoom: 5,
          container: mapEI.current,
        });

        // Create a GeoJSONLayer using your GeoJSON data
        const geojsonLayer = new GeoJSONLayer({
          url: '/GeoJson.json', // Corrected URL path to your GeoJSON file
        });

        // Add the GeoJSON layer to the map
        webmap.add(geojsonLayer);

        setMapLoaded(true);
      }

      return () => {
        if (view) {
          view.destroy();
        }
      };
    };

    return () => initMap();
  }, []);

  return <div style={{ height: '400px', width: '100%' }} ref={mapEI}></div>;
}

my geojson file is:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "Death": 336,
        "Injuries": 106,
        "Home Damaged": "4,26,897"

      },
      "geometry": {
        "coordinates": [
          67.02502796328298,
          30.208618740113437
        ],
        "type": "Point"
      },
      "id": 0
    },
    {
      "type": "Feature",
      "properties": {
        "Death": 309,
        "Injuries": 348,
        "Home Damaged": "3,26,897"
     
      },
      "geometry": {
        "coordinates": [
          71.56406913421023,
          34.166707649222474
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Death": 799,
        "Injuries": 8422,
        "Home Damaged": "57,496"
  
      },
      "geometry": {
        "coordinates": [
          66.97593758543181,
          25.004585896445533
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "Death": 23,
        "Injuries": 8,
        "Home Damaged": "1,160"

      },
      "geometry": {
        "coordinates": [
          74.31454667531628,
          35.99794367334606
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": { "Death": 223,
        "Injuries": 3858,
        "Home Damaged": "UNKNOWN"
},
      "geometry": {
        "coordinates": [
          74.28116274467547,
          31.745012657468934
        ],
        "type": "Point"
      }
    }
  ]
}
Tags:

2

Answers


  1. 0

    Having recently finished a map project(only for Nuclear bombs), I feel your pain. To show data when you click a GeoJSON point, you’ll need to add a popup template to your GeoJSONLayer. A popup template defines the content displayed in a popup when a user clicks a feature.

    Make sure you import the necessary modules from esri-loader.
    Create Popup Template to show Death, Injuries, and Home Damaged.
    Attach Popup to Layer: Attach the PopupTemplate to your GeoJSONLayer.
    Add Layer to Map.

    import React, { useRef, useEffect, useState } from 'react';
import { loadModules } from 'esri-loader';

const loadEsriModules = async () => {
  const [MapView, WebMap, GeoJSONLayer, PopupTemplate] = await loadModules([
    'esri/views/MapView',
    'esri/WebMap',
    'esri/layers/GeoJSONLayer',
    'esri/PopupTemplate'
  ]);
  return { MapView, WebMap, GeoJSONLayer, PopupTemplate };
};

export default function PakFlood() {
  const mapEl = useRef(null);
  const [mapLoaded, setMapLoaded] = useState(false);

  useEffect(() => {
    const initMap = async () => {
      if (mapLoaded) {
        return; // Map has already been loaded, do not load again
      }

      const { MapView, WebMap, GeoJSONLayer, PopupTemplate } = await loadEsriModules();
      let view;

      if (typeof window !== 'undefined') {
        const webmap = new WebMap({
          basemap: 'topo-vector',
        });

        const centerCoordinates = [69.3451, 30.3753];

        view = new MapView({
          map: webmap,
          center: centerCoordinates,
          zoom: 5,
          container: mapEl.current,
        });

        // Create a PopupTemplate
        const popupTemplate = new PopupTemplate({
          title: "Flood Data",
          content: [
            {
              type: "fields",
              fieldInfos: [
                { fieldName: "Death", label: "Deaths" },
                { fieldName: "Injuries", label: "Injuries" },
                { fieldName: "Home Damaged", label: "Homes Damaged" },
              ],
            },
          ],
        });

        // Create a GeoJSONLayer using your GeoJSON data
        const geojsonLayer = new GeoJSONLayer({
          url: '/GeoJson.json',
          popupTemplate: popupTemplate, // Attach the popup template
        });

        // Add the GeoJSON layer to the map
        webmap.add(geojsonLayer);

        setMapLoaded(true);
      }

      return () => {
        if (view) {
          view.destroy();
        }
      };
    };

    initMap();
  }, [mapLoaded]);

  return <div style={{ height: '400px', width: '100%' }} ref={mapEl}></div>;
}
    Login or Signup to reply.
  2. 0

    It’s tough to say without see the full code, but you can run some logs:

    const geojsonLayer = new GeoJSONLayer({
            url: '/GeoJson.json',
            popupTemplate: popupTemplate,
          });

console.log("Before adding layer:", webmap.layers.length);  // Debugging Step 2

          // Simplified Popup Template
          const popupTemplate = new PopupTemplate({
            title: "Flood Data",
            content: "{Death} deaths, {Injuries} injuries"  // Debugging Step 3
          });

          const geojsonLayer = new GeoJSONLayer({
            url: '/GeoJson.json',
            popupTemplate: popupTemplate,
          });

          console.log("GeoJSON Layer created");  // Debugging Step 1

          webmap.add(geojsonLayer);

          console.log("After adding layer:", webmap.layers.length);  // Debugging Step 2

          setMapLoaded(true);
        }
      } catch (error) {
        console.error("An error occurred:", error);  // Debugging Step 4
      }
    };

    initMap();
  }, [mapLoaded]);

    and tell me what they report, or if you figure it out from the logs, all good!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search