diff --git a/src/Annotation.tsx b/src/Annotation.tsx new file mode 100644 index 0000000..f1ab931 --- /dev/null +++ b/src/Annotation.tsx @@ -0,0 +1,43 @@ +import React from 'react' + +import { MapContext } from './Map' + +import { + createCoordinate, + propsToMarkerConstructionOptions, + AnnotationOptions, +} from './utils' + +type AnnotationProps = { + latitude: number + longitude: number + factory: ( + coordinate: mapkit.Coordinate, + options?: mapkit.AnnotationConstructorOptions, + ) => Element +} & AnnotationOptions + +export const Annotation: React.FC = ({ + latitude, + longitude, + factory, + ...options +}) => { + const { mapkit, map } = React.useContext(MapContext) + const annotation = React.useRef() + + React.useEffect(() => { + if (mapkit && map) { + annotation.current = new mapkit.Annotation( + createCoordinate(latitude, longitude), + factory, + propsToMarkerConstructionOptions(options), + ) + + map.addAnnotation(annotation.current) + } + return () => { annotation.current && map && map.removeAnnotation(annotation.current) } + }, [mapkit, map]) + + return null +} diff --git a/src/index.tsx b/src/index.tsx index 87b952f..f14be02 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ +export * from './Annotation' export * from './MapkitProvider' export * from './Map' export * from './Marker' diff --git a/src/utils.ts b/src/utils.ts index 0257a93..3f1986e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -10,6 +10,10 @@ type MapConstructionOptions = NonNullable< ConstructorParameters[1] > +type AnnotationConstructionOptions = NonNullable< + ConstructorParameters[1] +> + type MarkerConstructionOptions = NonNullable< ConstructorParameters[1] > @@ -117,6 +121,13 @@ export const propsToMapConstructionOptions = ({ // 📌 Marker Options // these are the props we expose to users. +export type AnnotationOptions = Merge< + AnnotationConstructionOptions, + { + padding?: PaddingType + } +> + export type MarkerOptions = Merge< MarkerConstructionOptions, {