render map polyline with events

Signed-off-by: Aleem Isiaka <[email protected]>

src/components/Map/Map.tsx

@@ -22,9 +22,9 @@ export type IHMapPropsRequired = Omit<
  'loadingEl' | 'style' | 'children' | 'options' | 'ref'
 >;
 
-export interface IHMapOptions extends H.Map.Options {
+export type IHMapOptions = H.Map.Options & {
  mapType?: MAP_TYPES;
-}
+};
 
 export type IHMapOptionsMerged = IHMapPropsRequired & {
  container: React.RefObject<HTMLDivElement> | null;

src/components/Map/objects/Polyline/index.tsx

@@ -1,10 +1,13 @@
 import { useContext, useEffect } from 'react';
 import { MapContext } from '../../../../contexts/map';
+import { initMapObjectEvents } from '../../../libs/initMapObjectEvents';
+import { mapEvents } from '../../../libs/defaults';
 
 export interface IHMapPolylineProps {
  points: H.geo.IPoint[];
  options?: H.map.Polyline.Options;
  setViewBounds: boolean;
+ events: typeof mapEvents;
 }
 
 export const HMapPolyline = (props: IHMapPolylineProps) => {
@@ -19,7 +22,8 @@ export const HMapPolyline = (props: IHMapPolylineProps) => {
  );
  }
  useEffect(() => {
- const { points, options } = props;
+ console.log(props);
+ const { points, options, events } = props;
  // Initialize a LineString and add all the points to it:
  const lineString = new H.geo.LineString();
  points.forEach(function(point) {
@@ -33,11 +37,12 @@ export const HMapPolyline = (props: IHMapPolylineProps) => {
  });
  mapContext.map?.setZoom(4);
  // Add event listener to the object if intention of using the object is defined
- initMapObjectEvents(polyLine, objectEvents, __options);
+ const { useEvents, interactive } = mapContext.options || {};
+ initMapObjectEvents(polyLine, events, {
+ interactive: Boolean(interactive),
+ useEvents: Boolean(useEvents),
+ });
  mapContext.map?.addObject(polyLine);
-
- // Add the polyLine to the map:
- // console.log(polyLine.getBoundingBox());
  }, [props.points]);
 
  return null;

src/components/libs/initMapObjectEvents.ts

@@ -0,0 +1,20 @@
+import { DefaultOptionsType, mapEventTypes, mapEvents } from './defaults';
+
+export const initMapObjectEvents = (
+ mapObject: H.map.Object,
+ objectEvents: typeof mapEvents,
+ platformOptions: Pick<DefaultOptionsType, 'useEvents' | 'interactive'>
+) => {
+ const { useEvents, interactive } = platformOptions;
+ console.log(objectEvents);
+ if (useEvents && interactive && objectEvents) {
+ for (const type in objectEvents) {
+ if (objectEvents.hasOwnProperty(type)) {
+ const callback = objectEvents[type as mapEventTypes];
+ if (callback && typeof callback === 'function') {
+ mapObject.addEventListener(type, callback);
+ }
+ }
+ }
+ }
+};

stories/Polyline.stories.tsx

@@ -11,6 +11,11 @@ const points = [
  { lat: 52.5166, lng: 13.3833 },
 ];
 
+function logEvent(evt) {
+ const evtLog = ['event "', evt.type, '" @ ' + evt.target.getData()].join('');
+ console.log(evtLog);
+}
+
 const meta: Meta = {
  title: 'HMapPolyline',
  component: HMap,
@@ -19,12 +24,19 @@ const meta: Meta = {
  points,
  setVisibility: true,
  options: { style: { lineWidth: 4 } },
+ events: {
+ pointerdown: logEvent,
+ pointerenter: logEvent,
+ pointerleave: logEvent,
+ pointermove: logEvent,
+ },
  },
 };
 
 export default meta;
 
 const Template: Story<IHMapPolylineProps> = args => {
+ console.log(args);
  const renderHMapComponents = useHPlatform(
  {
  appId,