New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Upgrade map widget library to support react 17 #19315
Merged
Merged
Changes from 3 commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
440080b
refactor code + add clustering
jsartisan 083efdf
remove react-google-maps
jsartisan 218c9f7
reorder imports
jsartisan 13bacc6
code review feedback fixes
jsartisan da61014
update design system version
jsartisan b4163cd
remove test code
jsartisan 9f0ee07
remove map check
jsartisan c2124c5
update error copy + fix search box width
jsartisan 9b87b29
Merge branch 'release' into chore/map-widget-lib-change
jsartisan 151a37e
update yarn lock
jsartisan 87e3a3b
fixing modal selection issues.
marks0351 fdfbbc6
fix: merge conflicts resolved.
yaldram 1a9ad97
fix: latest design system with remix icons.
yaldram 09f0c22
Merge branch 'release' into chore/map-widget-lib-change
yaldram afe298a
moving propertyPnae search's should focus login inside setTimeout to …
5271616
fix: merge conflicts resolved.
yaldram 418f83e
feat: added new version of the design system.
yaldram f14aa50
Merge branch 'chore/map-widget-lib-change' of https://github.com/apps…
yaldram File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
keyurparalkar marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| import { MarkerClusterer } from "@googlemaps/markerclusterer"; | ||
|
|
||
| import Marker from "./Marker"; | ||
| import { MapComponentProps } from "."; | ||
|
|
||
| type ClustererProps = { | ||
| map?: google.maps.Map; | ||
| } & Pick< | ||
| MapComponentProps, | ||
| | "selectMarker" | ||
| | "updateCenter" | ||
| | "updateMarker" | ||
| | "markers" | ||
| | "selectedMarker" | ||
| | "clickedMarkerCentered" | ||
| >; | ||
|
|
||
| const Clusterer: React.FC<ClustererProps> = (props) => { | ||
| const { | ||
| clickedMarkerCentered, | ||
| map, | ||
| markers, | ||
| selectedMarker, | ||
| selectMarker, | ||
| updateCenter, | ||
| updateMarker, | ||
| } = props; | ||
| const [markerClusterer, setMarkerClusterer] = useState<MarkerClusterer>(); | ||
|
|
||
| // add marker clusterer on map | ||
| useEffect(() => { | ||
| if (!map) return; | ||
|
|
||
| setMarkerClusterer( | ||
| new MarkerClusterer({ | ||
| map, | ||
| }), | ||
| ); | ||
|
|
||
| return () => { | ||
| if (markerClusterer) { | ||
| markerClusterer.clearMarkers(); | ||
| } | ||
| }; | ||
| }, [map]); | ||
|
|
||
| if (!Array.isArray(markers)) return null; | ||
|
|
||
| return ( | ||
| <> | ||
| {markers.map((marker, index) => ( | ||
| <Marker | ||
| clickable | ||
| draggable={ | ||
| selectedMarker && | ||
| selectedMarker?.lat === marker.lat && | ||
| selectedMarker?.long === marker.long | ||
| } | ||
| key={index} | ||
| map={map} | ||
| markerClusterer={markerClusterer} | ||
| onClick={() => { | ||
| if (clickedMarkerCentered) { | ||
| updateCenter(marker.lat, marker.long); | ||
| } | ||
|
|
||
| selectMarker(marker.lat, marker.long, marker.title); | ||
| }} | ||
| onDragEnd={(e) => { | ||
| updateMarker( | ||
| Number(e.latLng?.lat()), | ||
| Number(e.latLng?.lng()), | ||
| index, | ||
| ); | ||
| }} | ||
| position={{ | ||
| lat: marker.lat, | ||
| lng: marker.long, | ||
| }} | ||
| title={marker.title} | ||
| /> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Clusterer; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also check if
mapobject exists?