Skip to content

Commit

Permalink
render maps with v3/3/.1
Browse files Browse the repository at this point in the history
  • Loading branch information
limistah committed Dec 21, 2023
1 parent de568a7 commit a60dab4
Show file tree
Hide file tree
Showing 10 changed files with 734 additions and 678 deletions.
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@
"limit": "10 KB"
}
],
"resolutions": {
"jackspeak": "2.1.1"
},
"devDependencies": {
"@babel/core": "^7.23.6",
"@babel/preset-env": "^7.23.6",
Expand All @@ -73,7 +76,7 @@
"typescript": "^5.3.3"
},
"dependencies": {
"@limistah/here-map-js": "^3.1.0",
"@limistah/here-map-js": "^4.1.2",
"dot-prop": "^8.0.2",
"lodash.merge": "^4.6.2"
}
Expand Down
46 changes: 35 additions & 11 deletions src/components/Map/Map.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,65 @@
import React, { useContext, useEffect, useRef, useState } from 'react';
import { defaultOptions } from '../libs/defaults';
import { MAP_TYPES, defaultOptions } from '../libs/defaults';
import { PlatformContext } from '../../contexts/platform';
import { MapContext } from '../../contexts/map';
import merge from 'lodash.merge';
import { buildMap } from '../libs/buildMap';

export interface IHMapProps {
loadingEl: React.ReactNode;
style: React.CSSProperties;
container: React.RefObject<HTMLDivElement>;
children: React.ReactNode | React.ReactNode[];
options: {};
loadingEl?: React.ReactNode;
style?: React.CSSProperties;
children?: React.ReactNode | React.ReactNode[];
options?: IHMapOptions;
uiLang?: string;
ref?: React.RefObject<HTMLDivElement> | null;
build?: boolean;
interactive?: boolean;
useEvents?: boolean;
}

export type IHMapPropsRequired = Omit<
IHMapProps,
'loadingEl' | 'style' | 'children' | 'options' | 'ref'
>;

export interface IHMapOptions {
center: { lat: number; lng: number };
mapType?: MAP_TYPES;
}

export type IHMapOptionsMerged = IHMapPropsRequired &
IHMapOptions & { container: React.RefObject<HTMLDivElement> | null };

export interface IHMapState {}

export const HMap = (props: IHMapProps) => {
// const Platform = useHPlatform()
const platformState = useContext(PlatformContext);

const containerRef = props.container || useRef<HTMLDivElement>();

const [mapState, setMapState] = useState<IHMapState>({});

const containerRef = props.ref || useRef<HTMLDivElement>(null);
useEffect(() => {
const mergedOptions = merge(
{
container,
container: containerRef,
build: true,
},
platformState.options,
{
interactive: props.interactive,
useEvents: props.useEvents,
},
props.options
);


const buildResult = buildMap(platformState.platform, mergedOptions);

setMapState(buildResult);
}, [props]);
}, []);

const { style, loadingEl, container, children } = props;
const { style, loadingEl, children } = props;
// const { options } = this.state.builder;

const options = {};
Expand Down
15 changes: 7 additions & 8 deletions src/components/Platform/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { DefaultOptionsType } from '../libs/defaults';
import { PlatformContext } from '../../contexts/platform';

export interface IHPlatform {
children: React.ReactNode | React.ReactNode[];
children?: React.ReactNode | React.ReactNode[];
options: ILoadHMapOptions;
}

Expand Down Expand Up @@ -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 == 'api.here.com' &&
{platform?.a == options?.apikey &&
(options?.app_code || options?.apikey) &&
props.children}
</PlatformContext.Provider>
Expand All @@ -57,8 +57,7 @@ export const HPlatform = (props: IHPlatform) => {

// Use this to create A Here Map Platform
export const useHPlatform = (
platformOptions: ILoadHMapOptions,
children?: React.ReactNode | ReactNode[]
) => {
return <HPlatform options={platformOptions}>{children}</HPlatform>;
};
platformOptions: ILoadHMapOptions,
children?: React.ReactNode | ReactNode[]
) => <HPlatform options={platformOptions}>{children}</HPlatform>;

160 changes: 103 additions & 57 deletions src/components/libs/buildMap.ts
Original file line number Diff line number Diff line change
@@ -1,82 +1,128 @@
import initMap from './initMap';
import initInteraction from './initInteraction';
import initDefaultUI from './initDefaultUI';
import initInteractionStyles from './initInteractionStyles';
// import initInteraction from './initInteraction';
// import initDefaultUI from './initDefaultUI';
// import initInteractionStyles from './initInteractionStyles';

