Here Maps JS API drawing tool
npm install @akaribrahim/here-maps-drawing---
Drawing components on Here Maps JS API
- About
- Installation
- Usage
- Docs
- Authors
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.
``bash`
npm install @akaribrahim/here-maps-drawing
`js`
{(mapObjects: MapObjects): JSX.Element =>
- You can find examples with explanation on HereMapsDrawingExamles
- Source code of examples on Github
- If you have an apiKey, play with code on CodeSandBox
_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 |{lat:41.03115 , lng: 29.00214}
| center | Center coordinates to be given when the map is loaded | | No |{height: 500, width: '100%'}
| 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 | | No |window.resize
| resizeOnWidthChange | Resize the map on event | true | No |({map, platform, behavior, ui}) => {}
| mapLanguage | Map Language | 'en-US' | No |
| onSuccess | Callback function returning map objects | | 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 |({keyCode, char}) => {}
| 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 | | No |(finalPolygon, mainGroup) => {}
| onSuccess | Callback function, on polygon drawing finish | | No |({ currentPointCount }) => {}
| onPutCornerPoint | Callback function, on each corner point | | No |(finalPolygon, polygonIndex, mainGroup) => {}
| onEdit(Coming Soon) | Callback function, on polygon edited | | No |
| isResizable(Coming Soon) | Final polygon resizable or not | true | No |
Default Values of drawingStyles as follows.
> Icons must be in the form that H.map.Icon() will accept
`js`
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)',
},
}
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.
`js``
{
undo: {
keyCode: 85,
char: 'U',
},
merge: {
keyCode: 77,
char: 'M',
},
cancel: {
keyCode: 27,
char: 'ESC',
},
}