GraphicsLayer

Basic Usage

A GraphicsLayer is a layer that can display arbitrary graphics. It can take various Graphic components as children:

Live Editor

function Example() {
  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <GraphicsLayer>
        <Graphic
          geometry={{
            type: "point",
            x: -17565473,
            y: 2449593.5,
            spatialReference: { wkid: 102100 },
          }}
          symbol={{
            type: "simple-marker",
            color: "red",
          }}
        />
      </GraphicsLayer>
    </MapView>
  );
}

Result

Loading...

State-based graphics

You can use state to manage the graphics in a GraphicsLayer.

Live Editor

function Example() {
  const [graphics, setGraphics] = useState(["1", "2"]);

  return (
    <div className="flex gap-2">
      <div className="flex flex-col gap-2 min-w-[200px]">
        <h4>Graphics</h4>
        {GRAPHICS_EXAMPLE_ARRAY.map((g) => (
          <label className="flex gap-2">
            <input
              type="checkbox"
              checked={graphics.includes(g.id)}
              onChange={(e) => {
                setGraphics(
                  e.target.checked
                    ? [...graphics, g.id]
                    : graphics.filter((id) => id !== g.id),
                );
              }}
            />
            {g.name}
          </label>
        ))}
      </div>
      <MapView
        ViewProperties={{ extent: OAHU_EXTENT }}
        MapProperties={{ basemap: "topo-vector" }}
        style={{ height: "300px", width: "100%" }}
      >
        <GraphicsLayer>
          {GRAPHICS_EXAMPLE_ARRAY.map((graphic) => {
            if (!graphics.includes(graphic.id)) return null;

            return (
              <Graphic
                key={graphic.id}
                geometry={graphic.geometry}
                symbol={graphic.symbol}
              />
            );
          })}
        </GraphicsLayer>
      </MapView>
    </div>
  );
}

Result

Loading...

As a canvas for Sketch

When working with a Sketch component, you need to specify the layer to draw to, which must be a GraphicsLayer.

Live Editor

function Example() {
  const [layerRef, setLayerRef] = useState();

  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <GraphicsLayer ref={(r) => r && setLayerRef(r)} />
      {layerRef && (
        <Sketch
          layer={layerRef}
          position="top-right"
          events={{
            create: (e) => {
              if (e.state === "complete") {
                console.log("create", e);
                console.log(
                  "Layer the <Sketch /> draws to is the <GraphicsLayer />:",
                  e.graphic.layer === layerRef,
                );
              }
            },
          }}
        />
      )}
    </MapView>
  );
}

Result

Loading...