Re-usable shortcuts/components for municipality

examples/demo/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.5.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

examples/demo/src/App.tsx

@@ -7,7 +7,9 @@ import MountainOver8000 from './apps/MountainOver8000';
 import NationalPark from './apps/NationalPark';
 import ProvincePopulation from './apps/ProvincePopulation';
 import TouristDestination from './apps/TouristDestination';
+import { MunicipalityExample } from './apps/MunicipalityExample';
 import ZoneExample from './apps/ZoneExample';
+import { Toaster } from 'react-hot-toast';
 
 function App() {
   const [currentDemo, setCurrentDemo] = useState<string>('basic');
@@ -26,6 +28,8 @@ function App() {
         return <MajorCities />;
       case 'national-park':
         return <NationalPark />;
+      case 'municipality':
+        return <MunicipalityExample />;
       case 'district-map':
         return <DistrictExample />;
       case 'zone':
@@ -82,6 +86,12 @@ function App() {
           >
             District map
           </li>
+          <li
+            onClick={() => setCurrentDemo('municipality')}
+            className={currentDemo === 'municipality' ? 'active' : ''}
+          >
+            Municipality
+          </li>
           <li
             onClick={() => setCurrentDemo('zone')}
             className={currentDemo === 'zone' ? 'active' : ''}
@@ -90,7 +100,10 @@ function App() {
           </li>
         </ul>
       </aside>
-      <main className="main-content">{renderDemo()}</main>
+      <main className="main-content">
+        {renderDemo()}
+        <Toaster />
+      </main>
     </div>
   );
 }

examples/demo/src/apps/MunicipalityExample.tsx

@@ -0,0 +1,21 @@
+import { Feature, Geometry } from 'geojson';
+import { Municipality } from '../../../../src';
+import { toast } from 'react-hot-toast';
+
+export function MunicipalityExample() {
+  return (
+    <Municipality
+      center={[28.3949, 84.124]}
+      zoom={7}
+      dataPoints={[
+        { position: [27.7, 85.3], description: 'Kathmandu' },
+        { position: [28.2, 83.9], description: 'Pokhara' },
+      ]}
+      onFeatureClick={(feature: Feature<Geometry, any>) => {
+        // toast.success(feature);
+        console.log(feature.properties);
+        console.log(feature);
+      }}
+    />
+  );
+}

src/Municipality.tsx

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import { MapContainer, Marker, Popup, GeoJSON, TileLayer } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import { MapProps } from './type/type';
+import { Feature, FeatureCollection, Geometry } from 'geojson';
+import { Layer } from 'leaflet';
+
+import municipalityGeoJsonData from './constants/municipality.geo.json';
+
+const Municipality: FC<MapProps> = ({
+  center,
+  zoom,
+  dataPoints,
+  onFeatureClick,
+}) => {
+  const geoJsonData: FeatureCollection =
+    municipalityGeoJsonData as FeatureCollection;
+
+  // Default feature click handler if no custom function is provided
+  const handleFeatureClick = (feature: Feature<Geometry, any>) => {
+    if (onFeatureClick) {
+      onFeatureClick(feature);
+    } else {
+      alert(feature.properties?.GaPa_NaPa);
+    }
+  };
+
+  const onEachFeature = (feature: Feature<Geometry, any>, layer: Layer) => {
+    layer.on({
+      click: () => handleFeatureClick(feature),
+    });
+  };
+
+  return (
+    <MapContainer
+      center={center}
+      zoom={zoom}
+      style={{ height: '100vh', width: '100%' }}
+    >
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
+      />
+
+      <GeoJSON data={geoJsonData} onEachFeature={onEachFeature} />
+
+      {/* Render markers */}
+      {dataPoints &&
+        dataPoints.map((point, index) => (
+          <Marker key={index} position={point.position}>
+            <Popup>{point.description}</Popup>
+          </Marker>
+        ))}
+    </MapContainer>
+  );
+};
+
+export default Municipality;