topic Re: Basemaps are duplicated in BasemapGallery widget in ReactJS app in ArcGIS JavaScript Maps SDK Questions

Basemaps are duplicated in BasemapGallery widget in ReactJS app

bradMaps — Thu, 15 Aug 2024 20:08:34 GMT

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!!

Re: Basemaps are duplicated in BasemapGallery widget in ReactJS app

bradMaps — Mon, 19 Aug 2024 17:44:27 GMT

@ReneRubalcava curious if you have any ideas for troubleshooting. Thanks!!

Re: Basemaps are duplicated in BasemapGallery widget in ReactJS app

ReneRubalcava — Mon, 19 Aug 2024 20:01:35 GMT

Tough to tell from snippet, if you have a git repo or stackblitz, might be able to tell.

You probably don't want to assign the BasemapGallery container directly, do it in a useEffect with a useRef with some guards against nulls and stuff.

Does this happen in dev mode and prod? HMR can do this sometimes.

Re: Basemaps are duplicated in BasemapGallery widget in ReactJS app

bradMaps — Tue, 20 Aug 2024 19:11:05 GMT

Thanks for taking a look. Unfortunately, the code is private, so I can't share the repo. I will look into creating a stackblitz if I'm still stuck after trying your suggestions. I just ran a build and it is still showing the basemaps repeated, so I don't think HMR is the culprit.

Thanks again!

Re: Basemaps are duplicated in BasemapGallery widget in ReactJS app

bradMaps — Tue, 20 Aug 2024 19:26:30 GMT

useEffect/useRef fixed it!

For anyone interested, here's the new code:

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!