Adding a sample GeoJson overlay (and figuring out a dirty way to tunnel mapState and latLngToPixel between Pigeon components).

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>
   );
 };

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;