Add basic wiki summary retrieval of a fixed place with marker displaying the information

frontend/src/components/Map.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { MapContainer, TileLayer, 
         useMapEvents,
-        // Marker, 
-        // Popup 
+        Marker, 
+        Popup ,
+        // useMap
     } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
@@ -25,7 +26,17 @@ const ClickHandler = ({ onMapClick }) => {
     return null;
   };
 
+
+
 const Map = ( { onMapClick } ) => {
+    const [wikiContent, setWikiContent] = useState(null);
+    const fetchWiki = async (pageName) => {
+        const res = await fetch(`http://localhost:8004/wiki/${pageName}`);
+        const data = await res.json();
+        setWikiContent(data);
+      };
+    const markerPosition = [21.2514, 81.6296];
+
     return (
         <MapContainer
             center={[0, 0]}
@@ -38,7 +49,22 @@ const Map = ( { onMapClick } ) => {
             />
             
             <ClickHandler onMapClick={onMapClick}/>
+            <Marker position={markerPosition} eventHandlers={{
+        click: () => fetchWiki("Raipur"),
+      }}>
+        <Popup minWidth={250}>
+          {wikiContent ? (
+            <>
+              <strong>{wikiContent.title}</strong><br />
+              <p style={{ fontSize: '12px' }}>{wikiContent.content}</p>
+            </>
+          ) : (
+            "Click marker to load Wikipedia content"
+          )}
+        </Popup>
+      </Marker>
 
+            {/* Example marker */}
         </MapContainer>
     );
 };

main.py

@@ -1,7 +1,44 @@
 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+# from pydantic import BaseModel
+import requests
+from geopy.geocoders import Nominatim
 
 app = FastAPI()
 
+loc = Nominatim(user_agent="GetLoc")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Replace with your frontend domain in prod
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 @app.get("/")
 def health_check():
     return {"status": "ok"}
+
+@app.get("/wiki/{page_name}")
+async def get_wiki_page(page_name: str):
+    response = requests.get(f"https://en.wikipedia.org/api/rest_v1/page/summary/{page_name}", timeout=10)
+
+    if response.status_code != 200:
+        return JSONResponse(
+            content={"error": "Page not found"},
+            status_code=404
+        )
+    
+    coords = loc.geocode(page_name)
+    
+    return JSONResponse(
+        content={
+            "title": page_name,
+            "content": f"{response.json().get('extract', 'No content available')}",
+            "latitude": coords.latitude if coords else None,
+            "longitude": coords.longitude if coords else None
+        },
+        status_code=200
+    )