Skip to content

Feat/buffer radii #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BeRecursive22 merged 3 commits into from
Oct 23, 2025
Merged

Feat/buffer radii #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4bc2a28
add static buffer radii
recursive-0 Oct 23, 2025
3919323
add buffer radii in sidecar block to visualize miles
recursive-0 Oct 23, 2025
e7129c0
fix build errors
recursive-0 Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/blocks/map-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { MapBlockType } from "@/types/storymap.types";
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";
Expand All @@ -16,6 +17,8 @@ export const MapBlock = ({ block }: MapBlockProps) => {
useEffect(() => {
if(mapRef.current) {



const featureLayers = block.payload.layers.map((layerInfo) => {
return new FeatureLayer({
portalItem: {
Expand All @@ -24,10 +27,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({
Expand All @@ -37,7 +43,8 @@ export const MapBlock = ({ block }: MapBlockProps) => {
zoom: block.payload.initial_map_state.zoom,
});

view.when(() => {

view.when(async () => {
console.log("Map view loaded successfully");
console.log("Number of layers:", map.layers.length);

Expand Down
124 changes: 123 additions & 1 deletion src/blocks/sidecar-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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({
Expand All @@ -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);
Expand All @@ -81,6 +196,13 @@ export const SidecarBlock = ({ block }: SidecarBlockProps) => {
});

setMapReady(true);
createBuffer();

view.goTo({
target: buffer2Geometry,
// zoom: 14,
duration: 1000
})
});

mapViewRef.current = view;
Expand Down