Select to view content in your preferred language

Black Boxes For Labels

765
5
09-05-2024 11:49 AM
ColinSullivan
Occasional Contributor

Has anyone seen anything like this (Esri JS API 4.30). We're using a basic streets-vector basemap with the "fromId" and that one plus most of the other basic basemaps maps are randomly coming up with the boxes for labels seen below. 

The odd behaviors are:

  • Happens for vector and non-vector basemaps
  • If I click on the map, it goes away.
    • As long as I don't click on the map I can see the issue in varying forms when switching out the basemap to other OOTB basemaps. 
  • I have a branch where we use a custom basemap on load, for that one I cannot recreate this issue.
  • From what I can tell, the issue only shows up from 4.29 on. I can't recreate on 4.28 (previously was running 4.26 on this project)

This feels like an implementation issue on my end, but goodness if I can't tell what. Asking here in case it's an issue others have experienced. 

@AnneFitz 

 

ColinSullivan_0-1725561815268.png

 

5 Replies
ColinSullivan
Occasional Contributor

So. I have an odd work around. Since the labels correct themselves on map interaction. I updated my code to throw a clear/tiny symbol in on load and it mostly resolves the issue. But there's still some odd label flashing when zooming in and out. 

0 Kudos
AlertMediaDev
Emerging Contributor

I have the same issue, it is extremely frustrating. 

It can happen for the place name labels, or for the icons for city names.  

I'd love to see your workaround. 

0 Kudos
ColinSullivan
Occasional Contributor

Sounds like what we're seeing too.

It's really not much of a workaround. I can still see the issue very briefly when zooming. I did try and go a bit further with our solution to see what could be the difference between our app and the esri examples where this doesn't happen. We are using a react build that doesn't use esri react components. My attempts though didn't seem to change the issue though.

Below is all I did. On initialize I add a small clear point to the center of the map. Then found that on print, it could show in the print out. So right before print I clear the point and re-add it after print request goes out. 

It's a weird solution. But worked enough for us. Just couldn't figure out the root cause or get the issue to go away completely (still barely can see on fast zoom in/out). Let me know if that works for you.

Otherwise, my approach was just messing with the map until I found something that forced the map to somehow refresh without the black boxes. Let me know how it goes for you. 

ColinSullivan_0-1734457202815.png

 

AlertMediaDev
Emerging Contributor

I created another threat for this issue as well. 

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/basemap-styles-service-broken-lab...

We are using a similar react setup.  

0 Kudos
AlertMediaDev
Emerging Contributor

I was able to resolve my issue by pinning the arcgis/core version to 4.28.10, running npm install. 

You could delete your .lock file and re-run npm install (dangerous, might break other parts of your app)

There might be some dependencies or secondary dependencies conflicting. 

0 Kudos