add complete support for hmap

package.json

@@ -61,6 +61,7 @@
     "@storybook/addons": "^7.6.5",
     "@storybook/react": "^7.6.5",
     "@storybook/react-webpack5": "^7.6.5",
+    "@types/heremaps": "^3.1.14",
     "@types/lodash.merge": "^4.6.9",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",

src/components/Map/Map.tsx

@@ -53,7 +53,6 @@ export const HMap = (props: IHMapProps) => {
       props.options
     );
 
-
     const buildResult = buildMap(platformState.platform, mergedOptions);
 
     setMapState(buildResult);
@@ -74,16 +73,19 @@ export const HMap = (props: IHMapProps) => {
   const h = window.H;
 
   return (
-    <MapContext.Provider value={mapState}>
-      <div
-        id={defaultOptions.containerId}
-        className={defaultOptions.defaultClassName}
-        style={style}
-        ref={containerRef}
-      >
-        {typeof h === 'undefined' && !options && loading}
-        {typeof h === 'object' && options && children}
-      </div>
-    </MapContext.Provider>
+    // only render map provider when there is a platform state
+    platformState.platform && (
+      <MapContext.Provider value={mapState}>
+        <div
+          id={defaultOptions.containerId}
+          className={defaultOptions.defaultClassName}
+          style={style}
+          ref={containerRef}
+        >
+          {typeof h === 'undefined' && !options && loading}
+          {typeof h === 'object' && options && children}
+        </div>
+      </MapContext.Provider>
+    )
   );
 };

src/components/Platform/index.tsx

