>("data/state_data.json")
+ ]);
+
+ if (!geoData || !states) throw new Error("Failed to load data");
+
+ this.stateData = states;
+ this.renderMap(geoData);
+ this.renderCapitals();
+ } catch (error) {
+ console.error("Error loading data:", error);
+ this.handleDataLoadError();
+ }
+ }
+
+ private handleDataLoadError(): void {
+ // Error UI feedback
+ const container = document.querySelector(".map-container");
+ if (container) {
+ container.innerHTML = `
+
+ Failed to load map data. Please try refreshing the page.
+
+ `;
+ }
+ }
+
+ // Handle zoom and pan events
+ private handleZoom(event: d3.D3ZoomEvent): void {
+ this.mapGroup.attr("transform", event.transform.toString());
+ }
+
+ private renderMap(geoData: GeoJSON.FeatureCollection): void {
+ if (!this.mapGroup) return;
+
+ this.mapGroup
+ .selectAll("path")
+ .data(geoData.features)
+ .enter()
+ .append("path")
+ .attr("d", this.path)
+ .attr("class", "state")
+ .on("click", (event: MouseEvent, d: GeoJSON.Feature) => {
+ const properties = d.properties as { st_nm: string };
+ this.handleStateClick(properties.st_nm);
+ });
+ }
+
+ 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 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);
+
+ g.append("circle").attr("cx", 0).attr("cy", 0).attr("r", 3).attr("class", "capital-marker");
+
+ g.append("text").attr("x", 0).attr("y", -10).attr("class", "capital-label").text(data.capital.name);
+
+ g.attr("transform", `translate(${x},${y})`);
+ });
+ }
+
+ private handleStateClick(stateName: string): void {
+ this.highlightCapital(stateName);
+ this.showStateModal(stateName);
+ }
+
+ private highlightCapital(stateName: string): void {
+ d3.selectAll(".capital-marker, .capital-label").classed("active", false);
+
+ d3.selectAll(`[data-state="${stateName}"]`).classed("active", true);
+ }
+
+ private showStateModal(stateName: string): void {
+ const modal = new StateModal(this.stateData[stateName], stateName);
+ modal.show();
+ }
+
+ public resetZoom(): void {
+ this.svg.transition().duration(750).call(this.zoom.transform, d3.zoomIdentity.scale(1));
+ }
+
+ private handleResize(): void {
+ this.config.width = window.innerWidth - 60;
+ this.config.height = window.innerHeight - 180;
+
+ this.svg.attr("viewBox", `0 0 ${this.config.width} ${this.config.height}`);
+
+ this.projection
+ .center(this.config.center)
+ .scale(this.config.scale)
+ .translate([this.config.width / 2, this.config.height / 2]);
+
+ this.mapGroup.selectAll("path").attr("d", (d) => this.path(d as GeoJSON.Feature | GeoJSON.Geometry));
+
+ // Update capital positions
+ this.mapGroup.selectAll(".capital-group").remove();
+ this.renderCapitals();
+ }
+}
diff --git a/src/utils/BharatMap/modules/StateModal.ts b/src/utils/BharatMap/modules/StateModal.ts
new file mode 100644
index 00000000..0fca9654
--- /dev/null
+++ b/src/utils/BharatMap/modules/StateModal.ts
@@ -0,0 +1,95 @@
+interface StateData {
+ capital: {
+ name: string;
+ };
+ area: string;
+ languages: string;
+ danceforms: string;
+ literacy: string;
+ description: string;
+}
+
+export class StateModal {
+ private stateData: StateData;
+ private stateName: string;
+ private modal: HTMLElement;
+
+ constructor(stateData: StateData, stateName: string) {
+ this.stateData = stateData || ({} as StateData);
+ this.stateName = stateName;
+ const modal = document.getElementById("stateModal");
+ if (!modal) throw new Error("Modal element not found");
+ this.modal = modal;
+ this.setupEventListeners();
+ }
+
+ private setupEventListeners(): void {
+ const closeBtn = this.modal.querySelector(".close") as HTMLElement;
+ const copyBtn = this.modal.querySelector("#copyButton") as HTMLElement;
+
+ if (closeBtn) closeBtn.onclick = () => this.hide();
+ if (copyBtn) copyBtn.onclick = () => this.copyContent();
+
+ window.onclick = (event: MouseEvent) => {
+ if (event.target === this.modal) this.hide();
+ };
+
+ document.addEventListener("keydown", (event: KeyboardEvent) => {
+ if (event.key === "Escape" && this.modal.style.display === "block") {
+ this.hide();
+ }
+ });
+ }
+
+ show(): void {
+ this.updateModalContent();
+ this.modal.style.display = "block";
+ }
+
+ private hide(): void {
+ const modalContent = this.modal.querySelector(".modal-content") as HTMLElement;
+ modalContent.classList.add("closing");
+
+ setTimeout(() => {
+ this.modal.style.display = "none";
+ modalContent.classList.remove("closing");
+ }, 300);
+ }
+
+ private updateModalContent(): void {
+ const elements: Record = {
+ stateName: this.stateName,
+ stateCapital: this.stateData.capital?.name,
+ stateArea: this.stateData.area,
+ stateLanguages: this.stateData.languages,
+ stateDance: this.stateData.danceforms,
+ stateLiteracy: this.stateData.literacy,
+ stateDescription: this.stateData.description
+ };
+
+ Object.entries(elements).forEach(([id, value]) => {
+ const element = document.getElementById(id);
+ if (element) element.textContent = value || "N/A";
+ });
+ }
+
+ private async copyContent(): Promise {
+ try {
+ const content = (this.modal.querySelector(".modal-body") as HTMLElement).innerText;
+ await navigator.clipboard.writeText(content);
+ this.showCopyFeedback();
+ } catch (error) {
+ console.error("Failed to copy content:", error);
+ }
+ }
+
+ private showCopyFeedback(): void {
+ const copyBtn = this.modal.querySelector("#copyButton") as HTMLElement;
+ if (!copyBtn) return;
+
+ copyBtn.innerHTML = ' Copied!';
+ setTimeout(() => {
+ copyBtn.innerHTML = ' Copy';
+ }, 2000);
+ }
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index c16f127a..e4245362 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -26,6 +26,12 @@ export const NavbarLinks: LinkProps[] = [
title: "Panel",
path: "/panel",
isActive: true
+ },
+ {
+ name: "Bharat Map",
+ title: "Bharat Map",
+ path: "/bharat-map",
+ isActive: true
}
];