nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Label rendering obscuring other graphics layer higher up

ArunSebastian1

Hi,

I do have a feature layer with some labeling info ,as part of a webmap, rendered in my app as below pasted.From the image it is can be clearly noticed that a push-pin marker has been obscured by the label. In spite of the graphic layer (with a point graphic created on demand having picture symbol marker which is an svg ) being at a higher index in the collection ,the rendering remains not seemingly right to my understanding.Tried a few things like re-ordering the layers,delayed adding of the graphic layer many times,but this behavior seems to be adamant.I am using the latest and greatest 4.11 js api. What am I doing wrong here ? Is there anyway to get the pin to come to the front and stay over the label ?

map with label and a marker graphic underneath it

Find more posts tagged with

Accepted answers

Noah Sager

Hi Arun,

How about something like this?

https://codepen.io/noash/pen/PraaJg

If you have access to ArcGIS Pro, you could publish your layer with labels as a vector tile layer, and then consume that in your app as a VectorTileLayer instead of a webmap. The advantage here is that the labels would be baked into the layer, so you could draw graphics on the top. Does that help?

All comments

ArunSebastian1

Thanks a lot Noah!

Preferably the marker should stay always on top of all the visual elements ,regardless of whether they are labels or other graphics.I have a web map with a bunch of layers and labels serving as the map of the app.The business requirement is that, the center of the map always be marked and the address of the center or an attribute value of the particular feature beneath the center,if any, be displayed in the search widget on top of the map.This behaviour
has to be the same regardless of you pan,zoom ,resize etc.Any label which happens to be positioned at the center of the map obscures the marker.Is there a straight forward way to prevent this from happening(Any WebGL based solution? like any custom graphic layers as in https://developers.arcgis.com/javascript/latest/sample-code/custom-gl-visuals/index.html)? If no,is hiding the label when marker is on top ,is plausible?

Arun

Noah Sager

Hi Arun,

This is the expected behavior. The label will always be above an added graphic.

Some questions for you: What is the expected outcome? If you want the graphic above (and partially or wholly blocking) the label, would removing the label entirely (when they collide) be a good outcome? If not, and you would still want to see a partial label, what is the use case for placing a graphic directly on top of a label?

Feel free to respond here or send me a direct message.

-Noah

ArunSebastian1

Thanks for responding Bjorn .

Here is the webmap I use in the app

http://gbs.maps.arcgis.com/home/webmap/viewer.html?webmap=fe0ad272d0e74d45b38ff69525d3ca55

And below is the test code I used for adding graphic over the labels

whenFalseOnce(this.view, "updating").then(() => {

this.searchResultLayer = new GraphicsLayer();

this.view.map.layers.add(this.searchResultLayer);

this.view.on("click", evt => {

const _pt = evt.mapPoint.clone();

this.searchResultLayer.add(

new Graphic({

symbol: new PictureMarkerSymbol(this.locateSymbol),

geometry: _pt

})

);

})

BjornSvensson

Hi Arun Sebastian‌ - do you have a public webmap that you could share the URL to? Or a codepen/jsbin repro case?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.