How to use it in TypeScript ?

[Sulorb]

Hello,

I have a leaflet project with typescript and i don't succeed to use the plugin ad it doesn't recognize the edgeBuffer option with L.tileLayer.

How to use it?

[Sulorb]

I think I make it work on my TS project. Here is how:

npm i leaflet-edgebuffer

At the top of my file I import it like that: import 'leaflet-edgebuffer'

I change the L.tileLayer type "as any" so it doesn't bother me with the fact the property doesn't exist on default tileLayer options:

L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { edgeBufferTiles: 10 } as any)
    .addTo(this.map)

[david-abell]

Just to add my solution here working with react-leaflet 4.2.1

I just added a module declaration to my MapContainer.tsx for the missing config option.

// add this declaration
declare module "react-leaflet" {
  export interface TileLayerProps {
    edgeBufferTiles: number;
  }
}

// here it is now safe to use  edgeBufferTiles={<number>}
function Map({ center, ...props }: Props) {
  return (
    <MapContainer
      center={center}
      zoom={MAP_DEFAULT_ZOOM}
      minZoom={8}
      className={`relative h-full w-[100max]`}
      preferCanvas
      renderer={canvasRenderer}
      zoomSnap={0.2}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        className="map-tiles"
        detectRetina
        // Error here without module declaration
        // Property 'edgeBufferTiles' does not exist on type 'IntrinsicAttributes & TileLayerProps & RefAttributes<TileLayer>'
        edgeBufferTiles={1}
        keepBuffer={1}
        updateWhenIdle={false}
      />
      <MapContentLayer center={center} {...props} />
    </MapContainer>
  );
}
``