Custom map marker (#163)

* update libs

* Add basic custom marker support

* fix event parameter

* Add prepare script

Co-authored-by: Said Adibilarijani <said.adibilarijani@syzygy.de>

Author: websaid

package-lock.json

@@ -19,6 +19,7 @@
     "start": "webpack-dev-server --history-api-fallback --hot --host 0.0.0.0 --port 4040",
     "build": "rimraf lib && rollup -c && rimraf lib/demo && mv lib/src/* lib/ && rimraf lib/src",
     "prepublishOnly": "yarn build",
+    "prepare": "npm run build",
     "prettier": "prettier --write \"src/**/*.tsx\" \"demo/**/*.tsx\" ",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -99,4 +100,4 @@
   "lint-staged": {
     "*.{js,css,scss}": "prettier --write"
   }
-}
+}

package.json

@@ -13,6 +13,8 @@ interface MarkerProps extends PigeonProps {
   style?: React.CSSProperties
   className?: string
 
+  children?: JSX.Element
+
   // callbacks
   onClick?: ({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void
   onContextMenu?: ({ event: HTMLMouseEvent, anchor: Point, payload: any }) => void
@@ -38,7 +40,7 @@ export function Marker(props: MarkerProps): JSX.Element {
   const color = props.color || '#93C0D0'
 
   // what do you expect to get back with the event
-  const eventParameters = (event: React.MouseEvent<SVGElement>) => ({
+  const eventParameters = (event: React.MouseEvent) => ({
     event,
     anchor: props.anchor,
     payload: props.payload,
@@ -55,30 +57,30 @@ export function Marker(props: MarkerProps): JSX.Element {
         ...(props.style || {}),
       }}
       className={props.className ? `${props.className} pigeon-click-block` : 'pigeon-click-block'}
+      onClick={props.onClick ? (event) => props.onClick(eventParameters(event)) : null}
+      onContextMenu={props.onContextMenu ? (event) => props.onContextMenu(eventParameters(event)) : null}
+      onMouseOver={(event) => {
+        props.onMouseOver && props.onMouseOver(eventParameters(event))
+        setInternalHover(true)
+      }}
+      onMouseOut={(event) => {
+        props.onMouseOut && props.onMouseOut(eventParameters(event))
+        setInternalHover(false)
+      }}
     >
-      <svg width={width} height={height} viewBox="0 0 61 71" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g
-          style={{ pointerEvents: 'auto' }}
-          onClick={props.onClick ? (event) => props.onClick(eventParameters(event)) : null}
-          onContextMenu={props.onContextMenu ? (event) => props.onContextMenu(eventParameters(event)) : null}
-          onMouseOver={(event) => {
-            props.onMouseOver && props.onMouseOver(eventParameters(event))
-            setInternalHover(true)
-          }}
-          onMouseOut={(event) => {
-            props.onMouseOut && props.onMouseOut(eventParameters(event))
-            setInternalHover(false)
-          }}
-        >
-          <path
-            d="M52 31.5C52 36.8395 49.18 42.314 45.0107 47.6094C40.8672 52.872 35.619 57.678 31.1763 61.6922C30.7916 62.0398 30.2084 62.0398 29.8237 61.6922C25.381 57.678 20.1328 52.872 15.9893 47.6094C11.82 42.314 9 36.8395 9 31.5C9 18.5709 18.6801 9 30.5 9C42.3199 9 52 18.5709 52 31.5Z"
-            fill={color}
-            stroke="white"
-            strokeWidth="4"
-          />
-          <circle cx="30.5" cy="30.5" r="8.5" fill="white" opacity={hover ? 0.98 : 0.6} />
-        </g>
-      </svg>
+      {props.children || (
+        <svg width={width} height={height} viewBox="0 0 61 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g style={{ pointerEvents: 'auto' }}>
+            <path
+              d="M52 31.5C52 36.8395 49.18 42.314 45.0107 47.6094C40.8672 52.872 35.619 57.678 31.1763 61.6922C30.7916 62.0398 30.2084 62.0398 29.8237 61.6922C25.381 57.678 20.1328 52.872 15.9893 47.6094C11.82 42.314 9 36.8395 9 31.5C9 18.5709 18.6801 9 30.5 9C42.3199 9 52 18.5709 52 31.5Z"
+              fill={color}
+              stroke="white"
+              strokeWidth="4"
+            />
+            <circle cx="30.5" cy="30.5" r="8.5" fill="white" opacity={hover ? 0.98 : 0.6} />
+          </g>
+        </svg>
+      )}
     </div>
   )
 }