ColorSlider

The ColorSlider widget edits color ramp stops. Wire its events so each interaction updates the layer’s renderer.

Simple example

The following example listens for slider events, clones the layer renderer, and writes the slider’s stops onto the color visual variable (same idea as the ArcGIS color visualization sample).

Live Editor

function Example() {
  const [layerRef, setLayerRef] = useState<__esri.FeatureLayer>(null);
  const [rendererResponse, setRendererResponse] =
    useState<__esri.RendererResult>(null);
  const [layerRenderer, setLayerRenderer] = useState<__esri.Renderer | null>(
    null,
  );

  useEffect(() => {
    if (layerRef) {
      const createRenderer = async () => {
        const response = await createContinuousRenderer({
          layer: layerRef,
          field: "pop20",
          theme: "high-to-low",
        });
        setRendererResponse(response);
        setLayerRenderer(response.renderer.clone());
      };
      createRenderer();
    }
  }, [layerRef]);

  const applySliderToRenderer = (slider: __esri.ColorSlider) => {
    setLayerRenderer((current) => {
      const renderer = (current ?? rendererResponse?.renderer)?.clone();
      if (!renderer?.visualVariables?.[0]) return current;

      const color = renderer.visualVariables[0].clone();
      color.stops = slider.stops;
      renderer.visualVariables = [color];

      return renderer;
    });
  };

  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT_2 }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "400px", width: "100%" }}
    >
      <FeatureLayer
        url={HI_CENSUS_2020_FL_URL}
        events={{ "layerview-create": (e) => setLayerRef(e.layerView.layer) }}
        renderer={layerRenderer}
      />

      <Legend position="top-right" />

      <h4 className="mt-2! mb-0!">Population 2020</h4>
      <div
        id="color-slider-container"
        style={{ height: "300px", width: "100%" }}
      >
        {rendererResponse && (
          <ColorSlider
            container="color-slider-container"
            stops={docusaurusCompatibleStops(rendererResponse)}
            min={rendererResponse.statistics.min as number}
            max={rendererResponse.statistics.max as number}
            events={(slider) => ({
              "thumb-change": () => applySliderToRenderer(slider),
              "thumb-drag": () => applySliderToRenderer(slider),
              "segment-drag": () => applySliderToRenderer(slider),
              "min-change": () => applySliderToRenderer(slider),
              "max-change": () => applySliderToRenderer(slider),
            })}
          />
        )}
      </div>
    </MapView>
  );
}

Result

Loading...