@akaribrahim/here-maps-drawing NPM

📝 Table of Contents

🧐 About

We can do simple operations using Here Maps Js API but it doesn't provide any drawing tools. The purpose of this library is to be able to draw shapes like polygons on Here Maps.

🏁 Installation

npm install @akaribrahim/here-maps-drawing

🎈 Usage

<HereMapContainer apiKey={hereApiKey}>
  {(mapObjects: MapObjects): JSX.Element => <PolygonDraw map={mapObjects.map} />}
</HereMapContainer>

You can find examples with explanation on HereMapsDrawingExamles
Source code of examples on Github
If you have an apiKey, play with code on CodeSandBox

🎈 Docs

KNOWN ISSUE: Components are having trouble working with StrictMode that comes with React 18 or later. It will run in the production environment, but you must disable StrictMode in the development environment.

HereMapContainer

With the onSuccess method, we can take the map, platform, ui, behavior objects and perform all the operations written in the HereMaps document.

	Description	Default Value	isRequired
apiKey	HereMaps Api Key	null	`Yes`
center	Center coordinates to be given when the map is loaded	`{lat:41.03115 , lng: 29.00214}`	No
zoom	Zoom level when map is loaded	9	No
useEvents	Use Events	true	No
useUi	Use Ui	true	No
containerStyles	Style object of map container	`{height: 500, width: '100%'}`	No
resizeOnWidthChange	Resize the map on `window.resize` event	true	No
mapLanguage	Map Language	'en-US'	No
onSuccess	Callback function returning map objects	`({map, platform, behavior, ui}) => {}`	No

PolygonDraw

With the onSuccess method, we can take the map, platform, ui, behavior objects and perform all the operations written in the HereMaps document.

	Description	Default Value	isRequired
map	Core Map Object	null	`Yes`
color	Instead of messing with the whole style from scratch, just changing the color (HEX)	null	No
drawingStyles	Styles for each step, see DrawingStyles section for more details	See DrawingStyles	No
useShortcuts	Use keyboard shortcut to help drawing	true	No
shortcuts	shortcut keys	See ShortcutKeys	No
onShortcutCallback	Callback that returns information when using a shortcut	`({keyCode, char}) => {}`	No
onSuccess	Callback function, on polygon drawing finish	`(finalPolygon, mainGroup) => {}`	No
onPutCornerPoint	Callback function, on each corner point	`({ currentPointCount }) => {}`	No
onEdit(Coming Soon)	Callback function, on polygon edited	`(finalPolygon, polygonIndex, mainGroup) => {}`	No
isResizable(Coming Soon)	Final polygon resizable or not	true	No

DrawingStyles

Default Values of drawingStyles as follows.

Icons must be in the form that H.map.Icon() will accept

drawingStyles: {
    firstIcon: rectangleSvg('#185CF7').trim(),
    icon: rectangleSvg().trim(),
    polylineStylesOnDraw: { // The line drawn around the polygon at the drawing stage
       lineWidth: 3,
       strokeColor: '#185CF7',
       lineJoin: 'round',
    },
    polygonStylesOnDraw: { // Polygon at the drawing stage
       lineWidth: 0,
       fillColor: 'rgba(24, 92, 247, 0.2)',
    },
    movingPolylineStyles: { // The line following mouse movements
       lineWidth: 3,
       strokeColor: '#185CF7',
       lineJoin: 'round',
       lineDash: [2],
       lineDashOffset: 1,
    },
    finalPolygonStyles: { // Polygon created in the final
       lineWidth: 3,
       strokeColor: '#185CF7',
       lineJoin: 'round',
       fillColor: 'rgba(24, 92, 247, 0.2)',
    },
}

ShortcutKeys

You can create shortcuts for three different events. Events only work during the polygon drawing phase

It can be customized by changing the keyCode and char values in the format given below.

Undo => Deletes the last point
Merge => Completes the polygon by connecting it with the first point
Cancel => Deletes the polygon in the drawing phase.

{
    undo: {
       keyCode: 85,
       char: 'U',
    },
    merge: {
       keyCode: 77,
       char: 'M',
    },
    cancel: {
       keyCode: 27,
       char: 'ESC',
    },
}