From 4bc2a28f3a884c70bd345714e4a151e3b5341920 Mon Sep 17 00:00:00 2001 From: recursive-0 Date: Thu, 23 Oct 2025 16:30:50 +0530 Subject: [PATCH 1/3] add static buffer radii --- src/blocks/map-block.tsx | 121 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 119 insertions(+), 2 deletions(-) diff --git a/src/blocks/map-block.tsx b/src/blocks/map-block.tsx index 0524f3f..3af3004 100644 --- a/src/blocks/map-block.tsx +++ b/src/blocks/map-block.tsx @@ -1,5 +1,10 @@ import type { MapBlockType } from "@/types/storymap.types"; +import * as geodesicBufferOperator from "@arcgis/core/geometry/operators/geodesicBufferOperator.js"; +import Point from "@arcgis/core/geometry/Point.js"; +import SpatialReference from "@arcgis/core/geometry/SpatialReference.js"; +import Graphic from "@arcgis/core/Graphic"; import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; +import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"; import Map from "@arcgis/core/Map.js"; import MapView from "@arcgis/core/views/MapView.js"; import { useEffect, useRef } from "react"; @@ -24,10 +29,13 @@ export const MapBlock = ({ block }: MapBlockProps) => { }); }); + const graphicsLayer = new GraphicsLayer({ title: "Buffer Graphics" }); + + const map = new Map({ basemap: block.payload.base_style, - layers: featureLayers + layers: [...featureLayers, graphicsLayer] }); const view = new MapView({ @@ -37,7 +45,114 @@ export const MapBlock = ({ block }: MapBlockProps) => { zoom: block.payload.initial_map_state.zoom, }); - view.when(() => { + const createBuffer = async () => { + // Load the operator if not already loaded + if (!geodesicBufferOperator.isLoaded()) { + await geodesicBufferOperator.load(); + } + + const centerPoint = new Point({ + x: block.payload.initial_map_state.longitude, + y: block.payload.initial_map_state.latitude, + spatialReference: SpatialReference.WGS84 + }); + + // Use the new operator to create buffers + const buffer = geodesicBufferOperator.execute(centerPoint, 1, { + unit: "miles" + }); + + const buffer2 = geodesicBufferOperator.execute(centerPoint, 2, { + unit: "miles" + }); + + const bufferGraphic = new Graphic({ + geometry: buffer, + symbol: { + type: "simple-fill", + color: [227, 139, 79, 0.5], + outline: { + color: [255, 255, 255, 255], + width: 2 + }, + }, + }); + + const bufferGraphic2 = new Graphic({ + geometry: buffer2, + symbol: { + type: "simple-fill", + color: [227, 139, 79, 0.5], + outline: { + color: [255, 255, 255, 255], + width: 2 + }, + }, + }); + + const centerPointGraphic = new Graphic({ + geometry: centerPoint, + symbol: { + type: "simple-marker", + style: "circle", + color: [227, 139, 79, 1], + size: 12, + outline: { + color: [255, 255, 255, 1], + width: 2 + } + } + }); + + const label1Mile = new Graphic({ + geometry: new Point({ + x: block.payload.initial_map_state.longitude + 0.01, + y: block.payload.initial_map_state.latitude + 0.005, + spatialReference: SpatialReference.WGS84 + }), + symbol: { + type: "text", + text: "1 mile", + color: [255, 255, 255, 1], + font: { + size: 14, + weight: "bold" + }, + haloColor: [0, 0, 0, 0.8], + haloSize: 2 + } + }); + + const label2Mile = new Graphic({ + geometry: new Point({ + x: block.payload.initial_map_state.longitude + 0.02, + y: block.payload.initial_map_state.latitude + 0.01, + spatialReference: SpatialReference.WGS84 + }), + symbol: { + type: "text", + text: "2 miles", + color: [255, 255, 255, 1], + font: { + size: 14, + weight: "bold" + }, + haloColor: [0, 0, 0, 0.8], + haloSize: 2 + } + }); + + graphicsLayer.add(label1Mile); + graphicsLayer.add(label2Mile); + graphicsLayer.add(bufferGraphic); + graphicsLayer.add(bufferGraphic2); + graphicsLayer.add(centerPointGraphic); + }; + + + + + view.when(async () => { console.log("Map view loaded successfully"); console.log("Number of layers:", map.layers.length); @@ -45,6 +160,8 @@ export const MapBlock = ({ block }: MapBlockProps) => { console.log(`Layer ${index} loaded:`, layer.title); layer.visible = true; }); + + await createBuffer(); }); return () => { From 3919323393b81ddafeb82fdef513949cca4296e5 Mon Sep 17 00:00:00 2001 From: recursive-0 Date: Thu, 23 Oct 2025 16:54:15 +0530 Subject: [PATCH 2/3] add buffer radii in sidecar block to visualize miles --- src/blocks/map-block.tsx | 15 ++++- src/blocks/sidecar-block.tsx | 124 ++++++++++++++++++++++++++++++++++- 2 files changed, 135 insertions(+), 4 deletions(-) diff --git a/src/blocks/map-block.tsx b/src/blocks/map-block.tsx index 3af3004..604ebea 100644 --- a/src/blocks/map-block.tsx +++ b/src/blocks/map-block.tsx @@ -1,4 +1,5 @@ import type { MapBlockType } from "@/types/storymap.types"; +import type { Geometry } from "@arcgis/core/geometry"; import * as geodesicBufferOperator from "@arcgis/core/geometry/operators/geodesicBufferOperator.js"; import Point from "@arcgis/core/geometry/Point.js"; import SpatialReference from "@arcgis/core/geometry/SpatialReference.js"; @@ -21,6 +22,8 @@ export const MapBlock = ({ block }: MapBlockProps) => { useEffect(() => { if(mapRef.current) { + let buffer2Geometry: Geometry | null = null; + const featureLayers = block.payload.layers.map((layerInfo) => { return new FeatureLayer({ portalItem: { @@ -61,11 +64,11 @@ export const MapBlock = ({ block }: MapBlockProps) => { const buffer = geodesicBufferOperator.execute(centerPoint, 1, { unit: "miles" }); - + const buffer2 = geodesicBufferOperator.execute(centerPoint, 2, { unit: "miles" }); - + buffer2Geometry = buffer2 as Geometry; const bufferGraphic = new Graphic({ geometry: buffer, symbol: { @@ -161,7 +164,13 @@ export const MapBlock = ({ block }: MapBlockProps) => { layer.visible = true; }); - await createBuffer(); + // await createBuffer(); + + // view.goTo({ + // target: buffer2Geometry, + // // zoom: 14, + // duration: 1000 + // }) }); return () => { diff --git a/src/blocks/sidecar-block.tsx b/src/blocks/sidecar-block.tsx index 32c98d3..4fe73f7 100644 --- a/src/blocks/sidecar-block.tsx +++ b/src/blocks/sidecar-block.tsx @@ -1,5 +1,11 @@ import type { SidecarBlockType, SidecarCardType } from "@/types/storymap.types"; +import type { Geometry } from "@arcgis/core/geometry"; +import * as geodesicBufferOperator from "@arcgis/core/geometry/operators/geodesicBufferOperator.js"; +import Point from "@arcgis/core/geometry/Point.js"; +import SpatialReference from "@arcgis/core/geometry/SpatialReference.js"; +import Graphic from "@arcgis/core/Graphic"; import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; +import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"; import Map from "@arcgis/core/Map.js"; import MapView from "@arcgis/core/views/MapView.js"; import { useEffect, useRef, useState } from "react"; @@ -53,9 +59,12 @@ export const SidecarBlock = ({ block }: SidecarBlockProps) => { }); }); + let buffer2Geometry: Geometry | null = null; + const graphicsLayer = new GraphicsLayer({ title: "Buffer Graphics" }); + const map = new Map({ basemap: block.payload.map_config.base_style, - layers: featureLayers + layers: [...featureLayers, graphicsLayer] }); const view = new MapView({ @@ -68,6 +77,112 @@ export const SidecarBlock = ({ block }: SidecarBlockProps) => { zoom: block.payload.map_config.initial_map_state.zoom, }); + const createBuffer = async () => { + // Load the operator if not already loaded + if (!geodesicBufferOperator.isLoaded()) { + await geodesicBufferOperator.load(); + } + + const centerPoint = new Point({ + x: block.payload.map_config.initial_map_state.longitude, + y: block.payload.map_config.initial_map_state.latitude, + spatialReference: SpatialReference.WGS84 + }); + + // Use the new operator to create buffers + const buffer = geodesicBufferOperator.execute(centerPoint, 1, { + unit: "miles" + }); + + const buffer2 = geodesicBufferOperator.execute(centerPoint, 2, { + unit: "miles" + }); + + buffer2Geometry = buffer2 as Geometry; + + const bufferGraphic = new Graphic({ + geometry: buffer, + symbol: { + type: "simple-fill", + color: [227, 139, 79, 0.5], + outline: { + color: [255, 255, 255, 255], + width: 2 + }, + }, + }); + + const bufferGraphic2 = new Graphic({ + geometry: buffer2, + symbol: { + type: "simple-fill", + color: [227, 139, 79, 0.5], + outline: { + color: [255, 255, 255, 255], + width: 2 + }, + }, + }); + + const centerPointGraphic = new Graphic({ + geometry: centerPoint, + symbol: { + type: "simple-marker", + style: "circle", + color: [227, 139, 79, 1], + size: 12, + outline: { + color: [255, 255, 255, 1], + width: 2 + } + } + }); + + const label1Mile = new Graphic({ + geometry: new Point({ + x: block.payload.map_config.initial_map_state.longitude + 0.01, + y: block.payload.map_config.initial_map_state.latitude + 0.005, + spatialReference: SpatialReference.WGS84 + }), + symbol: { + type: "text", + text: "1 mile", + color: [255, 255, 255, 1], + font: { + size: 14, + weight: "bold" + }, + haloColor: [0, 0, 0, 0.8], + haloSize: 2 + } + }); + + const label2Mile = new Graphic({ + geometry: new Point({ + x: block.payload.map_config.initial_map_state.longitude + 0.02, + y: block.payload.map_config.initial_map_state.latitude + 0.01, + spatialReference: SpatialReference.WGS84 + }), + symbol: { + type: "text", + text: "2 miles", + color: [255, 255, 255, 1], + font: { + size: 14, + weight: "bold" + }, + haloColor: [0, 0, 0, 0.8], + haloSize: 2 + } + }); + + graphicsLayer.add(label1Mile); + graphicsLayer.add(label2Mile); + graphicsLayer.add(bufferGraphic); + graphicsLayer.add(bufferGraphic2); + graphicsLayer.add(centerPointGraphic); + }; + view.when(() => { console.log("✅ Sidecar map loaded successfully"); console.log("📊 Number of layers:", map.layers.length); @@ -81,6 +196,13 @@ export const SidecarBlock = ({ block }: SidecarBlockProps) => { }); setMapReady(true); + createBuffer(); + + view.goTo({ + target: buffer2Geometry, + // zoom: 14, + duration: 1000 + }) }); mapViewRef.current = view; From e7129c06cad92aadc8994d6479180d5c6f9a592c Mon Sep 17 00:00:00 2001 From: recursive-0 Date: Thu, 23 Oct 2025 17:00:04 +0530 Subject: [PATCH 3/3] fix build errors --- src/blocks/map-block.tsx | 121 +-------------------------------------- 1 file changed, 1 insertion(+), 120 deletions(-) diff --git a/src/blocks/map-block.tsx b/src/blocks/map-block.tsx index 604ebea..731f1e5 100644 --- a/src/blocks/map-block.tsx +++ b/src/blocks/map-block.tsx @@ -1,9 +1,4 @@ import type { MapBlockType } from "@/types/storymap.types"; -import type { Geometry } from "@arcgis/core/geometry"; -import * as geodesicBufferOperator from "@arcgis/core/geometry/operators/geodesicBufferOperator.js"; -import Point from "@arcgis/core/geometry/Point.js"; -import SpatialReference from "@arcgis/core/geometry/SpatialReference.js"; -import Graphic from "@arcgis/core/Graphic"; import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"; import Map from "@arcgis/core/Map.js"; @@ -22,7 +17,7 @@ export const MapBlock = ({ block }: MapBlockProps) => { useEffect(() => { if(mapRef.current) { - let buffer2Geometry: Geometry | null = null; + const featureLayers = block.payload.layers.map((layerInfo) => { return new FeatureLayer({ @@ -48,112 +43,6 @@ export const MapBlock = ({ block }: MapBlockProps) => { zoom: block.payload.initial_map_state.zoom, }); - const createBuffer = async () => { - // Load the operator if not already loaded - if (!geodesicBufferOperator.isLoaded()) { - await geodesicBufferOperator.load(); - } - - const centerPoint = new Point({ - x: block.payload.initial_map_state.longitude, - y: block.payload.initial_map_state.latitude, - spatialReference: SpatialReference.WGS84 - }); - - // Use the new operator to create buffers - const buffer = geodesicBufferOperator.execute(centerPoint, 1, { - unit: "miles" - }); - - const buffer2 = geodesicBufferOperator.execute(centerPoint, 2, { - unit: "miles" - }); - buffer2Geometry = buffer2 as Geometry; - const bufferGraphic = new Graphic({ - geometry: buffer, - symbol: { - type: "simple-fill", - color: [227, 139, 79, 0.5], - outline: { - color: [255, 255, 255, 255], - width: 2 - }, - }, - }); - - const bufferGraphic2 = new Graphic({ - geometry: buffer2, - symbol: { - type: "simple-fill", - color: [227, 139, 79, 0.5], - outline: { - color: [255, 255, 255, 255], - width: 2 - }, - }, - }); - - const centerPointGraphic = new Graphic({ - geometry: centerPoint, - symbol: { - type: "simple-marker", - style: "circle", - color: [227, 139, 79, 1], - size: 12, - outline: { - color: [255, 255, 255, 1], - width: 2 - } - } - }); - - const label1Mile = new Graphic({ - geometry: new Point({ - x: block.payload.initial_map_state.longitude + 0.01, - y: block.payload.initial_map_state.latitude + 0.005, - spatialReference: SpatialReference.WGS84 - }), - symbol: { - type: "text", - text: "1 mile", - color: [255, 255, 255, 1], - font: { - size: 14, - weight: "bold" - }, - haloColor: [0, 0, 0, 0.8], - haloSize: 2 - } - }); - - const label2Mile = new Graphic({ - geometry: new Point({ - x: block.payload.initial_map_state.longitude + 0.02, - y: block.payload.initial_map_state.latitude + 0.01, - spatialReference: SpatialReference.WGS84 - }), - symbol: { - type: "text", - text: "2 miles", - color: [255, 255, 255, 1], - font: { - size: 14, - weight: "bold" - }, - haloColor: [0, 0, 0, 0.8], - haloSize: 2 - } - }); - - graphicsLayer.add(label1Mile); - graphicsLayer.add(label2Mile); - graphicsLayer.add(bufferGraphic); - graphicsLayer.add(bufferGraphic2); - graphicsLayer.add(centerPointGraphic); - }; - - - view.when(async () => { console.log("Map view loaded successfully"); @@ -163,14 +52,6 @@ export const MapBlock = ({ block }: MapBlockProps) => { console.log(`Layer ${index} loaded:`, layer.title); layer.visible = true; }); - - // await createBuffer(); - - // view.goTo({ - // target: buffer2Geometry, - // // zoom: 14, - // duration: 1000 - // }) }); return () => {