diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js index ffbf2f2..b75d26b 100644 --- a/imports/ui/pages/FiresMap/FiresMap.js +++ b/imports/ui/pages/FiresMap/FiresMap.js @@ -41,6 +41,8 @@ const MAXZOOMREACTIVE = 6; const zoom = new ReactiveVar(8); const center = new ReactiveVar([0, 0]); const mapSize = new ReactiveVar(); +const marks = new ReactiveVar(false); +const showUnion = new ReactiveVar(true); // Remove map in subscription class FiresMap extends React.Component { @@ -51,9 +53,11 @@ class FiresMap extends React.Component { center: props.center, zoom: props.zoom }, - useMarkers: false, + // init: true, + useMarkers: props.marks, scaleAdded: false, - showSubsUnion: true + moving: false, + showSubsUnion: props.showUnion }; const self = this; // viewportchange @@ -62,12 +66,43 @@ class FiresMap extends React.Component { self.handleViewportChange(viewport); }, 1500); this.onViewportChanged = this.onViewportChanged.bind(this); + this.onMoveEnd = this.onMoveEnd.bind(this); + this.onMoveStart = this.onMoveStart.bind(this); } componentDidMount() { } + /* shouldComponentUpdate(nextProps, nextState) { + * const notMoving = !nextState.moving; + * const markersChanged = this.state.useMarkers !== nextState.useMarkers; + * const unionChanged = this.state.showSubsUnion !== nextState.showSubsUnion; + * const otherViewport = this.state.viewport !== nextState.viewport; + * // const init = nextState.viewport.center === [0, 0]; + * // console.log(notMoving ? 'Not moving map' : 'Moving map'); + * // console.log(otherViewport ? 'Other viewport' : 'Not other viewport'); + * console.log(`${otherViewport ? 'OTHER' : 'Not other'} viewport ${nextState.viewport.center} zoom: ${nextState.viewport.zoom}`); + * return this.state.init || (notMoving && otherViewport && this.state.moved) || unionChanged || markersChanged; + * } + */ + + shouldComponentUpdate(nextProps, nextState) { + const notMoving = !nextState.moving; + return notMoving; + } + + onMoveStart() { + // this.setState({ moving: true }); + this.state.moving = true; + } + + onMoveEnd() { + // this.setState({ moving: false }); + this.state.moving = false; + } + onViewportChanged(viewport) { + this.debounceView.cancel(); this.debounceView(viewport); } @@ -77,6 +112,11 @@ class FiresMap extends React.Component { setShowSubsUnion(showSubsUnion) { this.setState({ showSubsUnion }); + store.set('firesmap_showunion', showSubsUnion); + } + + componentDidUnMount() { + // this.setState({ init: true }); } handleViewportChange(viewport) { @@ -94,7 +134,8 @@ class FiresMap extends React.Component { } zoom.set(viewport.zoom); center.set(viewport.center); - this.setState({ viewport }); + // this.setState({ viewport }); + this.state.viewport = viewport; } } @@ -104,6 +145,7 @@ class FiresMap extends React.Component { useMarkers(use) { this.setState({ useMarkers: use }); + store.set('firesmap_marks', use); } addScale(map) { @@ -116,7 +158,7 @@ class FiresMap extends React.Component { } handleLeafletLoad(map) { - if (map && map.leafletElement) { + if (map && map.leafletElement && !this.state.moving) { const lmap = map.leafletElement; try { const bounds = lmap.getBounds(); @@ -179,7 +221,7 @@ class FiresMap extends React.Component { Resaltar en verde el área vigilada por nuestros usuarios/as (*) {(this.state.viewport.zoom >= MAXZOOM) && - this.useMarkers(e.target.checked)}> + this.useMarkers(e.target.checked)}> Resaltar los fuegos con un marcador } } @@ -201,13 +243,16 @@ class FiresMap extends React.Component { className="firesmap-leaflet-container" animate minZoom={5} - center={this.props.center} - zoom={this.props.zoom} + center={this.state.viewport.center} + zoom={this.state.viewport.zoom} preferCanvas - onClick={this.onClickReset} viewport={this.state.viewport} onViewportChanged={this.onViewportChanged} sleep={isHome() && !isChrome} + onMoveend={this.onMoveEnd} + onMovestart={this.onMoveStart} + onZoomend={this.onMoveEnd} + onZoomstart={this.onMoveStart} sleepTime={10750} wakeTime={750} sleepNote @@ -279,24 +324,33 @@ FiresMap.propTypes = { activefirestotal: PropTypes.number.isRequired, center: PropTypes.arrayOf(PropTypes.number), zoom: PropTypes.number, + marks: PropTypes.bool.isRequired, + showUnion: PropTypes.bool.isRequired, history: PropTypes.object.isRequired, t: PropTypes.func.isRequired }; -let init = true; +let geoInit = true; export default translate([], { wait: true })(withTracker(() => { let subscription; const centerStored = store.get('firesmap_center'); const zoomStored = store.get('firesmap_zoom'); + const marksStored = store.get('firesmap_marks'); + const showUnionStored = store.get('firesmap_showunion'); zoom.set(zoomStored || 8); - + if (typeof marksStored === 'boolean') { + marks.set(marksStored); + } + if (typeof showUnionStored === 'boolean') { + showUnion.set(showUnionStored); + } Meteor.autorun(() => { - if ((centerStored || geolocation.get()) && init) { + if ((centerStored || geolocation.get()) && geoInit) { center.set(centerStored || geolocation.get()); // console.log(`Geolocation ${geolocation.get()}`); - init = false; + geoInit = false; } if (mapSize.get() && mapSize.get()[0].lng && mapSize.get()[1].lat) { subscription = Meteor.subscribe( @@ -342,6 +396,8 @@ export default translate([], { wait: true })(withTracker(() => { falsePositives, lastCheck: lastCheck ? lastCheck.value : null, center: center.get(), + marks: marks.get(), + showUnion: showUnion.get(), zoom: zoom.get() }; })(FiresMap));