Unverified Commit 820a7491 authored by Gautier D's avatar Gautier D Committed by Florent Chehab
Browse files

refacto(backend): modify main map

parent a3ad5631
...@@ -49,7 +49,8 @@ const ALL_MAPS = {}; ...@@ -49,7 +49,8 @@ const ALL_MAPS = {};
* *
* If an id is provided, the state of the map will be automatically saved and regenerated. * If an id is provided, the state of the map will be automatically saved and regenerated.
*/ */
function BaseMap({ id, campuses }) { function BaseMap({ id, universities }) {
console.log("iciciciiojoij", universities);
const theme = useTheme(); const theme = useTheme();
const classes = useStyles(); const classes = useStyles();
...@@ -68,7 +69,7 @@ function BaseMap({ id, campuses }) { ...@@ -68,7 +69,7 @@ function BaseMap({ id, campuses }) {
[id, ALL_MAPS] [id, ALL_MAPS]
); );
const openPopup = useCallback(campusInfo => setPopup(campusInfo), []); const openPopup = useCallback(universityInfo => setPopup(universityInfo), []);
const closePopup = useCallback(() => setPopup(undefined), []); const closePopup = useCallback(() => setPopup(undefined), []);
const toggleHover = useCallback((mapInstance, cursor) => { const toggleHover = useCallback((mapInstance, cursor) => {
...@@ -81,21 +82,24 @@ function BaseMap({ id, campuses }) { ...@@ -81,21 +82,24 @@ function BaseMap({ id, campuses }) {
return ( return (
<Layer <Layer
type="circle" type="circle"
id={`campuses${selected ? "selected" : "notSelected"}`} id={`universities${selected ? "selected" : "notSelected"}`}
paint={{ paint={{
"circle-color": getLegendColorOpacity(theme, selected).color, "circle-color": getLegendColorOpacity(theme, selected).color,
"circle-opacity": getLegendColorOpacity(theme, selected).opacity, "circle-opacity": getLegendColorOpacity(theme, selected).opacity,
"circle-radius": 8 "circle-radius": 8
}} }}
> >
{campuses {universities
.filter(c => c.selected === selected) .filter(c => c.selected === selected)
.map((campusInfo, idx) => ( .map((universityInfo, idx) => (
<Feature <Feature
// eslint-disable-next-line react/no-array-index-key // eslint-disable-next-line react/no-array-index-key
key={idx} key={idx}
coordinates={[campusInfo.lon, campusInfo.lat]} coordinates={[
onClick={() => openPopup(campusInfo)} universityInfo.main_campus_lon,
universityInfo.main_campus_lat
]}
onClick={() => openPopup(universityInfo)}
onMouseEnter={({ map }) => toggleHover(map, "pointer")} onMouseEnter={({ map }) => toggleHover(map, "pointer")}
onMouseLeave={({ map }) => toggleHover(map, "")} onMouseLeave={({ map }) => toggleHover(map, "")}
/> />
...@@ -103,7 +107,7 @@ function BaseMap({ id, campuses }) { ...@@ -103,7 +107,7 @@ function BaseMap({ id, campuses }) {
</Layer> </Layer>
); );
}, },
[campuses, theme] [universities, theme]
); );
const style = theme.palette.type === "light" ? "light" : "dark"; const style = theme.palette.type === "light" ? "light" : "dark";
...@@ -118,6 +122,7 @@ function BaseMap({ id, campuses }) { ...@@ -118,6 +122,7 @@ function BaseMap({ id, campuses }) {
} }
return ( return (
<div style={{ position: "relative" }}> <div style={{ position: "relative" }}>
<Map <Map
style={`/map-server/styles/${style}/style.json`} style={`/map-server/styles/${style}/style.json`}
...@@ -126,14 +131,14 @@ function BaseMap({ id, campuses }) { ...@@ -126,14 +131,14 @@ function BaseMap({ id, campuses }) {
center={mapStatus.center} center={mapStatus.center}
onMoveEnd={saveStatus} onMoveEnd={saveStatus}
> >
{campuses && ( {universities && (
<> <>
{renderLayer(true)} {renderLayer(true)}
{renderLayer(false)} {renderLayer(false)}
</> </>
)} )}
{popup && ( {popup && (
<Popup key={popup.univId} coordinates={[popup.lon, popup.lat]}> <Popup key={popup.univId} coordinates={[popup.main_campus_lon, popup.main_campus_lat]}>
<UnivMapPopup {...popup} handleClose={closePopup} /> <UnivMapPopup {...popup} handleClose={closePopup} />
</Popup> </Popup>
)} )}
...@@ -147,12 +152,12 @@ function BaseMap({ id, campuses }) { ...@@ -147,12 +152,12 @@ function BaseMap({ id, campuses }) {
BaseMap.propTypes = { BaseMap.propTypes = {
id: PropTypes.string, id: PropTypes.string,
campuses: PropTypes.array universities: PropTypes.array
}; };
BaseMap.defaultProps = { BaseMap.defaultProps = {
id: undefined, id: undefined,
campuses: undefined universities: undefined
}; };
export default BaseMap; export default BaseMap;
...@@ -28,8 +28,8 @@ function MainMap() { ...@@ -28,8 +28,8 @@ function MainMap() {
univLogoUrl: univ.logo, univLogoUrl: univ.logo,
cityName: univ.city, cityName: univ.city,
countryName: univ.country, countryName: univ.country,
lat: parseFloat(univ.main_campus_lat), main_campus_lat: parseFloat(univ.main_campus_lat),
lon: parseFloat(univ.main_campus_lon), main_campus_lon: parseFloat(univ.main_campus_lon),
univId: univ.id, univId: univ.id,
selected: selected:
listUnivSel === null || listUnivSel === null ||
......
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