diff --git a/leaflet/leaflet-tests.ts b/leaflet/leaflet-tests.ts new file mode 100644 index 000000000..c07a651d8 --- /dev/null +++ b/leaflet/leaflet-tests.ts @@ -0,0 +1,301 @@ +/// + +// initialize the map on the "map" div with a given center and zoom + +var div = document.getElementById('map'); + +var map : L.Map = L.map(div, { + center: L.latLng([51.505, -0.09]), + zoom: 13, + minZoom: 3, + maxZoom: 8, + maxBounds: L.latLngBounds([L.latLng(-60, -60), L.latLng(60, 60)]), + dragging: true, + touchZoom: true, + scrollWheelZoom: true, + boxZoom: true, + tap: true, + + tapTolerance: 30, + trackResize: true, + worldCopyJump: false, + closePopupOnClick: true, + bounceAtZoomLimits: true, + + keyboard: true, + keyboardPanOffset: 80, + keyboardZoomOffset: 1, + + inertia: true, + inertiaDeceleration: 3000, + inertiaMaxSpeed: 1500, + inertiaThreshold: 32, + + zoomControl: true, + attributionControl: true, + + fadeAnimation: true, + zoomAnimation: true, + zoomAnimationThreshold: 4, + markerZoomAnimation: true + +}); + +map.dragging.enable(); +map.touchZoom.enable(); +map.scrollWheelZoom.enable(); +map.doubleClickZoom.enable(); +map.boxZoom.enable(); +map.tap.enable(); + +map.setView(new L.LatLng(42, 51)); +map.setView(L.latLng(42, 51)); + +map.setView(L.latLng(42, 51), 12); +map.setView(L.latLng(42, 51), 12, { + reset: true, + pan: { + animate: true, + duration: 0.25, + easeLinearity: 0.25, + noMoveStart: false + }, + zoom: { + animate: true + } +}); + +map.setZoom(50); +map.setZoom(50, {}); + +map.zoomIn(); +map.zoomOut(); + +map.zoomIn(2); +map.zoomOut(2); + +map.zoomIn(2, { animate: true }); +map.zoomOut(2, { animate: true }); + +map.setZoomAround(L.latLng(42, 51), 8, { animate: false }); + +map.fitBounds(L.latLngBounds(L.latLng(10, 10), L.latLng(20, 20))); +map.fitBounds(L.latLngBounds(L.latLng(10, 10), L.latLng(20, 20)), { + paddingTopLeft: L.point(20, 20), + paddingBottomRight: L.point(20, 20), + padding: L.point(0, 0), + maxZoom: null +}); + +map.fitWorld(); + +map.fitWorld({ + animate: false +}); + +map.panTo(L.latLng(42, 42)); +map.panTo(L.latLng(42, 42), { + animate: true +}); + +map.invalidateSize(true); +map.invalidateSize({ reset: true }); + +map.setMaxBounds(L.latLngBounds(L.latLng(10, 10), L.latLng(20, 20))); + +map.locate(); +map.locate({ + watch: false, + setView: false, + maxZoom: 18, + timeout: 10000, + maximumAge: 0, + enableHighAccuracy: false +}); + +map.stopLocate(); + +map.remove(); + +var center : L.LatLng = map.getCenter(); +var zoom : number = map.getZoom(); +var minZoom: number = map.getMinZoom(); +var maxZoom: number = map.getMaxZoom(); +var bounds: L.LatLngBounds = map.getBounds(); +var boundsZoom: number = map.getBoundsZoom(bounds, true); +var size: L.Point = map.getSize(); +var pixelBounds: L.Bounds = map.getPixelBounds(); +var pixelOrigin: L.Point = map.getPixelOrigin(); + +var layer = L.tileLayer("http://{s}.example.net/{x}/{y}/{z}.png"); + +map.addLayer(layer); +map.addLayer(layer, false); + +map.removeLayer(layer); +map.hasLayer(layer); + +map.openPopup("canard", L.latLng(42, 51)); + +var popup = L.popup({ + autoPan: true +}); + +map.openPopup(popup); +map.closePopup(popup); +map.closePopup(); + +map.addControl(L.control.attribution({position: 'bottomright'})); +map.removeControl(L.control.attribution({ position: 'bottomright' })); + +map.latLngToLayerPoint(map.layerPointToLatLng(L.point(0, 0))); +map.latLngToContainerPoint(map.containerPointToLatLng(L.point(0, 0))); +map.containerPointToLayerPoint(L.point(0, 0)); +map.layerPointToContainerPoint(L.point(0, 0)); + +map.project(map.unproject(L.point(10, 20))); +map.project(map.unproject(L.point(10, 20), 12), 12); + +var mouseEvent: L.LeafletMouseEvent; +map.mouseEventToContainerPoint(mouseEvent); +map.mouseEventToLayerPoint(mouseEvent); +map.mouseEventToLatLng(mouseEvent); + +map.getContainer().classList.add('roger'); +map.getPanes().mapPane.classList.add('roger'); +map.getPanes().markerPane.classList.add('roger'); +map.getPanes().objectsPane.classList.add('roger'); +map.getPanes().overlayPane.classList.add('roger'); +map.getPanes().popupPane.classList.add('roger'); +map.getPanes().shadowPane.classList.add('roger'); +map.getPanes().tilePane.classList.add('roger'); + +map.whenReady((m: L.Map) => { + m.zoomOut(); +}); + +map.on('click', () => { + map.zoomOut(); +}); + +map.off('dblclick', L.Util.falseFn); + +map.once('contextmenu', (e: L.LeafletMouseEvent) => { + map.openPopup('contextmenu', e.latlng); +}); + +var marker = L.marker(L.latLng(42, 51), { + icon: L.icon({ + iconURl: 'roger.png', + iconRetinaUrl: 'roger-retina.png', + iconSize: L.point(40, 40), + iconAnchor: L.point(20, 0), + shadowUrl: 'roger-shadow.png', + shadowRetinaUrl: 'roger-shadow-retina.png', + shadowSize: L.point(44, 44), + shadowAnchor: L.point(22, 0), + popupAnchor: L.point(0, 0), + className: 'roger-icon' + }), + clickable: true, + draggable: false, + keyboard: true, + title: 'this is an icon', + alt: '', + zIndexOffset: 0, + opacity: 1.0, + riseOnHover: false, + riseOffset: 250 +}); + +marker.addTo(map); + +marker.on('click', (e: L.LeafletMouseEvent) => { + map.setView(e.latlng); +}); + +marker.once('mouseover', () => { + marker.openPopup(); +}) + +marker.setLatLng(marker.getLatLng()); + +marker.setIcon(L.icon({})); + +marker.setZIndexOffset(30); +marker.setOpacity(0.8); + +marker.bindPopup(popup); +marker.unbindPopup(); +marker.bindPopup('hello', { + closeOnClick: true +}); + +marker.openPopup(); +marker.closePopup(); +marker.togglePopup(); +marker.togglePopup(); +marker.setPopupContent('hello 3') +marker.getPopup().setContent('hello 2'); +marker.update(); + +marker.toGeoJSON(); + +marker.dragging.enable(); + +popup = L.popup({ + maxWidth: 300, + minWidth: 50, + maxHeight: null, + autoPan: true, + keepInView: false, + closeButton: true, + offset: L.point(0, 6), + autoPanPaddingTopLeft: null, + autoPanPaddingBottomRight: L.point(20, 20), + autoPanPadding: L.point(5, 5), + zoomAnimation: true, + closeOnClick: null, + className: 'roger' +}); + +popup.setLatLng(L.latLng(12, 54)).setContent('this is nice popup').openOn(map); + +popup.update(); + +var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?{foo}', { + foo: 'bar', + minZoom: 0, + maxZoom: 18, + maxNativeZoom: 17, + tileSize: 256, + subdomains: ['a','b','c'], + errorTileUrl: '', + attribution: '', + tms: false, + continuousWorld: false, + noWrap: false, + zoomOffset: 0, + zoomReverse: false, + opacity: 1.0, + zIndex: null, + unloadInvisibleTiles: false, + updateWhenIdle: false, + detectRetina: true, + reuseTiles: true, + bounds: null +}); + +tileLayer.on('loading', L.Util.falseFn) + .off('loading', L.Util.falseFn) + .once('tileload', L.Util.falseFn); + +tileLayer.addTo(map); + +tileLayer.bringToBack() + .bringToFront() + .setOpacity(0.7) + .setZIndex(9) + .redraw() + .setUrl('http://perdu.com') + .getContainer(); diff --git a/leaflet/leaflet.d.ts b/leaflet/leaflet.d.ts index 54f0fe4f0..3332f9000 100644 --- a/leaflet/leaflet.d.ts +++ b/leaflet/leaflet.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Leaflet.js 0.6.4 +// Type definitions for Leaflet.js 0.7.3 // Project: https://github.com/Leaflet/Leaflet // Definitions by: Vladimir Zotov // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -870,6 +870,13 @@ declare module L { * Default value: [0, 0]. */ padding?: Point; + + /** + * The maximum possible zoom to use. + * + * Default value: null + */ + maxZoom?: number; } } @@ -1128,6 +1135,11 @@ declare module L { * Mercator-based CRS. */ scale(zoom: number): number; + + /** + * Returns the size of the world in pixels for a particular zoom. + */ + getSize(zoom: number): Point; } } @@ -1231,6 +1243,10 @@ declare module L { */ enabled(): boolean; } + + export class Handler extends Class { + initialize(map: Map): void; + } } declare module L { @@ -1251,6 +1267,15 @@ declare module L { onRemove(map: Map): void; } } + +declare module L { + export module Mixin { + export interface LeafletMixinEvents extends IEventPowered { + } + + export var Events: LeafletMixinEvents; + } +} declare module L { @@ -1277,6 +1302,11 @@ declare module L { * Sets the opacity of the overlay. */ setOpacity(opacity: number): ImageOverlay; + + /** + * Changes the URL of the image. + */ + setUrl(imageUrl: string): ImageOverlay; /** * Brings the layer to the top of all overlays. @@ -1802,6 +1832,17 @@ declare module L { popup: Popup; } } + +declare module L { + + export interface LeafletDragEndEvent extends LeafletEvent { + + /** + * The distance in pixels the draggable element was moved by. + */ + distance: number; + } +} declare module L { @@ -1960,7 +2001,7 @@ declare module L { * Sets the view of the map (geographical center and zoom) with the given * animation options. */ - setView(center: LatLng, zoom: number, options?: ZoomPanOptions): Map; + setView(center: LatLng, zoom?: number, options?: ZoomPanOptions): Map; /** * Sets the zoom of the map. @@ -2142,7 +2183,7 @@ declare module L { /** * Closes the popup previously opened with openPopup (or the given one). */ - closePopup(): Map; + closePopup(popup?: Popup): Map; /** * Adds the given control to the map. @@ -2370,17 +2411,26 @@ declare module L { /** * Whether the map can be zoomed by using the mouse wheel. + * If passed 'center', it will zoom to the center of the view regardless of + * where the mouse was. * * Default value: true. */ - scrollWheelZoom?: boolean; + scrollWheelZoom?: any; + //scrollWheelZoom?: boolean; + //scrollWheelZoom?: string; /** - * Whether the map can be zoomed in by double clicking on it. + * Whether the map can be zoomed in by double clicking on it and zoomed out + * by double clicking while holding shift. + * If passed 'center', double-click zoom will zoom to the center of the view + * regardless of where the mouse was. * * Default value: true. */ - doubleClickZoom?: boolean; + doubleClickZoom?: string; + //doubleClickZoom?: boolean; + //doubleClickZoom?: string; /** * Whether the map can be zoomed to a rectangular area specified by dragging @@ -2529,6 +2579,14 @@ declare module L { * in all browsers that support CSS3 Transitions except Android. */ markerZoomAnimation?: boolean; + + /** + * Set it to false if you don't want the map to zoom beyond min/max zoom + * and then bounce back when pinch-zooming. + * + * Default value: true. + */ + bounceAtZoomLimits?: boolean; } } @@ -2652,6 +2710,11 @@ declare module L { * Opens the popup previously bound by the bindPopup method. */ openPopup(): Marker; + + /** + * Returns the popup previously bound by the bindPopup method. + */ + getPopup(): Popup; /** * Closes the bound popup of the marker if it's opened. @@ -2676,7 +2739,12 @@ declare module L { /** * Returns a GeoJSON representation of the marker (GeoJSON Point Feature). */ - toGeoJSON(popup: Popup, options?: PopupOptions): any; + toGeoJSON(): any; + + /** + * Marker dragging handler (by both mouse and touch). + */ + dragging: IHandler; //////////// //////////// @@ -2752,6 +2820,13 @@ declare module L { * Default value: ''. */ title?: string; + + /** + * Text for the alt attribute of the icon image (useful for accessibility). + * + * Default value: ''. + */ + alt?: string; /** * By default, marker images zIndex is set automatically based on its latitude. @@ -2814,6 +2889,11 @@ declare module L { */ getLatLngs(): LatLng[][]; + /** + * Opens the popup previously bound by bindPopup. + */ + openPopup(): MultiPolygon; + /** * Returns a GeoJSON representation of the multipolygon (GeoJSON MultiPolygon Feature). */ @@ -2848,6 +2928,11 @@ declare module L { */ getLatLngs(): LatLng[][]; + /** + * Opens the popup previously bound by bindPopup. + */ + openPopup(): MultiPolyline; + /** * Returns a GeoJSON representation of the multipolyline (GeoJSON MultiLineString Feature). */ @@ -3076,6 +3161,20 @@ declare module L { * layers (e.g. Android 2). */ dashArray?: string; + + /** + * A string that defines shape to be used at the end of the stroke. + * + * Default: null. + */ + lineCap?: string; + + /** + * A string that defines shape to be used at the corners of the stroke. + * + * Default: null. + */ + lineJoin?: string; /** * If false, the vector will not emit mouse events and will act as a part of the @@ -3089,6 +3188,13 @@ declare module L { * Sets the pointer-events attribute on the path if SVG backend is used. */ pointerEvents?: boolean; + + /** + * Custom class name set on an element. + * + * Default value: ''. + */ + className?: string; } } @@ -3308,7 +3414,12 @@ declare module L { * Sets the geographical point where the popup will open. */ setLatLng(latlng: LatLng): Popup; - + + /** + * Returns the geographical point of popup. + */ + getLatLng(): LatLng; + /** * Sets the HTML content of the popup. */ @@ -3319,6 +3430,12 @@ declare module L { */ setContent(el: HTMLElement): Popup; + /** + * Returns the content of the popup. + */ + getContent(): HTMLElement; + //getContent(): string; + //////////// //////////// /** @@ -3333,6 +3450,12 @@ declare module L { * the DOM and removes listeners previously added in onAdd. Called on map.removeLayer(layer). */ onRemove(map: Map): void; + + /** + * Updates the popup content, layout and position. Useful for updating the popup after + * something inside changed, e.g. image loaded. + */ + update(): Popup; } } @@ -3382,6 +3505,22 @@ declare module L { * Default value: new Point(0, 6). */ offset?: Point; + + /** + * The margin between the popup and the top left corner of the map view after + * autopanning was performed. + * + * Default value: null. + */ + autoPanPaddingTopLeft?: Point; + + /** + * The margin between the popup and the bottom right corner of the map view after + * autopanning was performed. + * + * Default value: null. + */ + autoPanPaddingBottomRight?: Point; /** * The margin between the popup and the edges of the map view after autopanning @@ -3695,6 +3834,15 @@ declare module L { * Default value: 18. */ maxZoom?: number; + + /** + * Maximum zoom number the tiles source has available. If it is specified, + * the tiles on all zoom levels higher than maxNativeZoom will be loaded from + * maxZoom level and auto-scaled. + * + * Default value: null. + */ + maxNativeZoom?: number; /** * Tile size (width and height in pixels, assuming tiles are square). @@ -3997,6 +4145,11 @@ declare module L { * An equivalent of passing animate to both zoom and pan options (see below). */ animate?: boolean; + + /** + * If true, it will delay moveend event so that it doesn't happen many times in a row. + */ + debounceMoveend?: boolean; } }