typescriptleaflet

Extend Leaflet Marker with Typescript

I'm working on a project with Typescript and Leaflet.

The documented (JS) way to extend the leaflet marker is like this:

L.Marker.Foo = L.Marker.extend({...});

However, Typescript complains:

Property 'Foo' does not exist on type 'typeof Marker'.

How can I change it so there are no compile errors?

Solution

  • Extend the Marker like:

     export class TSMarker extends L.Marker {
        options: L.MarkerOptions

        constructor(latLng: LatLngExpression, options?: L.MarkerOptions) {
            super(latLng, options)
        }

        greet(): this {
            this.bindPopup("Hello! TSX here!")
            return this
        }

    }

    Src