Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Rex Dri
Rex Dri
Commits
86b295b8
Commit
86b295b8
authored
Apr 17, 2020
by
Estelle Veisemburger
Browse files
feat(Map): Add Legend
parent
db6d5feb
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/map/BaseMap.jsx
View file @
86b295b8
...
...
@@ -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
>
);
}
...
...
frontend/src/components/map/Legend.jsx
0 → 100644
View file @
86b295b8
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
;
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment