adding initial map options to MapKit

Author: chrisdrackett

src/index.js

@@ -6,10 +6,25 @@ import invariant from 'invariant'
 
 import ErrorBoundry from './ErrorBoundry'
 
+type MapKitFeatureVisibility = 'adaptive' | 'hidden' | 'visible'
+type MapKitMapType = 'hybrid' | 'satellite' | 'standard'
+
 type Props = {
   callbackUrl?: string,
   token?: string,
+
+  mapType: MapKitMapType,
+  padding:
+    | number
+    | { top?: number, bottom?: number, left?: number, right?: number },
+  showsCompass: MapKitFeatureVisibility,
+  showsMapTypeControl: boolean,
+  showsZoomControl: boolean,
+  showsUserLocationControl: boolean,
+  showsPointsOfInterest: boolean,
+  showsScale: MapKitFeatureVisibility,
   tintColor?: string,
+
   showsUserLocationControl: boolean,
 }
 
@@ -25,7 +40,14 @@ class MapKit extends React.Component<Props, State> {
   map = null
 
   static defaultProps = {
+    mapType: 'standard',
+    padding: 0,
+    showsCompass: 'adaptive',
+    showsMapTypeControl: true,
+    showsZoomControl: true,
     showsUserLocationControl: false,
+    showsPointsOfInterest: true,
+    showsScale: 'hidden',
   }
 
   state = {
@@ -50,9 +72,39 @@ class MapKit extends React.Component<Props, State> {
 
     this.map = new mapkit.Map('map')
 
+    console.log(mapkit.Map.MapTypes.Standard)
+
+    this.updateMapProps(props)
+
     this.setState({ mapKitIsReady: true })
   }
 
+  updateMapProps = (props: Props) => {
+    // Update map based on props
+    this.map.showsMapTypeControl = props.showsMapTypeControl
+    this.map.mapType = props.mapType
+
+    const padding = new mapkit.Padding(
+      typeof props.padding === 'number'
+        ? {
+            top: props.padding,
+            right: props.padding,
+            bottom: props.padding,
+            left: props.padding,
+          }
+        : { top: 0, right: 0, bottom: 0, left: 0, ...props.padding },
+    )
+
+    this.map.padding = padding
+    this.map.showsCompass = props.showsCompass
+    this.map.showsMapTypeControl = props.showsMapTypeControl
+    this.map.showsZoomControl = props.showsZoomControl
+    this.map.showsUserLocationControl = props.showsUserLocationControl
+    this.map.showsPointsOfInterest = props.showsPointsOfInterest
+    this.map.showsScale = props.showsScale
+    this.map.tintColor = props.tintColor
+  }
+
   constructor(props: Props) {
     super(props)
 
@@ -84,9 +136,7 @@ class MapKit extends React.Component<Props, State> {
     }
 
     if (this.state.mapKitIsReady) {
-      // Update map based on props
-      this.map.tintColor = nextProps.tintColor
-      this.map.showsUserLocationControl = nextProps.showsUserLocationControl
+      this.updateMapProps(nextProps)
     }
 
     return ComponentShouldUpdate
@@ -96,8 +146,17 @@ class MapKit extends React.Component<Props, State> {
     const {
       callbackUrl,
       token,
+
+      mapType,
+      padding,
+      showsCompass,
+      showsMapTypeControl,
+      showsZoomControl,
       showsUserLocationControl,
+      showsPointsOfInterest,
+      showsScale,
       tintColor,
+
       ...otherProps
     } = this.props
 

stories/index.stories.js

@@ -1,15 +1,48 @@
 import React from 'react'
 
 import { storiesOf } from '@storybook/react'
-import { text, boolean, number } from '@storybook/addon-knobs/react'
+import { text, boolean, number, select } from '@storybook/addon-knobs/react'
 
 import devToken from '../devToken'
 import MapKit from '../src'
 
-storiesOf('MapKit', module).add('with token', () => (
-  <MapKit
-    style={{ width: '100vw', height: '100vh' }}
-    token={text('token', devToken)}
-    tintColor={text('tintColor', undefined)}
-  />
-))
+storiesOf('MapKit', module)
+  .add('all props', () => (
+    <MapKit
+      style={{ width: '100vw', height: '100vh' }}
+      token={text('token', devToken)}
+      mapType={select(
+        'mapType',
+        { standard: 'standard', satellite: 'satellite', hybrid: 'hybrid' },
+        'standard',
+      )}
+      padding={number('padding', 0)}
+      showsCompass={select(
+        'showsCompass',
+        { adaptive: 'adaptive', hidden: 'hidden', visible: 'visible' },
+        'adaptive',
+      )}
+      showsMapTypeControl={boolean('showsMapTypeControl', true)}
+      showsZoomControl={boolean('showsZoomControl', true)}
+      showsUserLocationControl={boolean('showsUserLocationControl', false)}
+      showsPointsOfInterest={boolean('showsPointsOfInterest', true)}
+      showsScale={select(
+        'showsScale',
+        { adaptive: 'adaptive', hidden: 'hidden', visible: 'visible' },
+        'hidden',
+      )}
+      tintColor={text('tintColor', '')}
+    />
+  ))
+  .add('individual padding values', () => (
+    <MapKit
+      style={{ width: '100vw', height: '100vh' }}
+      token={devToken}
+      padding={{
+        top: number('top', 0),
+        right: number('right', 0),
+        bottom: number('bottom', 0),
+        left: number('left', 0),
+      }}
+    />
+  ))