#14 - Added map control documentation

docs/documentation/docs/controls/Map.md

@@ -0,0 +1,61 @@
+# Map control
+
+This control renders can be used to render a map in your solution. The control has also the ability to search for new locations.
+
+Here is an example of the control in action:
+
+![Map control](../assets/map-control.gif)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
+- In your component file, import the `Map` control as follows:
+
+```TypeScript
+import { Map, ICoordinates, MapType } from "@pnp/spfx-controls-react/lib/Map";
+```
+
+- Use the `Map` control in your code as follows:
+
+```TypeScript
+<Map titleText="New of London"
+     coordinates={{ latitude: 51.507351, longitude: -0.127758 }}
+     enableSearch={true} />
+```
+
+## Implementation
+
+The `Map` control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| titleText | string | no | Title label to show above the control. | |
+| coordinates | ICoordinates | yes | Coordinates required for rendering the control. | |
+| enableSearch | boolean | no | Allow the user to search for new locations. | |
+| zoom | number | no | Zoom level for the maps on display (range 1-15). | 10 |
+| width | number | no | Width of the maps area in percentage. | 100% |
+| height | number | no | Height of the maps area. | 300px |
+| mapType | MapType | no | Type of the map to render. | standard |
+| loadingMessage | string | no | Custom loading message. | |
+| errorMessage | string | no | Custom error message. | |
+| mapsClassName | string | no | Custom CSS class name. | |
+| errorMessageClassName | string | no | Custom CSS error class name. | |
+
+`ICoordinates` interface:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| latitude | number | yes | Latitude of the map to display. | |
+| longitude | number | yes | Longitude of the map to display. | |
+
+`MapType` enum:
+
+| Name |
+| ---- |
+| standard |
+| cycle |
+| normal |
+| transport |
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Map)

docs/documentation/mkdocs.yml

@@ -7,6 +7,7 @@ nav:
     - ListPicker: 'controls/ListPicker.md'
     - ListView: 'controls/ListView.md'
     - "ListView: add a contextual menu": 'controls/ListView.ContextualMenu.md'
+    - Map: 'controls/Map.md'
     - Placeholder: 'controls/Placeholder.md'
     - SiteBreadcrumb: 'controls/SiteBreadcrumb.md'
     - WebPartTitle: 'controls/WebPartTitle.md'

src/controls/map/IMapProps.ts

@@ -6,8 +6,8 @@ export interface IMapProps {
   */
   titleText?: string;
   /**
-   * Corodinates required of the Control
-  */
+   * Coordinates required for rendering the control
+   */
   coordinates: ICoordinates;
   /**
    * Show search box - which means an API key is needed

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -233,11 +233,11 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           title={this.props.title}
           updateProperty={this.props.updateProperty} />
 
-        <Map titleText="Map of London"
+        <Map titleText="New map control"
              coordinates={{ latitude: 51.507351, longitude: -0.127758 }}
              enableSearch={true}
-             mapType={MapType.cycle}
-             zoom={15}
+             mapType={MapType.normal}
+            //  zoom={15}
             //mapType={MapType.cycle}
             //width="50"
             //height={150}