diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts
index c362a1f23c..04fe17a04f 100644
--- a/types/react-leaflet/index.d.ts
+++ b/types/react-leaflet/index.d.ts
@@ -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'>>;
diff --git a/types/react-leaflet/react-leaflet-tests.tsx b/types/react-leaflet/react-leaflet-tests.tsx
index fe9825c465..5d1fc2ce7e 100644
--- a/types/react-leaflet/react-leaflet-tests.tsx
+++ b/types/react-leaflet/react-leaflet-tests.tsx
@@ -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='&amp;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);
diff --git a/types/react-leaflet/v1/index.d.ts b/types/react-leaflet/v1/index.d.ts
new file mode 100644
index 0000000000..c362a1f23c
--- /dev/null
+++ b/types/react-leaflet/v1/index.d.ts
@@ -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> { }
diff --git a/types/react-leaflet/v1/react-leaflet-tests.tsx b/types/react-leaflet/v1/react-leaflet-tests.tsx
new file mode 100644
index 0000000000..fe9825c465
--- /dev/null
+++ b/types/react-leaflet/v1/react-leaflet-tests.tsx
@@ -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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy <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='&copy; <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>
+);
diff --git a/types/react-leaflet/v1/tsconfig.json b/types/react-leaflet/v1/tsconfig.json
new file mode 100644
index 0000000000..bb2d85cfe8
--- /dev/null
+++ b/types/react-leaflet/v1/tsconfig.json
@@ -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"
+    ]
+}
\ No newline at end of file
diff --git a/types/react-leaflet/v1/tslint.json b/types/react-leaflet/v1/tslint.json
new file mode 100644
index 0000000000..440efbd687
--- /dev/null
+++ b/types/react-leaflet/v1/tslint.json
@@ -0,0 +1,7 @@
+{
+	"extends": "dtslint/dt.json",
+	"rules": {
+		// TODO
+		"no-duplicate-imports": false
+	}
+}