validate map center and markers (#2488)

app/client/src/components/propertyControls/LocationSearchControl.tsx

@@ -76,6 +76,7 @@ const MapScriptWrapper = (props: MapScriptWrapperProps) => {
     AddScriptTo.HEAD,
   );
   const [title, setTitle] = useState("");
+
   return (
     <div data-standalone-searchbox="">
       {status === ScriptStatus.READY && (
@@ -89,7 +90,7 @@ const MapScriptWrapper = (props: MapScriptWrapperProps) => {
           <StyledInput
             type="text"
             placeholder="Enter location"
-            value={title || props.propertyValue.title}
+            value={title || props.propertyValue?.title}
             onChange={(ev) => {
               const val = ev.target.value;
               if (val === "") {

app/client/src/constants/FieldExpectedValue.ts

@@ -99,6 +99,7 @@ const FIELD_VALUES: Record<
     // onClick: "Function Call",
   },
   MAP_WIDGET: {
+    mapCenter: "{ lat: number, long: number }",
     defaultMarkers: "Array<{ lat: number, long: number }>",
     enableSearch: "boolean",
     enablePickLocation: "boolean",

app/client/src/constants/WidgetConstants.tsx

@@ -88,3 +88,5 @@ export const MAIN_CONTAINER_WIDGET_ID = "0";
 export const MAIN_CONTAINER_WIDGET_NAME = "MainContainer";
 
 export const WIDGET_DELETE_UNDO_TIMEOUT = 7000;
+
+export const DEFAULT_CENTER = { lat: -34.397, lng: 150.644 };

app/client/src/constants/WidgetValidation.ts

@@ -22,6 +22,7 @@ export const VALIDATION_TYPES = {
   SELECTED_TAB: "SELECTED_TAB",
   DEFAULT_OPTION_VALUE: "DEFAULT_OPTION_VALUE",
   DEFAULT_SELECTED_ROW: "DEFAULT_SELECTED_ROW",
+  LAT_LONG: "LAT_LONG",
 };
 
 export type ValidationResponse = {

app/client/src/widgets/MapWidget.tsx

@@ -10,6 +10,7 @@ import { getAppsmithConfigs } from "configs";
 import styled from "styled-components";
 import * as Sentry from "@sentry/react";
 import withMeta, { WithMeta } from "./MetaHOC";
+import { DEFAULT_CENTER } from "constants/WidgetConstants";
 
 const { google } = getAppsmithConfigs();
 
@@ -29,7 +30,13 @@ const DisabledContainer = styled.div`
   }
 `;
 
-const DefaultCenter = { lat: -34.397, long: 150.644 };
+const DefaultCenter = { ...DEFAULT_CENTER, long: DEFAULT_CENTER.lng };
+
+type Center = {
+  lat: number;
+  long: number;
+  [x: string]: any;
+};
 class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
@@ -41,7 +48,7 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
       enableCreateMarker: VALIDATION_TYPES.BOOLEAN,
       allowZoom: VALIDATION_TYPES.BOOLEAN,
       zoomLevel: VALIDATION_TYPES.NUMBER,
-      mapCenter: VALIDATION_TYPES.OBJECT,
+      mapCenter: VALIDATION_TYPES.LAT_LONG,
     };
   }
 
@@ -121,6 +128,10 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
     });
   };
 
+  getCenter(): Center {
+    return this.props.center || this.props.mapCenter || DefaultCenter;
+  }
+
   getPageView() {
     return (
       <>
@@ -148,7 +159,7 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
             isVisible={this.props.isVisible}
             zoomLevel={this.props.zoomLevel}
             allowZoom={this.props.allowZoom}
-            center={this.props.center || this.props.mapCenter || DefaultCenter}
+            center={this.getCenter()}
             enableCreateMarker={this.props.enableCreateMarker}
             selectedMarker={this.props.selectedMarker}
             updateCenter={this.updateCenter}
@@ -159,7 +170,7 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
             updateMarker={this.updateMarker}
             selectMarker={this.onMarkerClick}
             unselectMarker={this.unselectMarker}
-            markers={this.props.markers || []}
+            markers={this.props.markers}
             enableDrag={() => {
               this.disableDrag(false);
             }}

app/client/src/workers/validations.ts

@@ -326,7 +326,12 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
         parsed,
         message: `${WIDGET_TYPE_VALIDATION_ERROR}: Marker Data`,
       };
-    } else if (!every(parsed, (datum) => isObject(datum))) {
+    } else if (
+      !every(
+        parsed,
+        (datum) => VALIDATORS[VALIDATION_TYPES.LAT_LONG](datum, props).isValid,
+      )
+    ) {
       return {
         isValid: false,
         parsed: [],
@@ -643,4 +648,37 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
       parsed: values,
     };
   },
+  [VALIDATION_TYPES.LAT_LONG]: (unparsedValue: {
+    lat?: number;
+    long?: number;
+    [x: string]: any;
+  }): ValidationResponse => {
+    let value = unparsedValue;
+    const invalidResponse = {
+      isValid: false,
+      parsed: undefined,
+      message: `${WIDGET_TYPE_VALIDATION_ERROR}: { lat: number, long: number }`,
+    };
+
+    if (isString(unparsedValue)) {
+      try {
+        value = JSON.parse(unparsedValue);
+      } catch (e) {
+        console.error(`Error when parsing string as object`);
+      }
+    }
+
+    const { lat, long } = value || {};
+    const validLat = typeof lat === "number" && lat <= 90 && lat >= -90;
+    const validLong = typeof long === "number" && long <= 180 && long >= -180;
+
+    if (!validLat || !validLong) {
+      return invalidResponse;
+    }
+
+    return {
+      isValid: true,
+      parsed: value,
+    };
+  },
 };