-
-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat project details map component (#926)
* feat (projectDetails): map - for small screen, full screen map visible(only map visible) * feat (projectDetails): map - footer added to the map * fix (MobileFooter) - border top added * feat (bottomSheet): bottomSheet component made for mobile device * feat (projectDetails): activities - bottomSheet made for activities * feat (projectDetails): project info - added bottom sheet for project information for small screen * feat (projectDetails) - fmtm logo and back button added for small screen * fix (Accordion): interface added to props * feat/fix (projectDetails): projectDetails component projectOption section splitted to projectOption component. projectOptions added for others bottomSheet * fix (projectDetails): bottomSheet - converted css to tailwind css, converted dom manipulation to react states * fix (projectDetails): map - mapcontrols button gap reduced for small screens * fix (bottomSheet): fmtm logo move bottom sheet expand/contract * fix (projectDetails): margins/paddings updated for mobile view * feat(icons): added new icon * fix (console): console logs removed * fix (project details): displaying map using map component * fix (project details): MapControl - component to display map controls * fix (projectDetails): UI updated for new project details map * fix (newProjectDetails): map - vectorLayer added for buildings * fix (vectorLayer): map onClick returns feature as a second argument * fix (newProjectDetials): changes in creating geojson * fix (newProjectDetail): map - chloropeth and styles added * fix *(newProjectDetails): map - defaultStyles imported, naming changes * feat (newProjectDetails): map - setting layer style according to the task status * feat (vectorLayer/newProjectDetials): layerProperties props added to vectorLayer * fix (newProjectDetails): map - buildingStyles added * fix (mobileFooter/bottomSheet): zIndex adjusted * (newProjectDetails): mapLegends added for small screen * fix (accordion): border width 0 on accordion collapse * fix (mapLegend): header not shown medium & large devices * fix (newProjectDetails): mapLegend - mapLegend added to devices bigger than small * fix (newProjectDetails): mapControlComponent - hover effects added to buttons * fix (newProjectDetials): imports and states cleanup * fix (newProjectDetials): added taskBoundries length as a dependency to prevent rerendering * fix (newProjectDetails): mapLegend - default legend collapsed * fix (projectDetails): route - projectDetails route updated * fix (projectDetails): taskSectionPopup - zIndex adjusted
- Loading branch information
Showing
15 changed files
with
714 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
src/frontend/src/components/ProjectDetails/MapControlComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import AssetModules from '../../shared/AssetModules'; | ||
| import { transform } from 'ol/proj'; | ||
| import * as ol from 'ol'; | ||
| import { Point } from 'ol/geom'; | ||
| import Vector from 'ol/layer/Vector'; | ||
| import VectorSource from 'ol/source/Vector'; | ||
| import { Style } from 'ol/style'; | ||
| import { Icon } from 'ol/style'; | ||
| import LocationImage from '../../assets/images/location.png'; | ||
| import VectorLayer from 'ol/layer/Vector'; | ||
|
|
||
| const MapControlComponent = ({ map }) => { | ||
| const btnList = [ | ||
| { | ||
| id: 'add', | ||
| icon: <AssetModules.AddIcon />, | ||
| }, | ||
| { | ||
| id: 'minus', | ||
| icon: <AssetModules.RemoveIcon />, | ||
| }, | ||
| { | ||
| id: 'currentLocation', | ||
| icon: <AssetModules.MyLocationIcon />, | ||
| }, | ||
| { | ||
| id: 'taskBoundries', | ||
| icon: <AssetModules.CropFreeIcon />, | ||
| }, | ||
| ]; | ||
| const [toggleCurrentLoc, setToggleCurrentLoc] = useState(false); | ||
| const [currentLocLayer, setCurrentLocLayer] = useState(null); | ||
| useEffect(() => { | ||
| if (!map) return; | ||
| if (!currentLocLayer) return; | ||
| map.addLayer(currentLocLayer); | ||
| map.getView().fit(currentLocLayer.getSource().getExtent(), { | ||
| maxZoom: 18, | ||
| duration: 500, | ||
| }); | ||
| return () => { | ||
| map.removeLayer(currentLocLayer); | ||
| }; | ||
| }, [map, currentLocLayer]); | ||
| const handleOnClick = (btnId) => { | ||
| if (btnId === 'add') { | ||
| const actualZoom = map.getView().getZoom(); | ||
| map.getView().setZoom(actualZoom + 1); | ||
| } else if (btnId === 'minus') { | ||
| const actualZoom = map.getView().getZoom(); | ||
| map.getView().setZoom(actualZoom - 1); | ||
| } else if (btnId === 'currentLocation') { | ||
| setToggleCurrentLoc(!toggleCurrentLoc); | ||
| const sourceProjection = 'EPSG:4326'; // The current projection of the coordinates | ||
| const targetProjection = 'EPSG:3857'; // The desired projection | ||
| var markerStyle = new Style({ | ||
| image: new Icon({ | ||
| src: LocationImage, // Path to your marker icon image | ||
| anchor: [0.5, 1], // Anchor point of the marker icon (center bottom) | ||
| scale: 2, // Scale factor for the marker icon | ||
| }), | ||
| }); | ||
| if ('geolocation' in navigator) { | ||
| if (!toggleCurrentLoc) { | ||
| navigator.geolocation.getCurrentPosition((position) => { | ||
| const lat = position.coords.latitude; | ||
| const lng = position.coords.longitude; | ||
| const convertedCoordinates = transform([lng, lat], sourceProjection, targetProjection); | ||
| const positionFeature = new ol.Feature(new Point(convertedCoordinates)); | ||
| const positionLayer = new Vector({ | ||
| source: new VectorSource({ | ||
| features: [positionFeature], | ||
| }), | ||
| }); | ||
| positionFeature.setStyle(markerStyle); | ||
| setCurrentLocLayer(positionLayer); | ||
| }); | ||
| } else { | ||
| setCurrentLocLayer(null); | ||
| } | ||
| } | ||
| } else if (btnId === 'taskBoundries') { | ||
| const layers = map.getAllLayers(); | ||
| let extent; | ||
| layers.map((layer) => { | ||
| if (layer instanceof VectorLayer) { | ||
| const layerName = layer.getProperties().name; | ||
| if (layerName === 'project-area') { | ||
| extent = layer.getSource().getExtent(); | ||
| } | ||
| } | ||
| }); | ||
| map.getView().fit(extent, { | ||
| padding: [10, 10, 10, 10], | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="fmtm-absolute fmtm-top-[20px] fmtm-right-5 fmtm-z-[99] fmtm-flex fmtm-flex-col fmtm-gap-4"> | ||
| {btnList.map((btn) => ( | ||
| <div key={btn.id}> | ||
| <div | ||
| className="fmtm-bg-white fmtm-rounded-full fmtm-p-2 hover:fmtm-bg-gray-100 fmtm-cursor-pointer fmtm-duration-300" | ||
| onClick={() => handleOnClick(btn.id)} | ||
| > | ||
| {btn.icon} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MapControlComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.