132 lines
4.1 KiB
JavaScript
132 lines
4.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Map, TileLayer, Marker, Popup, CircleMarker, Circle} from 'react-leaflet';
|
|
import Leaflet from 'leaflet';
|
|
import { withTracker } from 'meteor/react-meteor-data';
|
|
import { translate, Trans } from 'react-i18next';
|
|
import geolocation from '/imports/startup/client/geolocation';
|
|
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
|
|
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
|
|
import Control from 'react-leaflet-control';
|
|
import { Button } from 'react-bootstrap';
|
|
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
|
|
|
|
const positionIcon = new Leaflet.Icon({
|
|
iconUrl: "/your-position.png",
|
|
/* shadowUrl: require('../public/marker-shadow.png'), */
|
|
iconSize: [50, 77], // size of the icon
|
|
/* shadowSize: [50, 64], // size of the shadow */
|
|
iconAnchor: [25, 82], // point of the icon which will correspond to marker's location
|
|
/* shadowAnchor: [4, 62], // the same for the shadow
|
|
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor*/
|
|
})
|
|
|
|
class SelectionMap extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
center: geolocation.get(),
|
|
marker: geolocation.get(),
|
|
zoom: 11,
|
|
draggable: true,
|
|
modified: false
|
|
};
|
|
// console.log(this.state);
|
|
}
|
|
|
|
componentDidUpdate = () => {
|
|
this.fit();
|
|
}
|
|
|
|
getMap = () => {
|
|
return this.refs.selectionMap.leafletElement;
|
|
}
|
|
|
|
toggleDraggable = () => {
|
|
this.setState({ draggable: !this.state.draggable })
|
|
}
|
|
|
|
updatePosition = () => {
|
|
const { lat, lng } = this.refs.marker.leafletElement.getLatLng()
|
|
this.setState({
|
|
marker: [ lat, lng ],
|
|
modified: true
|
|
});
|
|
}
|
|
|
|
fit() {
|
|
// console.log("fit!");
|
|
this.getMap().fitBounds(this.refs.distanceCircle.leafletElement.getBounds(), [70, 70]);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.addScale();
|
|
}
|
|
|
|
addScale = () => {
|
|
// https://www.npmjs.com/package/leaflet-graphicscale
|
|
const map = this.getMap();
|
|
var options = {
|
|
fill: 'fill',
|
|
showSubunits: true,
|
|
}
|
|
var graphicScale = L.control.graphicScale([options]).addTo(map);
|
|
}
|
|
|
|
doSubs = (event) => {
|
|
console.log(event);
|
|
}
|
|
|
|
render() {
|
|
this.state.center = !this.state.modified && this.props.lat?
|
|
[this.props.lat, this.props.lng]: this.state.center;
|
|
this.state.marker = !this.state.modified && this.props.lat?
|
|
[this.props.lat, this.props.lng]: this.state.marker;
|
|
this.state.distance = this.props.distance;
|
|
this.state.modified = false;
|
|
return (
|
|
<div>
|
|
{ this.state && this.state.center &&
|
|
<Map center={this.state.center} zoom={this.state.zoom} ref="selectionMap">
|
|
<TileLayer
|
|
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
<Marker
|
|
draggable={this.state.draggable}
|
|
onDragend={this.updatePosition}
|
|
position={this.state.marker}
|
|
icon={positionIcon}
|
|
title={this.props.t("Arrastrar para seleccionar otro punto")}
|
|
ref="marker">
|
|
</Marker>
|
|
<CircleMarker
|
|
center={this.state.marker} color="red"
|
|
stroke={false}
|
|
fillOpacity="1"
|
|
fill={true}
|
|
radius={3} />
|
|
<Circle center={this.state.marker}
|
|
ref="distanceCircle"
|
|
color="#145A32"
|
|
fillColor="green"
|
|
fillOpacity={.1}
|
|
radius={this.state.distance * 1000} />
|
|
<Control position="topright" >
|
|
<Button bsStyle="success" onClick={this.doSubs}>
|
|
{this.props.t("Subscribirme a fuegos en este rádio")}
|
|
</Button>
|
|
</Control>
|
|
</Map> }
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
SelectionMap.propTypes = {
|
|
lat: PropTypes.number,
|
|
lng: PropTypes.number,
|
|
distance: PropTypes.number
|
|
};
|
|
|
|
export default translate([], { wait: true })(SelectionMap);
|