Adding a modal for the Explorer (context menu).

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 (