india-map-svg
Version:
Interactive **SVG maps of India and its states** with zoom, pan, hover tooltips, and click events. Built with **React + TypeScript**.
275 lines (274 loc) • 11.3 kB
JavaScript
import { jsx as l, jsxs as L } from "react/jsx-runtime";
import { useState as M, useRef as k, useEffect as W, useCallback as g } from "react";
const it = (u, h, B) => {
const o = u[h];
return o ? typeof o == "function" ? o() : Promise.resolve(o) : new Promise((p, R) => {
(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
R.bind(
null,
new Error(
"Unknown variable dynamic import: " + h + (h.split("/").length !== B ? ". Note that variables only represent file names one level deep." : "")
)
)
);
});
}, dt = ({
name: u,
width: h = "100%",
height: B = "100%",
onPathClick: o,
onPathHover: p,
viewportConfig: R,
autoFit: X = !0,
preserveAspectRatio: G = "xMidYMid meet",
strokeWidth: O = 1,
strokeColor: _ = "#000",
pathFillColor: q = "#f0f0f0",
coverFillColor: K = "black",
backgroundColor: J = "transparent",
fillById: Q = {},
hoverPathColor: F = "lightblue",
enableZoomPan: n = !0,
minScale: $ = 0.1,
maxScale: N = 10
}) => {
const [Y, j] = M(null), [E, H] = M(null), [y, z] = M(null), [P, I] = M(null), [v, D] = M({
x: 0,
y: 0,
scale: 1
}), c = k(null), b = k(!1), x = k(null), U = k("");
W(() => {
(async () => {
try {
if (u.toLowerCase() === "india") {
const a = await import("./indiaData-CrBDMZv3.js");
j({
paths: a.indiaData.paths,
viewBox: a.indiaData.viewBox
}), U.current = a.indiaData.viewBox || "0 0 1000 1000";
} else {
const s = (await it(/* @__PURE__ */ Object.assign({ "../data/states/AndhraPradeshData.ts": () => import("./AndhraPradeshData-CL61XZT2.js"), "../data/states/ArunachalPradeshData.ts": () => import("./ArunachalPradeshData-H188ab9T.js"), "../data/states/AssamData.ts": () => import("./AssamData-CleJesYd.js"), "../data/states/BiharData.ts": () => import("./BiharData-D9zLuPRl.js"), "../data/states/ChhattisgarhData.ts": () => import("./ChhattisgarhData-D5Lm46So.js"), "../data/states/GoaData.ts": () => import("./GoaData-DqnC7m_B.js"), "../data/states/GujaratData.ts": () => import("./GujaratData-yeMMEMlA.js"), "../data/states/JharkhandData.ts": () => import("./JharkhandData-BXvozhhc.js"), "../data/states/KarnatakaData.ts": () => import("./KarnatakaData-DsNZxd2O.js"), "../data/states/KeralaData.ts": () => import("./KeralaData-B2HYFZyz.js"), "../data/states/MadhyaPradeshData.ts": () => import("./MadhyaPradeshData-BUuREqVm.js"), "../data/states/MaharashtraData.ts": () => import("./MaharashtraData-CBlsVjuh.js"), "../data/states/ManipurData.ts": () => import("./ManipurData-BKiVLCc2.js"), "../data/states/MeghalayaData.ts": () => import("./MeghalayaData-CIcMENoC.js"), "../data/states/MizoramData.ts": () => import("./MizoramData-BYxsv3h9.js"), "../data/states/NagalandData.ts": () => import("./NagalandData-BjFiMe2q.js"), "../data/states/OdishaData.ts": () => import("./OdishaData-CmiZNSPa.js"), "../data/states/PunjabData.ts": () => import("./PunjabData-Bos7XN6-.js"), "../data/states/RajasthanData.ts": () => import("./RajasthanData-B_Tzf3i7.js"), "../data/states/SikkimData.ts": () => import("./SikkimData-Z4X-a7Ml.js"), "../data/states/TamilNaduData.ts": () => import("./TamilNaduData-cvts1fD_.js"), "../data/states/TelanganaData.ts": () => import("./TelanganaData-DsaBghso.js"), "../data/states/UttarPradeshData.ts": () => import("./UttarPradeshData-A3WZCepZ.js"), "../data/states/UttarakhandData.ts": () => import("./UttarakhandData-1yKjGt1a.js"), "../data/states/WestBengalData.ts": () => import("./WestBengalData-DyvXDykV.js"), "../data/states/haryanaData.ts": () => import("./haryanaData-pvRSejUf.js"), "../data/states/himachalPradeshData.ts": () => import("./himachalPradeshData-BPsfcd9W.js"), "../data/states/tripuraData.ts": () => import("./tripuraData-DqHYfuWw.js") }), `../data/states/${u}Data.ts`, 4))[`${u}Data`];
j({ paths: s.paths, viewBox: s.viewBox }), U.current = s.viewBox || "0 0 1000 1000";
}
} catch {
H(`Map "${u}" not found. Check data files.`);
}
})();
}, [u]);
const f = g((t, a) => {
if (!c.current) return { x: 0, y: 0 };
const s = c.current, i = s.getBoundingClientRect(), e = s.viewBox.baseVal, r = (t - i.left) / i.width * e.width + e.x, m = (a - i.top) / i.height * e.height + e.y;
return { x: r, y: m };
}, []), Z = g(
(t) => {
if (!n) return;
t.preventDefault(), t.stopPropagation();
const a = 0.1, s = t.deltaY < 0 ? 1 : -1, i = Math.exp(s * a), e = f(t.clientX, t.clientY);
D((r) => {
const m = Math.min(
Math.max(r.scale * i, $),
N
), w = m / r.scale, d = r.x - (e.x - r.x) * (w - 1), V = r.y - (e.y - r.y) * (w - 1);
return {
x: d,
y: V,
scale: m
};
});
},
[n, f, $, N]
), tt = g(
(t) => {
n && (t.preventDefault(), b.current = !0, x.current = f(t.clientX, t.clientY), c.current && (c.current.style.cursor = "grabbing"));
},
[n, f]
), at = g(
(t) => {
if (!n || !b.current || !x.current) return;
t.preventDefault();
const a = f(t.clientX, t.clientY), s = a.x - x.current.x, i = a.y - x.current.y;
D((e) => ({
...e,
x: e.x + s,
y: e.y + i
})), x.current = a;
},
[n, f]
), A = g(() => {
b.current = !1, x.current = null, c.current && (c.current.style.cursor = n ? "grab" : "default");
}, [n]), S = g(() => {
D({ x: 0, y: 0, scale: 1 });
}, []);
if (W(() => {
c.current && (c.current.resetView = S);
}, [S]), E) return /* @__PURE__ */ l("div", { style: { color: "red" }, children: E });
if (!Y) return /* @__PURE__ */ l("div", { children: "Loading map..." });
const { x: et = 0, y: st = 0, width: C, height: T } = R || {}, rt = C && T ? `${et} ${st} ${C} ${T}` : Y.viewBox ?? "0 0 1000 1000", nt = `translate(${v.x}, ${v.y}) scale(${v.scale})`;
return /* @__PURE__ */ L(
"div",
{
style: {
width: X ? "100%" : h,
height: X ? "100%" : B,
position: "relative"
},
children: [
/* @__PURE__ */ l(
"svg",
{
ref: c,
width: "100%",
height: "100%",
viewBox: rt,
preserveAspectRatio: G,
style: {
backgroundColor: J,
userSelect: "none",
cursor: n ? b.current ? "grabbing" : "grab" : "default",
touchAction: "none"
// Prevent browser zoom on touch devices
},
onWheel: Z,
onMouseDown: tt,
onMouseMove: at,
onMouseUp: A,
onMouseLeave: A,
children: /* @__PURE__ */ l("g", { transform: nt, children: Y.paths.map((t) => {
var e, r, m, w;
const a = ((e = t.className) == null ? void 0 : e.includes("map-cover")) || ((r = t.className) == null ? void 0 : r.includes("water")) || ((m = t.className) == null ? void 0 : m.includes("foreign")), i = !a && P === t.id ? F : Q[t.id] || ((w = t.className) != null && w.includes("map-cover") ? K : q);
return /* @__PURE__ */ l(
"path",
{
d: t.d,
id: t.id,
className: t.className,
transform: t.transform,
style: {
cursor: o && !a ? "pointer" : "inherit",
stroke: _,
strokeWidth: O / v.scale,
fill: i,
transition: "fill 0.2s ease",
vectorEffect: "non-scaling-stroke"
},
onClick: (d) => {
if (a) return;
d.stopPropagation();
const V = t.name.charAt(0).toUpperCase() + t.name.slice(1);
o == null || o(V, t.id);
},
onMouseEnter: (d) => {
a || (I(t.id), z({
x: d.clientX,
y: d.clientY,
text: t.name
}), p == null || p(t.name, t.id));
},
onMouseLeave: () => {
a || (I(null), z(null), p == null || p(null, t.id));
},
onMouseMove: (d) => {
a || !y || z({
x: d.clientX,
y: d.clientY,
text: t.name
});
}
},
t.id
);
}) })
}
),
n && /* @__PURE__ */ L(
"div",
{
style: {
position: "absolute",
top: "10px",
right: "10px",
display: "flex",
flexDirection: "column",
gap: "5px",
zIndex: 1e3
},
children: [
/* @__PURE__ */ l(
"button",
{
onClick: () => D((t) => ({
...t,
scale: Math.min(t.scale * 1.2, N)
})),
style: {
padding: "5px 10px",
background: "rgba(255,255,255,0.9)",
border: "1px solid #ccc",
borderRadius: "3px",
cursor: "pointer"
},
children: "+"
}
),
/* @__PURE__ */ l(
"button",
{
onClick: () => D((t) => ({
...t,
scale: Math.max(t.scale / 1.2, $)
})),
style: {
padding: "5px 10px",
background: "rgba(255,255,255,0.9)",
border: "1px solid #ccc",
borderRadius: "3px",
cursor: "pointer"
},
children: "-"
}
),
/* @__PURE__ */ l(
"button",
{
onClick: S,
style: {
padding: "5px 10px",
background: "rgba(255,255,255,0.9)",
border: "1px solid #ccc",
borderRadius: "3px",
cursor: "pointer",
fontSize: "12px"
},
children: "Reset"
}
)
]
}
),
y && /* @__PURE__ */ l(
"div",
{
style: {
position: "fixed",
left: y.x + 10,
top: y.y + 10,
background: "rgba(0,0,0,0.75)",
color: "white",
padding: "4px 8px",
borderRadius: "4px",
fontSize: "12px",
pointerEvents: "none",
zIndex: 2e3,
whiteSpace: "nowrap"
},
children: y.text
}
)
]
}
);
};
export {
dt as MapOfSvg
};
//# sourceMappingURL=index.js.map