Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Map resetting when clicking on a marker fix (#1299)

Browse Source
This commit is contained in:
vicky-primathon 2020-10-29 23:46:27 +05:30 committed by GitHub
parent 9553fe9b19
commit 75c84cbba7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 72 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
app/client/src/components/designSystems/appsmith/MapComponent.tsx
View File

@ -73,62 +73,80 @@ const PickMyLocationWrapper = styled.div<PickMyLocationProps>`
`; `;
const MyMapComponent = withScriptjs( const MyMapComponent = withScriptjs(
withGoogleMap((props: any) => ( withGoogleMap((props: any) => {
<GoogleMap const [mapCenter, setMapCenter] = React.useState<
options={{ | {
zoomControl: props.allowZoom, lat: number;
fullscreenControl: false, lng: number;
mapTypeControl: false, title?: string;
scrollwheel: false, description?: string;
rotateControl: false,
streetViewControl: false,
}}
zoom={props.zoom}
center={{ ...props.center, lng: props.center.long }}
onClick={e => {
if (props.enableCreateMarker) {
props.saveMarker(e.latLng.lat(), e.latLng.lng());
} }
}} | undefined
> >({
{props.enableSearch && ( ...props.center,
<SearchBox lng: props.center.long,
controlPosition={2} });
onPlacesChanged={props.onPlacesChanged} return (
ref={props.onSearchBoxMounted} <GoogleMap
> options={{
<StyledInput type="text" placeholder="Enter location to search" /> zoomControl: props.allowZoom,
</SearchBox> fullscreenControl: false,
)} mapTypeControl: false,
{props.markers.map((marker: any, index: number) => ( scrollwheel: false,
<Marker rotateControl: false,
key={index} streetViewControl: false,
title={marker.title} }}
position={{ lat: marker.lat, lng: marker.long }} zoom={props.zoom}
clickable center={mapCenter}
draggable={ onClick={e => {
props.selectedMarker && if (props.enableCreateMarker) {
props.selectedMarker.lat === marker.lat && props.saveMarker(e.latLng.lat(), e.latLng.lng());
props.selectedMarker.long === marker.long
} }
onClick={e => { }}
props.selectMarker(marker.lat, marker.long, marker.title); >
}} {props.enableSearch && (
onDragEnd={de => { <SearchBox
props.updateMarker(de.latLng.lat(), de.latLng.lng(), index); controlPosition={2}
}} onPlacesChanged={props.onPlacesChanged}
/> ref={props.onSearchBoxMounted}
))} >
{props.enablePickLocation && ( <StyledInput type="text" placeholder="Enter location to search" />
<PickMyLocationWrapper </SearchBox>
title="Pick My Location" )}
allowZoom={props.allowZoom} {props.markers.map((marker: any, index: number) => (
> <Marker
<PickMyLocation updateCenter={props.updateCenter} /> key={index}
</PickMyLocationWrapper> title={marker.title}
)} position={{ lat: marker.lat, lng: marker.long }}
</GoogleMap> clickable
)), draggable={
props.selectedMarker &&
props.selectedMarker.lat === marker.lat &&
props.selectedMarker.long === marker.long
}
onClick={e => {
setMapCenter({
...marker,
lng: marker.long,
});
props.selectMarker(marker.lat, marker.long, marker.title);
}}
onDragEnd={de => {
props.updateMarker(de.latLng.lat(), de.latLng.lng(), index);
}}
/>
))}
{props.enablePickLocation && (
<PickMyLocationWrapper
title="Pick My Location"
allowZoom={props.allowZoom}
>
<PickMyLocation updateCenter={props.updateCenter} />
</PickMyLocationWrapper>
)}
</GoogleMap>
);
}),
); );
class MapComponent extends React.Component<MapComponentProps> { class MapComponent extends React.Component<MapComponentProps> {