@@ -11,7 +11,7 @@ export interface IHPlatform {
 
 export interface IHPlatformState {
   options?: DefaultOptionsType;
-  platform?: any;
+  platform: H.service.Platform | null;
   reInitMap?: () => void;
 }
 
@@ -36,7 +36,7 @@ export const HPlatform = (props: IHPlatform) => {
 
   const [platformState, setPlatformState] = useState<IHPlatformState>({
     reInitMap: initilizePlatform,
-    platform: {},
+    platform: null,
   });
 
   useEffect(() => {
@@ -45,10 +45,10 @@ export const HPlatform = (props: IHPlatform) => {
   }, [platformState.options]);
 
   const { platform, options } = platformState;
-  console.log({ ops: options, platform });
+
   return (
     <PlatformContext.Provider value={platformState}>
-      {platform?.a == options?.apikey &&
+      {typeof platform?.setBaseUrl == 'function' &&
         (options?.app_code || options?.apikey) &&
         props.children}
     </PlatformContext.Provider>

src/components/index.ts

@@ -1 +1,2 @@
 export * from './Map';
+export * from './Platform';

src/components/libs/buildMap.ts

@@ -11,32 +11,27 @@ import {
 } from './defaults';
 import { IHMapOptions, IHMapOptionsMerged } from '../Map';
 import { validateMapType } from './validateMapType';
+import { initInteractionStyles } from './initInteractionStyles';
 
 const initMap = (
   container: React.RefObject<HTMLDivElement>,
   mapLayer: any,
   mapOptions: IHMapOptions
 ) => {
-  // @ts-ignore
-  const h = window.H;
-
   // Instantiate (and display) a map object:
   return (
-    container.current && new h.Map(container.current, mapLayer, mapOptions)
+    container.current && new H.Map(container.current, mapLayer, mapOptions)
   );
 };
 
 export const initInteraction = (
-  map: any,
+  map: H.Map,
   interactive: boolean,
   useEvents: boolean,
   events: typeof mapEvents
 ) => {
-  console.log(interactive, useEvents, map);
-  // @ts-ignore
-  const h = window.H;
   const behavior = interactive
-    ? new h.mapevents.Behavior(new h.mapevents.MapEvents(map))
+    ? new H.mapevents.Behavior(new H.mapevents.MapEvents(map))
     : null;
   if (useEvents && interactive) {
     for (const type in events) {
@@ -61,10 +56,8 @@ export const initDefaultUI = (
     throw new Error('includeUI must be set to true to initialize default UI');
   }
 
-  // @ts-ignore
-  const h = window.H;
   // Create the default UI components
-  return h.ui.UI.createDefault(map, platform.createDefaultLayers(), uiLang);
+  return H.ui.UI.createDefault(map, platform.createDefaultLayers(), uiLang);
 };
 
 export const buildMap = (
@@ -76,10 +69,10 @@ export const buildMap = (
     useEvents,
     mapEvents,
     interactive,
-    // includeUI,
+    includeUI,
     mapType,
     mapOptions,
-    // uiLang,
+    uiLang,
     container,
     build,
   } = options;
@@ -111,18 +104,17 @@ export const buildMap = (
         useEvents,
         mapEvents
       );
-      // if (includeUI) {
-      //   retObject.ui = initDefaultUI(platform, retObject.map, includeUI, uiLang);
-      // }
+      if (includeUI) {
+        retObject.ui = initDefaultUI(
+          platform,
+          retObject.map,
+          includeUI,
+          uiLang
+        );
+      }
       // Adds the grabbing to the document
-      // initInteractionStyles();
+      initInteractionStyles();
     }
-  } else {
-    // ret.createMap = initMap;
-    // ret.createPlatform = initPlatform;
-    // ret.createInteraction = initInteraction;
-    // ret.createDefaultUI = initDefaultUI;
-    // ret.createInteractionStyles = initInteractionStyles;
   }
   return retObject;
 };

src/components/libs/initInteraction.ts

@@ -0,0 +1,23 @@
+import { mapEventTypes, mapEvents } from './defaults';
+
+export const initInteraction = (
+  map: H.Map,
+  interactive: boolean,
+  useEvents: boolean,
+  events: typeof mapEvents
+) => {
+  let behavior = interactive
+    ? new H.mapevents.Behavior(new H.mapevents.MapEvents(map))
+    : null;
+  if (useEvents && interactive) {
+    for (const type in events) {
+      if (events.hasOwnProperty(type)) {
+        const callback = events[type as mapEventTypes];
+        if (callback && typeof callback === 'function') {
+          map.addEventListener(type, callback);
+        }
+      }
+    }
+  }
+  return behavior;
+};

src/components/libs/initInteractionStyles.ts

@@ -0,0 +1,8 @@
+export const initInteractionStyles = () => {
+  const style = document.createElement('style');
+  const css = `.grab = {cursor: move;cursor: grab;cursor: -moz-grab;cursor: -webkit-grab;}.grabbing{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}`;
+  style.type = 'text/css';
+  style.appendChild(document.createTextNode(css));
+  const head = document.head || document.getElementsByTagName('head')[0];
+  head.appendChild(style);
+};

src/components/libs/initPlatform.ts

@@ -10,5 +10,5 @@ export const initHPlatform = (options?: DefaultOptionsType) => {
   if (typeof h === 'undefined' || !h.service) {
     throw new Error('Here Map JavaScript files are not loaded.');
   }
-  return new h.service.Platform({ apikey });
+  return new h.service.Platform({ apikey: String(apikey) });
 };

src/contexts/platform.tsx

@@ -5,4 +5,6 @@ import { createContext } from 'react';
 import { IHPlatformState } from '../components/Platform';
 
 // create a hook for the platform context
-export const PlatformContext = createContext<IHPlatformState>({});
+export const PlatformContext = createContext<IHPlatformState>({
+  platform: null,
+});

src/index.tsx

@@ -10,7 +10,8 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 // Please do not use types off of a default export module or else Storybook Docs will suffer.
 // see: https://github.com/storybookjs/storybook/issues/9556
 
-export const Thing: FC<Props> = () => {
+export const Thing: FC<Props> = props => {
+  console.log({ props });
   const renderHereComponents = useHPlatform(
     {
       appId: 'EF8K24SYpkpXUO9rkbfA',

stories/Map.stories.tsx

@@ -1,17 +1,40 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { HMap, IHMapProps } from '../src';
-
+import { HMap, IHMapProps, useHPlatform } from '../src';
+const appId = 'EF8K24SYpkpXUO9rkbfA';
+const apiKey = 'TIAGlD6jic7l9Aa8Of8IFxo3EUemmcZlHm_agfAm6Ew';
 const meta: Meta = {
   title: 'HMap',
   component: HMap,
   argTypes: {},
-  parameters: {},
+  args: {
+    options: {
+      center: { lat: 52.5321472, lng: 13.3935785 },
+    },
+    style: {
+      height: '480px',
+      width: '100%',
+    },
+    useEvents: true,
+  },
 };
 
 export default meta;
 
-const Template: Story<IHMapProps> = args => <HMap {...args} />;
+const Template: Story<IHMapProps> = args => {
+  const renderHMapComponents = useHPlatform(
+    {
+      appId,
+      apiKey,
+      includeUI: true,
+      includePlaces: false,
+      version: 'v3/3.1',
+      interactive: true,
+    },
+    <HMap {...args} />
+  );
+  return renderHMapComponents;
+};
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing

stories/Platform.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { HPlatform, IHPlatform } from '../src/';
+const appId = 'EF8K24SYpkpXUO9rkbfA';
+const apiKey = 'TIAGlD6jic7l9Aa8Of8IFxo3EUemmcZlHm_agfAm6Ew';
+const meta: Meta = {
+  title: 'HPlatform JSX',
+  component: HPlatform,
+  args: {
+    options: {
+      appId,
+      apiKey,
+      includeUI: true,
+      includePlaces: false,
+      version: 'v3/3.1',
+      interactive: true,
+    },
+    children: <>Overriden Children If all went well, yaay! 🙂 </>,
+  },
+};
+
+export default meta;
+
+const Template: Story<IHPlatform> = args => {
+  return (
+    <HPlatform options={args.options}>
+      {args.children || 'Render Anything'}
+    </HPlatform>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+
+Default.args = {};

stories/useHPlatform.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { HPlatform, IHPlatform, useHPlatform } from '../src';
+import { ILoadHMapOptions } from '../src/components/libs/loadHMap';
+const appId = 'EF8K24SYpkpXUO9rkbfA';
+const apiKey = 'TIAGlD6jic7l9Aa8Of8IFxo3EUemmcZlHm_agfAm6Ew';
+const meta: Meta = {
+  title: 'useHPlatform',
+  component: HPlatform,
+  args: {
+    options: {
+      appId,
+      apiKey,
+      includeUI: true,
+      includePlaces: false,
+      version: 'v3/3.1',
+      interactive: true,
+    },
+    children: <>Overriden Children If all went well, yaay! 🙂 </>,
+  },
+};
+
+export default meta;
+
+const Template: Story<ILoadHMapOptions> = args => {
+  return useHPlatform(
+    { ...args },
+    <>Render Some Children Here, if Platform did load successfully</>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+
+Default.args = {};

tsconfig.json

@@ -31,5 +31,8 @@
     "forceConsistentCasingInFileNames": true,
     // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
     "noEmit": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ],
   }
 }

yarn.lock

@@ -3277,6 +3277,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/heremaps@^3.1.14":
+  version "3.1.14"
+  resolved "https://registry.yarnpkg.com/@types/heremaps/-/heremaps-3.1.14.tgz#a3b26b038db05eff7344e6099ecc6a89813e9012"
+  integrity sha512-jB0VomahI9fJjde6Fwn+nwnDcBFgJNGd4SQSN4pNq0GPImNKJdzgEKO+Ea+uKcWi6iB/ZiWbcpMZqCs3Qu+0QQ==
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"