\n\n## 📝 Table of Contents\n\n- [About](#about)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Docs](#docs)\n- [Authors](#authors)\n\n## 🧐 About \n\nWe 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.\n\n## 🏁 Installation \n\n```bash\nnpm install @akaribrahim/here-maps-drawing\n```\n\n## 🎈 Usage \n\n```js\n\n {(mapObjects: MapObjects): JSX.Element => }\n\n```\n\n- You can find examples with explanation on [HereMapsDrawingExamles](https://akaribrahim.github.io/here-maps-drawing-examples/)\n- Source code of examples on [Github](https://github.com/akaribrahim/here-maps-drawing-examples)\n- If you have an apiKey, play with code on [CodeSandBox](https://codesandbox.io/s/akaribrahim-here-maps-drawing-311tkh?file=/src/App.js)\n\n## 🎈 Docs \n\n_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._\n\n**HereMapContainer**\n\n> With the onSuccess method, we can take the `map, platform, ui, behavior` objects and perform all the operations written in the HereMaps document.\n\n| | Description | Default Value | isRequired |\n| ------------------: | :---------------------------------------------------: | :-------------------------------------: | :--------: |\n| apiKey | HereMaps Api Key | null | `Yes` |\n| center | Center coordinates to be given when the map is loaded | `{lat:41.03115 , lng: 29.00214}` | No |\n| zoom | Zoom level when map is loaded | 9 | No |\n| useEvents | Use Events | true | No |\n| useUi | Use Ui | true | No |\n| containerStyles | Style object of map container | `{height: 500, width: '100%'}` | No |\n| resizeOnWidthChange | Resize the map on `window.resize` event | true | No |\n| mapLanguage | Map Language | 'en-US' | No |\n| onSuccess | Callback function returning map objects | `({map, platform, behavior, ui}) => {}` | No |\n\n**PolygonDraw**\n\n> With the onSuccess method, we can take the `map, platform, ui, behavior` objects and perform all the operations written in the HereMaps document.\n\n| | Description | Default Value | isRequired |\n| -----------------------: | :---------------------------------------------------------------------------------: | :---------------------------------------------: | :--------: |\n| map | Core Map Object | null | `Yes` |\n| color | Instead of messing with the whole style from scratch, just changing the color (HEX) | null | No |\n| drawingStyles | Styles for each step, see DrawingStyles section for more details | **See [DrawingStyles](#DrawingStyles)** | No |\n| useShortcuts | Use keyboard shortcut to help drawing | true | No |\n| shortcuts | shortcut keys | **See [ShortcutKeys](#ShortcutKeys)** | No |\n| onShortcutCallback | Callback that returns information when using a shortcut | `({keyCode, char}) => {}` | No |\n| onSuccess | Callback function, on polygon drawing finish | `(finalPolygon, mainGroup) => {}` | No |\n| onPutCornerPoint | Callback function, on each corner point | `({ currentPointCount }) => {}` | No |\n| onEdit(Coming Soon) | Callback function, on polygon edited | `(finalPolygon, polygonIndex, mainGroup) => {}` | No |\n| isResizable(Coming Soon) | Final polygon resizable or not | true | No |\n\n## DrawingStyles\n\nDefault Values of `drawingStyles` as follows.\n\n> Icons must be in the form that **H.map.Icon()** will accept\n\n```js\ndrawingStyles: {\n firstIcon: rectangleSvg('#185CF7').trim(),\n icon: rectangleSvg().trim(),\n polylineStylesOnDraw: { // The line drawn around the polygon at the drawing stage\n lineWidth: 3,\n strokeColor: '#185CF7',\n lineJoin: 'round',\n },\n polygonStylesOnDraw: { // Polygon at the drawing stage\n lineWidth: 0,\n fillColor: 'rgba(24, 92, 247, 0.2)',\n },\n movingPolylineStyles: { // The line following mouse movements\n lineWidth: 3,\n strokeColor: '#185CF7',\n lineJoin: 'round',\n lineDash: [2],\n lineDashOffset: 1,\n },\n finalPolygonStyles: { // Polygon created in the final\n lineWidth: 3,\n strokeColor: '#185CF7',\n lineJoin: 'round',\n fillColor: 'rgba(24, 92, 247, 0.2)',\n },\n}\n```\n\n## ShortcutKeys\n\nYou can create shortcuts for three different events. Events only work during the polygon drawing phase\n\nIt can be customized by changing the keyCode and char values in the format given below.\n\n> Undo => Deletes the last point\n\n> Merge => Completes the polygon by connecting it with the first point\n\n> Cancel => Deletes the polygon in the drawing phase.\n\n```js\n{\n undo: {\n keyCode: 85,\n char: 'U',\n },\n merge: {\n keyCode: 77,\n char: 'M',\n },\n cancel: {\n keyCode: 27,\n char: 'ESC',\n },\n}\n```\n\n## ✍️ Authors \n\n- [@akaribrahim](https://github.com/akaribrahim)\n","readmeFilename":"README.md","homepage":"https://github.com/akaribrahim/here-maps-drawing#readme","repository":{"type":"git","url":"git+https://github.com/akaribrahim/here-maps-drawing.git"},"bugs":{"url":"https://github.com/akaribrahim/here-maps-drawing/issues"}}