ArcGIS Testing

src/pages/map/index.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 import { useEffect, useRef, useState } from 'react';
 
-import mapboxgl from 'mapbox-gl';
 import { FiMapPin } from 'react-icons/fi';
 import { RiRoadMapLine } from 'react-icons/ri';
 
@@ -15,19 +14,104 @@ import { NodeCard } from '@pages/Nodes/NodeCard';
 
 //
 
+import { nodes } from './nodes';
+
+//
+
 import WebMap from '@arcgis/core/WebMap';
 import Map from '@arcgis/core/Map';
 import WebScene from '@arcgis/core/WebScene';
 import SceneView from '@arcgis/core/views/SceneView';
+import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
+import Point from '@arcgis/core/geometry/Point';
+import Graphic from '@arcgis/core/Graphic';
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
+import TextSymbol from '@arcgis/core/symbols/TextSymbol';
+import Feature from '@arcgis/core/widgets/Feature';
+import SimpleRenderer from '@arcgis/core/renderers/SimpleRenderer';
+import LabelSymbol3D from '@arcgis/core/symbols/LabelSymbol3D';
+import TextSymbol3DLayer from '@arcgis/core/symbols/TextSymbol3DLayer';
+import LineCallout3D from '@arcgis/core/symbols/callouts/LineCallout3D';
+import LabelClass from '@arcgis/core/layers/support/LabelClass';
 
 export const MapPage = (): JSX.Element => {
   const ref = useRef<HTMLDivElement>(null);
 
+  const labelClass = new LabelClass({
+    labelExpressionInfo: {
+      expression: '$feature.name',
+    },
+    symbol: new LabelSymbol3D({
+      symbolLayers: [
+        new TextSymbol3DLayer({
+          text: '{name}',
+          material: {
+            color: 'black',
+          },
+          halo: {
+            color: [255, 255, 255, 0.7],
+            size: 2,
+          },
+          font: {
+            size: 12,
+            weight: 'bold',
+          },
+          size: 10,
+        }),
+      ],
+      verticalOffset: {
+        screenLength: 150,
+        maxWorldLength: 2000,
+        minWorldLength: 30,
+      },
+      callout: new LineCallout3D({
+        size: 0.5,
+        color: [0, 0, 0],
+        border: {
+          color: [255, 255, 255],
+        },
+      }),
+    }),
+  });
+
+  const points: Graphic[] = nodes.map(
+    (node, index) =>
+      new Graphic({
+        geometry: new Point({
+          latitude: node.lat,
+          longitude: node.lng,
+        }),
+        attributes: {
+          ObjectID: index,
+          name: node.name,
+        },
+      }),
+  );
+
   useEffect(() => {
     if (ref.current) {
+      const layer = new FeatureLayer({
+        labelsVisible: true,
+        labelingInfo: [labelClass],
+        source: points,
+        fields: [
+          {
+            name: 'ObjectID',
+            alias: 'ObjectID',
+            type: 'oid',
+          },
+          {
+            name: 'name',
+            alias: 'Name',
+            type: 'string',
+          },
+        ],
+      });
+
       const map = new Map({
-        basemap: 'arcgis-topographic',
+        basemap: 'satellite',
         ground: 'world-elevation',
+        layers: [layer],
       });
 
       const scene = new SceneView({
@@ -35,9 +119,9 @@ export const MapPage = (): JSX.Element => {
         map: map,
         camera: {
           position: {
-            x: -118.808, //Longitude
-            y: 33.961, //Latitude
-            z: 2000, //Meters
+            y: -35.59, //Longitude
+            x: 148, //Latitude
+            z: 200, //Meters
           },
           tilt: 75,
         },