From bfa613e355a7bb485348a32318a9d3c81e273d51 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sat, 26 Jan 2019 14:34:11 +0200 Subject: [PATCH] @types/leaflet: Add VideoOverlay --- types/leaflet/index.d.ts | 27 ++++++++ types/leaflet/leaflet-tests.ts | 120 +++++++++++++++++++-------------- 2 files changed, 97 insertions(+), 50 deletions(-) diff --git a/types/leaflet/index.d.ts b/types/leaflet/index.d.ts index 96bcb3277a..c88a505b8b 100644 --- a/types/leaflet/index.d.ts +++ b/types/leaflet/index.d.ts @@ -3,6 +3,7 @@ // Definitions by: Alejandro Sánchez // Arne Schubert // Michael Auer +// Roni Karilkar // 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'; diff --git a/types/leaflet/leaflet-tests.ts b/types/leaflet/leaflet-tests.ts index a6c9b6ccc3..8b024d790e 100644 --- a/types/leaflet/leaflet-tests.ts +++ b/types/leaflet/leaflet-tests.ts @@ -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 = () => 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({});