README
the-map
Geo map for the-components
Installation
$ npm install the-map --save
Usage
'use strict'
import React from 'react'
import { TheMap, TheMapStyle, TheMapPositionInput } from 'the-map'
import { TheSpinStyle } from 'the-spin'
// @see https://leaflet-extras.github.io/leaflet-providers/preview/
const MapLayers = [
{
key: 'layer01',
title: 'Layer 01',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
},
{
key: 'layer02',
title: 'Layer 02',
url: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
},
]
class ExampleComponent extends React.Component {
handleLeafletMap = (map) => {
this.map = map
}
handleChange = ({ lat, lng, zoom, bounds: { west, south, east, north } }) => {
this.setState({ lat, lng, zoom })
console.log('bounds changed', { west, south, east, north })
}
handleUpdate = ({ pos01 }) => {
const { lat, lng, zoom } = pos01
this.setState({
post01: { lat, lng, zoom },
})
}
moveToCurrent = () => {
navigator.geolocation.getCurrentPosition(({ coords }) => {
const { latitude: lat, longitude: lng } = coords
this.setState({ lat, lng })
}, () => alert('Failed to get current position'))
}
setMarker(key, values) {
const { markers } = this.state
this.setState({
markers: [
...markers.filter((m) => m.key !== key),
{ key, ...values }
]
})
}
getMarker(key) {
return this.state.markers.find((m) => m.key === key)
}
handleClick = ({ lat, lng }) => {
const { markers } = this.state
console.log('Map clicked', { lat, lng })
let name = `m${String(markers.length + 1).padStart(2, '0')}`
let markerValues = {
lat,
lng,
onClick: () => console.log('node clicked', name),
node: (
<div style={{
borderRadius: '50%',
textAlign: 'center',
background: '#EE1',
width: 22,
height: 22,
color: 'white',
lineHeight: '22px',
}}>
<div>{name}</div>
</div>
),
}
this.setMarker(name, markerValues)
setInterval(() => {
const marker = this.getMarker(name)
const lng = marker.lng + 0.001
const lat = marker.lat + 0.001
this.setMarker(name, {
...marker,
lat,
lng,
})
console.log('Marker moved', name, { lat, lng })
}, 1000)
}
state = {
lat: 35.6895,
lng: 139.6917,
zoom: 13,
markers: [
{
key: 'marker-01',
lat: 51.505,
lng: -0.09,
onClick: () => console.log('marker01 clicked'),
node: (
<div style={{
borderRadius: '50%',
textAlign: 'center',
background: '#E33',
width: 48,
height: 48,
color: 'white',
lineHeight: '48px',
}}>
<div>Mrkr01</div>
</div>
),
}
],
popups: [
{
key: 'popup-01',
for: 'marker-01',
node: (
<div>This is popup01 for marker01</div>
)
}
]
}
render() {
const { state: { lat, lng, zoom, markers, post01 } } = this
return (
<div>
<TheSpinStyle />
<TheMapStyle />
<TheMap onLeafletMap={this.handleLeafletMap}
onChange={this.handleChange}
{...{ lat, lng, zoom }}
width={'480px'}
height={'50vh'}
layers={MapLayers}
onClick={this.handleClick}
markers={markers}
>
</TheMap>
<hr />
<button
onClick={this.moveToCurrent}>Move to current
</button>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<section>
<h1>As Input</h1>
<TheMapPositionInput value={post01}
name={'pos01'}
onUpdate={this.handleUpdate}
/>
</section>
</div>
)
}
}
export default ExampleComponent
Components
TheMap
Geo map for the-components
Props
Name | Type | Description | Default |
---|---|---|---|
freezed |
bool | Disable all interactions | false |
height |
union | Height of map | null |
lat |
number | latitude value | `` |
lng |
number | longitude value | `` |
onLeafletMap |
func | Callback when map map created | null |
spinning |
bool | Shows spinner | false |
width |
union | Width of map | null |
layerControlEnabled |
true |
||
layerControlPosition |
'topright' |
||
layers |
`[ | ||
{ | |||
attribution: | |||
'© OpenStreetMap', | |||
key: 'default', | |||
maxZoom: 19, | |||
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | |||
}, | |||
]` | |||
markers |
[] |
||
zoomControlEnabled |
true |
||
zoomControlPosition |
'topleft' |
TheMapMarker
TheMapPositionInput
Props
Name | Type | Description | Default |
---|---|---|---|
id |
string | `` | |
name |
string | `` | |
value |
union | { lat: 35.6895, lng: 139.6917, zoom: 13 } |
|
height |
150 |
||
layers |
TheMap.defaultProps.layers || [] |
||
width |
300 |
License
This software is released under the MIT License.