Zoom controls and widgets appearing outside of the map using ArcGIS for Javascript (converted to Typescript)

583
2
05-17-2023 08:58 PM
LO
by
New Contributor

Hi all, I am encountering an issue with the ArcGIS API for JavaScript where the zoom controls and other widgets are rendering outside the map instead of on it. I have followed official documentation but have been unable to resolve the problem. Here are some details about my implementation:

  • I am using ArcGIS API for JavaScript, but with TypeScript and React.
  • The map is rendered within a React component.
  • I have followed the documentation and added the zoom controls using the ui.add() method.
  • However, the zoom controls and widgets are not displaying on the map itself but rather appearing outside of it.

I already have the correct integration of the zoom controls, but the issue persists. I've attached an image of the default zoom controls, as well as a Sketch widget I added being outside of the map. Admittedly, there might some incorrect setup on my end but even then, I do need some assistance in identifying where such an issue stems from.

If anyone has encountered a similar issue or has any suggestions for troubleshooting or resolving this problem, I would greatly appreciate your assistance.

Thank you in advance for your help!

0 Kudos
2 Replies
ReneRubalcava
Frequent Contributor

If you provide a reproducible sample in codepen, GitHub, or stackblitz, would have a better idea. I'm going to guess the ArcGIS css is not being loaded correctly.

https://developers.arcgis.com/javascript/latest/get-started/

0 Kudos
LO
by
New Contributor

Hi, thanks for the suggestion! It was indeed something to do with the ArcGIS css; I didn't put the HTML code that calls on the css, as I was using React and missed out on that. So with that addition, this issue is fixed! Thanks again for the help 🙂

0 Kudos