@types/leaflet: Add VideoOverlay

This commit is contained in:
Unknown
2019-01-26 14:34:11 +02:00
parent 89592f7ec3
commit bfa613e355
2 changed files with 97 additions and 50 deletions
+27
View File
@@ -3,6 +3,7 @@
// Definitions by: Alejandro Sánchez <https://github.com/alejo90>
// Arne Schubert <https://github.com/atd-schubert>
// Michael Auer <https://github.com/mcauer>
// Roni Karilkar <https://github.com/ronikar>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
@@ -579,6 +580,32 @@ export class ImageOverlay extends Layer {
export function imageOverlay(imageUrl: string, bounds: LatLngBoundsExpression, options?: ImageOverlayOptions): ImageOverlay;
export interface VideoOverlayOptions extends ImageOverlayOptions {
autoplay?: boolean;
loop?: boolean;
}
export class VideoOverlay extends Layer {
constructor(video: string | string[] | HTMLVideoElement, bounds: LatLngBoundsExpression, options?: VideoOverlayOptions);
setOpacity(opacity: number): this;
bringToFront(): this;
bringToBack(): this;
setUrl(url: string): this;
/** Update the bounds that this VideoOverlay covers */
setBounds(bounds: LatLngBounds): this;
/** Get the bounds that this VideoOverlay covers */
getBounds(): LatLngBounds;
/** Get the video element that represents the VideoOverlay on the map */
getElement(): HTMLVideoElement | undefined;
options: VideoOverlayOptions;
}
export function videoOverlay(video: string | string[] | HTMLVideoElement, bounds: LatLngBoundsExpression, options?: VideoOverlayOptions): VideoOverlay;
export type LineCapShape = 'butt' | 'round' | 'square' | 'inherit';
export type LineJoinShape = 'miter' | 'round' | 'bevel' | 'inherit';
+70 -50
View File
@@ -1,13 +1,13 @@
import * as L from 'leaflet';
const latLngLiteral: L.LatLngLiteral = {lat: 12, lng: 13};
const latLngLiteral: L.LatLngLiteral = { lat: 12, lng: 13 };
const latLngTuple: L.LatLngTuple = [12, 13];
let latLng: L.LatLng;
latLng = L.latLng(12, 13);
latLng = L.latLng(12, 13, 0);
latLng = L.latLng(latLngLiteral);
latLng = L.latLng({lat: 12, lng: 13, alt: 0});
latLng = L.latLng({ lat: 12, lng: 13, alt: 0 });
latLng = L.latLng(latLngTuple);
latLng = L.latLng([12, 13, 0]);
@@ -34,7 +34,7 @@ let point: L.Point;
point = L.point(12, 13);
point = L.point(12, 13, true);
point = L.point(pointTuple);
point = L.point({x: 12, y: 13});
point = L.point({ x: 12, y: 13 });
point = new L.Point(12, 13);
point = new L.Point(12, 13, true);
@@ -171,7 +171,7 @@ map.removeEventListener('moveend');
map.removeEventListener('moveend', () => {});
map.removeEventListener('moveend', () => {}, {});
map.panInside(latLng, {padding: [50, 50], paddingBottomRight: point, paddingTopLeft: [100, 100]});
map.panInside(latLng, { padding: [50, 50], paddingBottomRight: point, paddingTopLeft: [100, 100] });
// map.getRenderer
@@ -218,25 +218,25 @@ mapPixelBounds = map.getPixelWorldBounds(12);
let tileLayerOptions: L.TileLayerOptions = {};
tileLayerOptions = {
minZoom: 0,
maxZoom: 18,
maxNativeZoom: 2,
errorTileUrl: '',
zoomOffset: 0,
tms: true,
zoomReverse: true,
detectRetina: true,
crossOrigin: false,
opacity: 1,
updateWhenIdle: true,
updateWhenZooming: true,
updateInterval: 500,
attribution: '',
zIndex: 1,
noWrap: true,
pane: '',
className: '',
keepBuffer: 1,
minZoom: 0,
maxZoom: 18,
maxNativeZoom: 2,
errorTileUrl: '',
zoomOffset: 0,
tms: true,
zoomReverse: true,
detectRetina: true,
crossOrigin: false,
opacity: 1,
updateWhenIdle: true,
updateWhenZooming: true,
updateInterval: 500,
attribution: '',
zIndex: 1,
noWrap: true,
pane: '',
className: '',
keepBuffer: 1,
};
tileLayerOptions.subdomains = 'a';
@@ -259,14 +259,14 @@ tileLayer = new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', tileLayer
// imageOverlay
let imageOverlayOptions: L.ImageOverlayOptions;
imageOverlayOptions = {
opacity: 100,
alt: 'alt',
interactive: true,
attribution: 'attribution',
crossOrigin: true,
className: 'className',
bubblingMouseEvents: false,
pane: 'pane'
opacity: 100,
alt: 'alt',
interactive: true,
attribution: 'attribution',
crossOrigin: true,
className: 'className',
bubblingMouseEvents: false,
pane: 'pane'
};
const imageOverlayBounds = latLngBounds;
@@ -274,22 +274,42 @@ let imageOverlay: L.ImageOverlay;
imageOverlay = L.imageOverlay('https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png', imageOverlayBounds);
imageOverlay = L.imageOverlay('https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png', imageOverlayBounds, imageOverlayOptions);
imageOverlay = L.imageOverlay('https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png', imageOverlayBounds, {
opacity: 100,
alt: 'alt',
className: 'className',
opacity: 100,
alt: 'alt',
className: 'className',
});
const eventHandler = () => {};
// videoOverlay
let videoOverlayOptions: L.VideoOverlayOptions;
videoOverlayOptions = {
interactive: true,
opacity: 100,
autoplay: true,
loop: false
};
const videoOverlayBounds = latLngBounds;
const videoOverlayUrls = ['https://www.mapbox.com/bites/00188/patricia_nasa.webm'];
const videoElement = document.createElement('video');
let videoOverlay: L.VideoOverlay;
videoOverlay = L.videoOverlay('https://www.mapbox.com/bites/00188/patricia_nasa.webm', videoOverlayBounds);
videoOverlay = L.videoOverlay(videoOverlayUrls, videoOverlayBounds, videoOverlayOptions);
videoOverlay = L.videoOverlay(videoElement, videoOverlayBounds, {
autoplay: true
});
const eventHandler = () => { };
const domEvent: Event = {} as Event;
L.DomEvent
.on(htmlElement, 'click', eventHandler)
.addListener(htmlElement, 'click', eventHandler)
.off(htmlElement, 'click', eventHandler)
.removeListener(htmlElement, 'click', eventHandler)
.on(htmlElement, {click: eventHandler})
.addListener(htmlElement, {click: eventHandler})
.off(htmlElement, {click: eventHandler}, eventHandler)
.removeListener(htmlElement, {click: eventHandler}, eventHandler)
.on(htmlElement, { click: eventHandler })
.addListener(htmlElement, { click: eventHandler })
.off(htmlElement, { click: eventHandler }, eventHandler)
.removeListener(htmlElement, { click: eventHandler }, eventHandler)
.stopPropagation(domEvent)
.disableScrollPropagation(htmlElement)
.disableClickPropagation(htmlElement)
@@ -415,13 +435,13 @@ let threeCoords: [number, number, number] = [1, 2, 3];
latLng = L.GeoJSON.coordsToLatLng(threeCoords);
threeCoords = L.GeoJSON.latLngToCoords(latLng) as [number, number, number];
let nestedTwoCoords = [ [12, 13], [13, 14], [14, 15] ];
let nestedTwoCoords = [[12, 13], [13, 14], [14, 15]];
const nestedLatLngs: L.LatLng[] = L.GeoJSON.coordsToLatLngs(nestedTwoCoords, 1);
nestedTwoCoords = L.GeoJSON.latLngsToCoords(nestedLatLngs, 1);
const geojson = new L.GeoJSON();
const style: L.PathOptions = {
className: "string",
className: "string",
};
const styler: L.StyleFunction<MyProperties> = () => style;
geojson.setStyle(style);
@@ -441,7 +461,7 @@ class MyLayer extends L.Layer {
class MyIcon extends L.Icon {
constructor() {
super({iconUrl: 'icon.png'});
super({ iconUrl: 'icon.png' });
}
}
@@ -451,9 +471,9 @@ class MyDivIcon extends L.DivIcon {
}
}
const divIcon = L.divIcon({html: ''});
const divIcon = L.divIcon({ html: '' });
let defaultIcon = new L.Icon.Default();
defaultIcon = new L.Icon.Default({imagePath: 'apath'});
defaultIcon = new L.Icon.Default({ imagePath: 'apath' });
const myControlClass = L.Control.extend({});
const myControl = new myControlClass();
@@ -511,11 +531,11 @@ const complexPolygonLatLngs2: L.LatLng[][] = polygon.getLatLngs() as L.LatLng[][
// multi polygon
const multiPolygonLatLngs: L.LatLngExpression[][][] = [
[ // first polygon
[[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring
[[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole
[[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring
[[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole
],
[ // second polygon
[[41, -111.03], [45, -111.04], [45, -104.05], [41, -104.05]]
[[41, -111.03], [45, -111.04], [45, -104.05], [41, -104.05]]
]
];
polygon = L.polygon(multiPolygonLatLngs);
@@ -534,8 +554,8 @@ const simplePolylineLatLngs2: L.LatLng[] = polyline.getLatLngs() as L.LatLng[];
// multi polyline
const multiPolylineLatLngs: L.LatLngExpression[][] = [
[[45.51, -122.68], [37.77, -122.43], [34.04, -118.2]],
[[40.78, -73.91], [41.83, -87.62], [32.76, -96.72]]
[[45.51, -122.68], [37.77, -122.43], [34.04, -118.2]],
[[40.78, -73.91], [41.83, -87.62], [32.76, -96.72]]
];
polyline = L.polyline(multiPolylineLatLngs);
polyline = new L.Polyline(multiPolylineLatLngs);
@@ -569,7 +589,7 @@ const extended3: typeof obj1 & typeof obj2 & typeof obj3 & typeof obj4 = L.Util.
const extended4: typeof obj1 & typeof obj2 & typeof obj3 & typeof obj4 & typeof obj5 = L.Util.extend(obj1, obj2, obj3, obj4, obj5);
L.Util.create({});
L.Util.create(null, {foo: {writable: true, value: 'bar'}});
L.Util.create(null, { foo: { writable: true, value: 'bar' } });
L.Util.bind(() => {}, {});
L.Util.stamp({});