esri.views.2d.layers.FeatureLayerView2D] Failed to resolve layer view

JayakumarPD

Hi,  

    Using ESRI JS API Core 4.24

     I have created a project on Next JS and trying to load the data(polygon) from a JSON source, which I have kept in a local folder.  I am getting the json from getStaticProps and passing it to EsriMap component using bellow code..

 

 

 

 

import dynamic from "next/dynamic";
import React, { useState } from "react";
import fs from "fs/promises";
import path from "path";

const EsriMap = dynamic(() => import("../../components/esri_map"), {
  ssr: false,
});
export default function index({district}) {
  return (
    <>
      <EsriMap districts={district}/>
    </>
  );
}

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), "data", "district.json");
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData);
  return {
    props: {
      district: data,
    },
  };
}

 

 

 

 

 First Try

 

 

 

 

import React from "react";
import { useRef, useEffect } from "react";
import ArcGISMap from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import LayerView from "@arcgis/core/views/layers/LayerView";
import SpatialReference from "@arcgis/core/geometry/SpatialReference";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Polygon from "@arcgis/core/geometry/Polygon";
import Graphic from "@arcgis/core/Graphic";
import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
import SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol";
import Color from "@arcgis/core/Color";
import SimpleRenderer from "@arcgis/core/renderers/SimpleRenderer";
import Sidebar from "./sidebar";

export default function EsriMap({ districts }) {
  var map, view;
  const mapRef = useRef(null);
  const {
    displayFieldName,
    features,
    fieldAliases,
    fields,
    geometryType,
    spatialReference,
  } = districts;
// I am getting features properly
   console.log(features);
  useEffect(() => {
    const map = new ArcGISMap({
      basemap: "topo-vector",
    });
    const view = new MapView({
      map,
      container: mapRef.current,
      extent: {
        spatialReference: {
          wkid: 102100,
        },
        xmax: 9318041.682582326,
        xmin: 7685897.199114412,
        ymax: 2134999.5715922136,
        ymin: 1257953.6118566156,
      },
      zoom: 7,
    });
// like this i can add the map service also, so scope is fine
    // const districtLayer = new FeatureLayer({
    //   url: "http://xyz/MapServer/1"
    // });
    // map.add(districtLayer);
    
    const districtFeatureLayer = new FeatureLayer({
    objectIdField:"OBJECTID",
    geometryType:geometryType,
    fields:fields,
    spatialReference:spatialReference,
    source:features,
    });
    map.add(districtFeatureLayer);
});

  return (
    <>
      <div className="flex flex-row h-full">
        {/* <aside className="w-1/5">Table of content</aside> */}
        <Sidebar/>
        <div className="w-4/5" ref={mapRef}></div>
      </div>
    </>
  );
};

 

 

 

 

It is giving the error like this (firsttry.png enclosed)

1. error: s
1. details: {layer: l, error: s}
2. message: "layerview creation failed"
3. name: "layerview:create-error"

Second Try

 

 

 

 

var graphicsD =[
    {geometry: 
        {features:features,
        geometryType: geometryType,
        spatialReference: new SpatialReference(spatialReference)},
        attribute:fields
    }
  ];
  
  let featureD = [
    {
      id:"districts",
      geometryType:geometryType,
      spatialReference:new SpatialReference(spatialReference),
      fields:fields,
      source: graphicsD,
    }
  ];
  let layerD = new FeatureLayer({
    title:"s",
    id:"d",
    source:featureD,
    objectIdField:"OBJECTID"
  })
 
  map.add(layerD);

 

 

 

 

It is giving error like this(secondtry.png enclosed)

1. error: s
1. details: {layer: l, error: s}
2. message: "layerview creation failed"
3. name: "layerview:create-error"

Can anybody guide where I am committing a mistake.  in feature layer creation or preparing data for feature layer creation.  

 

secondtry.png

firsttry.png

drone2map.PNG

Default values issue.png

wayfaringrob_0-1722631864034.png

wayfaringrob_0-1722631638038.png

JayakumarPD

In ESRI JS API 4.24, using the json data, feature layer can be created using bellow code.  Which renders, with default symbology, the symbology can be changed using renderer or json.  

const {features,fields,geometryType,spatialReference} = districts;
var districtsFeatureLayer = new FeatureLayer({
      id: "districts",
      source: features.map((feature) => {
          return {
              attributes: feature.attributes,
              geometry: {
                  type: 'polygon',
                  rings: feature.geometry.rings,
                  spatialReference: new SpatialReference({ wkid: spatialReference.wkid })
              }
          };
      }), 
      outFields: ["*"],
      objectIdField: "OBJECTID",
      geometryType: "polygon",
      spatialReference: new SpatialReference({ wkid: spatialReference.wkid })
  });

  map.add(districtsFeatureLayer);