Basemaps are duplicated in BasemapGallery widget in ReactJS app

bradMaps

Hello,

I have a React 17 app utilizing 4.21 of the JS Maps SDK.  I am able to add the BasemapGallery widget with two basemaps, but the basemap tiles are duplicated 14 times.  Is there a hook I should be using to prevent the duplication?

Also, how can I force the gallery to display as 3 horizontal tiles per row, instead of just vertically?

Thanks!!

const BasemapGroup = ({
  label,
}: {
  label: string;
  children?: React.ReactNode;
}) => {
  const mapComponents = useContext(MapContext);
  const [open, setOpen] = useState(false);
  const classes = useStyles();

  const basemapGallery = new BasemapGallery({
    view: mapComponents.view,
    source: [Basemap.fromId("hybrid"), Basemap.fromId("gray")],
  });
  return (
    <Box mb={5} className={classes.layerGroupContainer}>
      <MetricLabelLight
        style={{ color: palette.blue, cursor: "pointer" }}
        onClick={() => {
          setOpen(!open);
        }}
      >
        {label}
      </MetricLabelLight>
      <Collapse in={true} timeout={500}>
        <div
          ref={(element) => element && (basemapGallery.container = element)}
        ></div>
      </Collapse>
    </Box>
  );
};

...

<BasemapGroup label="Basemaps" key="Basemaps"></BasemapGroup>

 

 

bradMaps

useEffect/useRef fixed it!

 

For anyone interested, here's the new code:

const BasemapGroup = ({
  label,
}: {
  label: string;
  children?: React.ReactNode;
}) => {
  const mapComponents = useContext(MapContext);
  const [open, setOpen] = useState(false);
  const classes = useStyles();

  const basemapGalleryRef = useRef<BasemapGallery | null>(null);

  useEffect(() => {
    mapComponents.view.when(() => {
      basemapGalleryRef.current = new BasemapGallery({
        view: mapComponents.view,
        source: [Basemap.fromId("hybrid"), Basemap.fromId("gray")],
      });
    });
  }, [mapComponents.view]);

  const basemapGallery = basemapGalleryRef.current;

  return (
    <Box mb={5} className={classes.layerGroupContainer}>
      <MetricLabelLight
        style={{ color: palette.blue, cursor: "pointer" }}
        onClick={() => {
          setOpen(!open);
        }}
      >
        {label}
      </MetricLabelLight>
      <Collapse in={true} timeout={500}>
        <div
          ref={(element) =>
            element && basemapGallery && (basemapGallery.container = element)
          }
        ></div>
      </Collapse>
    </Box>
  );
};

 

Any tips on forcing the gallery to display as 3 horizontal tiles per row, instead of just vertically?  It seems that if the width is > 450px, it should show as 3 tiles per row.

Thanks again!