Adding file drop capability to import GPX files.

src/components/map/Map.tsx

@@ -130,6 +130,28 @@ const Map: Component = () => {
     });
   }
 
+  const dropHandler = (event: any) => {
+    event.preventDefault();
+    console.log({
+      caller: 'Map / dropHandler',
+      event,
+      files: event.dataTransfer.files,
+    });
+    importUrls(event.dataTransfer.files);
+  };
+
+  const dragOverHandler = (event: any) => {
+    event.preventDefault();
+    console.log({ caller: 'Map / dragOverHandler', event });
+  };
+
+  // const dragStartHandler = (event: any) => {
+  //   event.preventDefault();
+  //   event.dataTransfer.effectAllowed = 'all';
+  //   event.dataTransfer.dropEffect = 'move';
+  //   console.log({ caller: 'Map / dragStartHandler', event });
+  // };
+
   if (
     params.lat === '0' &&
     params.lon === '0' &&
@@ -313,7 +335,12 @@ const Map: Component = () => {
   return (
     //<OsmFetch map={getMap} />
     // @ts-ignore
-    <div class='ol-map' ref={target}>
+    <div
+      class='ol-map'
+      ref={target}
+      ondrop={dropHandler}
+      ondragover={dragOverHandler}
+    >
       <Updater />
       <Invitation />
       <Overlays map={getMap} />