refacto(backend): modify main map

frontend/src/components/map/BaseMap.jsx

@@ -49,7 +49,8 @@ const ALL_MAPS = {};
  *
  * 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 classes = useStyles();
 
@@ -68,7 +69,7 @@ function BaseMap({ id, campuses }) {
     [id, ALL_MAPS]
   );
 
-  const openPopup = useCallback(campusInfo => setPopup(campusInfo), []);
+  const openPopup = useCallback(universityInfo => setPopup(universityInfo), []);
   const closePopup = useCallback(() => setPopup(undefined), []);
 
   const toggleHover = useCallback((mapInstance, cursor) => {
@@ -81,21 +82,24 @@ function BaseMap({ id, campuses }) {
       return (
         <Layer
           type="circle"
-          id={`campuses${selected ? "selected" : "notSelected"}`}
+          id={`universities${selected ? "selected" : "notSelected"}`}
           paint={{
             "circle-color": getLegendColorOpacity(theme, selected).color,
             "circle-opacity": getLegendColorOpacity(theme, selected).opacity,
             "circle-radius": 8
           }}
         >
-          {campuses
+          {universities
             .filter(c => c.selected === selected)
-            .map((campusInfo, idx) => (
+            .map((universityInfo, idx) => (
               <Feature
                 // eslint-disable-next-line react/no-array-index-key
                 key={idx}
-                coordinates={[campusInfo.lon, campusInfo.lat]}
-                onClick={() => openPopup(campusInfo)}
+                coordinates={[
+                  universityInfo.main_campus_lon,
+                  universityInfo.main_campus_lat
+                ]}
+                onClick={() => openPopup(universityInfo)}
                 onMouseEnter={({ map }) => toggleHover(map, "pointer")}
                 onMouseLeave={({ map }) => toggleHover(map, "")}
               />
@@ -103,7 +107,7 @@ function BaseMap({ id, campuses }) {
         </Layer>
       );
     },
-    [campuses, theme]
+    [universities, theme]
   );
 
   const style = theme.palette.type === "light" ? "light" : "dark";
@@ -118,6 +122,7 @@ function BaseMap({ id, campuses }) {
   }
 
   return (
+
     <div style={{ position: "relative" }}>
       <Map
         style={`/map-server/styles/${style}/style.json`}
@@ -126,14 +131,14 @@ function BaseMap({ id, campuses }) {
         center={mapStatus.center}
         onMoveEnd={saveStatus}
       >
-        {campuses && (
+        {universities && (
           <>
             {renderLayer(true)}
             {renderLayer(false)}
           </>
         )}
         {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} />
           </Popup>
         )}
@@ -147,12 +152,12 @@ function BaseMap({ id, campuses }) {
 
 BaseMap.propTypes = {
   id: PropTypes.string,
-  campuses: PropTypes.array
+  universities: PropTypes.array
 };
 
 BaseMap.defaultProps = {
   id: undefined,
-  campuses: undefined
+  universities: undefined
 };
 
 export default BaseMap;

frontend/src/components/map/MainMap.jsx

@@ -28,8 +28,8 @@ function MainMap() {
           univLogoUrl: univ.logo,
           cityName: univ.city,
           countryName: univ.country,
-          lat: parseFloat(univ.main_campus_lat),
-          lon: parseFloat(univ.main_campus_lon),
+          main_campus_lat: parseFloat(univ.main_campus_lat),
+          main_campus_lon: parseFloat(univ.main_campus_lon),
           univId: univ.id,
           selected:
             listUnivSel === null ||