import dotProp from 'dot-prop';
import * as dotProp from 'dot-prop';
import {
DefaultOptionsType,
MAP_TYPES,
mapEventTypes,
mapEvents,
} from './defaults';
import { IHMapOptions, IHMapOptionsMerged } from '../Map';
import { validateMapType } from './validateMapType';
import { MAP_TYPES } from './defaults';

export default (platform, container, mapOptions, mapType: MAP_TYPES) => {
validateMapType(mapType);
// Get all the default layers so we can set which to use based on the map type
const defaultLayers = platform.createDefaultLayers();
const initMap = (
container: React.RefObject<HTMLDivElement>,
mapLayer: any,
mapOptions: IHMapOptions
) => {
// @ts-ignore
const h = window.H;

// Instantiate (and display) a map object:
return new H.Map(container, dotProp.get(defaultLayers, mapType), mapOptions);
return (
container.current && new h.Map(container.current, mapLayer, mapOptions)
);
};

/**
* The whole library is bootstrapped after the initialization is done using the options
* @property {string} options.version Version of the api to load. Defaults to v3
* @property {string} options.VERSION Default version Defaults to v3
* @property {object} options.mapEvents Map events implementation
* @property {object} options.mapOptions Options needed to initialize the map
* @property {object} options.platformOptions Options needed to initialize the map
* @property {boolean} options.interactive Adds interactivity to the MAP
* @property {boolean} options.useEvents Adds event handling to the map
* @property {boolean} options.includeUI Add UI script to the MAP
* @property {boolean} options.build Determines if the map should be built
* @property {Node} options.container DOM Element to hold the MAP
* @property {string} options.uiLang Language of the UI
* @property {build} options.build Flag to tell if the MAP should be build immediately
* @property {string} options.appId Here Map APP ID
* @property {string} options.appCode Here Map APP code
* @property {string} options.mapType The type of the map to load e.g // "normal.map"
* @property {string} options.MAP_TYPE Default map type to load "normal.map"
* @param {object} options Items necessary to run the library
* @returns {object}
*/
export const buildMap = (platform, options) => {
export const initInteraction = (
map: any,
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))
: 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;
};

export const initDefaultUI = (
platform: any,
map: any,
includeUI: boolean,
uiLang?: string
) => {
if (!includeUI) {
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);
};

export const buildMap = (
platform: any,
options: IHMapOptionsMerged & DefaultOptionsType
) => {
// Get values from the options
const {
useEvents,
mapEvents,
interactive,
includeUI,
// includeUI,
mapType,
MAP_TYPE,
mapTypes,
mapOptions,
uiLang,
// uiLang,
container,
build,
} = options;

const _mapType = mapType || MAP_TYPE;

let ret = { options: { ...options, MAP_TYPE: _mapType }, platform };
const retObject: {
map?: any;
interaction?: any;
ui?: any;
options: typeof options & { mapType: MAP_TYPES };
} = {
options: { ...options, mapType: mapType || 'vector.normal.map' },
};

if (container && build) {
// Create a Map
ret.map = initMap(platform, container, mapOptions, mapTypes, _mapType);
ret.interaction = initInteraction(
ret.map,
interactive,
useEvents,
mapEvents
validateMapType(retObject.options.mapType);
// Get all the default layers so we can set which to use based on the map type
const defaultLayers = platform.createDefaultLayers();

const mapLayer = dotProp.getProperty(
defaultLayers,
retObject.options.mapType
);
if (includeUI) {
ret.ui = initDefaultUI(platform, ret.map, includeUI, uiLang);
// Create a Map
retObject.map = mapLayer && initMap(container, mapLayer, mapOptions);
while (interactive && !retObject.interaction) {
retObject.interaction = initInteraction(
retObject.map,
interactive,
useEvents,
mapEvents
);
// if (includeUI) {
// retObject.ui = initDefaultUI(platform, retObject.map, includeUI, uiLang);
// }
// Adds the grabbing to the document
// initInteractionStyles();
}
// Adds the grabbing to the document
initInteractionStyles();
} else {
ret.createMap = initMap;
ret.createPlatform = initPlatform;
ret.createInteraction = initInteraction;
ret.createDefaultUI = initDefaultUI;
ret.createInteractionStyles = initInteractionStyles;
// ret.createMap = initMap;
// ret.createPlatform = initPlatform;
// ret.createInteraction = initInteraction;
// ret.createDefaultUI = initDefaultUI;
// ret.createInteractionStyles = initInteractionStyles;
}
return ret;
return retObject;
};
Loading

0 comments on commit a60dab4

Please sign in to comment.