comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved firesmap

Browse source
This commit is contained in:
vjrj 2017-12-15 17:43:45 +01:00
parent 4c5aef6e4f
commit 56a7468ae3
7 changed files with 214 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

20
imports/ui/components/Maps/FireList.js
View file

@ -11,15 +11,17 @@ export default function FireList(props) {
const {
fires, scale, useMarkers, nasa
} = props;
const items = fires.map(({ _id, ...otherProps }) => {
if (useMarkers && scale) {
return (<FireIconMark key={_id} nasa={nasa} {...otherProps} />);
}
if (!nasa && !scale) {
return (<FirePixel key={_id} nasa={nasa} {...otherProps} />);
}
return (<FireCircleMark key={_id} nasa={nasa} {...otherProps} />);
});
const useMarks = useMarkers && scale;
const usePixel = !nasa || !scale;
/* console.log(`Using marks: ${useMarks}, using pixels: ${usePixel}`); */
let items;
if (useMarks) {
items = fires.map(({ _id, ...otherProps }) => (<FireIconMark key={_id} nasa={nasa} {...otherProps} />));
} else if (usePixel) {
items = fires.map(({ _id, ...otherProps }) => (<FirePixel key={_id} nasa={nasa} {...otherProps} />));
} else {
items = fires.map(({ _id, ...otherProps }) => (<FireCircleMark key={_id} nasa={nasa} {...otherProps} />));
}
return (<div style={{ display: 'none' }}>{items}</div>);
}

11
imports/ui/components/Maps/FirePixel.js
View file

@ -1,10 +1,19 @@
/* eslint-disable react/jsx-indent-props */
import React from 'react';
import { CircleMarker } from 'react-leaflet';
import PropTypes from 'prop-types';
/* Less acurate (1 pixel per fire) but faster */
const FirePixel = ({ lat, lon, nasa }) => (
<CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={2} />
<CircleMarker
center={[lat, lon]}
color={nasa ? 'red' : '#D35400'}
stroke={false}
fillOpacity="1"
fill
radius={nasa ? 1 : 2}
/>
);

62
imports/ui/components/Navigation/Navigation.js
View file

@ -13,38 +13,38 @@ import './Navigation.scss';
const Navigation = props => (
<nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div className="container">
{/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
{/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
<Navbar.Header>
<Navbar.Brand>
<Link to="/">{props.t('AppNameFull')}</Link>
</Navbar.Brand>
{/* <Navbar.Toggle/> */}
<button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
{/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
{/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
<Navbar.Header>
<Navbar.Brand>
<Link to="/">{props.t('AppNameFull')}</Link>
</Navbar.Brand>
{/* <Navbar.Toggle/> */}
<button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
</Navbar.Header>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
</Navbar.Header>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
{/* <Navbar.Collapse> */}
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ml-auto ">
{/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
<NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
</LinkContainer> */}
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
<NavItem eventKey={1.2} href="/subscriptions">
{props.authenticated ? <Trans>Mis alertas</Trans>:<Trans>Participar</Trans>}
</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
<NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
</LinkContainer>
</ul>
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
{/* </Navbar.Collapse> */}
</div>
{/* <Navbar.Collapse> */}
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ml-auto ">
{/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
<NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
</LinkContainer> */}
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
<NavItem eventKey={1.2} href="/subscriptions">
{props.authenticated ? <Trans>Mis alertas</Trans> : <Trans>Participar</Trans>}
</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
<NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
</LinkContainer>
</ul>
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
{/* </Navbar.Collapse> */}
</div>
</div>
</nav>
);