Merge pull request #2580 from yellowiscool/master

[Leaflet] API update (version 0.7.3)
This commit is contained in:
Basarat Ali Syed
2014-08-04 21:47:46 +10:00
2 changed files with 462 additions and 8 deletions
+301
View File
@@ -0,0 +1,301 @@
/// <reference path="leaflet.d.ts" />
// 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();
+161 -8
View File
@@ -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 <https://github.com/rgripper>
// 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<LeafletMixinEvents> {
}
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;
}
}