Label rendering obscuring other graphics layer higher up

1061
6
Jump to solution
06-24-2019 03:58 AM
ArunSebastian1
New Contributor

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

0 Kudos
1 Solution

Accepted Solutions
Noah-Sager
Esri Regular Contributor

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?

View solution in original post

6 Replies
BjornSvensson
Esri Regular Contributor

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

0 Kudos
ArunSebastian1
New Contributor

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
                               })
                           );
                 })
0 Kudos
Noah-Sager
Esri Regular Contributor

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

0 Kudos
ArunSebastian1
New Contributor

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

0 Kudos
Noah-Sager
Esri Regular Contributor

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?

ArunSebastian1
New Contributor

Sorry for the delayed reply,yes this did solve my issue,though i had to convince the business to publish those labels in a single baked vector tile basemap!Thank you very much!

0 Kudos