0.1.19 • Published 4 months ago
@solstice-ai/leaflet-react-utils v0.1.19
Leaflet React Utilities
This library provides commonly used components, functions and tools to handle Leaflet maps, area definitions, translation between WMS map tile coordinates and latitude/longitude geo-coordinates.
Installation
npm i -S @solstice-ai/leaflet-react-utils
Usage
import React from "react"
import { MapContainer, Rectangle } from "react-leaflet"
import { AbstractMap, AreaTileSelect, mapCommon, MapClick } from "@solstice-ai/leaflet-react-utils"
class MyMap extends AbstractMap {
constructor(props) {
super(props)
this.state = {
...this.state,
myCustomState: true,
myOtherState: [],
currentBox: null,
}
this.tilesets = [this.getStandardOsmLayer()]
this.setAreaSelect = this.setAreaSelect.bind(this)
this.onClick = this.onClick.bind(this)
}
setAreaSelect(box) {
console.log("Top left", box.topLeft.lat, ",", box.topLeft.lon)
console.log("Bottom right", box.bottomRight.lat, ",", box.bottomRight.lon)
this.setState({ currentBox: box })
}
onClick(lat, lon) {
console.log("Clicked on point", lat, lon)
}
render() {
return (
<div>
{/** clicking on this button moves the map to Melbourne */}
<button onClick={() => { this.moveTo(-37.78, 144.97, 14)}}>
{/** render the map container */}
<MapContainer center={[0, 140.7]} zoom={2} style={{ width: "700px" height: "400px"}} whenReady={this.setMap}>
{/** render the OSM and allow the moveTo method */}
{this.renderMapInfo()}
{/** if we allow to click on the map and retrieve lat / lon */}
<MapClick map={this.state.map} onClick={this.onClick} />
{/** if we want to select an area (ctrl + drag) */}
<AreaTileSelect map={this.state.map} setBox={this.setAreaSelect} />
{/** once a rectangle is selected render it on the map */}
{this.state.currentBox != null ? (
<Rectangle
bounds={mapCommon.getBounds(this.props.currentBox)}
fillColor="#f00"
opacity={0.3}
/>
) : null}
</MapContainer>
</div>
)
}
}
The this.renderMapInfo
call takes 2 boolean parameters, which by default both are true
:
showZoom
- indicates whether to show the zoom level in the bottom right cornershowLocation
- indicates whether to show the current lat/lon of the cursor position in the bottom right corner
0.1.19
4 months ago
0.1.18
7 months ago
0.1.17
7 months ago
0.1.16
8 months ago
0.1.15
8 months ago
0.1.14
9 months ago
0.1.13
9 months ago
0.1.12
10 months ago
0.1.11
10 months ago
0.1.10
10 months ago
0.1.9
10 months ago
0.1.8
10 months ago
0.1.7
10 months ago
0.1.6
10 months ago
0.1.5
10 months ago
0.1.4
10 months ago
0.1.3
10 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.1.0
10 months ago