smart-village-app-app
smart-village-app-app copied to clipboard
refactor(map): change map & clustering package
- added
maplibre-react-native
throughyarn add maplibre-react-native
https://github.com/maplibre/maplibre-react-native - updated
app.json
according tomaplibre-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
tocolors.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
toLocationSettings.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 withLoadingSpinner
- added collapsable structure in
LocationSettings
again - added map style to
SueMapScreen
andSueMapViewScreen
to get full screen map view - added
onMarkerPress
andselectedMarker
toSueMapViewScreen
andSueReportLocation
to show callout text when marker is pressed - removed
setTimout
s 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)
toonMapPress
function inSueReportLocation
andSueMapViewScreen
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 tocalculateBoundsToFitAllMarkers
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