ArcGIS Testing

src/core/slices/mapSlice.ts

@@ -1,4 +1,4 @@
-import { LngLat } from 'mapbox-gl';
+import Point from '@arcgis/core/geometry/Point';
 
 import type { MapStyleName } from '@core/mapStyles';
 import type { PayloadAction } from '@reduxjs/toolkit';
@@ -6,7 +6,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 interface MapState {
   firstLoad: boolean;
-  latLng: LngLat;
+  latLng: Point;
   zoom: number;
   bearing: number;
   pitch: number;
@@ -18,7 +18,7 @@ interface MapState {
 
 const initialState: MapState = {
   firstLoad: true,
-  latLng: new LngLat(0, 0),
+  latLng: new Point(),
   zoom: 2,
   bearing: 0,
   pitch: 0,
@@ -33,7 +33,7 @@ export const mapSlice = createSlice({
   name: 'map',
   initialState,
   reducers: {
-    setLatLng: (state, action: PayloadAction<LngLat>) => {
+    setLatLng: (state, action: PayloadAction<Point>) => {
       state.latLng = action.payload;
     },
     setZoom: (state, action: PayloadAction<number>) => {

src/index.css

@@ -22,18 +22,6 @@
   background-color: #a8bbbf;
 }
 
-.mapboxgl-popup-close-button,
-.mapboxgl-popup-tip {
-  display: none;
-}
-
-.mapboxgl-popup-content {
-  background: transparent !important;
-  border-radius: 0 !important;
-  box-sizing: unset !important;
-  padding: 0 !important;
-}
-
 /* JSONPretty */
 .__json-pretty__ {
   line-height: 1.3;

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,
         },