FiresMap issue with init
This commit is contained in:
vjrj
parent
b6963ff290
commit
fde04bb77f
1 changed files with 124 additions and 122 deletions
|
|
@ -81,19 +81,21 @@ class FiresMap extends React.Component {
|
||||||
|
|
||||||
handleViewportChange(viewport) {
|
handleViewportChange(viewport) {
|
||||||
console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
|
console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
|
||||||
const bounds = this.getMap().getBounds();
|
if (this.fireMap) {
|
||||||
// console.log(bounds);
|
const bounds = this.getMap().getBounds();
|
||||||
mapSize.set([bounds.getNorthEast(), bounds.getSouthWest()]);
|
// console.log(bounds);
|
||||||
store.set('firesmap_center', viewport.center);
|
mapSize.set([bounds.getNorthEast(), bounds.getSouthWest()]);
|
||||||
store.set('firesmap_zoom', viewport.zoom);
|
store.set('firesmap_center', viewport.center);
|
||||||
if (viewport.center === this.state.viewport.center &&
|
store.set('firesmap_zoom', viewport.zoom);
|
||||||
viewport.zoom === this.state.viewport.zoom) {
|
if (viewport.center === this.state.viewport.center &&
|
||||||
// Do nothing, in same point
|
viewport.zoom === this.state.viewport.zoom) {
|
||||||
return;
|
// Do nothing, in same point
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
zoom.set(viewport.zoom);
|
||||||
|
center.set(viewport.center);
|
||||||
|
this.setState({ viewport });
|
||||||
}
|
}
|
||||||
zoom.set(viewport.zoom);
|
|
||||||
center.set(viewport.center);
|
|
||||||
this.setState({ viewport });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
centerOnUserLocation(viewport) {
|
centerOnUserLocation(viewport) {
|
||||||
|
|
@ -149,117 +151,117 @@ class FiresMap extends React.Component {
|
||||||
ref={(divElement) => { this.divElement = divElement; }}
|
ref={(divElement) => { this.divElement = divElement; }}
|
||||||
>
|
>
|
||||||
{ !isHome() &&
|
{ !isHome() &&
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<meta name="description" content={t('Fuegos activos en el mundo actualizados en tiempo real')} />
|
<meta name="description" content={t('Fuegos activos en el mundo actualizados en tiempo real')} />
|
||||||
</Helmet> }
|
</Helmet> }
|
||||||
{this.props.loading || !this.props.subsready ?
|
{this.props.loading || !this.props.subsready ?
|
||||||
<Row className="align-items-center justify-content-center">
|
<Row className="align-items-center justify-content-center">
|
||||||
<Loading />
|
<Loading />
|
||||||
</Row>
|
</Row>
|
||||||
: ''}
|
: ''}
|
||||||
<h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4>
|
<h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs={12} sm={6} md={6} lg={6} >
|
<Col xs={12} sm={6} md={6} lg={6} >
|
||||||
<p className="firesmap-legend">
|
<p className="firesmap-legend">
|
||||||
{ (this.props.activefires.length + this.props.firealerts.length) === 0 ?
|
{ (this.props.activefires.length + this.props.firealerts.length) === 0 ?
|
||||||
<Fragment><Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> <Trans>Datos actualizados <FromNow when={this.props.lastCheck} />.</Trans></Fragment> :
|
<Fragment><Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> <Trans>Datos actualizados <FromNow when={this.props.lastCheck} />.</Trans></Fragment> :
|
||||||
<Fragment><Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length + this.props.firealerts.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans> <Trans>Datos actualizados <FromNow when={this.props.lastCheck} />.</Trans></Fragment>
|
<Fragment><Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length + this.props.firealerts.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans> <Trans>Datos actualizados <FromNow when={this.props.lastCheck} />.</Trans></Fragment>
|
||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
{isNotHomeAndMobile &&
|
{isNotHomeAndMobile &&
|
||||||
<p className="firesmap-legend"><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p> }
|
<p className="firesmap-legend"><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p> }
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={12} sm={6} md={6} lg={6}>
|
<Col xs={12} sm={6} md={6} lg={6}>
|
||||||
{isNotHomeAndMobile &&
|
{isNotHomeAndMobile &&
|
||||||
|
<Fragment>
|
||||||
|
<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) &&
|
||||||
|
<Checkbox inline={false} onClick={e => this.useMarkers(e.target.checked)}>
|
||||||
|
<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
|
||||||
|
</Checkbox>}
|
||||||
|
</Fragment>}
|
||||||
|
<p className="firesmap-note">
|
||||||
|
<em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
|
||||||
|
<Trans>Los fuegos activos se actualizan en tiempo real.</Trans> :
|
||||||
|
<Trans>Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.</Trans>
|
||||||
|
}
|
||||||
|
</em>
|
||||||
|
</p>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{/* https://github.com/CliffCloud/Leaflet.Sleep */}
|
||||||
|
<Map
|
||||||
|
ref={(map) => {
|
||||||
|
this.fireMap = map;
|
||||||
|
this.handleLeafletLoad(map);
|
||||||
|
}}
|
||||||
|
className="firesmap-leaflet-container"
|
||||||
|
animate
|
||||||
|
minZoom={5}
|
||||||
|
center={this.props.center}
|
||||||
|
zoom={this.props.zoom}
|
||||||
|
preferCanvas
|
||||||
|
onClick={this.onClickReset}
|
||||||
|
viewport={this.state.viewport}
|
||||||
|
onViewportChanged={this.onViewportChanged}
|
||||||
|
sleep={isHome() && !isChrome}
|
||||||
|
sleepTime={10750}
|
||||||
|
wakeTime={750}
|
||||||
|
sleepNote
|
||||||
|
hoverToWake={false}
|
||||||
|
wakeMessage={this.props.t('Pulsa para activar')}
|
||||||
|
wakeMessageTouch={this.props.t('Pulsa para activar')}
|
||||||
|
sleepOpacity={0.6}
|
||||||
|
>
|
||||||
|
{/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
|
||||||
|
{!this.props.loading &&
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
|
<FireList
|
||||||
<Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans> (*)
|
t={t}
|
||||||
</Checkbox>
|
history={this.props.history}
|
||||||
{(this.state.viewport.zoom >= MAXZOOM) &&
|
fires={this.props.falsePositives}
|
||||||
<Checkbox inline={false} onClick={e => this.useMarkers(e.target.checked)}>
|
scale={this.state.viewport.zoom >= MAXZOOM}
|
||||||
<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
|
useMarkers={this.state.useMarkers}
|
||||||
</Checkbox>}
|
nasa={false}
|
||||||
</Fragment>}
|
falsePositives
|
||||||
<p className="firesmap-note">
|
/>
|
||||||
<em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
|
<FireList
|
||||||
<Trans>Los fuegos activos se actualizan en tiempo real.</Trans> :
|
t={t}
|
||||||
<Trans>Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.</Trans>
|
history={this.props.history}
|
||||||
}
|
fires={this.props.activefires}
|
||||||
</em>
|
scale={this.state.viewport.zoom >= MAXZOOM}
|
||||||
</p>
|
useMarkers={this.state.useMarkers}
|
||||||
</Col>
|
nasa
|
||||||
</Row>
|
falsePositives={false}
|
||||||
{/* https://github.com/CliffCloud/Leaflet.Sleep */}
|
/>
|
||||||
<Map
|
<FireList
|
||||||
ref={(map) => {
|
t={t}
|
||||||
this.fireMap = map;
|
history={this.props.history}
|
||||||
this.handleLeafletLoad(map);
|
fires={this.props.firealerts}
|
||||||
}}
|
scale={false}
|
||||||
className="firesmap-leaflet-container"
|
useMarkers={this.state.useMarkers}
|
||||||
animate
|
nasa={false}
|
||||||
minZoom={5}
|
falsePositives={false}
|
||||||
center={this.props.center}
|
/>
|
||||||
zoom={this.props.zoom}
|
</Fragment> }
|
||||||
preferCanvas
|
<DefMapLayers />
|
||||||
onClick={this.onClickReset}
|
<Control position="topright" >
|
||||||
viewport={this.state.viewport}
|
<ButtonGroup>
|
||||||
onViewportChanged={this.onViewportChanged}
|
<CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
|
||||||
sleep={isHome() && !isChrome}
|
</ButtonGroup>
|
||||||
sleepTime={10750}
|
</Control>
|
||||||
wakeTime={750}
|
</Map>
|
||||||
sleepNote
|
<Row>
|
||||||
hoverToWake={false}
|
<Col xs={12} sm={12} md={12} lg={12}>
|
||||||
wakeMessage={this.props.t('Pulsa para activar')}
|
<p className="firesmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
|
||||||
wakeMessageTouch={this.props.t('Pulsa para activar')}
|
</Col>
|
||||||
sleepOpacity={0.6}
|
</Row>
|
||||||
>
|
{ !isHome() &&
|
||||||
{/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
|
<ShareIt title={title} />
|
||||||
{!this.props.loading &&
|
}
|
||||||
<Fragment>
|
|
||||||
<FireList
|
|
||||||
t={t}
|
|
||||||
history={this.props.history}
|
|
||||||
fires={this.props.falsePositives}
|
|
||||||
scale={this.state.viewport.zoom >= MAXZOOM}
|
|
||||||
useMarkers={this.state.useMarkers}
|
|
||||||
nasa={false}
|
|
||||||
falsePositives
|
|
||||||
/>
|
|
||||||
<FireList
|
|
||||||
t={t}
|
|
||||||
history={this.props.history}
|
|
||||||
fires={this.props.activefires}
|
|
||||||
scale={this.state.viewport.zoom >= MAXZOOM}
|
|
||||||
useMarkers={this.state.useMarkers}
|
|
||||||
nasa
|
|
||||||
falsePositives={false}
|
|
||||||
/>
|
|
||||||
<FireList
|
|
||||||
t={t}
|
|
||||||
history={this.props.history}
|
|
||||||
fires={this.props.firealerts}
|
|
||||||
scale={false}
|
|
||||||
useMarkers={this.state.useMarkers}
|
|
||||||
nasa={false}
|
|
||||||
falsePositives={false}
|
|
||||||
/>
|
|
||||||
</Fragment> }
|
|
||||||
<DefMapLayers />
|
|
||||||
<Control position="topright" >
|
|
||||||
<ButtonGroup>
|
|
||||||
<CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
|
|
||||||
</ButtonGroup>
|
|
||||||
</Control>
|
|
||||||
</Map>
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} sm={12} md={12} lg={12}>
|
|
||||||
<p className="firesmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{ !isHome() &&
|
|
||||||
<ShareIt title={title} />
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue