smart-village-app-app icon indicating copy to clipboard operation
smart-village-app-app copied to clipboard

refactor(map): change map & clustering package

Open d4v3d4vE opened this issue 8 months ago • 0 comments

  • added maplibre-react-native through yarn add maplibre-react-native https://github.com/maplibre/maplibre-react-native
  • updated app.json according to maplibre-react-native
  • adjusted the code accordingly to keep all old map functionalities with the new map package '@maplibre/maplibre-react-native'
  • implemented a calculation mechanism to always show a map with multiple markers with the perfect positioning & zoom settings to display all markers on the map
  • ran yarn remove react-native-map-cluster to remove the package
  • ran yarn add supercluster to add the package
  • implemented new more efficient clustering via supercluster
  • added translucentAccent to colors.js for the cluster design
  • sorted imports
  • formatted code
  • removed prop isMultipleMarkersMap, since we calculate the exact camera positioning to show all markers on the map over the marker placements on the map to ensure always the perfect map view with all set markers
  • added old cluster design with a adjustable hitbox, set to 80
  • added the functionality to disable clustering, clustering is enabled by default
  • added back prop functionality to all used props to ensure the same map behaviour as before
  • added View to LocationSettings.js to ensure a reliable map behaviour
  • added new LoadingSinnerMap.tsx for a compatible loading spinner overlay as the map is loading
  • removed translucentAccent from colors.js as it's not needed anymore
  • adjusted map styling all over the projects used map components to ensure a consistent map behaviour
  • added normalize() throughout the files I worked in to ensure a consistent design
  • updated styles in Map.tsx to prevent the app from crashing on some screens with maps
  • added containerStyle prop to LoadingContainer
  • deleted because LoadingSpinnerMap was replaced with LoadingSpinner
  • added collapsable structure in LocationSettings again
  • added map style to SueMapScreen and SueMapViewScreen to get full screen map view
  • added onMarkerPress and selectedMarker to SueMapViewScreen and SueReportLocation to show callout text when marker is pressed
  • removed setTimouts because they caused unnecessary waiting while loading the map
  • unused props removed
  • added blank lines to the code to increase readability
  • corrected sorting errors
  • corrected some minor spelling errors
  • added setSelectedMarker(undefined) to onMapPress function in SueReportLocation and SueMapViewScreen to remove callout text from the screen
  • added calculateBoundsToFitAllMarkers helper to prevent the Map.tsx component from growing larger
  • updated the name of the calculateBounds helper to calculateBoundsToFitAllMarkers for clarity
  • added comment line to understand values in bounds array
  • increased the animationDuration value from 0 to 1000 to solve the problem of the map updating itself according to the desired location after a certain period of time
  • updated or deleted unnecessary codes

To test this changes run yarn prebuild and yarn android -d for Android or yarn ios -d for iOS DevBuild installations.

SVA-1365

Bild 1 Bild 2 Bild 3 Bild 4 Bild 5
Bild 6 Bild 7 Bild 8 Bild 9 Bild 10

d4v3d4vE avatar Jul 03 '24 09:07 d4v3d4vE