Adding a modal for the Explorer (context menu).

src/App.tsx

@@ -43,6 +43,7 @@ import CurrentLocation from './components/map/CurrentLocation';
 import GpxImport from './components/dialogs/GpxImport';
 import Gpxes from './components/map/Gpxes';
 import MapChooser from './components/dialogs/MapChooser';
+import Explorer from './components/dialogs/Explorer';
 // import { initDb } from './db';
 // import PouchDB from 'pouchdb';
 // import PouchDBFind from 'pouchdb-find';
@@ -134,6 +135,7 @@ const App: React.FC = () => {
           />
         </IonApp>
       </IonContent>
+      <Explorer/>
       <IonHeader className='ion-no-border' translucent={true}>
         <IonToolbar>
           <IonButtons slot='start'>

src/components/dialogs/Explorer.tsx

@@ -0,0 +1,50 @@
+import {
+  IonModal,
+  IonToolbar,
+  IonTitle,
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonList,
+} from '@ionic/react';
+import react, { useRef, useState } from 'react';
+import { atom, useAtom } from 'jotai';
+import i18n from '../../i18n';
+
+import cssDialog from './dialogs.module.css';
+
+export interface ExplorerProperties {}
+
+export const isOpenAtom = atom(false);
+
+export const Explorer: react.FC<ExplorerProperties> = (
+  props: ExplorerProperties
+) => {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const [isOpen, setIsOpen] = useAtom(isOpenAtom);
+
+  const dismiss = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <IonModal
+      ref={modal}
+      className={cssDialog.modal}
+      isOpen={isOpen}
+      onDidDismiss={dismiss}
+    >
+      <IonToolbar>
+        <IonTitle>{i18n.explorer.nearBy}</IonTitle>
+        <IonButtons slot='end'>
+          <IonButton onClick={dismiss}>{i18n.common.close}</IonButton>
+        </IonButtons>
+      </IonToolbar>
+      <IonContent>
+        <IonList></IonList>
+      </IonContent>
+    </IonModal>
+  );
+};
+
+export default Explorer;

src/components/map/Handlers.tsx

@@ -4,7 +4,9 @@ import { Point } from './types';
 import './Handler.css';
 import { handlersConfig } from './config';
 import { Transformation } from './LiveMap';
+import { isOpenAtom } from '../dialogs/Explorer';
 import cache from '../../lib/cache';
+import { useAtom } from 'jotai';
 
 /**
  *
@@ -293,10 +295,14 @@ export const Handlers: react.FC<HandlersProperties> = (
     }
   };
 
+  const [, setIsOpen] = useAtom(isOpenAtom);
+
   const contextMenuHandler = (event: any) => {
     console.log(event);
     event.preventDefault();
     console.log(cache.map({ cacheId: 'points' }));
+
+    setIsOpen(true);
   };
 
   return (

src/i18n/index.tsx

@@ -9,6 +9,10 @@ const strings = new LocalizedStrings({
     mapChooser: {
       chooseYourMap: 'Choose your map',
     },
+
+    explorer: {
+      nearBy: 'Nearby',
+    },
   },
   fr: {
     colonize: (input: string): any => strings.formatString('{0} :', input),
@@ -22,6 +26,10 @@ const strings = new LocalizedStrings({
     mapChooser: {
       chooseYourMap: 'Choisissez votre carte',
     },
+
+    explorer: {
+      nearBy: "Près d'ici",
+    },
   },
 });