HistogramRangeSlider

The HistogramRangeSlider widget is a slider that allows the user to select a range of values from a histogram.

Simple example

The following example shows how you can capture events on a HistogramRangeSlider widget, and use the captures values to manipulate the FeatureLayerView of a FeatureLayer.

Live Editor

function Example() {
  const layer = useRef<FeatureLayer>(null);
  const layerView = useRef<FeatureLayerView>(null);

  const [layerReady, setLayerReady] = useState(false);
  const [histogramResult, setHistogramResult] = useState<HistogramResult>(null);
  const [stats, setStats] = useState<SummaryStatisticsResult>(null);

  useEffect(() => {
    if (layerReady) {
      const createHistogram = async () => {
        const histogramResult = await histogram({
          layer: layer.current,
          field: "pop20",
          numBins: 50,
        });
        setHistogramResult(histogramResult);

        const summaryStatisticsResult = await summaryStatistics({
          layer: layer.current,
          field: "pop20",
        });
        setStats(summaryStatisticsResult);
      };

      createHistogram();
    }
  }, [layerReady]);

  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT_2 }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <FeatureLayer
        ref={layer}
        url={HI_CENSUS_2020_FL_URL}
        events={{ "layerview-create": () => setLayerReady(true) }}
        renderer={HI_CENSUS_2020_FL_RENDERER}
      >
        <FeatureLayerView ref={layerView} />
      </FeatureLayer>

      <Legend position="top-right" />

      <h4 className="mt-2! mb-0!">Population 2020</h4>
      <div
        id="histogram-slider-container"
        style={{ height: "300px", width: "100%" }}
      >
        {histogramResult && stats && (
          <HistogramRangeSlider
            container="histogram-slider-container"
            bins={histogramResult.bins}
            min={histogramResult.minValue}
            max={histogramResult.maxValue}
            rangeType="between"
            values={[histogramResult.minValue, histogramResult.maxValue]}
            events={(histogramRangeSlider) => {
              return {
                "thumb-drag": () => {
                  layerView.current.filter = {
                    where: histogramRangeSlider.generateWhereClause("pop20"),
                  };
                },
              };
            }}
          />
        )}
      </div>
    </MapView>
  );
}

Result

Loading...