diff --git a/app/client/src/assets/icons/control/pick-location-initial.svg b/app/client/src/assets/icons/control/pick-location-initial.svg
new file mode 100644
index 0000000000..2572dd77b9
--- /dev/null
+++ b/app/client/src/assets/icons/control/pick-location-initial.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/client/src/assets/icons/control/pick-location-onclick.svg b/app/client/src/assets/icons/control/pick-location-onclick.svg
new file mode 100644
index 0000000000..f8fb48fbe5
--- /dev/null
+++ b/app/client/src/assets/icons/control/pick-location-onclick.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/client/src/assets/icons/control/pick-location-selected.svg b/app/client/src/assets/icons/control/pick-location-selected.svg
new file mode 100644
index 0000000000..29d9c89835
--- /dev/null
+++ b/app/client/src/assets/icons/control/pick-location-selected.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/client/src/components/designSystems/appsmith/MapComponent.tsx b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
index 94259fbc81..b74f121887 100644
--- a/app/client/src/components/designSystems/appsmith/MapComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
@@ -7,7 +7,7 @@ import {
} from "react-google-maps";
import SearchBox from "react-google-maps/lib/components/places/SearchBox";
import { MarkerProps } from "widgets/MapWidget";
-import { ControlIcons } from "icons/ControlIcons";
+import PickMyLocation from "./PickMyLocation";
import styled, { AnyStyledComponent } from "styled-components";
interface MapComponentProps {
@@ -67,17 +67,10 @@ type PickMyLocationProps = {
const PickMyLocationWrapper = styled.div`
position: absolute;
bottom: ${props => (props.allowZoom ? 110 : 20)}px;
- right: -95px;
+ right: -90px;
width: 140px;
`;
-const StyledPickMyLocationIcon = styled(
- ControlIcons.PICK_MY_LOCATION_CONTROL as AnyStyledComponent,
-)`
- position: relative;
- cursor: pointer;
-`;
-
const MyMapComponent = withScriptjs(
withGoogleMap((props: any) => (
{
- props.getUserLocation();
- e.stopPropagation();
- }}
title="Pick My Location"
allowZoom={props.allowZoom}
>
-
+
)}
@@ -165,17 +154,6 @@ class MapComponent extends React.Component {
}
};
- getUserLocation = () => {
- if ("geolocation" in navigator) {
- return navigator.geolocation.getCurrentPosition(data => {
- const {
- coords: { latitude: lat, longitude: long },
- } = data;
- this.props.updateCenter(lat, long);
- });
- }
- };
-
render() {
const zoom = Math.floor(this.props.zoomLevel / 5);
return (
@@ -189,7 +167,6 @@ class MapComponent extends React.Component {
zoom={zoom}
onPlacesChanged={this.onPlacesChanged}
onSearchBoxMounted={this.onSearchBoxMounted}
- getUserLocation={this.getUserLocation}
/>
);
diff --git a/app/client/src/components/designSystems/appsmith/PickMyLocation.tsx b/app/client/src/components/designSystems/appsmith/PickMyLocation.tsx
new file mode 100644
index 0000000000..6a89962b38
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/PickMyLocation.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { ControlIcons } from "icons/ControlIcons";
+import styled, { AnyStyledComponent } from "styled-components";
+
+const StyledPickMyLocationSelectedIcon = styled(
+ ControlIcons.PICK_MY_LOCATION_SELECTED_CONTROL as AnyStyledComponent,
+)`
+ position: relative;
+ cursor: pointer;
+ height: 28px;
+ width: 28px;
+`;
+
+const PickMyLocationIconWrapper = styled.div`
+ background: white;
+ width: 40px;
+ height: 40px;
+ border-radius: 2px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
+`;
+
+interface PickMyLocationProps {
+ updateCenter: (lat: number, long: number) => void;
+}
+
+interface PickMyLocationState {
+ clicked: boolean;
+ selected: boolean;
+}
+export default class PickMyLocation extends React.Component<
+ PickMyLocationProps,
+ PickMyLocationState
+> {
+ constructor(props: PickMyLocationProps) {
+ super(props);
+ this.state = {
+ selected: false,
+ clicked: false,
+ };
+ }
+ getUserLocation = () => {
+ if ("geolocation" in navigator) {
+ return navigator.geolocation.getCurrentPosition(data => {
+ const {
+ coords: { latitude: lat, longitude: long },
+ } = data;
+ this.setState({ selected: true });
+ this.props.updateCenter(lat, long);
+ });
+ }
+ };
+ render() {
+ return (
+
+ {
+ if (!(this.state.clicked && this.state.selected)) {
+ this.setState({ clicked: true });
+ this.getUserLocation();
+ }
+ }}
+ />
+
+ );
+ }
+}
diff --git a/app/client/src/icons/ControlIcons.tsx b/app/client/src/icons/ControlIcons.tsx
index 149c9d22d7..6acd0f9e95 100644
--- a/app/client/src/icons/ControlIcons.tsx
+++ b/app/client/src/icons/ControlIcons.tsx
@@ -12,7 +12,7 @@ import { ReactComponent as DecreaseIcon } from "assets/icons/control/decrease.sv
import { ReactComponent as DraggableIcon } from "assets/icons/control/draggable.svg";
import { ReactComponent as CloseIcon } from "assets/icons/control/close.svg";
-import { ReactComponent as PickMyLocationIcon } from "assets/icons/control/pick-my-location.svg";
+import { ReactComponent as PickMyLocationSelectedIcon } from "assets/icons/control/pick-location-selected.svg";
/* eslint-disable react/display-name */
export const ControlIcons: {
@@ -73,9 +73,9 @@ export const ControlIcons: {
),
- PICK_MY_LOCATION_CONTROL: (props: IconProps) => (
+ PICK_MY_LOCATION_SELECTED_CONTROL: (props: IconProps) => (
-
+
),
};