#14 - Added a callback to the map control

Author: estruyf

docs/documentation/docs/controls/Map.md

@@ -40,6 +40,7 @@ The `Map` control can be configured with the following properties:
 | errorMessage | string | no | Custom error message. | |
 | mapsClassName | string | no | Custom CSS class name. | |
 | errorMessageClassName | string | no | Custom CSS error class name. | |
+| onUpdateCoordinates | (coordinates: ICoordinates) => void | no | Callback to let your solution knows the new coordinates when a search was performed. | |
 
 `ICoordinates` interface:
 

src/controls/map/IMapProps.ts

@@ -46,4 +46,8 @@ export interface IMapProps {
    * Class Name for the Error Section
   */
   errorMessageClassName?: string;
+  /**
+   * Get an update when the coordinates are updated
+   */
+  onUpdateCoordinates?: (coordinates: ICoordinates) => void;
 }

src/controls/map/Map.tsx

@@ -126,13 +126,20 @@ export class Map extends React.Component<IMapProps, IMapState> {
       if (mapData && mapData.length > 0) {
         const location = mapData[0];
 
+        const coordinates = {
+          latitude: parseFloat(location.lat),
+          longitude: parseFloat(location.lon)
+        };
+
         this.setState({
-          coordinates: {
-            latitude: parseFloat(location.lat),
-            longitude: parseFloat(location.lon)
-          },
+          coordinates,
           showmessageerror: false
         });
+
+        // Check if the control needs to send an update
+        if (this.props.onUpdateCoordinates) {
+          this.props.onUpdateCoordinates(coordinates);
+        }
       }
     } catch (error) {
       console.error(error);

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -274,6 +274,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
              coordinates={{ latitude: 51.507351, longitude: -0.127758 }}
              enableSearch={true}
              mapType={MapType.normal}
+             onUpdateCoordinates={(coordinates) => console.log("Updated location:", coordinates)}
             //  zoom={15}
             //mapType={MapType.cycle}
             //width="50"