Please let LTileLayer support esri-leaflet in tileLayerClass and release new version npm package

[Deleted user]

Hi, guys.
In my work, I use the esri series map as base layer, but url does not support incoming Object, it only allow String, can you change it or add a new props for this features? (the components is LTileLayer)
i am change it like this

url: {
    type: [String, Object],
       default: null
   },

If possible, please release a new npm version. The latest version is 2.5.2 released seven months ago. This version of crs cannot be switched
in 2.5.2 npm package.json
setCrs(newVal, oldVal) { console.log('Changing CRS is not yet supported by Leaflet'); },

[mikeu]

Hi @benyuanzhang-Zhang , thanks for the feedback. The url prop provided to the LTileLayer component is passed directly to the Leaflet tile layer constructor, which as you can see requires a string. It's been a very long time since I've worked with Esri products, and I haven't used them at all with Leaflet, but in my experience they were generally proprietary and closed-source, and as far as I know aren't supported explicitly by Leaflet (other than through serving standard tile or WMS layers etc.).

What is the structure of the object that you want to be using? Are you using a plugin, if the requirements for it are different from standard tile layers?

As for the new version, yes, we do plan to release one soon!

[Deleted user]

Hi @benyuanzhang-Zhang , thanks for the feedback. The url prop provided to the LTileLayer component is passed directly to the Leaflet tile layer constructor, which as you can see requires a string. It's been a very long time since I've worked with Esri products, and I haven't used them at all with Leaflet, but in my experience they were generally proprietary and closed-source, and as far as I know aren't supported explicitly by Leaflet (other than through serving standard tile or WMS layers etc.).

What is the structure of the object that you want to be using? Are you using a plugin, if the requirements for it are different from standard tile layers?

As for the new version, yes, we do plan to release one soon!

Sorry for the late reply.
We are using the esri-leaflet plugin.
When I want to use esri's basemap in Vue2Leaflet, I use it like this:

<!-- template -->
<l-tile-layer :url="url" :tile-layer-class="basemapLayer" />
// sciprt
import { basemapLayer } from 'esri-leaflet'
data() {
  return {
    basemapLayer,
    url: {
      urlTemplate: '' // the esri map url
      options: {} // other options, accepts all options from L.TileLayer.
    }
  }
}

In fact, urlTemplate still uses String, but if the first parameter of this plugin is String, you can only use its built-in basemap.

[mikeu]

I haven't worked with the esri-leaflet plugin myself, but from the docs for their basemapLayer, the first argument to the constructor should still be a string, not an object.

Have you instead tried something like this?

<template>
  <l-tile-layer :url="url" :options="options" :tile-layer-class="basemapLayer" />
</template>
<script>
import { basemapLayer } from 'esri-leaflet'
data() {
  return {
    basemapLayer,
    url: '' // the esri map url
    options: {} // other options, accepts all options from L.TileLayer.
  }
}
</script>

The existing LTileLayer component does accept and use an options object, it is just not part of the url.

[Deleted user]

I haven't worked with the esri-leaflet plugin myself, but from the docs for their basemapLayer, the first argument to the constructor should still be a string, not an object.

Have you instead tried something like this?

<template>
  <l-tile-layer :url="url" :options="options" :tile-layer-class="basemapLayer" />
</template>
<script>
import { basemapLayer } from 'esri-leaflet'
data() {
  return {
    basemapLayer,
    url: '' // the esri map url
    options: {} // other options, accepts all options from L.TileLayer.
  }
}
</script>

The existing LTileLayer component does accept and use an options object, it is just not part of the url.

Thanks Reply.
The first parameter can indeed be String, but only its built-in map service can be used. We use the Esri map published by ourselves, so we can only use Object to pass the value

L.esri.basemapLayer(<String> key, <Object> options) ,key refers to the specific basemap you'd like to add. The options parameter can accept the same as L.TileLayer.

• Streets
• Topographic
• NationalGeographic
• Oceans
• Gray
• DarkGray
• Imagery
• ImageryClarity (added in 2.1.3)
• ImageryFirefly (added in 2.2.0)
• ShadedRelief
• Terrain
• USATopo (added in 2.0.0)
• Physical (added in 2.2.0)

[mikeu]

If possible, please release a new npm version. The latest version is 2.5.2 released seven months ago.

This we can definitely help with, v2.6.0 has now been released!

We use the Esri map published by ourselves, so we can only use Object to pass the value

I am sorry, but I don't think that we have any plans to modify the public API of this library to accommodate custom code. You should be able to create a custom layer type, or perhaps simply a wrapper around the factory that will let you continue to use LTileLayer.

Does something like this help, for example?

<template>
  <l-tile-layer :options="options" :tile-layer-class="basemapWrapper"/>
</template>

<script>
import { basemapLayer } from 'esri-leaflet'
data() {
  const basemapWrapper = (url, options) => basemapLayer(options);
  return {
    basemapWrapper,
    options: {
      urlTemplate: '' // the esri map url
      options: {} // other options, accepts all options from L.TileLayer.
    }
  }
}
</script>

That way the function passed to :tile-layer-class accepts the two expected parameters, but ignores the first one and calls Esri's basemapLayer with only the options object.

[Deleted user]

Thank you.
This method sounds good. I'll try it later.
Thank you for your answer.