mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
2addedb15e
* Added Leaflet.DivIcon for icon type * Changed icon to BaseIcon type, as per @danzel suggestion
602 lines
19 KiB
TypeScript
602 lines
19 KiB
TypeScript
import * as React from 'react';
|
|
import * as Leaflet from 'leaflet';
|
|
import { Component, PropTypes } from 'react';
|
|
import {
|
|
Circle,
|
|
CircleMarker,
|
|
FeatureGroup,
|
|
LayerGroup,
|
|
LayersControl,
|
|
Map,
|
|
MapInstance,
|
|
Marker,
|
|
MarkerInstance,
|
|
Pane,
|
|
Polygon,
|
|
Polyline,
|
|
Popup,
|
|
Rectangle,
|
|
TileLayer,
|
|
Tooltip,
|
|
WMSTileLayer,
|
|
ZoomControl
|
|
} from 'react-leaflet';
|
|
const { BaseLayer, Overlay } = LayersControl;
|
|
|
|
/// animate.js
|
|
export class AnimateExample extends Component<any, any> {
|
|
state = {
|
|
animate: false,
|
|
hasLocation: false,
|
|
latlng: {
|
|
lat: 51.505,
|
|
lng: -0.09,
|
|
},
|
|
};
|
|
|
|
handleClick = (e: Leaflet.MouseEvent) => {
|
|
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}
|
|
// TODO length={4}
|
|
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: Array<[number, number]> = [
|
|
[50.505, -29.09],
|
|
[52.505, 29.09],
|
|
];
|
|
const inner: Array<[number, number]> = [
|
|
[49.505, -2.09],
|
|
[53.505, 2.09],
|
|
];
|
|
|
|
export class BoundsExample extends Component<any, any> {
|
|
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
|
|
const SomeFn = (asd: string) => (
|
|
asd + asd
|
|
);
|
|
|
|
const MyPopupMarker = ({ children, position }: any) => (
|
|
<Marker position={position}>
|
|
<Popup>
|
|
<span>{children}</span>
|
|
</Popup>
|
|
</Marker>
|
|
);
|
|
|
|
/*(MyPopupMarker as any).propTypes = {
|
|
children: MapPropTypes.children,
|
|
position: MapPropTypes.latlng,
|
|
}*/
|
|
|
|
const MyMarkersList = ({ markers }: any) => {
|
|
const items = markers.map(({ key, ...props }: any) => (
|
|
<MyPopupMarker key={key} {...props} />
|
|
));
|
|
return <div style={{ display: 'none' }}>{items}</div>;
|
|
};
|
|
(MyMarkersList as any).propTypes = {
|
|
markers: PropTypes.array.isRequired,
|
|
};
|
|
|
|
export class CustomComponent extends Component<any, any> {
|
|
state = {
|
|
lat: 51.505,
|
|
lng: -0.09,
|
|
zoom: 13,
|
|
};
|
|
|
|
render() {
|
|
const center: [number, number] = [this.state.lat, this.state.lng];
|
|
|
|
const markers = [
|
|
{ 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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class MarkerWithDivIconExample extends Component<any, any> {
|
|
render() {
|
|
return (
|
|
<Map>
|
|
<Marker position={[0, 0]} icon={
|
|
new Leaflet.DivIcon({})
|
|
}/>
|
|
</Map>
|
|
)
|
|
}
|
|
}
|
|
|
|
// draggable-marker.js
|
|
export class DraggableExample extends Component<any, any> {
|
|
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 MarkerInstance).leafletElement.getLatLng();
|
|
this.setState({
|
|
marker: { lat, lng },
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const position: [number, number] = [this.state.center.lat, this.state.center.lng];
|
|
const markerPosition: [number, number] = [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
|
|
export class EventsExample extends Component<any, any> {
|
|
state = {
|
|
hasLocation: false,
|
|
latlng: {
|
|
lat: 51.505,
|
|
lng: -0.09,
|
|
},
|
|
};
|
|
|
|
handleClick = () => {
|
|
(this.refs['map'] as MapInstance).leafletElement.locate();
|
|
}
|
|
|
|
handleLocationFound = (e: Leaflet.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}
|
|
// TODO length={4}
|
|
onClick={this.handleClick}
|
|
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<any, any> {
|
|
render() {
|
|
const center: [number, number] = [51.505, -0.09];
|
|
const rectangle: Array<[number, number]> = [
|
|
[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<any, any> {
|
|
render() {
|
|
const center: [number, number] = [51.505, -0.09];
|
|
const rectangle: Array<[number, number]> = [
|
|
[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
|
|
export class PaneExample extends Component<any, any> {
|
|
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
|
|
export class SimpleExample extends Component<any, any> {
|
|
state = {
|
|
lat: 51.505,
|
|
lng: -0.09,
|
|
zoom: 13,
|
|
};
|
|
|
|
render() {
|
|
const position: [number, number] = [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
|
|
export class TooltipExample extends Component<any, any> {
|
|
state = {
|
|
clicked: 0,
|
|
};
|
|
|
|
onClickCircle = () => {
|
|
this.setState({ clicked: this.state.clicked + 1 });
|
|
}
|
|
|
|
render() {
|
|
const center: [number, number] = [51.505, -0.09];
|
|
|
|
const multiPolygon: Array<Array<[number, number]>> = [
|
|
[[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: Array<[number, number]> = [
|
|
[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>
|
|
<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<any, any> {
|
|
render() {
|
|
const center: [number, number] = [51.505, -0.09];
|
|
|
|
const polyline: Array<[number, number]> = [
|
|
[51.505, -0.09],
|
|
[51.51, -0.1],
|
|
[51.51, -0.12],
|
|
];
|
|
|
|
const multiPolyline: Array<Array<[number, number]>> = [
|
|
[[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: Array<[number, number]> = [
|
|
[51.515, -0.09],
|
|
[51.52, -0.1],
|
|
[51.52, -0.12],
|
|
];
|
|
|
|
const multiPolygon: Array<Array<[number, number]>> = [
|
|
[[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: Array<[number, number]> = [
|
|
[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
|
|
export class WMSTileLayerExample extends Component<any, any> {
|
|
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>
|
|
);
|