Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Testing extending Leaflet components via TypeScript's inheritance model
/// <reference path='../leaflet/leaflet.d.ts' />
namespace L {
type LatLngExpression = L.LatLng | number[] | ({ lat: number; lng: number });
export var JSMarker = L.Marker.extend({
options: { title: 'MyMarker' },
initialize: function(latLng: LatLngExpression, options?: L.MarkerOptions) {
L.Util.setOptions(this, options)
L.Marker.prototype.initialize.call(this, latLng, this.options);
},
greet: function() {
this.bindPopup("Hello! JS here!")
return this;
}
})
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
}
}
// Default options
TSMarker.prototype.options = {
title: 'MyMarker',
clickable: true,
icon: L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76],
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment