Starting to implement GPX visualization.

src/components/map/Gpxes.tsx

@@ -0,0 +1,36 @@
+import react, { useEffect, useState } from 'react';
+import dispatch from '../../workers/dispatcher-main';
+import { TileKeyObject, Rectangle } from './types';
+
+export interface GpxesProperties {
+  keyObject?: TileKeyObject;
+  zoom?: number;
+  viewPort?: Rectangle;
+}
+
+export const Gpxes: react.FC<GpxesProperties> = (props: GpxesProperties) => {
+  const [visibleGpxes, setVisibleGpxes] = useState<any>([]);
+  useEffect(() => {
+    const getVisibleGpxes = async () => {
+      const gpxes = await dispatch({
+        action: 'getGpxesForViewport',
+        params: {
+          viewport: props.viewPort,
+          zoomLevel: props.keyObject?.zoomLevel,
+        },
+      });
+      console.log(`Gpxes, visibles: ${JSON.stringify(gpxes)}`);
+      setVisibleGpxes(gpxes);
+    };
+    getVisibleGpxes();
+  }, [
+    props.viewPort?.bottomRight.x,
+    props.viewPort?.bottomRight.y,
+    props.viewPort?.topLeft.x,
+    props.viewPort?.topLeft.y,
+    props.keyObject?.zoomLevel,
+  ]);
+  return <></>;
+};
+
+export default Gpxes;