Refactorization in FiresMap
This commit is contained in:
vjrj
parent
81a0a4a61c
commit
d0fe62a66a
1 changed files with 39 additions and 49 deletions
|
|
@ -27,34 +27,26 @@ import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'
|
|||
import './FiresMap.scss';
|
||||
|
||||
const MAXZOOM = 6;
|
||||
const DEF_LAT = 35.159028;
|
||||
const DEF_LNG = -46.738057;
|
||||
const DEFAULT_VIEWPORT = {
|
||||
center: [DEF_LAT, DEF_LNG], // a point in the sea
|
||||
zoom: 8
|
||||
};
|
||||
const zoom = new ReactiveVar(8);
|
||||
const lat = new ReactiveVar(DEF_LAT);
|
||||
const lng = new ReactiveVar(DEF_LNG);
|
||||
const height = new ReactiveVar(400);
|
||||
const width = new ReactiveVar(400);
|
||||
const lat = new ReactiveVar();
|
||||
const lng = new ReactiveVar();
|
||||
const height = new ReactiveVar();
|
||||
const width = new ReactiveVar();
|
||||
|
||||
class FiresMap extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
viewport: DEFAULT_VIEWPORT,
|
||||
modified: false,
|
||||
viewport: this.props.viewport,
|
||||
useMarkers: false,
|
||||
showSubsUnion: true
|
||||
};
|
||||
this.unionGroup = new L.LayerGroup();
|
||||
const self = this;
|
||||
// viewportchange
|
||||
// https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js
|
||||
this.debounceView = _.debounce((viewport) => {
|
||||
self.handleViewportChange(viewport);
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
this.onViewportChanged = this.onViewportChanged.bind(this);
|
||||
}
|
||||
|
||||
|
|
@ -77,35 +69,15 @@ class FiresMap extends React.Component {
|
|||
return this.fireMap.leafletElement;
|
||||
}
|
||||
|
||||
handleViewportChange(viewport) {
|
||||
console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
|
||||
zoom.set(viewport.zoom);
|
||||
lat.set(viewport.center[0]);
|
||||
lng.set(viewport.center[1]);
|
||||
this.setState({ viewport, modified: true });
|
||||
/* this.state.viewport = viewport;
|
||||
* this.state.modified = true; */
|
||||
if (this.props.subsready && this.fireMap) {
|
||||
this.showSubsUnion(this.state.showSubsUnion);
|
||||
}
|
||||
}
|
||||
|
||||
centerOnUserLocation(viewport) {
|
||||
this.handleViewportChange(viewport);
|
||||
}
|
||||
|
||||
useMarkers(use) {
|
||||
/* this.setState({ userMarkers: use });*/
|
||||
this.state.useMarkers = use;
|
||||
// this.forceUpdate();
|
||||
setShowSubsUnion(show) {
|
||||
this.setState({ showSubsUnion: show });
|
||||
this.showSubsUnion(show);
|
||||
}
|
||||
|
||||
showSubsUnion(show) {
|
||||
// this.setState({ showSubsUnion: show });
|
||||
this.state.showSubsUnion = show;
|
||||
const map = this.getMap();
|
||||
// http://leafletjs.com/reference-1.2.0.html#layergroup
|
||||
const self = this;
|
||||
const unionGroup = new L.LayerGroup();
|
||||
|
||||
if (this.union) {
|
||||
map.removeLayer(this.union);
|
||||
|
|
@ -118,9 +90,9 @@ class FiresMap extends React.Component {
|
|||
};
|
||||
UserSubsToFiresCollection.find().forEach((subs) => {
|
||||
const circle = LGeo.circle([subs.lat, subs.lon], subs.distance * 1000, copts);
|
||||
circle.addTo(self.unionGroup);
|
||||
circle.addTo(unionGroup);
|
||||
});
|
||||
this.union = unify(self.unionGroup.getLayers());
|
||||
this.union = unify(unionGroup.getLayers());
|
||||
this.union.setStyle({
|
||||
color: '#145A32',
|
||||
fillColor: 'green',
|
||||
|
|
@ -130,6 +102,29 @@ class FiresMap extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleViewportChange(viewport) {
|
||||
console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
|
||||
zoom.set(viewport.zoom);
|
||||
lat.set(viewport.center[0]);
|
||||
lng.set(viewport.center[1]);
|
||||
this.setState({ viewport });
|
||||
/* this.state.viewport = viewport;
|
||||
* this.state.modified = true; */
|
||||
if (this.props.subsready && this.fireMap) {
|
||||
this.showSubsUnion(this.state.showSubsUnion);
|
||||
}
|
||||
}
|
||||
|
||||
centerOnUserLocation(viewport) {
|
||||
this.handleViewportChange(viewport);
|
||||
}
|
||||
|
||||
useMarkers(use) {
|
||||
this.setState({ useMarkers: use });
|
||||
// this.state.useMarkers = use;
|
||||
// this.forceUpdate();
|
||||
}
|
||||
|
||||
addScale() {
|
||||
// https://www.npmjs.com/package/leaflet-graphicscale
|
||||
const map = this.getMap();
|
||||
|
|
@ -141,13 +136,11 @@ class FiresMap extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
this.state.viewport = !this.state.modified && this.props.viewport && Array.isArray(this.props.viewport.center)? this.props.viewport: this.state.viewport;
|
||||
|
||||
if (this.props.subsready && this.fireMap) {
|
||||
// Show union of users
|
||||
this.showSubsUnion(this.state.showSubsUnion);
|
||||
}
|
||||
|
||||
console.log('Rendering map');
|
||||
return (
|
||||
/* Large number of markers:
|
||||
https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
|
||||
|
|
@ -171,7 +164,7 @@ class FiresMap extends React.Component {
|
|||
<p><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p>
|
||||
</Col>
|
||||
<Col xs={12} sm={6} md={6} lg={6}>
|
||||
<Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.showSubsUnion(e.target.checked)}>
|
||||
<Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
|
||||
<Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans> (*)
|
||||
</Checkbox>
|
||||
{(this.state.viewport.zoom >= MAXZOOM) &&
|
||||
|
|
@ -186,7 +179,7 @@ class FiresMap extends React.Component {
|
|||
<Map
|
||||
ref={(map) => { this.fireMap = map; }}
|
||||
animate
|
||||
minZoom={5}
|
||||
minZoom={4}
|
||||
preferCanvas
|
||||
onClick={this.onClickReset}
|
||||
viewport={this.state.viewport}
|
||||
|
|
@ -239,9 +232,6 @@ FiresMap.propTypes = {
|
|||
export default translate([], { wait: true })(withTracker(() => {
|
||||
let subscription;
|
||||
Meteor.autorun(() => {
|
||||
// Subscribe for the current templateId (only if one is selected). Note this
|
||||
// will automatically clean up any previously subscribed data and it will
|
||||
// also stop all subscriptions when this template is destroyed.
|
||||
if (geolocation.get()) {
|
||||
lat.set(geolocation.get()[0]);
|
||||
lng.set(geolocation.get()[1]);
|
||||
|
|
@ -256,7 +246,7 @@ export default translate([], { wait: true })(withTracker(() => {
|
|||
Meteor.subscribe('fireAlerts');
|
||||
const userSubs = Meteor.subscribe('userSubsToFires');
|
||||
// const subscription = Meteor.subscribe('activefiresmyloc', zoom.get());
|
||||
// console.log(`Active fires ${ActiveFiresCollection.find().fetch().length} of ${Counter.get('countActiveFires')}`);
|
||||
console.log(`Active fires ${ActiveFiresCollection.find().fetch().length} of ${Counter.get('countActiveFires')}`);
|
||||
// console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`);
|
||||
// console.log(UserSubsToFiresCollection.find().fetch());
|
||||
return {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue