Implement ON_MAP_SHAPE_CLICKED and allow title popup for shapes

HTML/src/MapShapes.tsx

@@ -9,7 +9,8 @@ import {
   PolylineProps,
   PolygonProps,
   RectangleProps,
-  CircleProps
+  CircleProps,
+  Popup
 } from "react-leaflet";
 import { MapShapeType, MapShape, WebViewLeafletEvents } from "./models";
 
@@ -46,7 +47,15 @@ class MapShapes extends React.Component<MapMapShapesProps> {
       <>
         {this.props.mapShapes.map(mapShape => {
           const props = { ...mapShape, color: mapShape.color ?? "white" };
-          return <this.Shape {...props} key={Math.random().toString()} />;
+          return <this.Shape {...props} key={mapShape.id || Math.random().toString()} 
+            onClick={() => {
+              this.props.onMapEvent(WebViewLeafletEvents.ON_MAP_SHAPE_CLICKED, {
+                mapShapeID: mapShape.id
+              });
+            }}
+            >
+              {mapShape.title && <Popup>{mapShape.title}</Popup>}
+            </this.Shape>
         })}
       </>
     );

HTML/src/models.ts

@@ -24,8 +24,8 @@ export enum WebViewLeafletEvents {
   ON_ZOOM_START = "onZoomStart",
   ON_ZOOM = "onZoom",
   ON_MAP_TOUCHED = "onMapClicked",
-  ON_MAP_MARKER_CLICKED = "onMapMarkerClicked"
-  //  ON_MAP_SHAPE_CLICKED = "onMapShapeClicked" cannot click on shapes yet
+  ON_MAP_MARKER_CLICKED = "onMapMarkerClicked", 
+  ON_MAP_SHAPE_CLICKED = "onMapShapeClicked"
 }
 
 export enum AnimationType {
@@ -103,6 +103,7 @@ export interface MapLayer {
 }
 
 export interface MapShape {
+  title?: string;
   bounds?: LatLng[];
   center?: LatLng;
   color?: string;

HTML/tsconfig.json

@@ -10,7 +10,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
+    "forceConsistentCasingInFileNames": false,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,

WebViewLeaflet/models.ts

@@ -24,8 +24,8 @@ export enum WebViewLeafletEvents {
   ON_ZOOM_START = "onZoomStart",
   ON_ZOOM = "onZoom",
   ON_MAP_TOUCHED = "onMapClicked",
-  ON_MAP_MARKER_CLICKED = "onMapMarkerClicked"
-  //  ON_MAP_SHAPE_CLICKED = "onMapShapeClicked" cannot click on shapes yet
+  ON_MAP_MARKER_CLICKED = "onMapMarkerClicked", 
+  ON_MAP_SHAPE_CLICKED = "onMapShapeClicked"
 }
 
 export enum AnimationType {
@@ -103,6 +103,7 @@ export interface MapLayer {
 }
 
 export interface MapShape {
+  title?: string;
   bounds?: LatLng[];
   center?: LatLng;
   color?: string;

WebViewLeaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-webview-leaflet",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "A React Native component that uses a React Native WebView to provide a Leaflet map.",
   "repository": {
     "type": "git",