From 95205bb49f2f16697613af93c049a1b95249a655 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Fri, 2 Sep 2022 15:56:41 +0200
Subject: [PATCH] Adding a sample GeoJson overlay (and figuring out a dirty way
 to tunnel mapState and latLngToPixel between Pigeon components).

---
 src/components/live-map.tsx     | 12 ++++++++++-
 src/components/live-overlay.tsx | 37 +++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/live-overlay.tsx

diff --git a/src/components/live-map.tsx b/src/components/live-map.tsx
index 48dc187..a6b80d5 100644
--- a/src/components/live-map.tsx
+++ b/src/components/live-map.tsx
@@ -2,6 +2,7 @@ import react from 'react';
 import { useState, useEffect } from 'react';
 import { Map, Marker, ZoomControl } from 'pigeon-maps';
 import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+import LiveOverlay from './live-overlay';
 
 const LiveMap: react.FC = () => {
   const initialCenter: [number, number] = [44.73574, 6.18981];
@@ -18,7 +19,7 @@ const LiveMap: react.FC = () => {
   }, []);
 
   return (
-    <Map
+     <Map
       center={center}
       zoom={zoom}
       onBoundsChanged={({ center, zoom }) => {
@@ -29,6 +30,15 @@ const LiveMap: react.FC = () => {
     >
       <ZoomControl />
       <Marker width={20} anchor={position} />
+      <LiveOverlay
+        coordinates={[
+          [center[1], center[0]],
+          [initialCenter[1], initialCenter[0]],
+        ]}
+        mapState={undefined}
+        latLngToPixel={undefined}
+        
+      />
     </Map>
   );
 };
diff --git a/src/components/live-overlay.tsx b/src/components/live-overlay.tsx
new file mode 100644
index 0000000..c76f0ba
--- /dev/null
+++ b/src/components/live-overlay.tsx
@@ -0,0 +1,37 @@
+import { GeoJson, MapState, Point } from 'pigeon-maps';
+import React from 'react';
+
+const LiveOverlay: React.FC<{
+  coordinates: [number, number][];
+  mapState: any;
+  latLngToPixel: any;
+}> = (props: {
+  coordinates: [number, number][];
+  mapState: MapState;
+  latLngToPixel:
+    | ((
+        latLng: Point,
+        center?: Point | undefined,
+        zoom?: number | undefined
+      ) => Point)
+    | undefined;
+}) => {
+  return (
+    <GeoJson
+      data={{
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            geometry: { type: 'LineString', coordinates: props.coordinates },
+            properties: { prop0: 'value0' },
+          },
+        ],
+      }}
+      mapState={props.mapState}
+      latLngToPixel={props.latLngToPixel}
+    />
+  );
+};
+
+export default LiveOverlay;