[WIP]API Call

map/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.5",
     "maplibre-gl": "^3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

map/src/App.tsx

@@ -4,7 +4,8 @@ import type { FeatureCollection } from 'geojson';
 import type { CircleLayer } from 'react-map-gl/maplibre';
 
 import ControlPanel from './control-panel';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
+import axios from 'axios';
 
 const officeJson: FeatureCollection = {
   "type": "FeatureCollection",
@@ -36,6 +37,13 @@ function App() {
 
   const [popupInfo,setPopupInfo] = useState<izakayaObj>();
   const [isShown,setIsShown] = useState<boolean>(false);
+  const [izakayaList, setIzakayaList] = useState<izakayaObj[]>();
+
+
+  const searchIzakaya = () => {
+    axios.get("nomerukamoapi.azurewebsites.net")
+      .then((response) => setIzakayaList(response.data))
+  }
 
   const pins = useMemo(
     () =>
@@ -88,7 +96,7 @@ function App() {
           </Popup>
         )}
       </Map>
-      <ControlPanel />
+      <ControlPanel onClick={searchIzakaya}/>
     </>
   )
 }

map/src/control-panel.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-function ControlPanel() {
+const ControlPanel = (onClick: () => void) => {
     return (
         <div className="control-panel">
-            <h3>検索</h3>
+            <h3 onClick={onClick}>検索</h3>
         </div>
     );
 }