ImageryLabels (or any *Labels) basemap invisible.

[forgo]

Browser and version:

Chrome: Version 63.0.3239.132 (Official Build) (64-bit) Firefox Quantum: 57.0.4 (64-bit)

Versions:

Current: leaflet: 1.3.1 leaflet-draw: 0.4.13 esri-leaflet: 2.1.2

Previous (before upgrade): leaflet: 0.7.7 leaflet-draw: 0.3.0 esri-leaflet: 1.0.4

Steps to reproduce the error:

E.basemapLayer('Imagery').addTo(map)
E.basemapLayer('ImageryLabels').addTo(map)

What happens: The "Imagery" basemap is properly applied and I can interact with the map, but the "ImageryLabels" basemap, or any other "*Labels" basemap I try to apply are invisible. The tiled images show up in my DOM with the labels, but no amount of CSS or styling I know of can bring them to the forefront.

Please view the images to prove that the label images are being loaded into my content, but they are just not showing on the map:

Image Link

I was expecting: The labels to be visible on the map.

• Optional: I'm not using the CDN, I'm loading/bundling the library using:

NPM/React/Webpack

[jgravois]

i can't repro this in Chrome 63 (or any other browser for that matter)

http://jsbin.com/qakole/edit?html,output

[forgo]

Yeah, it seems pretty straightforward out of the documentation; unfortunately, it's not working between upgrades.

I do know that the underlying structure of the DOM changed, where labels have their own dedicated <div> on top of other layer placeholders, but the images are there, and I have no clue why they aren't visible.

Through CSS debugging, I've tried forcing z-index on several elements to some obnoxiously high numbers, positioning them in different ways, and forcing dimensions, all without success.

Any advice from others with more experience would be appreciated.

[jgravois]

it's not working between upgrades.

my jsbin is using the same versions of leaflet and esri-leaflet as your Current setup. happy to dig in deeper if you can provide more information on how to reproduce the problem.

[forgo]

Here is the only real difference made in the basemap code:

Before the upgrade (labels showed up properly):

import L from 'leaflet'
import 'esri-leaflet' .    // did some global magic to allow `L.esri` calls
L.esri.basemapLayer('Imagery').addTo(map)
L.esri.basemapLayer('ImageryLabels').addTo(map)

After the upgrade (labels invisible):

import L from 'leaflet'
import E from 'esri-leaflet' // captures `L.esri` into `E`
E.basemapLayer('Imagery').addTo(map)
E.basemapLayer('ImageryLabels').addTo(map)

The fact that one basemap works tells me that I'm not applying the basemap wrong.

[forgo]

@jgravois

I've taken the time to strip down my React map component to the barest essentials, and the problem doesn't exist there. Check out my project:

https://github.com/forgo/testmap.git

yarn start

The problem is, I've taken this exact stripped down component in the context of my app, and placed it first thing on the page. However, the labels are STILL not showing up in my app.

I can't easily share my project with you, but do you have any ideas why all the styles would work except for the labels? The labels still appear in the DOM, but cannot be made visible.

Thanks for your help!

[forgo]

@jgravois

SMH.

You can close this issue.

By chance, if anybody else runs into a strange issue such as this. What appeared to make all the difference was this:

We had a global css rule on all <img> tags.

The rule that caused the labels to not show was:

max-width: 90%

I guess at some point, my project decided that we never wanted to see images > 90% of their parent containers. This apparently has extremely bad side-effects on leaflet tiles.

I had to systematically toggle all the css applied everywhere in my app before I discovered this. I hope someone else may find use from this blunder.

Thanks again.

[jgravois]

glad to hear you pinpointed the problem @forgo. thanks for taking the extra time to close the loop.