Annotations Padding/AnchorOffset (#38)

* Implement draggable option

* appearanceAnimation implemented with story

* Implemented drag events

* Implement size and padding

* Fix padding and implement anchorOffset

* Minor fixes

* Apply suggestions from code review

* Added correct type

* Remove size from marker

* Missed file in commit

---------

Co-authored-by: Nicolas Ettlin <nicolas.ettlin@me.com>

src/components/Annotation.tsx

@@ -17,7 +17,17 @@ export default function Annotation({
   subtitle = '',
   accessibilityLabel = null,
 
+  size = undefined,
+
+  paddingTop = 0,
+  paddingRight = 0,
+  paddingBottom = 0,
+  paddingLeft = 0,
+  anchorOffsetX = 0,
+  anchorOffsetY = 0,
+
   selected = undefined,
+
   onSelect = undefined,
   onDeselect = undefined,
   onDragStart = undefined,
@@ -26,6 +36,9 @@ export default function Annotation({
 
   animates = true,
   appearanceAnimation = '',
+  visible = true,
+
+  clusteringIdentifier = null,
   draggable = false,
   enabled = true,
 
@@ -51,22 +64,40 @@ export default function Annotation({
     };
   }, [map, latitude, longitude]);
 
+  // Padding
+  useEffect(() => {
+    if (!annotation) return;
+    annotation.padding = new mapkit.Padding(paddingTop, paddingRight, paddingBottom, paddingLeft);
+  }, [annotation, paddingTop, paddingRight, paddingBottom, paddingLeft]);
+
+  // AnchorOffset
+  useEffect(() => {
+    if (!annotation) return;
+    annotation.anchorOffset = new DOMPoint(anchorOffsetX, anchorOffsetY);
+  }, [annotation, anchorOffsetX, anchorOffsetY]);
+
   // Simple values properties
   const properties = {
     title,
     subtitle,
     accessibilityLabel,
 
+    size,
+
     selected,
     animates,
     appearanceAnimation,
     draggable,
     enabled,
+    visible,
+    clusteringIdentifier,
   };
   Object.entries(properties).forEach(([propertyName, prop]) => {
     useEffect(() => {
       if (!annotation) return;
       // @ts-ignore
+      if (prop === undefined) { delete annotation[propertyName]; return; }
+      // @ts-ignore
       annotation[propertyName] = prop;
     }, [annotation, prop]);
   });

src/components/AnnotationProps.tsx

@@ -29,6 +29,49 @@ export default interface AnnotationProps {
    */
   accessibilityLabel?: string | null;
 
+  /**
+   * The desired dimensions of the annotation, in CSS pixels.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/annotation/2973833-size}
+   * @example `{width: 100, height: 100}`
+   */
+  size?: { width: number; height: number };
+
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the top edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingTop?: number;
+
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the right edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingRight?: number;
+
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the bottom edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingBottom?: number;
+
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the left edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingLeft?: number;
+
+  /**
+   * An X offset that changes the annotation’s default anchor point.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/annotation/2973816-anchoroffset}
+   */
+  anchorOffsetX?: number;
+
+  /**
+   * An Y offset that changes the annotation’s default anchor point.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/annotation/2973816-anchoroffset}
+   */
+  anchorOffsetY?: number;
+
   /**
    * A Boolean value that determines whether the map displays the annotation in a selected state.
    */
@@ -83,8 +126,21 @@ export default interface AnnotationProps {
    */
   enabled?: boolean;
 
+  /**
+   * A Boolean value that determines whether the annotation is visible or hidden.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/annotationconstructoroptions/2991172-visible}
+   */
+  visible?: boolean;
+
   /**
    * React children to render inside the annotation.
    */
   children?: React.ReactNode;
+
+  /**
+   * A shared identifier for all of the member annotations.
+   * An annotation needs a clusteringIdentifier to be part of an annotation cluster.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/annotations/clustering_annotations}
+   */
+  clusteringIdentifier?: string | null
 }

src/components/Marker.tsx

@@ -21,11 +21,21 @@ export default function Marker({
   glyphImage = null,
   selectedGlyphImage = undefined,
 
+  paddingTop = 0,
+  paddingRight = 0,
+  paddingBottom = 0,
+  paddingLeft = 0,
+  anchorOffsetX = 0,
+  anchorOffsetY = 0,
+
   selected = undefined,
   animates = true,
   appearanceAnimation = '',
+  visible = true,
+
   draggable = false,
   enabled = true,
+
   onSelect = undefined,
   onDeselect = undefined,
   onDragStart = undefined,
@@ -60,6 +70,18 @@ export default function Marker({
     marker.titleVisibility = toMapKitFeatureVisibility(titleVisibility);
   }, [marker, titleVisibility]);
 
+  // Padding
+  useEffect(() => {
+    if (!marker) return;
+    marker.padding = new mapkit.Padding(paddingTop, paddingRight, paddingBottom, paddingLeft);
+  }, [marker, paddingTop, paddingRight, paddingBottom, paddingLeft]);
+
+  // AnchorOffset
+  useEffect(() => {
+    if (!marker) return;
+    marker.anchorOffset = new DOMPoint(anchorOffsetX, anchorOffsetY);
+  }, [marker, anchorOffsetX, anchorOffsetY]);
+
   // Simple values properties
   const properties = {
     title,
@@ -72,17 +94,21 @@ export default function Marker({
     glyphText,
     glyphImage,
     selectedGlyphImage,
+
     clusteringIdentifier,
     selected,
     animates,
     appearanceAnimation,
     draggable,
     enabled,
+    visible,
   };
   Object.entries(properties).forEach(([propertyName, prop]) => {
     useEffect(() => {
       if (!marker) return;
       // @ts-ignore
+      if (prop === undefined) { delete marker[propertyName]; return; }
+      // @ts-ignore
       marker[propertyName] = prop;
     }, [marker, prop]);
   });

src/components/MarkerProps.tsx

@@ -71,6 +71,42 @@ export default interface MarkerProps {
    */
   selectedGlyphImage?: object | undefined;
 
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the top edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingTop?: number;
+
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the right edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingRight?: number;
+
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the bottom edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingBottom?: number;
+
+  /**
+   * The amount of padding, in CSS pixels, to inset the map from the left edge.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/padding}
+   */
+  paddingLeft?: number;
+
+  /**
+   * An X offset that changes the annotation’s default anchor point.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/annotation/2973816-anchoroffset}
+   */
+  anchorOffsetX?: number;
+
+  /**
+   * An Y offset that changes the annotation’s default anchor point.
+   * @see {@link https://developer.apple.com/documentation/mapkitjs/mapkit/annotation/2973816-anchoroffset}
+   */
+  anchorOffsetY?: number;
+
   /**
    * A Boolean value that determines whether the map displays the marker in a selected state.
    */
@@ -102,6 +138,11 @@ export default interface MarkerProps {
    */
   enabled?: boolean;
 
+  /**
+   * A Boolean value that determines whether the annotation is visible or hidden.
+   */
+  visible?: boolean;
+
   /**
    * Event fired when the marker is selected.
    */

src/stories/Annotation.stories.tsx

@@ -57,14 +57,42 @@ const Template: StoryFn<MarkerProps> = (args) => {
   return (
     <Map token={token} initialRegion={initialRegion}>
       <Annotation {...args}>
-        <CustomMarker />
+        <div className="default-annotation-style">
+          Klick me
+        </div>
       </Annotation>
     </Map>
   );
 };
 
 export const Default = Template.bind({});
-Default.args = { latitude: 46.52, longitude: 6.57 };
+Default.args = {
+  latitude: 46.52,
+  longitude: 6.57,
+  size: { width: 100, height: 24 },
+  title: 'Hello World',
+};
+
+const CustomMarkerAnnotationTemplate: StoryFn<MarkerProps> = (args) => {
+  const initialRegion: CoordinateRegion = useMemo(() => ({
+    centerLatitude: 48,
+    centerLongitude: 14,
+    latitudeDelta: 22,
+    longitudeDelta: 55,
+  }), []);
+  return (
+    <Map token={token} initialRegion={initialRegion}>
+      <Annotation {...args}>
+        <CustomMarker />
+      </Annotation>
+    </Map>
+  );
+};
+
+export const CustomMarkerAnnotation = CustomMarkerAnnotationTemplate.bind({});
+CustomMarkerAnnotation.args = { latitude: 46.52, longitude: 6.57 };
+
+CustomMarkerAnnotation.storyName = 'Custom Marker Annotation';
 
 export const MoveableAnnotation = Template.bind({});
 MoveableAnnotation.args = {

src/stories/stories.css

@@ -94,6 +94,17 @@ body {
   min-width: 150px;
 }
 
+.default-annotation-style {
+  width: 100%;
+  height: 24px;
+  background-color: #3b5f82;
+  border: 1px solid #213549;
+  color: white;
+  border-radius: 4px;
+  text-align: center;
+  vertical-align: middle;
+}
+
 /* Animation FROM https: //codepen.io/nelledejones/pen/gOOPWrK */
 @keyframes gelatine {
 

support.md

@@ -224,19 +224,19 @@ To call methods on the `mapkit.Map` object, you can use the reference exposed by
 | AnnotationConstructorOptions.accessibilityLabel   | ✅        |
 | AnnotationConstructorOptions.data                 | ❌        |
 | AnnotationConstructorOptions.draggable            | ✅        |
-| AnnotationConstructorOptions.visible              | ❌        |
+| AnnotationConstructorOptions.visible              | ✅        |
 | AnnotationConstructorOptions.enabled              | ✅        |
 | AnnotationConstructorOptions.selected             | ✅        |
 | AnnotationConstructorOptions.calloutEnabled       | ❌        |
 | AnnotationConstructorOptions.animates             | ✅        |
 | AnnotationConstructorOptions.appearanceAnimation  | ✅        |
-| AnnotationConstructorOptions.anchorOffset         | ❌        |
+| AnnotationConstructorOptions.anchorOffset         | ✅        |
 | AnnotationConstructorOptions.calloutOffset        | ❌        |
 | AnnotationConstructorOptions.callout              | ❌        |
-| AnnotationConstructorOptions.size                 | ❌        |
+| AnnotationConstructorOptions.size                 | ✅        |
 | AnnotationConstructorOptions.displayPriority      | ❌        |
 | AnnotationConstructorOptions.collisionMode        | ❌        |
-| AnnotationConstructorOptions.padding              | ❌        |
+| AnnotationConstructorOptions.padding              | ✅        |
 | AnnotationConstructorOptions.clusteringIdentifier | ✅        |
 
 ### Properties
@@ -262,12 +262,12 @@ To call methods on the `mapkit.Map` object, you can use the reference exposed by
 | Feature             | Supported |
 | ------------------- | --------- |
 | coordinate          | ✅        |
-| anchorOffset        | ❌        |
-| appearanceAnimation | ❌        |
+| anchorOffset        | ✅        |
+| appearanceAnimation | ✅        |
 | displayPriority     | ❌        |
-| padding             | ❌        |
-| size                | ❌        |
-| visible             | ❌        |
+| padding             | ✅        |
+| size                | ✅        |
+| visible             | ✅        |
 
 #### Interaction behavior
 
@@ -326,19 +326,18 @@ _❌ Not currently supported by mapkit-react._
 | MarkerAnnotationConstructorOptions.accessibilityLabel   | ✅        |
 | MarkerAnnotationConstructorOptions.data                 | ❌        |
 | MarkerAnnotationConstructorOptions.draggable            | ✅        |
-| MarkerAnnotationConstructorOptions.visible              | ❌        |
+| MarkerAnnotationConstructorOptions.visible              | ✅        |
 | MarkerAnnotationConstructorOptions.enabled              | ✅        |
 | MarkerAnnotationConstructorOptions.selected             | ✅        |
 | MarkerAnnotationConstructorOptions.calloutEnabled       | ❌        |
 | MarkerAnnotationConstructorOptions.animates             | ✅        |
 | MarkerAnnotationConstructorOptions.appearanceAnimation  | ✅        |
-| MarkerAnnotationConstructorOptions.anchorOffset         | ❌        |
+| MarkerAnnotationConstructorOptions.anchorOffset         | ✅        |
 | MarkerAnnotationConstructorOptions.calloutOffset        | ❌        |
 | MarkerAnnotationConstructorOptions.callout              | ❌        |
-| MarkerAnnotationConstructorOptions.size                 | ❌        |
 | MarkerAnnotationConstructorOptions.displayPriority      | ❌        |
 | MarkerAnnotationConstructorOptions.collisionMode        | ❌        |
-| MarkerAnnotationConstructorOptions.padding              | ❌        |
+| MarkerAnnotationConstructorOptions.padding              | ✅        |
 | MarkerAnnotationConstructorOptions.clusteringIdentifier | ✅        |
 
 ### Properties