myreact-geopackage
Version:
A simple React component library that integrates with MapmyIndia maps and displays real-time vehicle tracking via WebSocket.
808 lines (807 loc) • 30.9 kB
JavaScript
import xe, { useRef as T, useEffect as A, useState as C } from "react";
function ue(t) {
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
}
var L = { exports: {} }, j = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Q;
function de() {
if (Q) return j;
Q = 1;
var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
function r(e, n, o) {
var p = null;
if (o !== void 0 && (p = "" + o), n.key !== void 0 && (p = "" + n.key), "key" in n) {
o = {};
for (var d in n)
d !== "key" && (o[d] = n[d]);
} else o = n;
return n = o.ref, {
$$typeof: t,
type: e,
key: p,
ref: n !== void 0 ? n : null,
props: o
};
}
return j.Fragment = s, j.jsx = r, j.jsxs = r, j;
}
var M = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ee;
function pe() {
return ee || (ee = 1, process.env.NODE_ENV !== "production" && function() {
function t(a) {
if (a == null) return null;
if (typeof a == "function")
return a.$$typeof === ie ? null : a.displayName || a.name || null;
if (typeof a == "string") return a;
switch (a) {
case m:
return "Fragment";
case y:
return "Profiler";
case c:
return "StrictMode";
case F:
return "Suspense";
case oe:
return "SuspenseList";
case se:
return "Activity";
}
if (typeof a == "object")
switch (typeof a.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), a.$$typeof) {
case R:
return "Portal";
case N:
return (a.displayName || "Context") + ".Provider";
case D:
return (a._context.displayName || "Context") + ".Consumer";
case _:
var i = a.render;
return a = a.displayName, a || (a = i.displayName || i.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
case ae:
return i = a.displayName || null, i !== null ? i : t(a.type) || "Memo";
case H:
i = a._payload, a = a._init;
try {
return t(a(i));
} catch {
}
}
return null;
}
function s(a) {
return "" + a;
}
function r(a) {
try {
s(a);
var i = !1;
} catch {
i = !0;
}
if (i) {
i = console;
var h = i.error, b = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
return h.call(
i,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
b
), s(a);
}
}
function e(a) {
if (a === m) return "<>";
if (typeof a == "object" && a !== null && a.$$typeof === H)
return "<...>";
try {
var i = t(a);
return i ? "<" + i + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var a = Y.A;
return a === null ? null : a.getOwner();
}
function o() {
return Error("react-stack-top-frame");
}
function p(a) {
if (K.call(a, "key")) {
var i = Object.getOwnPropertyDescriptor(a, "key").get;
if (i && i.isReactWarning) return !1;
}
return a.key !== void 0;
}
function d(a, i) {
function h() {
U || (U = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
i
));
}
h.isReactWarning = !0, Object.defineProperty(a, "key", {
get: h,
configurable: !0
});
}
function f() {
var a = t(this.type);
return V[a] || (V[a] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), a = this.props.ref, a !== void 0 ? a : null;
}
function g(a, i, h, b, S, k, W, J) {
return h = k.ref, a = {
$$typeof: P,
type: a,
key: i,
props: k,
_owner: S
}, (h !== void 0 ? h : null) !== null ? Object.defineProperty(a, "ref", {
enumerable: !1,
get: f
}) : Object.defineProperty(a, "ref", { enumerable: !1, value: null }), a._store = {}, Object.defineProperty(a._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(a, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(a, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: W
}), Object.defineProperty(a, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: J
}), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
}
function l(a, i, h, b, S, k, W, J) {
var w = i.children;
if (w !== void 0)
if (b)
if (ce(w)) {
for (b = 0; b < w.length; b++)
u(w[b]);
Object.freeze && Object.freeze(w);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else u(w);
if (K.call(i, "key")) {
w = t(a);
var E = Object.keys(i).filter(function(le) {
return le !== "key";
});
b = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", Z[w + b] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
b,
w,
E,
w
), Z[w + b] = !0);
}
if (w = null, h !== void 0 && (r(h), w = "" + h), p(i) && (r(i.key), w = "" + i.key), "key" in i) {
h = {};
for (var q in i)
q !== "key" && (h[q] = i[q]);
} else h = i;
return w && d(
h,
typeof a == "function" ? a.displayName || a.name || "Unknown" : a
), g(
a,
w,
k,
S,
n(),
h,
W,
J
);
}
function u(a) {
typeof a == "object" && a !== null && a.$$typeof === P && a._store && (a._store.validated = 1);
}
var v = xe, P = Symbol.for("react.transitional.element"), R = Symbol.for("react.portal"), m = Symbol.for("react.fragment"), c = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), D = Symbol.for("react.consumer"), N = Symbol.for("react.context"), _ = Symbol.for("react.forward_ref"), F = Symbol.for("react.suspense"), oe = Symbol.for("react.suspense_list"), ae = Symbol.for("react.memo"), H = Symbol.for("react.lazy"), se = Symbol.for("react.activity"), ie = Symbol.for("react.client.reference"), Y = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, K = Object.prototype.hasOwnProperty, ce = Array.isArray, G = console.createTask ? console.createTask : function() {
return null;
};
v = {
"react-stack-bottom-frame": function(a) {
return a();
}
};
var U, V = {}, B = v["react-stack-bottom-frame"].bind(
v,
o
)(), X = G(e(o)), Z = {};
M.Fragment = m, M.jsx = function(a, i, h, b, S) {
var k = 1e4 > Y.recentlyCreatedOwnerStacks++;
return l(
a,
i,
h,
!1,
b,
S,
k ? Error("react-stack-top-frame") : B,
k ? G(e(a)) : X
);
}, M.jsxs = function(a, i, h, b, S) {
var k = 1e4 > Y.recentlyCreatedOwnerStacks++;
return l(
a,
i,
h,
!0,
b,
S,
k ? Error("react-stack-top-frame") : B,
k ? G(e(a)) : X
);
};
}()), M;
}
var re;
function fe() {
return re || (re = 1, process.env.NODE_ENV === "production" ? L.exports = de() : L.exports = pe()), L.exports;
}
var x = fe();
(function(t, s) {
for (var r = O, e = t(); ; )
try {
var n = parseInt(r(321)) / 1 * (-parseInt(r(320)) / 2) + parseInt(r(273)) / 3 * (parseInt(r(304)) / 4) + parseInt(r(249)) / 5 * (parseInt(r(216)) / 6) + parseInt(r(206)) / 7 + -parseInt(r(230)) / 8 * (-parseInt(r(291)) / 9) + parseInt(r(261)) / 10 * (-parseInt(r(309)) / 11) + parseInt(r(237)) / 12 * (-parseInt(r(303)) / 13);
if (n === s) break;
e.push(e.shift());
} catch {
e.push(e.shift());
}
})(I, 227264);
function I() {
var t = ["join", "mapSnapshot", "map", "media", "3.5", "error", "getDistance", "head", "&v=", "Please! Pass InfoWindow position", "Please! Pass Map id (Map Container div) for traffic Layer", "123877LlwhOb", "892JSaXHg", "prototype", "pin", "Please! Pass Map id (Map Container div) for Polygon", "Please! Pass polygon path", "716936syRnli", "Please! Pass Map id (Map Container div) or location and callback both", "Error in loading snapshot:", "includes", "getPinDetails", "trackingTimeline", "Please! Pass map id and layer", "Marker", "Check if mapSdkLibraries : ['geoAnalytics'] is included inside loadScripts", "tracking", "geoAnalytics", "164tQaker", "1681mMEWcM", "KmlLayer", "libraries", "Please! Pass Map id (Map Container div) for polyline", "Please! Pass coordinates", "https://apis.mappls.com/advancedmaps/api/", "Please! Pass pin", "1755439vAZGHz", "Please! Pass Valid Style", "Please! Pass Polyline path", "length", "href", "mappls", "Circle", "version", "data", "getElementsByTagName", "1714248DARJlv", "position", "Please! Pass Map id (Map Container div) for HeatmapLayer", "keywords", "&v=3.0", "routeSummary", "Please! Pass circle center", "pinMarker", "Please! Pass geoJson data", "x-sec2", "search", "cssId", "Please! Pass callback method", "Please! Pass Map id (Map Container div) for Circle", "40UlHZXB", "An error occurred:", "fitBounds", " | ", "string", "initialize", "async", "252ElarVR", "Error drawing polygon:", "Please! Pass Map id (Map Container div)", "paths", "Please! Pass HeatmapLayer data", "setStyle", "Props are not defined.", "HeatmapLayer", "onload", "Snapshot is not defined on window.mappls", "Please! Pass Map id (Map Container div) for InfoWindow", "Check if mapSdkLibraries : ['kml'] is included inside loadScripts", "5InGJdI", "url", "polygonDraw", "text/css", "layers", "Polygon", "createElement", "src", "function", "Please! Pass bounds or Layers", "nearby", "&libraries=", "20GYfNZq", "getnearBySearch", "script", "Please! Enter inputQuery or HTML search box id", "Please! Pass marker position", "direction", "Polyline", "placePicker", "routeId", "plugins", "addGeoJson", "removeLayer", "717dmSuxK", "hyperLink", "Please! Pass Map id (Map Container div) for marker", "appendChild", "center", "push", "path", "stylesheet", "/map_sdk?", "type", "InfoWindow", "polygonDraw is not defined on window.mappls", "rel", "https://apis.mapmyindia.com/vector_map/assets/v3.5/mappls-glob.css", "traffic", "https://apis.mappls.com/advancedmaps/vapi/", "layer", "airspaceLayer", "190413XbttMt"];
return I = function() {
return t;
}, I();
}
var me = function() {
var t = O;
function s() {
}
return s[t(305)][t(235)] = function(r, e, n) {
var o = t;
n === void 0 && (n = function() {
});
var p = "", d = "layer=vector", f = o(220);
typeof e == o(257) && (n = e, e = {});
try {
if (r) {
var g = [], l = [], u = 0, v = 0;
e[o(323)] && Array.isArray(e[o(323)]) && (p = o(260) + e[o(323)][o(292)](), e[o(323)][o(312)]("polydraw") && l.push("https://apis.mappls.com/vector_map/assets/polydraw/raw.css")), e[o(289)] && typeof e[o(289)] === o(234) && (d = "layer=" + e[o(289)]), e.version && (f = o(300) + e[o(213)], e[o(213)][o(312)](o(296)) && l.push(o(286))), e[o(294)] === !0 && e[o(225)] === !0 ? g[o(278)](o(204) + r + o(281) + d + f + "&x-sec2" + p) : e[o(294)] !== !1 && e[o(294)] !== void 0 && e[o(294)] !== "" && g[o(278)](o(204) + r + o(281) + d + f + p), e[o(270)] && ((e[o(270)] === !0 || e[o(270)][o(209)] === 0) && g.push("https://apis.mappls.com/advancedmaps/api/" + r + "/map_sdk_plugins?v=3.0"), e.plugins[o(312)](o(262)) ? g[o(278)](o(288) + r + "/nearbyRecordFinder?v=3.0") : g[o(278)](o(204) + r + "/map_sdk_plugins?v=3.0&libraries=" + e[o(270)].join()));
var P = function(m) {
var c = o;
if (u < m[c(209)]) {
var y = document[c(255)](c(263));
y[c(256)] = m[u], y[c(236)] = !0, y[c(282)] = "text/javascript", document[c(215)](c(299))[0][c(276)](y), u = u + 1, y[c(245)] = function() {
P(m);
};
} else return n();
};
P(g);
var R = function(m) {
var c = o;
if (v < m.length) {
var y = document[c(255)]("link");
y.id = c(227) + v, y[c(285)] = c(280), y.type = c(252), y[c(210)] = m[v], y[c(295)] = "all", document.getElementsByTagName(c(299))[0].appendChild(y), v++;
}
};
R(l);
} else console.log("Please! pass a token inside initialize()");
} catch (m) {
console[o(297)](String(m));
}
}, s.prototype.Map = function(r) {
var e = t;
try {
return r.id ? window.mappls.Map(r.id, r.properties) : (console[e(297)](e(239)), !1);
} catch (n) {
console.error(String(n));
}
}, s[t(305)][t(316)] = function(r) {
var e = t;
try {
return r.map ? r[e(217)] ? window[e(211)][e(316)](r) : (console[e(297)](e(265)), !1) : (console[e(297)]("Please! Pass Map id (Map Container div) for marker"), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s[t(305)][t(232)] = function(r) {
var e = t;
try {
return r[e(294)] ? r.bounds || r[e(253)] ? window[e(211)].fitBounds(r) : (console.error(e(258)), !1) : (console.error(e(239)), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s[t(305)][t(283)] = function(r) {
var e = t;
try {
return r.map ? r[e(217)] ? window[e(211)][e(283)](r) : (console[e(297)](e(301)), !1) : (console[e(297)](e(247)), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s[t(305)].Polyline = function(r) {
var e = t;
try {
return r[e(294)] ? r[e(279)] || r.paths ? window[e(211)][e(267)](r) : (console[e(297)](e(208)), !1) : (console[e(297)](e(202)), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s.prototype[t(254)] = function(r) {
var e = t;
try {
return r[e(294)] ? r[e(240)] ? window.mappls[e(254)](r) : (console.error(e(308)), !1) : (console[e(297)](e(307)), !1);
} catch (n) {
console.error(String(n));
}
}, s[t(305)][t(212)] = function(r) {
var e = t;
try {
return r[e(294)] ? r[e(277)] ? window[e(211)][e(212)](r) : (console[e(297)](e(222)), !1) : (console[e(297)](e(229)), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s[t(305)].HeatmapLayer = function(r) {
var e = t;
try {
return r[e(294)] ? r[e(214)] ? window[e(211)][e(244)](r) : (console.error(e(241)), !1) : (console[e(297)](e(218)), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s[t(305)][t(271)] = function(r) {
var e = t;
try {
return r[e(294)] ? r[e(214)] ? window[e(211)].addGeoJson(r) : (console.error(e(224)), !1) : (console[e(297)]("Please! Pass Map id (Map Container div) for addGeoJson"), !1);
} catch (n) {
console.error(String(n));
}
}, s[t(305)][t(322)] = function(r) {
var e = t;
try {
return r[e(294)] ? r[e(250)] ? window[e(211)].KmlLayer(r) : (console[e(297)]("Please! Pass KmlLayer url"), !1) : (console[e(297)]("Please! Pass Map id (Map Container div) for KmlLayer"), !1);
} catch (n) {
console[e(297)](String(n) + " | " + e(248));
}
}, s[t(305)][t(272)] = function(r) {
var e = t;
try {
r[e(294)] && r[e(289)] ? window[e(211)].remove({ map: r.map, layer: r[e(289)] }) : console[e(297)](e(315));
} catch (n) {
console.error(String(n));
}
}, s[t(305)][t(242)] = function(r) {
var e = t;
try {
r ? window[e(211)][e(242)](r) : console[e(297)](e(207));
} catch (n) {
console.error(String(n));
}
}, s[t(305)][t(287)] = function(r) {
var e = t;
try {
r ? window.mappls[e(287)]({ map: r[e(294)] }) : console[e(297)](e(302));
} catch (n) {
console.error(String(n));
}
}, s[t(305)].polydraw = function(r, e) {
var n = t;
e === void 0 && (e = function() {
});
try {
return r ? window.mappls[n(251)](r, e) : (console[n(297)](n(284)), !1);
} catch (o) {
return console.error(n(238), o), !1;
}
}, s.prototype.mapSnapshot = function(r, e) {
var n = t;
e === void 0 && (e = function() {
});
try {
return r ? window[n(211)][n(293)](r, e) : (console[n(297)](n(246)), !1);
} catch (o) {
return console.error(n(311), o), !1;
}
}, s[t(305)][t(290)] = function(r) {
var e = t;
try {
return r ? window.mappls.airspaceLayer(r) : (console[e(297)]("Please! Pass Map id (Map Container div)"), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s[t(305)][t(319)] = function() {
var r = t;
try {
return window[r(319)];
} catch (e) {
console[r(297)](String(e) + r(233) + r(317));
}
}, s;
}();
(function() {
var t = O;
function s() {
}
return s[t(305)].direction = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r[n(294)] ? window[n(211)][n(266)](r, e) : (console[n(297)](n(275)), !1);
} catch (o) {
console[n(297)](String(o));
}
}, s[t(305)][t(298)] = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r.coordinates ? e ? window[n(211)][n(298)](r, e) : (console[n(297)](n(228)), !1) : (console[n(297)](n(203)), !1);
} catch (o) {
console[n(297)](String(o));
}
}, s[t(305)][t(223)] = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r.map ? r[n(306)] ? window[n(211)][n(223)](r, e) : (console[n(297)]("Please! Pass pin"), !1) : (console.error(n(275)), !1);
} catch (o) {
console[n(297)](String(o));
}
}, s[t(305)][t(259)] = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r[n(219)] || r[n(274)] && e ? window[n(211)][n(259)](r, e) : (console[n(297)]("Please! Pass keywords / hyperLink"), !1);
} catch (o) {
console[n(297)](String(o));
}
}, s[t(305)].getnearBySearch = function(r, e) {
var n = t;
try {
return r ? window.mappls[n(262)](r, e) : (console[n(297)](n(243)), !1);
} catch (o) {
console[n(297)](n(231), o);
}
}, s[t(305)][t(313)] = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r[n(306)] ? window[n(211)][n(313)](r, e) : (console[n(297)](n(205)), !1);
} catch (o) {
console[n(297)](String(o));
}
}, s[t(305)][t(268)] = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r.map || r.location && e ? window[n(211)][n(268)](r, e) : (console[n(297)](n(310)), !1);
} catch (o) {
console[n(297)](String(o));
}
}, s[t(305)].search = function(r, e, n) {
var o = t;
e === void 0 && (e = {}), n === void 0 && (n = {});
try {
if (r) {
if (r && e && n) return window[o(211)][o(226)](r, e, n);
} else
return console[o(297)](o(264)), !1;
} catch (p) {
console[o(297)](String(p));
}
}, s[t(305)][t(221)] = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r[n(269)] ? window[n(211)][n(221)](r, e) : (console[n(297)]("Please! Pass Map id (Map Container div) for marker"), !1);
} catch (o) {
console.error(String(o));
}
}, s[t(305)][t(318)] = function(r, e) {
var n = t;
e === void 0 && (e = {});
try {
return r ? window.mappls[n(318)](r, e) : (console[n(297)](n(239)), !1);
} catch (o) {
console[n(297)](String(o));
}
}, s.prototype[t(314)] = function(r) {
var e = t;
try {
return r ? window[e(211)][e(314)](r) : (console[e(297)](e(239)), !1);
} catch (n) {
console[e(297)](String(n));
}
}, s;
})();
function O(t, s) {
var r = I();
return O = function(e, n) {
e = e - 202;
var o = r[e];
return o;
}, O(t, s);
}
var $, ne;
function he() {
if (ne) return $;
ne = 1;
const t = Math.asin, s = Math.cos, r = Math.sin, e = Math.sqrt, n = Math.PI, o = 6378137;
function p(l) {
return l * l;
}
function d(l) {
return l * n / 180;
}
function f(l) {
return p(r(l / 2));
}
function g(l, u) {
const v = d(Array.isArray(l) ? l[1] : l.latitude ?? l.lat), P = d(Array.isArray(u) ? u[1] : u.latitude ?? u.lat), R = d(Array.isArray(l) ? l[0] : l.longitude ?? l.lng ?? l.lon), m = d(Array.isArray(u) ? u[0] : u.longitude ?? u.lng ?? u.lon), c = f(P - v) + s(v) * s(P) * f(m - R);
return 2 * o * t(e(c));
}
return $ = g, $;
}
var ve = he();
const te = /* @__PURE__ */ ue(ve), ge = ({ props: t }) => {
const s = T(null);
return A(() => {
if (!(!t.map || !t.path))
return s.current = t.mapplsClassObject.Polyline({
map: t.map,
path: t.path,
strokeColor: "darkblue",
strokeWidth: 10,
strokeOpacity: 1,
fitbounds: !0
}), () => {
s.current && (console.log("Polyline Removed"), t.mapplsClassObject.removeLayer({
map: t.map,
layer: s.current
}), s.current = null);
};
}, [t.map, t.path]), null;
}, ye = ({ props: t, carProperty: s, closeModal: r }) => {
const [e, n] = C(0), o = () => {
n((d) => Math.max(d - 1, 0));
}, p = () => {
n((d) => Math.min(d + 1, s.path.length - 1));
};
return /* @__PURE__ */ x.jsxs(x.Fragment, { children: [
/* @__PURE__ */ x.jsxs("div", { style: { position: "absolute", top: "10px", left: "10px", backgroundColor: "white", padding: "10px", borderRadius: "5px", boxShadow: "0 0 10px rgba(0,0,0,0.5)" }, children: [
/* @__PURE__ */ x.jsx("h2", { style: { color: " rgb(32, 62, 149)" }, children: "Car Details" }),
/* @__PURE__ */ x.jsxs("p", { children: [
/* @__PURE__ */ x.jsx("strong", { children: "Name:" }),
" ",
s.Car_Name
] }),
/* @__PURE__ */ x.jsxs("p", { children: [
/* @__PURE__ */ x.jsx("strong", { children: "Number:" }),
" ",
s.Car_Number
] }),
/* @__PURE__ */ x.jsxs("p", { children: [
/* @__PURE__ */ x.jsx("strong", { children: "Latitude:" }),
" ",
s.Current_LAT
] }),
/* @__PURE__ */ x.jsxs("p", { children: [
/* @__PURE__ */ x.jsx("strong", { children: "Longitude:" }),
" ",
s.Current_LNG
] }),
/* @__PURE__ */ x.jsxs("p", { children: [
/* @__PURE__ */ x.jsx("strong", { children: "Speed:" }),
" ",
s.Speed,
" km/h"
] }),
/* @__PURE__ */ x.jsxs("p", { children: [
/* @__PURE__ */ x.jsx("strong", { children: "Distance:" }),
" ",
s.Distance_Km,
" km"
] }),
/* @__PURE__ */ x.jsxs("p", { children: [
/* @__PURE__ */ x.jsx("strong", { children: "⚠️Deviation detected:" }),
" ",
s.Deviation,
" meters"
] }),
/* @__PURE__ */ x.jsxs("div", { style: { display: "flex", gap: "10px", marginTop: "10px" }, children: [
/* @__PURE__ */ x.jsx(
"button",
{
style: { backgroundColor: "#ccc", color: "black", borderRadius: "5px" },
onClick: o,
children: "Prev"
}
),
/* @__PURE__ */ x.jsx(
"button",
{
style: { backgroundColor: "#ccc", color: "black", borderRadius: "5px" },
onClick: p,
children: "Next"
}
),
/* @__PURE__ */ x.jsx(
"button",
{
style: { backgroundColor: "rgb(32, 62, 149)", color: "white", borderRadius: "5px" },
onClick: r,
children: "Close"
}
)
] })
] }),
s.path.length > 0 && /* @__PURE__ */ x.jsx(ge, { props: { map: t.map, mapplsClassObject: t.mapplsClassObject, path: s.path[e] } })
] });
}, be = ({ props: t, isPolylineLoaded: s, isModalOpen: r, carProperty: e, setCarProperty: n, closeModal: o }) => {
const p = T(null), d = T(null), [f, g] = C(null);
return A(() => {
if (console.log(t.webSocketurl), !!t.webSocketurl)
return d.current = new WebSocket(t.webSocketurl), d.current.onopen = () => {
console.log("WebSocket connected");
}, d.current.onmessage = (l) => {
const u = JSON.parse(l.data);
console.log("Received location:", u), g(u);
}, d.current.onerror = (l) => {
console.error("WebSocket error:", l);
}, () => {
d.current.close();
};
}, []), A(() => {
if (p.current && t.mapplsClassObject.removeLayer({ map: t.map, layer: p.current }), !f) return;
const l = f.features[0].properties.path[0].map((v, P) => te({ lat: f.features[0].geometry.coordinates[0], lon: f.features[0].geometry.coordinates[1] }, { lat: v.lat, lon: v.lng })), u = Math.min(...l);
u > 20 ? console.log("🚨🚨🚨 Deviation detected:🚨🚨🚨", u.toFixed(2), "meters") : console.log("No deviation detected"), e.Car_Name === f.features[0].properties.ModelName && n({
...e,
Car_Name: f.features[0].properties.ModelName,
Car_Number: f.features[0].properties.CarNumber,
Current_LAT: f.features[0].geometry.coordinates[1],
Current_LNG: f.features[0].geometry.coordinates[0],
Speed: Math.floor(Math.random() * 100) + 1,
path: e.path,
Distance_Km: t.distanceInKm,
Deviation: u.toFixed(2)
}), p.current = t.mapplsClassObject.addGeoJson({
map: t.map,
data: f,
// fitbounds: true,
clusters: !0,
cType: 0
});
}, [f]), r && s && /* @__PURE__ */ x.jsx(ye, { props: { map: t.map, mapplsClassObject: t.mapplsClassObject, path: t.path }, carProperty: e, closeModal: o });
}, we = ({ setSelectedRegion: t }) => {
T(null);
const s = [
{ name: "Howrah", lat: 22.5958, lng: 88.2636 },
{ name: "New Town", lat: 22.5811, lng: 88.4791 },
{ name: "Salt Lake", lat: 22.5792, lng: 88.4145 },
{ name: "Park Street", lat: 22.5535, lng: 88.3514 }
], r = (e) => {
const n = e.target.value;
if (n) {
const [o, p] = n.split(",").map(Number);
t([p, o]);
}
console.log("Selected Region:", n);
};
return /* @__PURE__ */ x.jsx("div", { style: { position: "absolute", top: 10, right: 50, zIndex: 999 }, children: /* @__PURE__ */ x.jsxs("select", { onChange: r, style: { padding: "5px", borderRadius: "5px" }, children: [
/* @__PURE__ */ x.jsx("option", { value: "", children: "Select Region" }),
s.map((e, n) => /* @__PURE__ */ x.jsx("option", { value: [e.lat, e.lng], children: e.name }, n))
] }) });
}, z = new me(), ke = ({ apikey: t, webSocketurl: s }) => {
const r = T(null), [e, n] = C(!1), [o, p] = C(!1), [d, f] = C(!1), [g, l] = C({ Car_Name: "", Car_Number: "", Current_LAT: "", Current_LNG: "", Speed: "", path: [], Distance_Km: "", Deviation: "" }), [u, v] = C([22.583485201644404, 88.3372593253471]);
return A(() => {
r.current && r.current.setCenter(u);
}, [u]), A(() => {
console.log(s), z.initialize(t, { map: !0 }, () => {
r.current && r.current.remove(), r.current = z.Map({
id: "map",
properties: {
center: [22.583485201644404, 88.3372593253471],
zoom: 11,
zoomControl: !0,
rotateControl: !0,
rotateControlOptions: !0
}
}), r.current.on("load", () => {
n(!0);
}), r.current.on("click", (P) => {
const m = r.current.queryRenderedFeatures(P.point)[0];
if (m && m.properties.isCar) {
console.log("isCar is true"), console.log(m);
let c = m.properties.path;
if (typeof c == "string")
try {
c = JSON.parse(c);
} catch (F) {
console.error("Failed to parse path", F);
return;
}
if (!Array.isArray(c) || c.length < 2) return;
const y = { lat: c[0][0].lat, lon: c[0][0].lng }, D = { lat: c[0][c[0].length - 1].lat, lon: c[0][c[0].length - 1].lng }, N = te(y, D), _ = N / 1e3;
p(!0), f(!0), l({
Car_Name: m.properties.ModelName,
Car_Number: m.properties.CarNumber,
Current_LAT: m.geometry.coordinates[1],
Current_LNG: m.geometry.coordinates[0],
Speed: Math.floor(Math.random() * 100) + 1,
path: c,
Distance_Km: _.toFixed(2),
Deviation: N.toFixed(2)
});
}
});
});
}, []), /* @__PURE__ */ x.jsx("div", { style: {
display: "flex",
justifyContent: "right",
alignItems: "center",
height: "100vh"
}, children: /* @__PURE__ */ x.jsxs(
"div",
{
id: "map",
style: {
top: "3%",
// left: "10%",
width: "78%",
height: "78vh",
backgroundColor: "#f0f0f0",
border: "3px solid rgb(32, 62, 149)",
borderRadius: "8px"
},
children: [
e && /* @__PURE__ */ x.jsx(be, { props: { map: r.current, position: r.current.getCenter(), mapplsClassObject: z, path: g.path, distanceInKm: g.Distance_Km, webSocketurl: s }, isPolylineLoaded: d, isModalOpen: e, carProperty: g, setCarProperty: l, closeModal: () => {
p(!1), f(!1);
} }),
e && /* @__PURE__ */ x.jsx(we, { setSelectedRegion: v })
]
}
) });
};
export {
ke as Geomap
};