moved the bharat map js files to src, and made it in typescript

Author: Ciphrox

package-lock.json

@@ -57,6 +57,7 @@
     "astro": "5.1.1",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
+    "d3": "7.9.0",
     "dotenv": "^16.4.5",
     "dotenv-expand": "^11.0.6",
     "lucide-react": "0.469.0",
@@ -72,6 +73,7 @@
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/typography": "0.5.10",
+    "@types/d3": "7.4.3",
     "@types/node": "22.10.2",
     "@types/react": "19.0.0",
     "@typescript-eslint/eslint-plugin": "6.13.2",
@@ -87,4 +89,4 @@
     "prettier-plugin-tailwindcss": "0.6.8",
     "shx": "0.3.4"
   }
-}
+}

package.json

@@ -9,6 +9,8 @@
   display: flex;
   align-items: center;
   position: relative;
+  width: 100%;
+  height: calc(100vh - 180px);
 }
 
 svg {
@@ -51,7 +53,7 @@ svg {
   fill: var(--primary-color);
 }
 
-.capital-marker:hover + .capital-label {
+.capital-marker:hover+.capital-label {
   opacity: 1;
   transform: translateY(-8px);
 }
@@ -74,4 +76,4 @@ svg {
 .capital-label:hover,
 .capital-label.active {
   opacity: 1;
-}
+}

public/js/main.js

@@ -0,0 +1,24 @@
+---
+---
+
+<div id="stateModal" class="modal">
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <div class="modal-header">
+      <h2 id="stateName"></h2>
+    </div>
+    <div class="modal-body">
+      <p>Capital: <span id="stateCapital"></span></p>
+      <p>Area: <span id="stateArea"></span></p>
+      <p>Languages: <span id="stateLanguages"></span></p>
+      <p>Dance Forms: <span id="stateDance"></span></p>
+      <p>Literacy Rate: <span id="stateLiteracy"></span></p>
+      <p>Description: <span id="stateDescription"></span></p>
+    </div>
+    <div class="modal-footer">
+      <button id="copyButton">
+        <i class="fas fa-copy"></i> Copy
+      </button>
+    </div>
+  </div>
+</div>

public/js/modules/StateModal.js

@@ -8,7 +8,7 @@ import "@/assets/styles/bharat-map/components/modal.css";
     <div class="modal-header">
       <h2 id="stateName" style="margin: 0"></h2>
       <button id="copyButton">
-        <i class="fas fa-copy"></i> Copy Details
+        <i class="fas fa-copy"></i> Copy
       </button>
     </div>
     <div class="modal-body">

src/assets/styles/bharat-map/components/map.css

@@ -11,5 +11,20 @@ const {
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
   <slot />
   <script src="https://d3js.org/d3.v7.min.js"></script>
-  <script type="module" src="/js/main.js"></script>
+
+  <script>
+    import { MAP_CONFIG } from "@/utils/BharatMap/config/mapConfig";
+    import { BharatMap } from "@/utils/BharatMap/modules/BharatMap";
+
+    declare global {
+      interface Window {
+        bharatMap: BharatMap;
+      }
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
+      window.bharatMap = new BharatMap(MAP_CONFIG);
+      window.bharatMap.loadData();
+    });
+  </script>
 </BaseLayout>

src/components/BharatMap/StateModal.astro

@@ -1,5 +1,5 @@
 export const MAP_CONFIG = {
-  center: [78.9629, 22.5937],
+  center: [78.9629, 22.5937] as [number, number],
   scale: 900,
   width: window.innerWidth - 60,
   height: window.innerHeight - 180,

src/components/BharatMap/StateModel.astro

@@ -1,14 +1,41 @@
-import { StateModal } from "./StateModal.js";
+import * as d3 from "d3";
+import { StateModal } from "./StateModal";
+
+interface MapConfig {
+  center: [number, number];
+  scale: number;
+  width: number;
+  height: number;
+  initialTransform: d3.ZoomTransform | null;
+}
+
+interface CapitalData {
+  name: string;
+  coordinates: [number, number];
+}
+
+interface StateData {
+  capital: CapitalData;
+  [key: string]: any; // for other state properties
+}
 
 export class BharatMap {
-  // Main class handling the map visualization and interaction
-  constructor(config) {
+  private config: MapConfig;
+  private stateData: Record<string, StateData>;
+  private projection: d3.GeoProjection;
+  private path: d3.GeoPath;
+  private zoom: d3.ZoomBehavior<SVGSVGElement, unknown>;
+  private svg!: d3.Selection<SVGSVGElement, unknown, HTMLElement, any>;
+  private mapGroup!: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
+  private initialTransform: d3.ZoomTransform | null;
+
+  constructor(config: MapConfig) {
     this.config = config;
     this.stateData = {};
     this.projection = this.createProjection();
     this.path = d3.geoPath().projection(this.projection);
     this.zoom = d3
-      .zoom()
+      .zoom<SVGSVGElement, unknown>()
       .scaleExtent([1, 8])
       .on("zoom", (event) => this.handleZoom(event));
     this.initializeSVG();
@@ -21,7 +48,7 @@ export class BharatMap {
     window.addEventListener("beforeunload", this.cleanup);
   }
 
-  cleanup() {
+  private cleanup(): void {
     window.removeEventListener("resize", this.handleResize);
     window.removeEventListener("beforeunload", this.cleanup);
     // Clear any D3 selections
@@ -31,9 +58,9 @@ export class BharatMap {
   }
 
   // Initialize SVG container and set up zoom behavior
-  initializeSVG() {
+  private initializeSVG(): void {
     this.svg = d3
-      .select(".map-container")
+      .select<SVGSVGElement, unknown>(".map-container")
       .append("svg")
       .attr("viewBox", `0 0 ${this.config.width} ${this.config.height}`)
       .attr("preserveAspectRatio", "xMidYMid meet");
@@ -46,7 +73,7 @@ export class BharatMap {
   }
 
   // Create Mercator projection for Bharat map
-  createProjection() {
+  private createProjection(): d3.GeoProjection {
     return d3
       .geoMercator()
       .center(this.config.center)
@@ -55,9 +82,15 @@ export class BharatMap {
   }
 
   // Load GeoJSON and state data from external files
-  async loadData() {
+  public async loadData(): Promise<void> {
     try {
-      const [geoData, states] = await Promise.all([d3.json("data/bharat.geojson"), d3.json("data/state_data.json")]);
+      const [geoData, states] = await Promise.all([
+        d3.json<GeoJSON.FeatureCollection>("data/bharat.geojson"),
+        d3.json<Record<string, StateData>>("data/state_data.json")
+      ]);
+
+      if (!geoData || !states) throw new Error("Failed to load data");
+
       this.stateData = states;
       this.renderMap(geoData);
       this.renderCapitals();
@@ -67,22 +100,24 @@ export class BharatMap {
     }
   }
 
-  handleDataLoadError() {
+  private handleDataLoadError(): void {
     // Error UI feedback
     const container = document.querySelector(".map-container");
-    container.innerHTML = `
-            <div class="error-message">
-                Failed to load map data. Please try refreshing the page.
-            </div>
-        `;
+    if (container) {
+      container.innerHTML = `
+        <div class="error-message">
+          Failed to load map data. Please try refreshing the page.
+        </div>
+      `;
+    }
   }
 
   // Handle zoom and pan events
-  handleZoom(event) {
-    this.mapGroup.attr("transform", event.transform);
+  private handleZoom(event: d3.D3ZoomEvent<SVGSVGElement, unknown>): void {
+    this.mapGroup.attr("transform", event.transform.toString());
   }
 
-  renderMap(geoData) {
+  private renderMap(geoData: GeoJSON.FeatureCollection): void {
     if (!this.mapGroup) return;
 
     this.mapGroup
@@ -92,19 +127,22 @@ export class BharatMap {
       .append("path")
       .attr("d", this.path)
       .attr("class", "state")
-      .on("click", (event, d) => {
-        this.handleStateClick(d.properties.st_nm);
+      .on("click", (event: MouseEvent, d: GeoJSON.Feature) => {
+        const properties = d.properties as { st_nm: string };
+        this.handleStateClick(properties.st_nm);
       });
   }
 
-  renderCapitals() {
+  private renderCapitals(): void {
     const capitals = this.mapGroup.append("g").attr("class", "capitals");
 
     Object.entries(this.stateData).forEach(([stateName, data]) => {
       const coords = data.capital.coordinates;
       if (!coords) return;
 
-      const [x, y] = this.projection(coords);
+      const projected = this.projection(coords);
+      if (!projected) return;
+      const [x, y] = projected;
       if (isNaN(x) || isNaN(y)) return;
 
       const g = capitals.append("g").attr("class", "capital-group").attr("data-state", stateName);
@@ -117,27 +155,27 @@ export class BharatMap {
     });
   }
 
-  handleStateClick(stateName) {
+  private handleStateClick(stateName: string): void {
     this.highlightCapital(stateName);
     this.showStateModal(stateName);
   }
 
-  highlightCapital(stateName) {
+  private highlightCapital(stateName: string): void {
     d3.selectAll(".capital-marker, .capital-label").classed("active", false);
 
     d3.selectAll(`[data-state="${stateName}"]`).classed("active", true);
   }
 
-  showStateModal(stateName) {
+  private showStateModal(stateName: string): void {
     const modal = new StateModal(this.stateData[stateName], stateName);
     modal.show();
   }
 
-  resetZoom() {
+  public resetZoom(): void {
     this.svg.transition().duration(750).call(this.zoom.transform, d3.zoomIdentity.scale(1));
   }
 
-  handleResize() {
+  private handleResize(): void {
     this.config.width = window.innerWidth - 60;
     this.config.height = window.innerHeight - 180;
 
@@ -148,7 +186,7 @@ export class BharatMap {
       .scale(this.config.scale)
       .translate([this.config.width / 2, this.config.height / 2]);
 
-    this.mapGroup.selectAll("path").attr("d", this.path);
+    this.mapGroup.selectAll("path").attr("d", (d) => this.path(d as GeoJSON.Feature | GeoJSON.Geometry));
 
     // Update capital positions
     this.mapGroup.selectAll(".capital-group").remove();