Commit 86b295b8 authored by Estelle Veisemburger's avatar Estelle Veisemburger
Browse files

feat(Map): Add Legend

parent db6d5feb
......@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
import ReactMapboxGl, { Feature, Layer, Popup } from "react-mapbox-gl";
import { makeStyles, useTheme } from "@material-ui/styles";
import UnivMapPopup from "./UnivMapPopup";
import Legend from "./Legend";
const Map = ReactMapboxGl({
dragRotate: false,
......@@ -21,6 +22,13 @@ const useStyles = makeStyles(theme => ({
[theme.breakpoints.down("md")]: {
height: "60vh"
}
},
legend: {
position: "absolute",
top: 0,
left: 0,
zIndex: 9999999999,
padding: theme.spacing(0.5)
}
}));
......@@ -112,25 +120,30 @@ function BaseMap({ id, campuses }) {
}
return (
<Map
style={`/map-server/styles/${style}/style.json`}
className={classes.mapContainer}
zoom={mapStatus.zoom}
center={mapStatus.center}
onMoveEnd={saveStatus}
>
{campuses && (
<>
{renderLayer(true)}
{renderLayer(false)}
</>
)}
{popup && (
<Popup key={popup.univId} coordinates={[popup.lon, popup.lat]}>
<UnivMapPopup {...popup} handleClose={closePopup} />
</Popup>
)}
</Map>
<div style={{ position: "relative" }}>
<Map
style={`/map-server/styles/${style}/style.json`}
className={classes.mapContainer}
zoom={mapStatus.zoom}
center={mapStatus.center}
onMoveEnd={saveStatus}
>
{campuses && (
<>
{renderLayer(true)}
{renderLayer(false)}
</>
)}
{popup && (
<Popup key={popup.univId} coordinates={[popup.lon, popup.lat]}>
<UnivMapPopup {...popup} handleClose={closePopup} />
</Popup>
)}
</Map>
<div className={classes.legend}>
<Legend />
</div>
</div>
);
}
......
import React from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconAdd from "@material-ui/icons/Add";
import IconClose from "@material-ui/icons/Close";
import { Link } from "react-router-dom";
import { makeStyles, useTheme } from "@material-ui/styles";
import MyCardMedia from "./MyCardMedia";
import APP_ROUTES from "../../config/appRoutes";
function LegendItem({ color, opacity, label }) {
const theme = useTheme();
const size = theme.typography.caption.fontSize;
return (
<div style={{ display: "flex", alignItems: "center" }}>
<div
style={{
backgroundColor: color,
borderRadius: size,
width: size,
height: size,
marginRight: theme.spacing(0.5)
}}
/>
<Typography variant="caption">{label}</Typography>
</div>
);
}
LegendItem.propTypes = {
color: PropTypes.string.isRequired,
opacity: PropTypes.number.isRequired,
label: PropTypes.string.isRequired
};
LegendItem.defaultProps = {
opacity: 1,
label: "toto"
};
/**
* Custom component to create the legend on the map
*/
function Legend({}) {
const theme = useTheme();
const color = theme.palette.primary.main;
const color2 = theme.palette.action.disabled;
return (
<div style={{ padding: theme.spacing(1), backgroundColor: "white" }}>
<LegendItem color={color} label="actif" />
<LegendItem color={color2} label="inactif" />
</div>
);
}
Legend.propTypes = {};
Legend.defaultProps = {};
const styles = {};
export default Legend;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment