Conflict between VectorBasemapLayer and VectorTileLayer

[joelhickok]

Describe the bug

When adding a VectorBasemapLayer and a VectorTileLayer at the same time, I can only display one or the other on the map. Using the Layer Control in Leaflet, you can toggle the layers on and off to clearly see only one is capable of being displayed at the same time.

Reproduction

// add a basemap layer to the map
const basemap = new VectorBasemapLayer('ArcGIS:Imagery', {apikey: 'placeholder'}).addTo(map)

// add a vector tile layer, this is one hosted by my current organization
const overlay = new VectorTileLayer('https://tiles.arcgis.com/tiles/rQj5FcfuWPllzwY8/arcgis/rest/services/Parcel_Viewer_Basemap/VectorTileServer').addTo(map)

const basemaps = {}
const overlays =  {
        'basemap': basemap,
        'overlay':  overlay,
}

const layerControl =  new Control.Layers(basemaps, overlays)
layerControl.addTo(map)
// User the layer control to toggle layers on and off and see they are incompatible

Once you setup a working Leaflet map with the code above (or however you prefer to instantiate the Classes), notice that you cannot see both layers at the same time. Only one or the other.

Logs

wrong listener type: undefined client.js:1974:15
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 4
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 8
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 2
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 18
WebGL context was lost. esri-leaflet-vector.js:16815:22
wrong listener type: undefined client.js:1974:15
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. DomEvent.DoubleTap.js:16:2
wrong listener type: undefined client.js:1974:15
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 16
WebGL context was lost. esri-leaflet-vector.js:16815:22
wrong listener type: undefined 2 client.js:1974:15
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 16
WebGL context was lost. esri-leaflet-vector.js:16815:22
wrong listener type: undefined 2 client.js:1974:15
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 16

​

System Info

Leaflet Version: v1.9.3
Esri Leaflet Version: v3.0.10
Esri Leaflet Vector Version: v4.0.2

  System:
    OS: macOS 12.6.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 25.36 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.volta/tools/image/node/16.18.0/bin/node
    Yarn: 1.22.15 - ~/.volta/bin/yarn
    npm: 8.19.2 - ~/.volta/tools/image/node/16.18.0/bin/npm
  Browsers:
    Brave Browser: 111.1.49.128
    Firefox: 112.0.1
    Firefox Developer Edition: 113.0
    Safari: 16.3
  npmPackages:
    leaflet: ^1.9.3 => 1.9.3

Additional Information

I've been seeing this as an issue for quite some time. Is Leaflet not capable of using two different vector based layers at the same time?

[joelhickok]

I'm actually seeing that if I add an ImageMapLayer, the ImageMapLayer will also compete with the VectorTileLayer and the VectorTileLayer will disappear as soon as you add the ImageService. If you turn off the ImageMapLayer the vector layer immediately becomes visible again.

There seems to be some kind of conflict between these different layers in the Leaflet map panes, where if I use traditional Tile Layers, my Vector Layer is always visible on top, but as soon as I stray away from Tile Layers and use other basemap vector layers or image service layers, the vector layer no longer works.

I am building a very simple map, which is why I am using Leaflet, and was trying to avoid using the ArcGIS JS API. However, I may have to use the JS API for now.

Thanks to anybody with any insight.

[gowin20]

You need to change the map pane of the VectorTileBasemap. Both VectorTileLayer and VectorBasemapLayer are created in the OverlayPane by default.

This tutorial displays both without conflict by displaying the VectorTileBasemap in the TilePane: https://developers.arcgis.com/esri-leaflet/layers/add-a-vector-tile-layer/

Of course, you could always create your own pane for the basemap if you also need to display tile data.

[gowin20]

I recently opened #170 as a possible fix to this, as I believe these layers should not be created in the same pane by default

[joelhickok]

Aaah, yes, easy fix. I agree that the whole thing could be avoided by doing the obvious, and making the default options avoid using the same pane. Thanks @gowin20 !