mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-04 06:47:03 +00:00
Merge pull request #33367 from v1zix/v1zix/react-leaflet-update-to-v2
[@types/react-leaflet] Update to v2.2
This commit is contained in:
Jesse Trinity
Vendored
+213
-113
@@ -1,4 +1,4 @@
|
||||
// Type definitions for react-leaflet 1.1
|
||||
// Type definitions for react-leaflet 2.2
|
||||
// Project: https://github.com/PaulLeCam/react-leaflet
|
||||
// Definitions by: Dave Leaver <https://github.com/danzel>, David Schneider <https://github.com/davschne>, Yui T. <https://github.com/yuit>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
@@ -118,12 +118,20 @@ export type LeafletEvents = MapEvents
|
||||
// These type parameters aren't needed for instantiating a component, but they are useful for
|
||||
// extending react-leaflet classes.
|
||||
|
||||
export class MapComponent<P, E extends Leaflet.Class> extends React.Component<P> {
|
||||
export interface MapComponentProps {
|
||||
leaflet?: LeafletContext;
|
||||
pane?: string;
|
||||
}
|
||||
|
||||
export class MapEvented<P, E extends Leaflet.Evented> extends React.Component<P> {
|
||||
_leafletEvents: LeafletEvents;
|
||||
leafletElement: E;
|
||||
extractLeafletEvents(props: P): LeafletEvents;
|
||||
bindLeafletEvents(next: LeafletEvents, prev: LeafletEvents): LeafletEvents;
|
||||
fireLeafletEvent(type: string, data: any): void;
|
||||
}
|
||||
|
||||
export class MapComponent<P extends MapComponentProps, E extends Leaflet.Evented> extends MapEvented<P, E> {
|
||||
getOptions(props: P): P;
|
||||
}
|
||||
|
||||
@@ -131,221 +139,313 @@ export interface MapProps extends MapEvents, Leaflet.MapOptions, Leaflet.LocateO
|
||||
animate?: boolean;
|
||||
bounds?: Leaflet.LatLngBoundsExpression;
|
||||
boundsOptions?: Leaflet.FitBoundsOptions;
|
||||
center?: Leaflet.LatLngExpression;
|
||||
children?: Children;
|
||||
children: Children;
|
||||
className?: string;
|
||||
id?: string;
|
||||
maxBounds?: Leaflet.LatLngBoundsExpression;
|
||||
maxZoom?: number;
|
||||
minZoom?: number;
|
||||
style?: React.CSSProperties;
|
||||
useFlyTo?: boolean;
|
||||
zoom?: number;
|
||||
viewport?: Viewport;
|
||||
whenReady?: () => void;
|
||||
}
|
||||
|
||||
export class Map<P extends MapProps = MapProps, E extends Leaflet.Map = Leaflet.Map> extends MapComponent<P, E> {
|
||||
className?: string;
|
||||
container: HTMLDivElement;
|
||||
getChildContext(): { layerContainer: E, map: E };
|
||||
export class Map<P extends MapProps = MapProps, E extends Leaflet.Map = Leaflet.Map> extends MapEvented<P, E> {
|
||||
className: string | null | undefined;
|
||||
contextValue: LeafletContext | null | undefined;
|
||||
container: HTMLDivElement | null | undefined;
|
||||
viewport: Viewport;
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
bindContainer(container: HTMLDivElement): void;
|
||||
onViewportChange: (viewport: Viewport | null) => void;
|
||||
onViewportChanged: (viewport: Viewport | null) => void;
|
||||
bindContainer(container: HTMLDivElement | null | undefined): void;
|
||||
shouldUpdateCenter(next: Leaflet.LatLngExpression, prev: Leaflet.LatLngExpression): boolean;
|
||||
shouldUpdateBounds(next: Leaflet.LatLngBoundsExpression, prev: Leaflet.LatLngBoundsExpression): boolean;
|
||||
}
|
||||
|
||||
export interface DivOverlayProps extends MapComponentProps, Leaflet.DivOverlayOptions {
|
||||
children: Children;
|
||||
onClose?: () => void;
|
||||
onOpen?: () => void;
|
||||
}
|
||||
|
||||
export interface DivOverlayTypes extends Leaflet.Evented {
|
||||
isOpen: () => boolean;
|
||||
update: () => void;
|
||||
}
|
||||
|
||||
export class DivOverlay<P extends DivOverlayProps, E extends DivOverlayTypes> extends MapComponent<P, E> {
|
||||
createLeafletElement(_props: P): void;
|
||||
updateLeafletElement(_prevProps: P, _props: P): void;
|
||||
onClose: () => void;
|
||||
onOpen: () => void;
|
||||
onRender: () => void;
|
||||
}
|
||||
|
||||
export interface PaneProps {
|
||||
name?: string;
|
||||
children?: Children;
|
||||
map?: Leaflet.Map;
|
||||
className?: string;
|
||||
leaflet?: LeafletContext;
|
||||
name?: string;
|
||||
style?: React.CSSProperties;
|
||||
pane?: string;
|
||||
}
|
||||
export interface PaneState {
|
||||
name?: string;
|
||||
name: string | null | undefined;
|
||||
context: LeafletContext | null | undefined;
|
||||
}
|
||||
export class Pane<P extends PaneProps = PaneProps, S extends PaneState = PaneState> extends React.Component<P, S> {
|
||||
getChildContext(): { pane: string };
|
||||
createPane(props: P): void;
|
||||
removePane(): void;
|
||||
setStyle(arg: { style?: string, className?: string }): void;
|
||||
getParentPane(): HTMLElement | undefined;
|
||||
getPane(name: string): HTMLElement | undefined;
|
||||
getParentPane(): HTMLElement | null | undefined;
|
||||
getPane(name: string | null | undefined): HTMLElement | null | undefined;
|
||||
}
|
||||
|
||||
export interface MapLayerProps {
|
||||
export interface MapLayerProps extends MapComponentProps {
|
||||
attribution?: string;
|
||||
children?: Children;
|
||||
}
|
||||
|
||||
export type AddLayerHandler = (layer: Leaflet.Layer, name: string, checked?: boolean) => void;
|
||||
|
||||
export type RemoveLayerHandler = (layer: Leaflet.Layer) => void;
|
||||
|
||||
export interface LayerContainer {
|
||||
addLayer(layer: Leaflet.Layer): this;
|
||||
removeLayer(layer: number | Leaflet.Layer): this;
|
||||
addLayer: AddLayerHandler;
|
||||
removeLayer: RemoveLayerHandler;
|
||||
}
|
||||
export class MapLayer<P extends MapLayerProps = MapLayerProps, E extends Leaflet.Class = Leaflet.Class> extends MapComponent<P, E> {
|
||||
|
||||
export interface LeafletContext {
|
||||
map?: Leaflet.Map;
|
||||
pane?: string;
|
||||
layerContainer?: LayerContainer;
|
||||
popupContainer?: Leaflet.Layer;
|
||||
}
|
||||
|
||||
export type LatLng = Leaflet.LatLng | number[] | object;
|
||||
|
||||
export type LatLngBounds = Leaflet.LatLngBounds | LatLng[];
|
||||
|
||||
export type Point = [number, number] | Leaflet.Point;
|
||||
|
||||
export interface Viewport {
|
||||
center: [number, number] | null | undefined;
|
||||
zoom: number | null | undefined;
|
||||
}
|
||||
|
||||
export class MapLayer<P extends MapLayerProps = MapLayerProps, E extends Leaflet.Layer = Leaflet.Layer> extends MapComponent<P, E> {
|
||||
contextValue: LeafletContext | null | undefined;
|
||||
leafletElement: E;
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
readonly layerContainer: LayerContainer | Leaflet.Map;
|
||||
}
|
||||
|
||||
export interface GridLayerProps extends Leaflet.GridLayerOptions {
|
||||
children?: Children;
|
||||
export interface GridLayerProps extends MapLayerProps, Leaflet.GridLayerOptions { }
|
||||
export class GridLayer<P extends GridLayerProps = GridLayerProps, E extends Leaflet.GridLayer = Leaflet.GridLayer> extends MapLayer<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
getOptions(props: P): P;
|
||||
}
|
||||
export class GridLayer<P extends GridLayerProps = GridLayerProps, E extends Leaflet.GridLayer = Leaflet.GridLayer> extends MapLayer<P, E> {}
|
||||
|
||||
export interface TileLayerProps extends TileLayerEvents, Leaflet.TileLayerOptions {
|
||||
export interface TileLayerProps extends GridLayerProps, TileLayerEvents, Leaflet.TileLayerOptions {
|
||||
url: string;
|
||||
}
|
||||
export class TileLayer<P extends TileLayerProps = TileLayerProps, E extends Leaflet.TileLayer = Leaflet.TileLayer> extends GridLayer<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface WMSTileLayerProps extends TileLayerEvents, Leaflet.WMSOptions, GridLayerProps {
|
||||
children?: Children;
|
||||
url: string;
|
||||
}
|
||||
export class TileLayer<P extends TileLayerProps = TileLayerProps, E extends Leaflet.TileLayer = Leaflet.TileLayer> extends GridLayer<P, E> { }
|
||||
|
||||
export interface WMSTileLayerProps extends TileLayerEvents, Leaflet.WMSOptions {
|
||||
children?: Children;
|
||||
url: string;
|
||||
export class WMSTileLayer<P extends WMSTileLayerProps = WMSTileLayerProps, E extends Leaflet.TileLayer.WMS = Leaflet.TileLayer.WMS> extends GridLayer<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
getOptions(params: P): P;
|
||||
}
|
||||
export class WMSTileLayer<P extends WMSTileLayerProps = WMSTileLayerProps, E extends Leaflet.TileLayer.WMS = Leaflet.TileLayer.WMS> extends GridLayer<P, E> { }
|
||||
|
||||
export interface ImageOverlayProps extends Leaflet.ImageOverlayOptions {
|
||||
bounds: Leaflet.LatLngBoundsExpression;
|
||||
children?: Children;
|
||||
url: string;
|
||||
export interface ImageOverlayProps extends MapLayerProps, Leaflet.ImageOverlayOptions {
|
||||
bounds?: Leaflet.LatLngBoundsExpression;
|
||||
url: string | HTMLImageElement;
|
||||
zIndex?: number;
|
||||
}
|
||||
export class ImageOverlay<P extends ImageOverlayProps = ImageOverlayProps, E extends Leaflet.ImageOverlay = Leaflet.ImageOverlay> extends MapLayer<P, E> {
|
||||
getChildContext(): { popupContainer: E };
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface LayerGroupProps {
|
||||
children?: Children;
|
||||
}
|
||||
export class LayerGroup<P extends LayerGroupProps = LayerGroupProps, E extends Leaflet.LayerGroup = Leaflet.LayerGroup> extends MapLayer<P, E> {
|
||||
getChildContext(): { layerContainer: E };
|
||||
export class LayerGroup<P extends MapLayerProps = MapLayerProps, E extends Leaflet.LayerGroup = Leaflet.LayerGroup> extends MapLayer<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
}
|
||||
|
||||
export interface MarkerProps extends MarkerEvents, Leaflet.MarkerOptions {
|
||||
children?: Children;
|
||||
export interface MarkerProps extends MapLayerProps, MarkerEvents, Leaflet.MarkerOptions {
|
||||
position: Leaflet.LatLngExpression;
|
||||
}
|
||||
export class Marker<P extends MarkerProps = MarkerProps, E extends Leaflet.Marker = Leaflet.Marker> extends MapLayer<P, E> {
|
||||
getChildContext(): { popupContainer: E };
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface PathProps extends PathEvents, Leaflet.PathOptions, MapLayerProps { }
|
||||
export abstract class Path<P extends PathProps, E> extends MapLayer<P, E> {
|
||||
export abstract class Path<P extends PathProps, E extends Leaflet.Path> extends MapLayer<P, E> {
|
||||
getChildContext(): { popupContainer: E };
|
||||
getPathOptions(props: P): Leaflet.PathOptions;
|
||||
setStyle(options: Leaflet.PathOptions): void;
|
||||
setStyleIfChanged(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface CircleProps extends PathEvents, Leaflet.CircleMarkerOptions {
|
||||
export interface CircleProps extends MapLayerProps, PathEvents, Leaflet.CircleMarkerOptions {
|
||||
center: Leaflet.LatLngExpression;
|
||||
children?: Children;
|
||||
radius: number;
|
||||
}
|
||||
export class Circle<P extends CircleProps = CircleProps, E extends Leaflet.Circle = Leaflet.Circle> extends Path<P, E> { }
|
||||
export class Circle<P extends CircleProps = CircleProps, E extends Leaflet.Circle = Leaflet.Circle> extends Path<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface CircleMarkerProps extends PathEvents, Leaflet.CircleMarkerOptions {
|
||||
export interface CircleMarkerProps extends PathProps, PathEvents, Leaflet.CircleMarkerOptions {
|
||||
center: Leaflet.LatLngExpression;
|
||||
children?: Children;
|
||||
radius: number;
|
||||
}
|
||||
export class CircleMarker<P extends CircleMarkerProps = CircleMarkerProps, E extends Leaflet.CircleMarker = Leaflet.CircleMarker> extends Path<P, E> { }
|
||||
|
||||
export interface FeatureGroupProps extends FeatureGroupEvents, Leaflet.PathOptions {
|
||||
children?: Children;
|
||||
}
|
||||
export class FeatureGroup<P extends FeatureGroupProps = FeatureGroupProps, E extends Leaflet.FeatureGroup = Leaflet.FeatureGroup> extends Path<P, E> {
|
||||
getChildContext(): { layerContainer: E, popupContainer: E };
|
||||
export class CircleMarker<P extends CircleMarkerProps = CircleMarkerProps, E extends Leaflet.CircleMarker = Leaflet.CircleMarker> extends Path<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface GeoJSONProps extends FeatureGroupEvents, Leaflet.GeoJSONOptions {
|
||||
children?: Children;
|
||||
export interface FeatureGroupProps extends MapLayerProps, FeatureGroupEvents, Leaflet.PathOptions { }
|
||||
export class FeatureGroup<P extends FeatureGroupProps = FeatureGroupProps, E extends Leaflet.FeatureGroup = Leaflet.FeatureGroup> extends LayerGroup<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
}
|
||||
|
||||
export interface GeoJSONProps extends PathProps, FeatureGroupEvents, Leaflet.GeoJSONOptions {
|
||||
data: GeoJSON.GeoJsonObject;
|
||||
style?: Leaflet.StyleFunction;
|
||||
}
|
||||
export class GeoJSON<P extends GeoJSONProps = GeoJSONProps, E extends Leaflet.GeoJSON = Leaflet.GeoJSON> extends Path<P, E> { }
|
||||
export class GeoJSON<P extends GeoJSONProps = GeoJSONProps, E extends Leaflet.GeoJSON = Leaflet.GeoJSON> extends FeatureGroup<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface PolylineProps extends PathEvents, Leaflet.PolylineOptions {
|
||||
children?: Children;
|
||||
export interface PolylineProps extends PathProps, PathEvents, Leaflet.PolylineOptions {
|
||||
positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][];
|
||||
}
|
||||
export class Polyline<P extends PolylineProps = PolylineProps, E extends Leaflet.Polyline = Leaflet.Polyline> extends Path<P, E> { }
|
||||
export class Polyline<P extends PolylineProps = PolylineProps, E extends Leaflet.Polyline = Leaflet.Polyline> extends Path<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface PolygonProps extends PathEvents, Leaflet.PolylineOptions {
|
||||
children?: Children;
|
||||
popupContainer?: Leaflet.FeatureGroup;
|
||||
export interface PolygonProps extends PathProps, PathEvents, Leaflet.PolylineOptions {
|
||||
positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][] | Leaflet.LatLngExpression[][][];
|
||||
}
|
||||
export class Polygon<P extends PolygonProps = PolygonProps, E extends Leaflet.Polygon = Leaflet.Polygon> extends Path<P, E> { }
|
||||
|
||||
export interface RectangleProps extends PathEvents, Leaflet.PolylineOptions {
|
||||
children?: Children;
|
||||
bounds: Leaflet.LatLngBoundsExpression;
|
||||
popupContainer?: Leaflet.FeatureGroup;
|
||||
export class Polygon<P extends PolygonProps = PolygonProps, E extends Leaflet.Polygon = Leaflet.Polygon> extends Path<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
export class Rectangle<P extends RectangleProps = RectangleProps, E extends Leaflet.Rectangle = Leaflet.Rectangle> extends Path<P, E> { }
|
||||
|
||||
export interface PopupProps extends Leaflet.PopupOptions {
|
||||
children?: Children;
|
||||
export interface RectangleProps extends PathProps, PathEvents, Leaflet.PolylineOptions {
|
||||
bounds: Leaflet.LatLngBoundsExpression;
|
||||
}
|
||||
export class Rectangle<P extends RectangleProps = RectangleProps, E extends Leaflet.Rectangle = Leaflet.Rectangle> extends Path<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface PopupProps extends Leaflet.PopupOptions, DivOverlayProps {
|
||||
position?: Leaflet.LatLngExpression;
|
||||
}
|
||||
export class Popup<P extends PopupProps = PopupProps, E extends Leaflet.Popup = Leaflet.Popup> extends MapComponent<P, E> {
|
||||
export class Popup<P extends PopupProps = PopupProps, E extends Leaflet.Popup = Leaflet.Popup> extends DivOverlay<P, E> {
|
||||
getOptions(props: P): P;
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
onPopupOpen(arg: { popup: E }): void;
|
||||
onPopupClose(arg: { popup: E }): void;
|
||||
renderPopupContent(): void;
|
||||
removePopupContent(): void;
|
||||
onRender: () => void;
|
||||
}
|
||||
|
||||
export interface TooltipProps extends Leaflet.TooltipOptions {
|
||||
children?: Children;
|
||||
}
|
||||
export class Tooltip<P extends TooltipProps = TooltipProps, E extends Leaflet.Tooltip = Leaflet.Tooltip> extends MapComponent<P, E> {
|
||||
export interface TooltipProps extends Leaflet.TooltipOptions, DivOverlayProps { }
|
||||
export class Tooltip<P extends TooltipProps = TooltipProps, E extends Leaflet.Tooltip = Leaflet.Tooltip> extends DivOverlay<P, E> {
|
||||
onTooltipOpen(arg: { tooltip: E }): void;
|
||||
onTooltipClose(arg: { tooltip: E }): void;
|
||||
renderTooltipContent(): void;
|
||||
removeTooltipContent(): void;
|
||||
}
|
||||
|
||||
export type MapControlProps = Leaflet.ControlOptions;
|
||||
export type MapControlProps = {
|
||||
leaflet?: LeafletContext
|
||||
} & Leaflet.ControlOptions;
|
||||
|
||||
export class MapControl<P extends MapControlProps = MapControlProps, E extends Leaflet.Control = Leaflet.Control> extends React.Component<P> {
|
||||
leafletElement: E;
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export type AttributionControlProps = Leaflet.Control.AttributionOptions;
|
||||
export class AttributionControl<P extends AttributionControlProps = AttributionControlProps, E extends Leaflet.Control.Attribution = Leaflet.Control.Attribution> extends MapControl<P, E> { }
|
||||
export type AttributionControlProps = Leaflet.Control.AttributionOptions & MapControlProps;
|
||||
export class AttributionControl<P extends AttributionControlProps = AttributionControlProps, E extends Leaflet.Control.Attribution = Leaflet.Control.Attribution> extends MapControl<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
}
|
||||
|
||||
export interface LayersControlProps extends LayersControlEvents, Leaflet.Control.LayersOptions {
|
||||
baseLayers?: Leaflet.Control.LayersObject;
|
||||
children?: Children;
|
||||
overlays?: Leaflet.Control.LayersObject;
|
||||
export interface LayersControlProps extends MapControlProps, LayersControlEvents, Leaflet.Control.LayersOptions {
|
||||
children: Children;
|
||||
collapsed?: boolean;
|
||||
}
|
||||
export class LayersControl<P extends LayersControlProps = LayersControlProps, E extends Leaflet.Control.Layers = Leaflet.Control.Layers> extends MapControl<P, E> {
|
||||
controlProps: {
|
||||
addBaseLayer: AddLayerHandler,
|
||||
addOverlay: AddLayerHandler,
|
||||
removeLayer: RemoveLayerHandler,
|
||||
removeLayerControl: RemoveLayerHandler
|
||||
};
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
addBaseLayer(layer: Leaflet.Layer, name: string, checked: boolean): void;
|
||||
addOverlay(layer: Leaflet.Layer, name: string, checked: boolean): void;
|
||||
removeLayer(layer: Leaflet.Layer): void;
|
||||
removeLayerControl(layer: Leaflet.Layer): void;
|
||||
}
|
||||
export class LayersControl<P extends LayersControlProps = LayersControlProps, E extends Leaflet.Control.Layers = Leaflet.Control.Layers> extends MapControl<P, E> { }
|
||||
|
||||
export namespace LayersControl {
|
||||
interface BaseControlledLayerProps {
|
||||
interface ControlledLayerProps {
|
||||
addBaseLayer?: AddLayerHandler;
|
||||
addOverlay?: AddLayerHandler;
|
||||
checked?: boolean;
|
||||
children?: Children;
|
||||
removeLayer?(layer: Leaflet.Layer): void;
|
||||
removeLayerControl?(layer: Leaflet.Layer): void;
|
||||
}
|
||||
interface ControlledLayerProps extends BaseControlledLayerProps {
|
||||
addBaseLayer?(layer: Leaflet.Layer, name: string, checked: boolean): void;
|
||||
addOverlay?(layer: Leaflet.Layer, name: string, checked: boolean): void;
|
||||
children: Children;
|
||||
leaflet?: LeafletContext;
|
||||
name: string;
|
||||
removeLayer?: RemoveLayerHandler;
|
||||
removeLayerControl?: RemoveLayerHandler;
|
||||
}
|
||||
class ControlledLayer<P extends BaseControlledLayerProps = BaseControlledLayerProps> extends React.Component<P> {
|
||||
layer?: Leaflet.Layer;
|
||||
getChildContext(): { layerContainer: LayerContainer };
|
||||
addLayer(): void;
|
||||
class ControlledLayer<P extends ControlledLayerProps = ControlledLayerProps> extends React.Component<P> {
|
||||
contextValue: LeafletContext;
|
||||
layer: Leaflet.Layer | null | undefined;
|
||||
removeLayer(layer: Leaflet.Layer): void;
|
||||
}
|
||||
class BaseLayer<P extends ControlledLayerProps = ControlledLayerProps> extends ControlledLayer<P> { }
|
||||
class Overlay<P extends ControlledLayerProps = ControlledLayerProps> extends ControlledLayer<P> { }
|
||||
class BaseLayer<P extends ControlledLayerProps = ControlledLayerProps> extends ControlledLayer<P> {
|
||||
constructor(props: ControlledLayerProps);
|
||||
addLayer: (layer: Leaflet.Layer) => void;
|
||||
}
|
||||
class Overlay<P extends ControlledLayerProps = ControlledLayerProps> extends ControlledLayer<P> {
|
||||
constructor(props: ControlledLayerProps);
|
||||
addLayer: (layer: Leaflet.Layer) => void;
|
||||
}
|
||||
}
|
||||
|
||||
export type ScaleControlProps = Leaflet.Control.ScaleOptions;
|
||||
export class ScaleControl<P extends ScaleControlProps = ScaleControlProps, E extends Leaflet.Control.Scale = Leaflet.Control.Scale> extends MapControl<P, E> { }
|
||||
export type ScaleControlProps = Leaflet.Control.ScaleOptions & MapControlProps;
|
||||
export class ScaleControl<P extends ScaleControlProps = ScaleControlProps, E extends Leaflet.Control.Scale = Leaflet.Control.Scale> extends MapControl<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
}
|
||||
|
||||
export type ZoomControlProps = Leaflet.Control.ZoomOptions;
|
||||
export class ZoomControl<P extends ZoomControlProps = ZoomControlProps, E extends Leaflet.Control.Zoom = Leaflet.Control.Zoom> extends MapControl<P, E> { }
|
||||
export type ZoomControlProps = Leaflet.Control.ZoomOptions & MapControlProps;
|
||||
export class ZoomControl<P extends ZoomControlProps = ZoomControlProps, E extends Leaflet.Control.Zoom = Leaflet.Control.Zoom> extends MapControl<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
}
|
||||
|
||||
// context.js
|
||||
export const LeafletProvider: React.Provider<LeafletContext>;
|
||||
export const LeafletConsumer: React.Consumer<LeafletContext>;
|
||||
|
||||
export interface ContextProps {
|
||||
leaflet?: LeafletContext;
|
||||
}
|
||||
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
||||
|
||||
export function withLeaflet<T extends ContextProps>(WrappedComponent: React.ComponentType<T>): React.ComponentType<Omit<T, 'leaflet'>>;
|
||||
|
||||
@@ -16,8 +16,10 @@ import {
|
||||
MapProps,
|
||||
Marker,
|
||||
MarkerProps,
|
||||
Path,
|
||||
Pane,
|
||||
Polygon,
|
||||
PolygonProps,
|
||||
Polyline,
|
||||
Popup,
|
||||
PopupProps,
|
||||
@@ -25,7 +27,10 @@ import {
|
||||
TileLayer,
|
||||
Tooltip,
|
||||
WMSTileLayer,
|
||||
ZoomControl
|
||||
ZoomControl,
|
||||
LeafletProvider,
|
||||
withLeaflet,
|
||||
Viewport
|
||||
} from 'react-leaflet';
|
||||
const { BaseLayer, Overlay } = LayersControl;
|
||||
|
||||
@@ -207,7 +212,7 @@ export class CustomComponent extends Component<undefined, CustomComponentState>
|
||||
}
|
||||
}
|
||||
|
||||
// SOURCE ???
|
||||
// Similar to custom-icons.js
|
||||
export class MarkerWithDivIconExample extends Component<undefined, undefined> {
|
||||
render() {
|
||||
return (
|
||||
@@ -628,6 +633,43 @@ export class VectorLayersExample extends Component<undefined, undefined> {
|
||||
}
|
||||
}
|
||||
|
||||
// viewport.js
|
||||
|
||||
const viewportCenter: [number, number] = [51.505, -0.09];
|
||||
|
||||
const DEFAULT_VIEWPORT = {
|
||||
center: viewportCenter,
|
||||
zoom: 13
|
||||
};
|
||||
|
||||
export class ViewportExample extends Component<undefined, { viewport: Viewport }> {
|
||||
state = {
|
||||
viewport: DEFAULT_VIEWPORT
|
||||
};
|
||||
|
||||
onClickReset = () => {
|
||||
this.setState({ viewport: DEFAULT_VIEWPORT });
|
||||
}
|
||||
|
||||
onViewportChanged = (viewport: Viewport) => {
|
||||
this.setState({ viewport });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Map
|
||||
onClick={this.onClickReset}
|
||||
onViewportChanged={this.onViewportChanged}
|
||||
viewport={this.state.viewport}>
|
||||
<TileLayer
|
||||
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// wms-tile-layer.js
|
||||
interface WMSTileLayerExampleState {
|
||||
lat: number;
|
||||
@@ -729,6 +771,8 @@ class LegendControl extends MapControl<MapControlProps & { className?: string }>
|
||||
}
|
||||
}
|
||||
|
||||
const legendControlComponent = withLeaflet<MapControlProps>(LegendControl);
|
||||
|
||||
const LegendControlExample = () => (
|
||||
<Map className="map" center={mapControlCenter} zoom={13} style={{ height: "300px" }}>
|
||||
<TileLayer
|
||||
@@ -745,3 +789,26 @@ const LegendControlExample = () => (
|
||||
</LegendControl>
|
||||
</Map>
|
||||
);
|
||||
|
||||
class CustomPolygon extends Path<PolygonProps, L.Polygon> {
|
||||
createLeafletElement(props: PolygonProps) {
|
||||
const el = new L.Polygon(props.positions, this.getOptions(props));
|
||||
this.contextValue = { ...props.leaflet, popupContainer: el };
|
||||
return el;
|
||||
}
|
||||
|
||||
updateLeafletElement(fromProps: PolygonProps, toProps: PolygonProps) {
|
||||
if (toProps.positions !== fromProps.positions) {
|
||||
this.leafletElement.setLatLngs(toProps.positions);
|
||||
}
|
||||
this.setStyleIfChanged(fromProps, toProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
return children == null || this.contextValue == null ? null : (
|
||||
<LeafletProvider value={this.contextValue}>{children}</LeafletProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
const leafletComponent = withLeaflet<PolygonProps>(CustomPolygon);
|
||||
|
||||
Vendored
+351
@@ -0,0 +1,351 @@
|
||||
// Type definitions for react-leaflet 1.1
|
||||
// Project: https://github.com/PaulLeCam/react-leaflet
|
||||
// Definitions by: Dave Leaver <https://github.com/danzel>, David Schneider <https://github.com/davschne>, Yui T. <https://github.com/yuit>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import * as Leaflet from 'leaflet';
|
||||
import * as React from 'react';
|
||||
|
||||
// All events need to be lowercase so they don't collide with React.DOMAttributes<T>
|
||||
// which already declares things with some of the same names
|
||||
|
||||
export type Children = React.ReactNode | React.ReactNode[];
|
||||
|
||||
export interface MapEvents {
|
||||
onclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
ondblclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmousedown?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseup?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseover?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseout?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmousemove?(event: Leaflet.LeafletMouseEvent): void;
|
||||
oncontextmenu?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onfocus?(event: Leaflet.LeafletEvent): void;
|
||||
onblur?(event: Leaflet.LeafletEvent): void;
|
||||
onpreclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onload?(event: Leaflet.LeafletEvent): void;
|
||||
onunload?(event: Leaflet.LeafletEvent): void;
|
||||
onviewreset?(event: Leaflet.LeafletEvent): void;
|
||||
onmove?(event: Leaflet.LeafletEvent): void;
|
||||
onmovestart?(event: Leaflet.LeafletEvent): void;
|
||||
onmoveend?(event: Leaflet.LeafletEvent): void;
|
||||
ondragstart?(event: Leaflet.LeafletEvent): void;
|
||||
ondrag?(event: Leaflet.LeafletEvent): void;
|
||||
ondragend?(event: Leaflet.DragEndEvent): void;
|
||||
onzoomstart?(event: Leaflet.LeafletEvent): void;
|
||||
onzoomend?(event: Leaflet.LeafletEvent): void;
|
||||
onzoomlevelschange?(event: Leaflet.LeafletEvent): void;
|
||||
onresize?(event: Leaflet.ResizeEvent): void;
|
||||
onautopanstart?(event: Leaflet.LeafletEvent): void;
|
||||
onlayeradd?(event: Leaflet.LayerEvent): void;
|
||||
onlayerremove?(event: Leaflet.LayerEvent): void;
|
||||
onbaselayerchange?(event: Leaflet.LayersControlEvent): void;
|
||||
onoverlayadd?(event: Leaflet.LayersControlEvent): void;
|
||||
onoverlayremove?(event: Leaflet.LayersControlEvent): void;
|
||||
onlocationfound?(event: Leaflet.LocationEvent): void;
|
||||
onlocationerror?(event: Leaflet.ErrorEvent): void;
|
||||
onpopupopen?(event: Leaflet.PopupEvent): void;
|
||||
onpopupclose?(event: Leaflet.PopupEvent): void;
|
||||
}
|
||||
|
||||
export interface MarkerEvents {
|
||||
onclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
ondblclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmousedown?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseover?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseout?(event: Leaflet.LeafletMouseEvent): void;
|
||||
oncontextmenu?(event: Leaflet.LeafletMouseEvent): void;
|
||||
ondragstart?(event: Leaflet.LeafletEvent): void;
|
||||
ondrag?(event: Leaflet.LeafletEvent): void;
|
||||
ondragend?(event: Leaflet.DragEndEvent): void;
|
||||
onmove?(event: Leaflet.LeafletEvent): void;
|
||||
onadd?(event: Leaflet.LeafletEvent): void;
|
||||
onremove?(event: Leaflet.LeafletEvent): void;
|
||||
onpopupopen?(event: Leaflet.PopupEvent): void;
|
||||
onpopupclose?(event: Leaflet.PopupEvent): void;
|
||||
}
|
||||
|
||||
export interface TileLayerEvents {
|
||||
onloading?(event: Leaflet.LeafletEvent): void;
|
||||
onload?(event: Leaflet.LeafletEvent): void;
|
||||
ontileloadstart?(event: Leaflet.TileEvent): void;
|
||||
ontileload?(event: Leaflet.TileEvent): void;
|
||||
ontileunload?(event: Leaflet.TileEvent): void;
|
||||
ontileerror?(event: Leaflet.TileEvent): void;
|
||||
}
|
||||
|
||||
export interface PathEvents {
|
||||
onclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
ondblclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmousedown?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseover?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseout?(event: Leaflet.LeafletMouseEvent): void;
|
||||
oncontextmenu?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onadd?(event: Leaflet.LeafletEvent): void;
|
||||
onremove?(event: Leaflet.LeafletEvent): void;
|
||||
onpopupopen?(event: Leaflet.PopupEvent): void;
|
||||
onpopupclose?(event: Leaflet.PopupEvent): void;
|
||||
}
|
||||
|
||||
export interface FeatureGroupEvents {
|
||||
onclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
ondblclick?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseover?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onmouseout?(event: Leaflet.LeafletMouseEvent): void;
|
||||
oncontextmenu?(event: Leaflet.LeafletMouseEvent): void;
|
||||
onlayeradd?(event: Leaflet.LayerEvent): void;
|
||||
onlayerremove?(event: Leaflet.LayerEvent): void;
|
||||
}
|
||||
|
||||
export interface LayersControlEvents {
|
||||
onbaselayerchange?(event: Leaflet.LayersControlEvent): void;
|
||||
onoverlayadd?(event: Leaflet.LayersControlEvent): void;
|
||||
onoverlayremove?(event: Leaflet.LayersControlEvent): void;
|
||||
}
|
||||
|
||||
export type LeafletEvents = MapEvents
|
||||
& MarkerEvents
|
||||
& TileLayerEvents
|
||||
& PathEvents
|
||||
& FeatureGroupEvents
|
||||
& LayersControlEvents;
|
||||
|
||||
// Most react-leaflet components take two type parameters:
|
||||
// - P : the component's props object
|
||||
// - E : the corresponding Leaflet element
|
||||
|
||||
// These type parameters aren't needed for instantiating a component, but they are useful for
|
||||
// extending react-leaflet classes.
|
||||
|
||||
export class MapComponent<P, E extends Leaflet.Class> extends React.Component<P> {
|
||||
_leafletEvents: LeafletEvents;
|
||||
leafletElement: E;
|
||||
extractLeafletEvents(props: P): LeafletEvents;
|
||||
bindLeafletEvents(next: LeafletEvents, prev: LeafletEvents): LeafletEvents;
|
||||
fireLeafletEvent(type: string, data: any): void;
|
||||
getOptions(props: P): P;
|
||||
}
|
||||
|
||||
export interface MapProps extends MapEvents, Leaflet.MapOptions, Leaflet.LocateOptions, Leaflet.FitBoundsOptions {
|
||||
animate?: boolean;
|
||||
bounds?: Leaflet.LatLngBoundsExpression;
|
||||
boundsOptions?: Leaflet.FitBoundsOptions;
|
||||
center?: Leaflet.LatLngExpression;
|
||||
children?: Children;
|
||||
className?: string;
|
||||
id?: string;
|
||||
maxBounds?: Leaflet.LatLngBoundsExpression;
|
||||
maxZoom?: number;
|
||||
minZoom?: number;
|
||||
style?: React.CSSProperties;
|
||||
useFlyTo?: boolean;
|
||||
zoom?: number;
|
||||
}
|
||||
|
||||
export class Map<P extends MapProps = MapProps, E extends Leaflet.Map = Leaflet.Map> extends MapComponent<P, E> {
|
||||
className?: string;
|
||||
container: HTMLDivElement;
|
||||
getChildContext(): { layerContainer: E, map: E };
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
bindContainer(container: HTMLDivElement): void;
|
||||
shouldUpdateCenter(next: Leaflet.LatLngExpression, prev: Leaflet.LatLngExpression): boolean;
|
||||
shouldUpdateBounds(next: Leaflet.LatLngBoundsExpression, prev: Leaflet.LatLngBoundsExpression): boolean;
|
||||
}
|
||||
|
||||
export interface PaneProps {
|
||||
name?: string;
|
||||
children?: Children;
|
||||
map?: Leaflet.Map;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
pane?: string;
|
||||
}
|
||||
export interface PaneState {
|
||||
name?: string;
|
||||
}
|
||||
export class Pane<P extends PaneProps = PaneProps, S extends PaneState = PaneState> extends React.Component<P, S> {
|
||||
getChildContext(): { pane: string };
|
||||
createPane(props: P): void;
|
||||
removePane(): void;
|
||||
setStyle(arg: { style?: string, className?: string }): void;
|
||||
getParentPane(): HTMLElement | undefined;
|
||||
getPane(name: string): HTMLElement | undefined;
|
||||
}
|
||||
|
||||
export interface MapLayerProps {
|
||||
children?: Children;
|
||||
}
|
||||
export interface LayerContainer {
|
||||
addLayer(layer: Leaflet.Layer): this;
|
||||
removeLayer(layer: number | Leaflet.Layer): this;
|
||||
}
|
||||
export class MapLayer<P extends MapLayerProps = MapLayerProps, E extends Leaflet.Class = Leaflet.Class> extends MapComponent<P, E> {
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
readonly layerContainer: LayerContainer | Leaflet.Map;
|
||||
}
|
||||
|
||||
export interface GridLayerProps extends Leaflet.GridLayerOptions {
|
||||
children?: Children;
|
||||
}
|
||||
export class GridLayer<P extends GridLayerProps = GridLayerProps, E extends Leaflet.GridLayer = Leaflet.GridLayer> extends MapLayer<P, E> {}
|
||||
|
||||
export interface TileLayerProps extends TileLayerEvents, Leaflet.TileLayerOptions {
|
||||
children?: Children;
|
||||
url: string;
|
||||
}
|
||||
export class TileLayer<P extends TileLayerProps = TileLayerProps, E extends Leaflet.TileLayer = Leaflet.TileLayer> extends GridLayer<P, E> { }
|
||||
|
||||
export interface WMSTileLayerProps extends TileLayerEvents, Leaflet.WMSOptions {
|
||||
children?: Children;
|
||||
url: string;
|
||||
}
|
||||
export class WMSTileLayer<P extends WMSTileLayerProps = WMSTileLayerProps, E extends Leaflet.TileLayer.WMS = Leaflet.TileLayer.WMS> extends GridLayer<P, E> { }
|
||||
|
||||
export interface ImageOverlayProps extends Leaflet.ImageOverlayOptions {
|
||||
bounds: Leaflet.LatLngBoundsExpression;
|
||||
children?: Children;
|
||||
url: string;
|
||||
}
|
||||
export class ImageOverlay<P extends ImageOverlayProps = ImageOverlayProps, E extends Leaflet.ImageOverlay = Leaflet.ImageOverlay> extends MapLayer<P, E> {
|
||||
getChildContext(): { popupContainer: E };
|
||||
}
|
||||
|
||||
export interface LayerGroupProps {
|
||||
children?: Children;
|
||||
}
|
||||
export class LayerGroup<P extends LayerGroupProps = LayerGroupProps, E extends Leaflet.LayerGroup = Leaflet.LayerGroup> extends MapLayer<P, E> {
|
||||
getChildContext(): { layerContainer: E };
|
||||
}
|
||||
|
||||
export interface MarkerProps extends MarkerEvents, Leaflet.MarkerOptions {
|
||||
children?: Children;
|
||||
position: Leaflet.LatLngExpression;
|
||||
}
|
||||
export class Marker<P extends MarkerProps = MarkerProps, E extends Leaflet.Marker = Leaflet.Marker> extends MapLayer<P, E> {
|
||||
getChildContext(): { popupContainer: E };
|
||||
}
|
||||
|
||||
export interface PathProps extends PathEvents, Leaflet.PathOptions, MapLayerProps { }
|
||||
export abstract class Path<P extends PathProps, E> extends MapLayer<P, E> {
|
||||
getChildContext(): { popupContainer: E };
|
||||
getPathOptions(props: P): Leaflet.PathOptions;
|
||||
setStyle(options: Leaflet.PathOptions): void;
|
||||
setStyleIfChanged(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export interface CircleProps extends PathEvents, Leaflet.CircleMarkerOptions {
|
||||
center: Leaflet.LatLngExpression;
|
||||
children?: Children;
|
||||
radius: number;
|
||||
}
|
||||
export class Circle<P extends CircleProps = CircleProps, E extends Leaflet.Circle = Leaflet.Circle> extends Path<P, E> { }
|
||||
|
||||
export interface CircleMarkerProps extends PathEvents, Leaflet.CircleMarkerOptions {
|
||||
center: Leaflet.LatLngExpression;
|
||||
children?: Children;
|
||||
radius: number;
|
||||
}
|
||||
export class CircleMarker<P extends CircleMarkerProps = CircleMarkerProps, E extends Leaflet.CircleMarker = Leaflet.CircleMarker> extends Path<P, E> { }
|
||||
|
||||
export interface FeatureGroupProps extends FeatureGroupEvents, Leaflet.PathOptions {
|
||||
children?: Children;
|
||||
}
|
||||
export class FeatureGroup<P extends FeatureGroupProps = FeatureGroupProps, E extends Leaflet.FeatureGroup = Leaflet.FeatureGroup> extends Path<P, E> {
|
||||
getChildContext(): { layerContainer: E, popupContainer: E };
|
||||
}
|
||||
|
||||
export interface GeoJSONProps extends FeatureGroupEvents, Leaflet.GeoJSONOptions {
|
||||
children?: Children;
|
||||
data: GeoJSON.GeoJsonObject;
|
||||
style?: Leaflet.StyleFunction;
|
||||
}
|
||||
export class GeoJSON<P extends GeoJSONProps = GeoJSONProps, E extends Leaflet.GeoJSON = Leaflet.GeoJSON> extends Path<P, E> { }
|
||||
|
||||
export interface PolylineProps extends PathEvents, Leaflet.PolylineOptions {
|
||||
children?: Children;
|
||||
positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][];
|
||||
}
|
||||
export class Polyline<P extends PolylineProps = PolylineProps, E extends Leaflet.Polyline = Leaflet.Polyline> extends Path<P, E> { }
|
||||
|
||||
export interface PolygonProps extends PathEvents, Leaflet.PolylineOptions {
|
||||
children?: Children;
|
||||
popupContainer?: Leaflet.FeatureGroup;
|
||||
positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][] | Leaflet.LatLngExpression[][][];
|
||||
}
|
||||
export class Polygon<P extends PolygonProps = PolygonProps, E extends Leaflet.Polygon = Leaflet.Polygon> extends Path<P, E> { }
|
||||
|
||||
export interface RectangleProps extends PathEvents, Leaflet.PolylineOptions {
|
||||
children?: Children;
|
||||
bounds: Leaflet.LatLngBoundsExpression;
|
||||
popupContainer?: Leaflet.FeatureGroup;
|
||||
}
|
||||
export class Rectangle<P extends RectangleProps = RectangleProps, E extends Leaflet.Rectangle = Leaflet.Rectangle> extends Path<P, E> { }
|
||||
|
||||
export interface PopupProps extends Leaflet.PopupOptions {
|
||||
children?: Children;
|
||||
position?: Leaflet.LatLngExpression;
|
||||
}
|
||||
export class Popup<P extends PopupProps = PopupProps, E extends Leaflet.Popup = Leaflet.Popup> extends MapComponent<P, E> {
|
||||
onPopupOpen(arg: { popup: E }): void;
|
||||
onPopupClose(arg: { popup: E }): void;
|
||||
renderPopupContent(): void;
|
||||
removePopupContent(): void;
|
||||
}
|
||||
|
||||
export interface TooltipProps extends Leaflet.TooltipOptions {
|
||||
children?: Children;
|
||||
}
|
||||
export class Tooltip<P extends TooltipProps = TooltipProps, E extends Leaflet.Tooltip = Leaflet.Tooltip> extends MapComponent<P, E> {
|
||||
onTooltipOpen(arg: { tooltip: E }): void;
|
||||
onTooltipClose(arg: { tooltip: E }): void;
|
||||
renderTooltipContent(): void;
|
||||
removeTooltipContent(): void;
|
||||
}
|
||||
|
||||
export type MapControlProps = Leaflet.ControlOptions;
|
||||
export class MapControl<P extends MapControlProps = MapControlProps, E extends Leaflet.Control = Leaflet.Control> extends React.Component<P> {
|
||||
leafletElement: E;
|
||||
createLeafletElement(props: P): E;
|
||||
updateLeafletElement(fromProps: P, toProps: P): void;
|
||||
}
|
||||
|
||||
export type AttributionControlProps = Leaflet.Control.AttributionOptions;
|
||||
export class AttributionControl<P extends AttributionControlProps = AttributionControlProps, E extends Leaflet.Control.Attribution = Leaflet.Control.Attribution> extends MapControl<P, E> { }
|
||||
|
||||
export interface LayersControlProps extends LayersControlEvents, Leaflet.Control.LayersOptions {
|
||||
baseLayers?: Leaflet.Control.LayersObject;
|
||||
children?: Children;
|
||||
overlays?: Leaflet.Control.LayersObject;
|
||||
}
|
||||
export class LayersControl<P extends LayersControlProps = LayersControlProps, E extends Leaflet.Control.Layers = Leaflet.Control.Layers> extends MapControl<P, E> { }
|
||||
|
||||
export namespace LayersControl {
|
||||
interface BaseControlledLayerProps {
|
||||
checked?: boolean;
|
||||
children?: Children;
|
||||
removeLayer?(layer: Leaflet.Layer): void;
|
||||
removeLayerControl?(layer: Leaflet.Layer): void;
|
||||
}
|
||||
interface ControlledLayerProps extends BaseControlledLayerProps {
|
||||
addBaseLayer?(layer: Leaflet.Layer, name: string, checked: boolean): void;
|
||||
addOverlay?(layer: Leaflet.Layer, name: string, checked: boolean): void;
|
||||
name: string;
|
||||
}
|
||||
class ControlledLayer<P extends BaseControlledLayerProps = BaseControlledLayerProps> extends React.Component<P> {
|
||||
layer?: Leaflet.Layer;
|
||||
getChildContext(): { layerContainer: LayerContainer };
|
||||
addLayer(): void;
|
||||
removeLayer(layer: Leaflet.Layer): void;
|
||||
}
|
||||
class BaseLayer<P extends ControlledLayerProps = ControlledLayerProps> extends ControlledLayer<P> { }
|
||||
class Overlay<P extends ControlledLayerProps = ControlledLayerProps> extends ControlledLayer<P> { }
|
||||
}
|
||||
|
||||
export type ScaleControlProps = Leaflet.Control.ScaleOptions;
|
||||
export class ScaleControl<P extends ScaleControlProps = ScaleControlProps, E extends Leaflet.Control.Scale = Leaflet.Control.Scale> extends MapControl<P, E> { }
|
||||
|
||||
export type ZoomControlProps = Leaflet.Control.ZoomOptions;
|
||||
export class ZoomControl<P extends ZoomControlProps = ZoomControlProps, E extends Leaflet.Control.Zoom = Leaflet.Control.Zoom> extends MapControl<P, E> { }
|
||||
@@ -0,0 +1,747 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import * as L from 'leaflet';
|
||||
import { Component } from 'react';
|
||||
import {
|
||||
Children,
|
||||
Circle,
|
||||
CircleMarker,
|
||||
FeatureGroup,
|
||||
LayerGroup,
|
||||
LayersControl,
|
||||
Map,
|
||||
MapControl,
|
||||
MapControlProps,
|
||||
MapProps,
|
||||
Marker,
|
||||
MarkerProps,
|
||||
Pane,
|
||||
Polygon,
|
||||
Polyline,
|
||||
Popup,
|
||||
PopupProps,
|
||||
Rectangle,
|
||||
TileLayer,
|
||||
Tooltip,
|
||||
WMSTileLayer,
|
||||
ZoomControl
|
||||
} from 'react-leaflet';
|
||||
const { BaseLayer, Overlay } = LayersControl;
|
||||
|
||||
/// animate.js
|
||||
interface AnimateExampleState {
|
||||
animate: boolean;
|
||||
hasLocation: boolean;
|
||||
latlng: L.LatLngExpression;
|
||||
}
|
||||
|
||||
export class AnimateExample extends Component<undefined, AnimateExampleState> {
|
||||
state = {
|
||||
animate: false,
|
||||
hasLocation: false,
|
||||
latlng: {
|
||||
lat: 51.505,
|
||||
lng: -0.09,
|
||||
},
|
||||
};
|
||||
|
||||
handleClick = (e: L.LeafletMouseEvent) => {
|
||||
this.setState({
|
||||
latlng: e.latlng,
|
||||
});
|
||||
}
|
||||
|
||||
toggleAnimate = () => {
|
||||
this.setState({
|
||||
animate: !this.state.animate,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const marker = this.state.hasLocation ? (
|
||||
<Marker position={this.state.latlng}>
|
||||
<Popup>
|
||||
<span>You are here</span>
|
||||
</Popup>
|
||||
</Marker>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<label>
|
||||
<input
|
||||
checked={this.state.animate}
|
||||
onChange={this.toggleAnimate}
|
||||
type='checkbox'
|
||||
/>
|
||||
Animate panning
|
||||
</label>
|
||||
<Map
|
||||
animate={this.state.animate}
|
||||
center={this.state.latlng}
|
||||
// length={4} -- unimplemented; What component in the inheritance chain defines this property?
|
||||
onclick={this.handleClick}
|
||||
ref="map"
|
||||
zoom={13}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
{marker}
|
||||
</Map>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// bounds.js
|
||||
const outer: L.LatLngBoundsLiteral = [
|
||||
[50.505, -29.09],
|
||||
[52.505, 29.09],
|
||||
];
|
||||
const inner: L.LatLngBoundsLiteral = [
|
||||
[49.505, -2.09],
|
||||
[53.505, 2.09],
|
||||
];
|
||||
|
||||
interface BoundsExampleState {
|
||||
bounds: L.LatLngBoundsLiteral;
|
||||
}
|
||||
|
||||
export class BoundsExample extends Component<undefined, BoundsExampleState> {
|
||||
state = {
|
||||
bounds: outer,
|
||||
};
|
||||
|
||||
onClickInner = () => {
|
||||
this.setState({ bounds: inner });
|
||||
}
|
||||
|
||||
onClickOuter = () => {
|
||||
this.setState({ bounds: outer });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Map bounds={this.state.bounds}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<Rectangle
|
||||
bounds={outer}
|
||||
color={this.state.bounds === outer ? 'red' : 'white'}
|
||||
onclick={this.onClickOuter}
|
||||
/>
|
||||
<Rectangle
|
||||
bounds={inner}
|
||||
color={this.state.bounds === inner ? 'red' : 'white'}
|
||||
onclick={this.onClickInner}
|
||||
/>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// custom-component.js
|
||||
interface MyPopupMarkerProps {
|
||||
children: Children;
|
||||
position: L.LatLngExpression;
|
||||
}
|
||||
|
||||
interface MyMarker extends MyPopupMarkerProps {
|
||||
key: string;
|
||||
}
|
||||
|
||||
const MyPopupMarker = ({ children, position }: MyPopupMarkerProps) => (
|
||||
<Marker position={position}>
|
||||
<Popup>
|
||||
<span>{children}</span>
|
||||
</Popup>
|
||||
</Marker>
|
||||
);
|
||||
|
||||
interface MyMarkersListProps {
|
||||
markers: MyMarker[];
|
||||
}
|
||||
|
||||
const MyMarkersList = ({ markers }: MyMarkersListProps) => {
|
||||
const items = markers.map(({ key, ...props }) => (
|
||||
<MyPopupMarker key={key} {...props} />
|
||||
));
|
||||
return <div style={{ display: 'none' }}>{items}</div>;
|
||||
};
|
||||
|
||||
interface CustomComponentState {
|
||||
lat: number;
|
||||
lng: number;
|
||||
zoom: number;
|
||||
}
|
||||
|
||||
export class CustomComponent extends Component<undefined, CustomComponentState> {
|
||||
state = {
|
||||
lat: 51.505,
|
||||
lng: -0.09,
|
||||
zoom: 13,
|
||||
};
|
||||
|
||||
render() {
|
||||
const center: L.LatLngExpression = [this.state.lat, this.state.lng];
|
||||
|
||||
const markers: MyMarker[] = [
|
||||
{ key: 'marker1', position: [51.5, -0.1], children: 'My first popup' },
|
||||
{ key: 'marker2', position: [51.51, -0.1], children: 'My second popup' },
|
||||
{ key: 'marker3', position: [51.49, -0.05], children: 'My third popup' },
|
||||
];
|
||||
return (
|
||||
<Map center={center} zoom={this.state.zoom}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<MyMarkersList markers={markers} />
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// SOURCE ???
|
||||
export class MarkerWithDivIconExample extends Component<undefined, undefined> {
|
||||
render() {
|
||||
return (
|
||||
<Map>
|
||||
<Marker position={[0, 0]} icon={
|
||||
new L.DivIcon({})
|
||||
} />
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// draggable-marker.js
|
||||
interface DraggableExampleState {
|
||||
center: L.LatLngLiteral;
|
||||
marker: L.LatLngLiteral;
|
||||
zoom: number;
|
||||
draggable: boolean;
|
||||
}
|
||||
|
||||
export class DraggableExample extends Component<undefined, DraggableExampleState> {
|
||||
state = {
|
||||
center: {
|
||||
lat: 51.505,
|
||||
lng: -0.09,
|
||||
},
|
||||
marker: {
|
||||
lat: 51.505,
|
||||
lng: -0.09,
|
||||
},
|
||||
zoom: 13,
|
||||
draggable: true,
|
||||
};
|
||||
|
||||
toggleDraggable = () => {
|
||||
this.setState({ draggable: !this.state.draggable });
|
||||
}
|
||||
|
||||
updatePosition = () => {
|
||||
const {
|
||||
lat,
|
||||
lng,
|
||||
} = (this.refs.marker as Marker).leafletElement.getLatLng();
|
||||
this.setState({
|
||||
marker: { lat, lng },
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const position: L.LatLngExpression = [this.state.center.lat, this.state.center.lng];
|
||||
const markerPosition: L.LatLngExpression = [this.state.marker.lat, this.state.marker.lng];
|
||||
|
||||
return (
|
||||
<Map center={position} zoom={this.state.zoom}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<Marker
|
||||
draggable={this.state.draggable}
|
||||
ondragend={this.updatePosition}
|
||||
position={markerPosition}
|
||||
ref='marker'
|
||||
>
|
||||
<Popup minWidth={90}>
|
||||
<span onClick={this.toggleDraggable}>
|
||||
{this.state.draggable ? 'DRAG MARKER' : 'MARKER FIXED'}
|
||||
</span>
|
||||
</Popup>
|
||||
</Marker>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// events.js
|
||||
interface EventsExampleState {
|
||||
hasLocation: boolean;
|
||||
latlng: L.LatLngLiteral;
|
||||
}
|
||||
|
||||
export class EventsExample extends Component<undefined, EventsExampleState> {
|
||||
state = {
|
||||
hasLocation: false,
|
||||
latlng: {
|
||||
lat: 51.505,
|
||||
lng: -0.09,
|
||||
},
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
(this.refs.map as Map).leafletElement.locate();
|
||||
}
|
||||
|
||||
handleLocationFound = (e: L.LocationEvent) => {
|
||||
this.setState({
|
||||
hasLocation: true,
|
||||
latlng: e.latlng,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const marker = this.state.hasLocation ? (
|
||||
<Marker position={this.state.latlng}>
|
||||
<Popup>
|
||||
<span>You are here</span>
|
||||
</Popup>
|
||||
</Marker>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Map
|
||||
center={this.state.latlng}
|
||||
// length={4} -- unimplemented; What component in the inheritance chain defines this property?
|
||||
onclick={this.handleClick}
|
||||
// NB: lowercase prop for Leaflet event handler
|
||||
onlocationfound={this.handleLocationFound}
|
||||
ref="map"
|
||||
zoom={13}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
{marker}
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// layers-control.js
|
||||
export class LayersControlExample extends Component<undefined, undefined> {
|
||||
render() {
|
||||
const center: L.LatLngExpression = [51.505, -0.09];
|
||||
const rectangle: L.LatLngBoundsExpression = [
|
||||
[51.49, -0.08],
|
||||
[51.5, -0.06],
|
||||
];
|
||||
|
||||
return (
|
||||
<Map center={center} zoom={13}>
|
||||
<LayersControl position='topright'>
|
||||
<BaseLayer checked name='OpenStreetMap.Mapnik'>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
</BaseLayer>
|
||||
<BaseLayer name='OpenStreetMap.BlackAndWhite'>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
|
||||
/>
|
||||
</BaseLayer>
|
||||
<Overlay name='Marker with popup'>
|
||||
<Marker position={center}>
|
||||
<Popup>
|
||||
<span>A pretty CSS3 popup. <br /> Easily customizable.</span>
|
||||
</Popup>
|
||||
</Marker>
|
||||
</Overlay>
|
||||
<Overlay checked name='Layer group with circles'>
|
||||
<LayerGroup>
|
||||
<Circle center={center} fillColor='blue' radius={200} />
|
||||
<Circle center={center} fillColor='red' radius={100} stroke={false} />
|
||||
<LayerGroup>
|
||||
<Circle center={[51.51, -0.08]} color='green' fillColor='green' radius={100} />
|
||||
</LayerGroup>
|
||||
</LayerGroup>
|
||||
</Overlay>
|
||||
<Overlay name='Feature group'>
|
||||
<FeatureGroup color='purple'>
|
||||
<Popup>
|
||||
<span>Popup in FeatureGroup</span>
|
||||
</Popup>
|
||||
<Circle center={[51.51, -0.06]} radius={200} />
|
||||
<Rectangle bounds={rectangle} />
|
||||
</FeatureGroup>
|
||||
</Overlay>
|
||||
</LayersControl>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// other-layers.js
|
||||
export class OtherLayersExample extends Component<undefined, undefined> {
|
||||
render() {
|
||||
const center: L.LatLngExpression = [51.505, -0.09];
|
||||
const rectangle: L.LatLngBoundsExpression = [
|
||||
[51.49, -0.08],
|
||||
[51.5, -0.06],
|
||||
];
|
||||
|
||||
return (
|
||||
<Map center={center} zoom={13}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<LayerGroup>
|
||||
<Circle center={center} fillColor='blue' radius={200} />
|
||||
<Circle center={center} fillColor='red' radius={100} stroke={false} />
|
||||
<LayerGroup>
|
||||
<Circle center={[51.51, -0.08]} color='green' fillColor='green' radius={100} />
|
||||
</LayerGroup>
|
||||
</LayerGroup>
|
||||
<FeatureGroup color='purple'>
|
||||
<Popup>
|
||||
<span>Popup in FeatureGroup</span>
|
||||
</Popup>
|
||||
<Circle center={[51.51, -0.06]} radius={200} />
|
||||
<Rectangle bounds={rectangle} />
|
||||
</FeatureGroup>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// pane.js
|
||||
interface PaneExampleState {
|
||||
render: boolean;
|
||||
}
|
||||
|
||||
export class PaneExample extends Component<undefined, PaneExampleState> {
|
||||
state = {
|
||||
render: true,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setInterval(() => {
|
||||
this.setState({
|
||||
render: !this.state.render,
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Map bounds={outer}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
{this.state.render ? (
|
||||
<Pane name='cyan-rectangle' style={{ zIndex: 500 }}>
|
||||
<Rectangle bounds={outer} color='cyan' />
|
||||
</Pane>
|
||||
) : null}
|
||||
<Pane name='yellow-rectangle' style={{ zIndex: 499 }}>
|
||||
<Rectangle bounds={inner} color='yellow' />
|
||||
<Pane name='purple-rectangle' className='purplePane-purplePane'>
|
||||
<Rectangle bounds={outer} color='purple' />
|
||||
</Pane>
|
||||
</Pane>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// simple.js
|
||||
interface SimpleExampleState {
|
||||
lat: number;
|
||||
lng: number;
|
||||
zoom: number;
|
||||
}
|
||||
|
||||
export class SimpleExample extends Component<undefined, SimpleExampleState> {
|
||||
state = {
|
||||
lat: 51.505,
|
||||
lng: -0.09,
|
||||
zoom: 13,
|
||||
};
|
||||
|
||||
render() {
|
||||
const position: L.LatLngExpression = [this.state.lat, this.state.lng];
|
||||
return (
|
||||
<Map center={position} zoom={this.state.zoom}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<Marker position={position}>
|
||||
<Popup>
|
||||
<span>A pretty CSS3 popup. <br /> Easily customizable.</span>
|
||||
</Popup>
|
||||
</Marker>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// tooltip.js
|
||||
interface TooltipExampleState {
|
||||
clicked: number;
|
||||
}
|
||||
|
||||
export class TooltipExample extends Component<undefined, TooltipExampleState> {
|
||||
state = {
|
||||
clicked: 0,
|
||||
};
|
||||
|
||||
onClickCircle = () => {
|
||||
this.setState({ clicked: this.state.clicked + 1 });
|
||||
}
|
||||
|
||||
render() {
|
||||
const center: L.LatLngExpression = [51.505, -0.09];
|
||||
|
||||
const multiPolygon: L.LatLngExpression[][] = [
|
||||
[[51.51, -0.12], [51.51, -0.13], [51.53, -0.13]],
|
||||
[[51.51, -0.05], [51.51, -0.07], [51.53, -0.07]],
|
||||
];
|
||||
|
||||
const rectangle: L.LatLngBoundsExpression = [
|
||||
[51.49, -0.08],
|
||||
[51.5, -0.06],
|
||||
];
|
||||
|
||||
const clickedText = this.state.clicked === 0
|
||||
? 'Click this Circle to change the Tooltip text'
|
||||
: `Circle click: ${this.state.clicked}`;
|
||||
|
||||
return (
|
||||
<Map center={center} zoom={13}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<Circle
|
||||
center={center}
|
||||
fillColor='blue'
|
||||
onclick={this.onClickCircle}
|
||||
radius={200}
|
||||
>
|
||||
<Tooltip>
|
||||
<span>{clickedText}</span>
|
||||
</Tooltip>
|
||||
</Circle>
|
||||
<CircleMarker center={[51.51, -0.12]} color='red' radius={20}>
|
||||
<Tooltip>
|
||||
<span>Tooltip for CircleMarker</span>
|
||||
</Tooltip>
|
||||
</CircleMarker>
|
||||
<Marker position={[51.510, -0.09]}>
|
||||
<Popup>
|
||||
<span>Popup for Marker</span>
|
||||
</Popup>
|
||||
<Tooltip>
|
||||
<span>Tooltip for Marker</span>
|
||||
</Tooltip>
|
||||
</Marker>
|
||||
<Polygon color='purple' positions={multiPolygon}>
|
||||
<Tooltip sticky>
|
||||
<span>sticky Tooltip for Polygon</span>
|
||||
</Tooltip>
|
||||
</Polygon>
|
||||
<Rectangle bounds={rectangle} color='black'>
|
||||
<Tooltip direction='bottom' offset={[0, 20]} opacity={1} permanent>
|
||||
<span>permanent Tooltip for Rectangle</span>
|
||||
</Tooltip>
|
||||
</Rectangle>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// vector-layers.js
|
||||
export class VectorLayersExample extends Component<undefined, undefined> {
|
||||
render() {
|
||||
const center: L.LatLngExpression = [51.505, -0.09];
|
||||
|
||||
const polyline: L.LatLngExpression[] = [
|
||||
[51.505, -0.09],
|
||||
[51.51, -0.1],
|
||||
[51.51, -0.12],
|
||||
];
|
||||
|
||||
const multiPolyline: L.LatLngExpression[][] = [
|
||||
[[51.5, -0.1], [51.5, -0.12], [51.52, -0.12]],
|
||||
[[51.5, -0.05], [51.5, -0.06], [51.52, -0.06]],
|
||||
];
|
||||
|
||||
const polygon: L.LatLngExpression[] = [
|
||||
[51.515, -0.09],
|
||||
[51.52, -0.1],
|
||||
[51.52, -0.12],
|
||||
];
|
||||
|
||||
const multiPolygon: L.LatLngExpression[][] = [
|
||||
[[51.51, -0.12], [51.51, -0.13], [51.53, -0.13]],
|
||||
[[51.51, -0.05], [51.51, -0.07], [51.53, -0.07]],
|
||||
];
|
||||
|
||||
const rectangle: L.LatLngBoundsExpression = [
|
||||
[51.49, -0.08],
|
||||
[51.5, -0.06],
|
||||
];
|
||||
|
||||
return (
|
||||
<Map center={center} zoom={13}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<Circle center={center} fillColor='blue' radius={200} />
|
||||
<CircleMarker center={[51.51, -0.12]} color='red' radius={20}>
|
||||
<Popup>
|
||||
<span>Popup in CircleMarker</span>
|
||||
</Popup>
|
||||
</CircleMarker>
|
||||
<Polyline color='lime' positions={polyline} />
|
||||
<Polyline color='lime' positions={multiPolyline} />
|
||||
<Polygon color='purple' positions={polygon} />
|
||||
<Polygon color='purple' positions={multiPolygon} />
|
||||
<Rectangle bounds={rectangle} color='black' />
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// wms-tile-layer.js
|
||||
interface WMSTileLayerExampleState {
|
||||
lat: number;
|
||||
lng: number;
|
||||
zoom: number;
|
||||
bluemarble: boolean;
|
||||
}
|
||||
|
||||
export class WMSTileLayerExample extends Component<undefined, WMSTileLayerExampleState> {
|
||||
state = {
|
||||
lat: 51.505,
|
||||
lng: -0.09,
|
||||
zoom: 5,
|
||||
bluemarble: false,
|
||||
};
|
||||
|
||||
onClick = () => {
|
||||
this.setState({
|
||||
bluemarble: !this.state.bluemarble,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Map
|
||||
center={[this.state.lat, this.state.lng]}
|
||||
zoom={this.state.zoom}
|
||||
onclick={this.onClick}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<WMSTileLayer
|
||||
layers={this.state.bluemarble ? 'nasa:bluemarble' : 'ne:ne'}
|
||||
url='http://demo.opengeo.org/geoserver/ows?'
|
||||
/>
|
||||
</Map>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// zoom-control.js
|
||||
const ZoomControlExample = () => (
|
||||
<Map center={[51.505, -0.09]} zoom={13} zoomControl={false}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
/>
|
||||
<ZoomControl position='topright' />
|
||||
</Map>
|
||||
);
|
||||
|
||||
// MapControl https://github.com/PaulLeCam/react-leaflet/issues/130
|
||||
class CenterControl extends MapControl { // note we're extending MapControl from react-leaflet, not Component from react
|
||||
componentWillMount() {
|
||||
const centerControl = new L.Control({ position: 'bottomright' }); // see http://leafletjs.com/reference.html#control-positions for other positions
|
||||
const jsx = (
|
||||
// PUT YOUR JSX FOR THE COMPONENT HERE:
|
||||
<div>
|
||||
{/* add your JSX */}
|
||||
</div>
|
||||
);
|
||||
|
||||
centerControl.onAdd = (map) => {
|
||||
const div = L.DomUtil.create('div', '');
|
||||
ReactDOM.render(jsx, div);
|
||||
return div;
|
||||
};
|
||||
|
||||
this.leafletElement = centerControl;
|
||||
}
|
||||
}
|
||||
|
||||
const mapControlCenter: L.LatLngExpression = [51.505, -0.09];
|
||||
|
||||
const CenterControlExample = () => (
|
||||
<Map center={mapControlCenter} zoom={13}>
|
||||
<CenterControl />
|
||||
</Map>
|
||||
);
|
||||
|
||||
class LegendControl extends MapControl<MapControlProps & { className?: string }> {
|
||||
componentWillMount() {
|
||||
const legend = new L.Control({ position: 'bottomright' });
|
||||
const jsx = (
|
||||
<div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
|
||||
legend.onAdd = (map) => {
|
||||
const div = L.DomUtil.create('div', '');
|
||||
ReactDOM.render(jsx, div);
|
||||
return div;
|
||||
};
|
||||
|
||||
this.leafletElement = legend;
|
||||
}
|
||||
}
|
||||
|
||||
const LegendControlExample = () => (
|
||||
<Map className="map" center={mapControlCenter} zoom={13} style={{ height: "300px" }}>
|
||||
<TileLayer
|
||||
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
/>
|
||||
<LegendControl className="supportLegend">
|
||||
<ul className="legend">
|
||||
<li className="legendItem1">Strong Support</li>
|
||||
<li className="legendItem2">Weak Support</li>
|
||||
<li className="legendItem3">Weak Oppose</li>
|
||||
<li className="legendItem4">Strong Oppose</li>
|
||||
</ul>
|
||||
</LegendControl>
|
||||
</Map>
|
||||
);
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"baseUrl": "../../",
|
||||
"jsx": "react",
|
||||
"typeRoots": [
|
||||
"../../"
|
||||
],
|
||||
"types": [],
|
||||
"paths": {
|
||||
"react-leaflet": [
|
||||
"react-leaflet/v1"
|
||||
],
|
||||
"react-leaflet/*": [
|
||||
"react-leaflet/v1/*"
|
||||
]
|
||||
},
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"react-leaflet-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
// TODO
|
||||
"no-duplicate-imports": false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user