mehdi-akbari-map 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +115 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +36 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +79 -0
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +115 -0
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.ts +2 -0
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +80 -0
- package/dist/react.js.map +1 -1
- package/dist/styles.css +47 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,117 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.ts
|
|
31
|
+
var src_exports = {};
|
|
32
|
+
__export(src_exports, {
|
|
33
|
+
NeshanMap: () => Map_default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(src_exports);
|
|
36
|
+
|
|
37
|
+
// src/components/Map.tsx
|
|
38
|
+
var import_react = require("react");
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
+
var Map = ({
|
|
41
|
+
options,
|
|
42
|
+
markers = [],
|
|
43
|
+
selectedMarkerId = null,
|
|
44
|
+
onMarkerClick,
|
|
45
|
+
onMapLoad,
|
|
46
|
+
children,
|
|
47
|
+
className = "",
|
|
48
|
+
style = { width: "100%", height: "100%" }
|
|
49
|
+
}) => {
|
|
50
|
+
const mapContainerRef = (0, import_react.useRef)(null);
|
|
51
|
+
const mapInstanceRef = (0, import_react.useRef)(null);
|
|
52
|
+
const markersRef = (0, import_react.useRef)([]);
|
|
53
|
+
const [mapLib, setMapLib] = (0, import_react.useState)(null);
|
|
54
|
+
(0, import_react.useEffect)(() => {
|
|
55
|
+
if (typeof window === "undefined") return;
|
|
56
|
+
let canceled = false;
|
|
57
|
+
import("@neshan-maps-platform/mapbox-gl").then((mod) => {
|
|
58
|
+
if (!canceled) setMapLib(mod.default || mod);
|
|
59
|
+
});
|
|
60
|
+
return () => {
|
|
61
|
+
canceled = true;
|
|
62
|
+
};
|
|
63
|
+
}, []);
|
|
64
|
+
(0, import_react.useEffect)(() => {
|
|
65
|
+
if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;
|
|
66
|
+
const map = new mapLib.Map({
|
|
67
|
+
container: mapContainerRef.current,
|
|
68
|
+
style: "neshan://vector",
|
|
69
|
+
// یا بر اساس mapType
|
|
70
|
+
...options
|
|
71
|
+
});
|
|
72
|
+
map.on("load", () => {
|
|
73
|
+
mapInstanceRef.current = map;
|
|
74
|
+
onMapLoad?.(map);
|
|
75
|
+
});
|
|
76
|
+
return () => {
|
|
77
|
+
markersRef.current.forEach((m) => m.remove());
|
|
78
|
+
markersRef.current = [];
|
|
79
|
+
map.remove();
|
|
80
|
+
mapInstanceRef.current = null;
|
|
81
|
+
};
|
|
82
|
+
}, [mapLib, options, onMapLoad]);
|
|
83
|
+
(0, import_react.useEffect)(() => {
|
|
84
|
+
if (!mapInstanceRef.current || !mapLib) return;
|
|
85
|
+
markersRef.current.forEach((m) => m.remove());
|
|
86
|
+
markersRef.current = [];
|
|
87
|
+
markers.forEach((markerData, index) => {
|
|
88
|
+
const el = document.createElement("div");
|
|
89
|
+
el.innerHTML = `
|
|
90
|
+
<div style="
|
|
91
|
+
background: red;
|
|
92
|
+
width: 30px;
|
|
93
|
+
height: 30px;
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
border: 3px solid white;
|
|
96
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
|
|
97
|
+
"></div>
|
|
98
|
+
`;
|
|
99
|
+
el.style.cursor = "pointer";
|
|
100
|
+
el.style.transform = markerData.id === selectedMarkerId ? "scale(1.4)" : "scale(1)";
|
|
101
|
+
el.style.transition = "transform 0.3s ease";
|
|
102
|
+
const marker = new mapLib.Marker({ element: el }).setLngLat([markerData.lng, markerData.lat]).addTo(mapInstanceRef.current);
|
|
103
|
+
el.addEventListener("click", (e) => {
|
|
104
|
+
e.stopPropagation();
|
|
105
|
+
onMarkerClick?.(markerData, index, mapInstanceRef.current);
|
|
106
|
+
});
|
|
107
|
+
markersRef.current.push(marker);
|
|
108
|
+
});
|
|
109
|
+
}, [markers, mapLib, onMarkerClick, selectedMarkerId]);
|
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: mapContainerRef, className, style, children });
|
|
111
|
+
};
|
|
112
|
+
var Map_default = Map;
|
|
113
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
114
|
+
0 && (module.exports = {
|
|
115
|
+
NeshanMap
|
|
116
|
+
});
|
|
2
117
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Map.tsx"],"sourcesContent":["\r\n\r\n\r\nexport { default as NeshanMap } from './components/Map';\r\n\r\n\r\nexport type {\r\n MapProps,\r\n MapOptions,\r\n MarkerData,\r\n MapboxMap,\r\n LngLatLike,\r\n} from './types';\r\n\r\n\r\n\r\n\r\n\r\n\r\nimport './styles.css';","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { MapProps, MapboxMap, MarkerData } from '../types'; // یا '@/types' اگر alias تنظیم کردی\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n options,\r\n markers = [],\r\n selectedMarkerId = null,\r\n onMarkerClick,\r\n onMapLoad,\r\n children,\r\n className = '',\r\n style = { width: '100%', height: '100%' },\r\n}) => {\r\n const mapContainerRef = useRef<HTMLDivElement>(null);\r\n const mapInstanceRef = useRef<MapboxMap | null>(null);\r\n const markersRef = useRef<any[]>([]); // mapboxgl.Marker[]\r\n const [mapLib, setMapLib] = useState<any>(null);\r\n\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return;\r\n\r\n let canceled = false;\r\n\r\n import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n if (!canceled) setMapLib(mod.default || mod);\r\n });\r\n\r\n return () => {\r\n canceled = true;\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;\r\n\r\n const map = new mapLib.Map({\r\n container: mapContainerRef.current,\r\n style: 'neshan://vector', // یا بر اساس mapType\r\n ...options,\r\n });\r\n\r\n map.on('load', () => {\r\n mapInstanceRef.current = map;\r\n onMapLoad?.(map);\r\n });\r\n\r\n return () => {\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n map.remove();\r\n mapInstanceRef.current = null;\r\n };\r\n }, [mapLib, options, onMapLoad]);\r\n\r\n useEffect(() => {\r\n if (!mapInstanceRef.current || !mapLib) return;\r\n\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n\r\n markers.forEach((markerData: MarkerData, index: number) => {\r\n const el = document.createElement('div');\r\n el.innerHTML = `\r\n <div style=\"\r\n background: red;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n border: 3px solid white;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.4);\r\n \"></div>\r\n `;\r\n el.style.cursor = 'pointer';\r\n el.style.transform = markerData.id === selectedMarkerId ? 'scale(1.4)' : 'scale(1)';\r\n el.style.transition = 'transform 0.3s ease';\r\n\r\n const marker = new mapLib.Marker({ element: el })\r\n .setLngLat([markerData.lng, markerData.lat])\r\n .addTo(mapInstanceRef.current!);\r\n\r\n el.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n onMarkerClick?.(markerData, index, mapInstanceRef.current!);\r\n });\r\n\r\n markersRef.current.push(marker);\r\n });\r\n }, [markers, mapLib, onMarkerClick, selectedMarkerId]);\r\n\r\n return (\r\n <div ref={mapContainerRef} className={className} style={style}>\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Map;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAmD;AA0F/C;AAvFJ,IAAM,MAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,UAAU,CAAC;AAAA,EACX,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAC1C,MAAM;AACJ,QAAM,sBAAkB,qBAAuB,IAAI;AACnD,QAAM,qBAAiB,qBAAyB,IAAI;AACpD,QAAM,iBAAa,qBAAc,CAAC,CAAC;AACnC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAc,IAAI;AAE9C,8BAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,QAAI,WAAW;AAEf,WAAO,iCAAiC,EAAE,KAAK,CAAC,QAAQ;AACtD,UAAI,CAAC,SAAU,WAAU,IAAI,WAAW,GAAG;AAAA,IAC7C,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,gBAAgB,WAAW,eAAe,QAAS;AAEnE,UAAM,MAAM,IAAI,OAAO,IAAI;AAAA,MACzB,WAAW,gBAAgB;AAAA,MAC3B,OAAO;AAAA;AAAA,MACP,GAAG;AAAA,IACL,CAAC;AAED,QAAI,GAAG,QAAQ,MAAM;AACnB,qBAAe,UAAU;AACzB,kBAAY,GAAG;AAAA,IACjB,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,iBAAW,UAAU,CAAC;AACtB,UAAI,OAAO;AACX,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,SAAS,CAAC;AAE/B,8BAAU,MAAM;AACd,QAAI,CAAC,eAAe,WAAW,CAAC,OAAQ;AAExC,eAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,eAAW,UAAU,CAAC;AAEtB,YAAQ,QAAQ,CAAC,YAAwB,UAAkB;AACzD,YAAM,KAAK,SAAS,cAAc,KAAK;AACvC,SAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUf,SAAG,MAAM,SAAS;AAClB,SAAG,MAAM,YAAY,WAAW,OAAO,mBAAmB,eAAe;AACzE,SAAG,MAAM,aAAa;AAEtB,YAAM,SAAS,IAAI,OAAO,OAAO,EAAE,SAAS,GAAG,CAAC,EAC7C,UAAU,CAAC,WAAW,KAAK,WAAW,GAAG,CAAC,EAC1C,MAAM,eAAe,OAAQ;AAEhC,SAAG,iBAAiB,SAAS,CAAC,MAAM;AAClC,UAAE,gBAAgB;AAClB,wBAAgB,YAAY,OAAO,eAAe,OAAQ;AAAA,MAC5D,CAAC;AAED,iBAAW,QAAQ,KAAK,MAAM;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,QAAQ,eAAe,gBAAgB,CAAC;AAErD,SACE,4CAAC,SAAI,KAAK,iBAAiB,WAAsB,OAC9C,UACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,38 @@
|
|
|
1
1
|
/* src/styles.css */
|
|
2
|
+
.neshan-map-container * {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
}
|
|
5
|
+
.neshan-marker {
|
|
6
|
+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
7
|
+
will-change: transform;
|
|
8
|
+
}
|
|
9
|
+
.neshan-marker:hover {
|
|
10
|
+
transform: scale(1.2) !important;
|
|
11
|
+
}
|
|
12
|
+
.neshan-marker-label {
|
|
13
|
+
background: white;
|
|
14
|
+
color: #1f2937;
|
|
15
|
+
font-size: 10px;
|
|
16
|
+
font-weight: bold;
|
|
17
|
+
padding: 4px 8px;
|
|
18
|
+
border-radius: 6px;
|
|
19
|
+
margin-top: 4px;
|
|
20
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
}
|
|
24
|
+
.neshan-marker-selected {
|
|
25
|
+
animation: pulse 2s infinite;
|
|
26
|
+
}
|
|
27
|
+
@keyframes pulse {
|
|
28
|
+
0% {
|
|
29
|
+
transform: scale(1);
|
|
30
|
+
}
|
|
31
|
+
50% {
|
|
32
|
+
transform: scale(1.15);
|
|
33
|
+
}
|
|
34
|
+
100% {
|
|
35
|
+
transform: scale(1);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
2
38
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/styles.css"],"sourcesContent":["\r\n\r\n\r\n.neshan-map-container * {\r\n box-sizing: border-box;\r\n}\r\n\r\n\r\n.neshan-marker {\r\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n will-change: transform;\r\n}\r\n\r\n.neshan-marker:hover {\r\n transform: scale(1.2) !important;\r\n}\r\n\r\n\r\n.neshan-marker-label {\r\n background: white;\r\n color: #1f2937;\r\n font-size: 10px;\r\n font-weight: bold;\r\n padding: 4px 8px;\r\n border-radius: 6px;\r\n margin-top: 4px;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\r\n white-space: nowrap;\r\n pointer-events: none;\r\n}\r\n\r\n\r\n.neshan-marker-selected {\r\n animation: pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.15);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n}"],"mappings":";AAGA,CAAC,qBAAqB;AACpB,cAAY;AACd;AAGA,CAAC;AACC,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACf;AAEA,CALC,aAKa;AACZ,aAAW,MAAM;AACnB;AAGA,CAAC;AACC,cAAY;AACZ,SAAO;AACP,aAAW;AACX,eAAa;AACb,WAAS,IAAI;AACb,iBAAe;AACf,cAAY;AACZ,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,eAAa;AACb,kBAAgB;AAClB;AAGA,CAAC;AACC,aAAW,MAAM,GAAG;AACtB;AAEA,WAHa;AAIX;AACE,eAAW,MAAM;AACnB;AACA;AACE,eAAW,MAAM;AACnB;AACA;AACE,eAAW,MAAM;AACnB;AACF;","names":[]}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGxD,YAAY,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,SAAS,CAAC;AAOjB,OAAO,cAAc,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1 +1,80 @@
|
|
|
1
|
+
// src/components/Map.tsx
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
var Map = ({
|
|
5
|
+
options,
|
|
6
|
+
markers = [],
|
|
7
|
+
selectedMarkerId = null,
|
|
8
|
+
onMarkerClick,
|
|
9
|
+
onMapLoad,
|
|
10
|
+
children,
|
|
11
|
+
className = "",
|
|
12
|
+
style = { width: "100%", height: "100%" }
|
|
13
|
+
}) => {
|
|
14
|
+
const mapContainerRef = useRef(null);
|
|
15
|
+
const mapInstanceRef = useRef(null);
|
|
16
|
+
const markersRef = useRef([]);
|
|
17
|
+
const [mapLib, setMapLib] = useState(null);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (typeof window === "undefined") return;
|
|
20
|
+
let canceled = false;
|
|
21
|
+
import("@neshan-maps-platform/mapbox-gl").then((mod) => {
|
|
22
|
+
if (!canceled) setMapLib(mod.default || mod);
|
|
23
|
+
});
|
|
24
|
+
return () => {
|
|
25
|
+
canceled = true;
|
|
26
|
+
};
|
|
27
|
+
}, []);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;
|
|
30
|
+
const map = new mapLib.Map({
|
|
31
|
+
container: mapContainerRef.current,
|
|
32
|
+
style: "neshan://vector",
|
|
33
|
+
// یا بر اساس mapType
|
|
34
|
+
...options
|
|
35
|
+
});
|
|
36
|
+
map.on("load", () => {
|
|
37
|
+
mapInstanceRef.current = map;
|
|
38
|
+
onMapLoad?.(map);
|
|
39
|
+
});
|
|
40
|
+
return () => {
|
|
41
|
+
markersRef.current.forEach((m) => m.remove());
|
|
42
|
+
markersRef.current = [];
|
|
43
|
+
map.remove();
|
|
44
|
+
mapInstanceRef.current = null;
|
|
45
|
+
};
|
|
46
|
+
}, [mapLib, options, onMapLoad]);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (!mapInstanceRef.current || !mapLib) return;
|
|
49
|
+
markersRef.current.forEach((m) => m.remove());
|
|
50
|
+
markersRef.current = [];
|
|
51
|
+
markers.forEach((markerData, index) => {
|
|
52
|
+
const el = document.createElement("div");
|
|
53
|
+
el.innerHTML = `
|
|
54
|
+
<div style="
|
|
55
|
+
background: red;
|
|
56
|
+
width: 30px;
|
|
57
|
+
height: 30px;
|
|
58
|
+
border-radius: 50%;
|
|
59
|
+
border: 3px solid white;
|
|
60
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
|
|
61
|
+
"></div>
|
|
62
|
+
`;
|
|
63
|
+
el.style.cursor = "pointer";
|
|
64
|
+
el.style.transform = markerData.id === selectedMarkerId ? "scale(1.4)" : "scale(1)";
|
|
65
|
+
el.style.transition = "transform 0.3s ease";
|
|
66
|
+
const marker = new mapLib.Marker({ element: el }).setLngLat([markerData.lng, markerData.lat]).addTo(mapInstanceRef.current);
|
|
67
|
+
el.addEventListener("click", (e) => {
|
|
68
|
+
e.stopPropagation();
|
|
69
|
+
onMarkerClick?.(markerData, index, mapInstanceRef.current);
|
|
70
|
+
});
|
|
71
|
+
markersRef.current.push(marker);
|
|
72
|
+
});
|
|
73
|
+
}, [markers, mapLib, onMarkerClick, selectedMarkerId]);
|
|
74
|
+
return /* @__PURE__ */ jsx("div", { ref: mapContainerRef, className, style, children });
|
|
75
|
+
};
|
|
76
|
+
var Map_default = Map;
|
|
77
|
+
export {
|
|
78
|
+
Map_default as NeshanMap
|
|
79
|
+
};
|
|
1
80
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Map.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { MapProps, MapboxMap, MarkerData } from '../types'; // یا '@/types' اگر alias تنظیم کردی\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n options,\r\n markers = [],\r\n selectedMarkerId = null,\r\n onMarkerClick,\r\n onMapLoad,\r\n children,\r\n className = '',\r\n style = { width: '100%', height: '100%' },\r\n}) => {\r\n const mapContainerRef = useRef<HTMLDivElement>(null);\r\n const mapInstanceRef = useRef<MapboxMap | null>(null);\r\n const markersRef = useRef<any[]>([]); // mapboxgl.Marker[]\r\n const [mapLib, setMapLib] = useState<any>(null);\r\n\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return;\r\n\r\n let canceled = false;\r\n\r\n import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n if (!canceled) setMapLib(mod.default || mod);\r\n });\r\n\r\n return () => {\r\n canceled = true;\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;\r\n\r\n const map = new mapLib.Map({\r\n container: mapContainerRef.current,\r\n style: 'neshan://vector', // یا بر اساس mapType\r\n ...options,\r\n });\r\n\r\n map.on('load', () => {\r\n mapInstanceRef.current = map;\r\n onMapLoad?.(map);\r\n });\r\n\r\n return () => {\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n map.remove();\r\n mapInstanceRef.current = null;\r\n };\r\n }, [mapLib, options, onMapLoad]);\r\n\r\n useEffect(() => {\r\n if (!mapInstanceRef.current || !mapLib) return;\r\n\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n\r\n markers.forEach((markerData: MarkerData, index: number) => {\r\n const el = document.createElement('div');\r\n el.innerHTML = `\r\n <div style=\"\r\n background: red;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n border: 3px solid white;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.4);\r\n \"></div>\r\n `;\r\n el.style.cursor = 'pointer';\r\n el.style.transform = markerData.id === selectedMarkerId ? 'scale(1.4)' : 'scale(1)';\r\n el.style.transition = 'transform 0.3s ease';\r\n\r\n const marker = new mapLib.Marker({ element: el })\r\n .setLngLat([markerData.lng, markerData.lat])\r\n .addTo(mapInstanceRef.current!);\r\n\r\n el.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n onMarkerClick?.(markerData, index, mapInstanceRef.current!);\r\n });\r\n\r\n markersRef.current.push(marker);\r\n });\r\n }, [markers, mapLib, onMarkerClick, selectedMarkerId]);\r\n\r\n return (\r\n <div ref={mapContainerRef} className={className} style={style}>\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Map;"],"mappings":";AAEA,SAAgB,WAAW,QAAQ,gBAAgB;AA0F/C;AAvFJ,IAAM,MAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,UAAU,CAAC;AAAA,EACX,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAC1C,MAAM;AACJ,QAAM,kBAAkB,OAAuB,IAAI;AACnD,QAAM,iBAAiB,OAAyB,IAAI;AACpD,QAAM,aAAa,OAAc,CAAC,CAAC;AACnC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAc,IAAI;AAE9C,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,QAAI,WAAW;AAEf,WAAO,iCAAiC,EAAE,KAAK,CAAC,QAAQ;AACtD,UAAI,CAAC,SAAU,WAAU,IAAI,WAAW,GAAG;AAAA,IAC7C,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,gBAAgB,WAAW,eAAe,QAAS;AAEnE,UAAM,MAAM,IAAI,OAAO,IAAI;AAAA,MACzB,WAAW,gBAAgB;AAAA,MAC3B,OAAO;AAAA;AAAA,MACP,GAAG;AAAA,IACL,CAAC;AAED,QAAI,GAAG,QAAQ,MAAM;AACnB,qBAAe,UAAU;AACzB,kBAAY,GAAG;AAAA,IACjB,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,iBAAW,UAAU,CAAC;AACtB,UAAI,OAAO;AACX,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,SAAS,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,eAAe,WAAW,CAAC,OAAQ;AAExC,eAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,eAAW,UAAU,CAAC;AAEtB,YAAQ,QAAQ,CAAC,YAAwB,UAAkB;AACzD,YAAM,KAAK,SAAS,cAAc,KAAK;AACvC,SAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUf,SAAG,MAAM,SAAS;AAClB,SAAG,MAAM,YAAY,WAAW,OAAO,mBAAmB,eAAe;AACzE,SAAG,MAAM,aAAa;AAEtB,YAAM,SAAS,IAAI,OAAO,OAAO,EAAE,SAAS,GAAG,CAAC,EAC7C,UAAU,CAAC,WAAW,KAAK,WAAW,GAAG,CAAC,EAC1C,MAAM,eAAe,OAAQ;AAEhC,SAAG,iBAAiB,SAAS,CAAC,MAAM;AAClC,UAAE,gBAAgB;AAClB,wBAAgB,YAAY,OAAO,eAAe,OAAQ;AAAA,MAC5D,CAAC;AAED,iBAAW,QAAQ,KAAK,MAAM;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,QAAQ,eAAe,gBAAgB,CAAC;AAErD,SACE,oBAAC,SAAI,KAAK,iBAAiB,WAAsB,OAC9C,UACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}
|
package/dist/react.cjs
CHANGED
|
@@ -1,3 +1,118 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
|
|
31
|
+
// src/react.ts
|
|
32
|
+
var react_exports = {};
|
|
33
|
+
__export(react_exports, {
|
|
34
|
+
NeshanMap: () => Map_default
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(react_exports);
|
|
37
|
+
|
|
38
|
+
// src/components/Map.tsx
|
|
39
|
+
var import_react = require("react");
|
|
40
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
var Map = ({
|
|
42
|
+
options,
|
|
43
|
+
markers = [],
|
|
44
|
+
selectedMarkerId = null,
|
|
45
|
+
onMarkerClick,
|
|
46
|
+
onMapLoad,
|
|
47
|
+
children,
|
|
48
|
+
className = "",
|
|
49
|
+
style = { width: "100%", height: "100%" }
|
|
50
|
+
}) => {
|
|
51
|
+
const mapContainerRef = (0, import_react.useRef)(null);
|
|
52
|
+
const mapInstanceRef = (0, import_react.useRef)(null);
|
|
53
|
+
const markersRef = (0, import_react.useRef)([]);
|
|
54
|
+
const [mapLib, setMapLib] = (0, import_react.useState)(null);
|
|
55
|
+
(0, import_react.useEffect)(() => {
|
|
56
|
+
if (typeof window === "undefined") return;
|
|
57
|
+
let canceled = false;
|
|
58
|
+
import("@neshan-maps-platform/mapbox-gl").then((mod) => {
|
|
59
|
+
if (!canceled) setMapLib(mod.default || mod);
|
|
60
|
+
});
|
|
61
|
+
return () => {
|
|
62
|
+
canceled = true;
|
|
63
|
+
};
|
|
64
|
+
}, []);
|
|
65
|
+
(0, import_react.useEffect)(() => {
|
|
66
|
+
if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;
|
|
67
|
+
const map = new mapLib.Map({
|
|
68
|
+
container: mapContainerRef.current,
|
|
69
|
+
style: "neshan://vector",
|
|
70
|
+
// یا بر اساس mapType
|
|
71
|
+
...options
|
|
72
|
+
});
|
|
73
|
+
map.on("load", () => {
|
|
74
|
+
mapInstanceRef.current = map;
|
|
75
|
+
onMapLoad?.(map);
|
|
76
|
+
});
|
|
77
|
+
return () => {
|
|
78
|
+
markersRef.current.forEach((m) => m.remove());
|
|
79
|
+
markersRef.current = [];
|
|
80
|
+
map.remove();
|
|
81
|
+
mapInstanceRef.current = null;
|
|
82
|
+
};
|
|
83
|
+
}, [mapLib, options, onMapLoad]);
|
|
84
|
+
(0, import_react.useEffect)(() => {
|
|
85
|
+
if (!mapInstanceRef.current || !mapLib) return;
|
|
86
|
+
markersRef.current.forEach((m) => m.remove());
|
|
87
|
+
markersRef.current = [];
|
|
88
|
+
markers.forEach((markerData, index) => {
|
|
89
|
+
const el = document.createElement("div");
|
|
90
|
+
el.innerHTML = `
|
|
91
|
+
<div style="
|
|
92
|
+
background: red;
|
|
93
|
+
width: 30px;
|
|
94
|
+
height: 30px;
|
|
95
|
+
border-radius: 50%;
|
|
96
|
+
border: 3px solid white;
|
|
97
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
|
|
98
|
+
"></div>
|
|
99
|
+
`;
|
|
100
|
+
el.style.cursor = "pointer";
|
|
101
|
+
el.style.transform = markerData.id === selectedMarkerId ? "scale(1.4)" : "scale(1)";
|
|
102
|
+
el.style.transition = "transform 0.3s ease";
|
|
103
|
+
const marker = new mapLib.Marker({ element: el }).setLngLat([markerData.lng, markerData.lat]).addTo(mapInstanceRef.current);
|
|
104
|
+
el.addEventListener("click", (e) => {
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
onMarkerClick?.(markerData, index, mapInstanceRef.current);
|
|
107
|
+
});
|
|
108
|
+
markersRef.current.push(marker);
|
|
109
|
+
});
|
|
110
|
+
}, [markers, mapLib, onMarkerClick, selectedMarkerId]);
|
|
111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: mapContainerRef, className, style, children });
|
|
112
|
+
};
|
|
113
|
+
var Map_default = Map;
|
|
114
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
115
|
+
0 && (module.exports = {
|
|
116
|
+
NeshanMap
|
|
117
|
+
});
|
|
3
118
|
//# sourceMappingURL=react.cjs.map
|
package/dist/react.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/react.ts","../src/components/Map.tsx"],"sourcesContent":["// src/react.ts\r\n\r\n\"use client\";\r\n\r\nexport { default as NeshanMap } from './components/Map';\r\nexport type {\r\n MapProps,\r\n MapOptions,\r\n MarkerData,\r\n} from './types';","\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { MapProps, MapboxMap, MarkerData } from '../types'; // یا '@/types' اگر alias تنظیم کردی\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n options,\r\n markers = [],\r\n selectedMarkerId = null,\r\n onMarkerClick,\r\n onMapLoad,\r\n children,\r\n className = '',\r\n style = { width: '100%', height: '100%' },\r\n}) => {\r\n const mapContainerRef = useRef<HTMLDivElement>(null);\r\n const mapInstanceRef = useRef<MapboxMap | null>(null);\r\n const markersRef = useRef<any[]>([]); // mapboxgl.Marker[]\r\n const [mapLib, setMapLib] = useState<any>(null);\r\n\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return;\r\n\r\n let canceled = false;\r\n\r\n import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n if (!canceled) setMapLib(mod.default || mod);\r\n });\r\n\r\n return () => {\r\n canceled = true;\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;\r\n\r\n const map = new mapLib.Map({\r\n container: mapContainerRef.current,\r\n style: 'neshan://vector', // یا بر اساس mapType\r\n ...options,\r\n });\r\n\r\n map.on('load', () => {\r\n mapInstanceRef.current = map;\r\n onMapLoad?.(map);\r\n });\r\n\r\n return () => {\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n map.remove();\r\n mapInstanceRef.current = null;\r\n };\r\n }, [mapLib, options, onMapLoad]);\r\n\r\n useEffect(() => {\r\n if (!mapInstanceRef.current || !mapLib) return;\r\n\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n\r\n markers.forEach((markerData: MarkerData, index: number) => {\r\n const el = document.createElement('div');\r\n el.innerHTML = `\r\n <div style=\"\r\n background: red;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n border: 3px solid white;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.4);\r\n \"></div>\r\n `;\r\n el.style.cursor = 'pointer';\r\n el.style.transform = markerData.id === selectedMarkerId ? 'scale(1.4)' : 'scale(1)';\r\n el.style.transition = 'transform 0.3s ease';\r\n\r\n const marker = new mapLib.Marker({ element: el })\r\n .setLngLat([markerData.lng, markerData.lat])\r\n .addTo(mapInstanceRef.current!);\r\n\r\n el.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n onMarkerClick?.(markerData, index, mapInstanceRef.current!);\r\n });\r\n\r\n markersRef.current.push(marker);\r\n });\r\n }, [markers, mapLib, onMarkerClick, selectedMarkerId]);\r\n\r\n return (\r\n <div ref={mapContainerRef} className={className} style={style}>\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Map;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAmD;AA0F/C;AAvFJ,IAAM,MAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,UAAU,CAAC;AAAA,EACX,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAC1C,MAAM;AACJ,QAAM,sBAAkB,qBAAuB,IAAI;AACnD,QAAM,qBAAiB,qBAAyB,IAAI;AACpD,QAAM,iBAAa,qBAAc,CAAC,CAAC;AACnC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAc,IAAI;AAE9C,8BAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,QAAI,WAAW;AAEf,WAAO,iCAAiC,EAAE,KAAK,CAAC,QAAQ;AACtD,UAAI,CAAC,SAAU,WAAU,IAAI,WAAW,GAAG;AAAA,IAC7C,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,gBAAgB,WAAW,eAAe,QAAS;AAEnE,UAAM,MAAM,IAAI,OAAO,IAAI;AAAA,MACzB,WAAW,gBAAgB;AAAA,MAC3B,OAAO;AAAA;AAAA,MACP,GAAG;AAAA,IACL,CAAC;AAED,QAAI,GAAG,QAAQ,MAAM;AACnB,qBAAe,UAAU;AACzB,kBAAY,GAAG;AAAA,IACjB,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,iBAAW,UAAU,CAAC;AACtB,UAAI,OAAO;AACX,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,SAAS,CAAC;AAE/B,8BAAU,MAAM;AACd,QAAI,CAAC,eAAe,WAAW,CAAC,OAAQ;AAExC,eAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,eAAW,UAAU,CAAC;AAEtB,YAAQ,QAAQ,CAAC,YAAwB,UAAkB;AACzD,YAAM,KAAK,SAAS,cAAc,KAAK;AACvC,SAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUf,SAAG,MAAM,SAAS;AAClB,SAAG,MAAM,YAAY,WAAW,OAAO,mBAAmB,eAAe;AACzE,SAAG,MAAM,aAAa;AAEtB,YAAM,SAAS,IAAI,OAAO,OAAO,EAAE,SAAS,GAAG,CAAC,EAC7C,UAAU,CAAC,WAAW,KAAK,WAAW,GAAG,CAAC,EAC1C,MAAM,eAAe,OAAQ;AAEhC,SAAG,iBAAiB,SAAS,CAAC,MAAM;AAClC,UAAE,gBAAgB;AAClB,wBAAgB,YAAY,OAAO,eAAe,OAAQ;AAAA,MAC5D,CAAC;AAED,iBAAW,QAAQ,KAAK,MAAM;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,QAAQ,eAAe,gBAAgB,CAAC;AAErD,SACE,4CAAC,SAAI,KAAK,iBAAiB,WAAsB,OAC9C,UACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}
|
package/dist/react.d.ts
CHANGED
package/dist/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACxD,YAAY,EACV,QAAQ,EACR,UAAU,EACV,UAAU,GACX,MAAM,SAAS,CAAC"}
|
package/dist/react.js
CHANGED
|
@@ -1,2 +1,82 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
|
|
3
|
+
// src/components/Map.tsx
|
|
4
|
+
import { useEffect, useRef, useState } from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
var Map = ({
|
|
7
|
+
options,
|
|
8
|
+
markers = [],
|
|
9
|
+
selectedMarkerId = null,
|
|
10
|
+
onMarkerClick,
|
|
11
|
+
onMapLoad,
|
|
12
|
+
children,
|
|
13
|
+
className = "",
|
|
14
|
+
style = { width: "100%", height: "100%" }
|
|
15
|
+
}) => {
|
|
16
|
+
const mapContainerRef = useRef(null);
|
|
17
|
+
const mapInstanceRef = useRef(null);
|
|
18
|
+
const markersRef = useRef([]);
|
|
19
|
+
const [mapLib, setMapLib] = useState(null);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (typeof window === "undefined") return;
|
|
22
|
+
let canceled = false;
|
|
23
|
+
import("@neshan-maps-platform/mapbox-gl").then((mod) => {
|
|
24
|
+
if (!canceled) setMapLib(mod.default || mod);
|
|
25
|
+
});
|
|
26
|
+
return () => {
|
|
27
|
+
canceled = true;
|
|
28
|
+
};
|
|
29
|
+
}, []);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;
|
|
32
|
+
const map = new mapLib.Map({
|
|
33
|
+
container: mapContainerRef.current,
|
|
34
|
+
style: "neshan://vector",
|
|
35
|
+
// یا بر اساس mapType
|
|
36
|
+
...options
|
|
37
|
+
});
|
|
38
|
+
map.on("load", () => {
|
|
39
|
+
mapInstanceRef.current = map;
|
|
40
|
+
onMapLoad?.(map);
|
|
41
|
+
});
|
|
42
|
+
return () => {
|
|
43
|
+
markersRef.current.forEach((m) => m.remove());
|
|
44
|
+
markersRef.current = [];
|
|
45
|
+
map.remove();
|
|
46
|
+
mapInstanceRef.current = null;
|
|
47
|
+
};
|
|
48
|
+
}, [mapLib, options, onMapLoad]);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (!mapInstanceRef.current || !mapLib) return;
|
|
51
|
+
markersRef.current.forEach((m) => m.remove());
|
|
52
|
+
markersRef.current = [];
|
|
53
|
+
markers.forEach((markerData, index) => {
|
|
54
|
+
const el = document.createElement("div");
|
|
55
|
+
el.innerHTML = `
|
|
56
|
+
<div style="
|
|
57
|
+
background: red;
|
|
58
|
+
width: 30px;
|
|
59
|
+
height: 30px;
|
|
60
|
+
border-radius: 50%;
|
|
61
|
+
border: 3px solid white;
|
|
62
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
|
|
63
|
+
"></div>
|
|
64
|
+
`;
|
|
65
|
+
el.style.cursor = "pointer";
|
|
66
|
+
el.style.transform = markerData.id === selectedMarkerId ? "scale(1.4)" : "scale(1)";
|
|
67
|
+
el.style.transition = "transform 0.3s ease";
|
|
68
|
+
const marker = new mapLib.Marker({ element: el }).setLngLat([markerData.lng, markerData.lat]).addTo(mapInstanceRef.current);
|
|
69
|
+
el.addEventListener("click", (e) => {
|
|
70
|
+
e.stopPropagation();
|
|
71
|
+
onMarkerClick?.(markerData, index, mapInstanceRef.current);
|
|
72
|
+
});
|
|
73
|
+
markersRef.current.push(marker);
|
|
74
|
+
});
|
|
75
|
+
}, [markers, mapLib, onMarkerClick, selectedMarkerId]);
|
|
76
|
+
return /* @__PURE__ */ jsx("div", { ref: mapContainerRef, className, style, children });
|
|
77
|
+
};
|
|
78
|
+
var Map_default = Map;
|
|
79
|
+
export {
|
|
80
|
+
Map_default as NeshanMap
|
|
81
|
+
};
|
|
2
82
|
//# sourceMappingURL=react.js.map
|
package/dist/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/components/Map.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, useRef, useState } from 'react';\r\nimport { MapProps, MapboxMap, MarkerData } from '../types'; // یا '@/types' اگر alias تنظیم کردی\r\n\r\nconst Map: React.FC<MapProps> = ({\r\n options,\r\n markers = [],\r\n selectedMarkerId = null,\r\n onMarkerClick,\r\n onMapLoad,\r\n children,\r\n className = '',\r\n style = { width: '100%', height: '100%' },\r\n}) => {\r\n const mapContainerRef = useRef<HTMLDivElement>(null);\r\n const mapInstanceRef = useRef<MapboxMap | null>(null);\r\n const markersRef = useRef<any[]>([]); // mapboxgl.Marker[]\r\n const [mapLib, setMapLib] = useState<any>(null);\r\n\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return;\r\n\r\n let canceled = false;\r\n\r\n import('@neshan-maps-platform/mapbox-gl').then((mod) => {\r\n if (!canceled) setMapLib(mod.default || mod);\r\n });\r\n\r\n return () => {\r\n canceled = true;\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!mapLib || !mapContainerRef.current || mapInstanceRef.current) return;\r\n\r\n const map = new mapLib.Map({\r\n container: mapContainerRef.current,\r\n style: 'neshan://vector', // یا بر اساس mapType\r\n ...options,\r\n });\r\n\r\n map.on('load', () => {\r\n mapInstanceRef.current = map;\r\n onMapLoad?.(map);\r\n });\r\n\r\n return () => {\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n map.remove();\r\n mapInstanceRef.current = null;\r\n };\r\n }, [mapLib, options, onMapLoad]);\r\n\r\n useEffect(() => {\r\n if (!mapInstanceRef.current || !mapLib) return;\r\n\r\n markersRef.current.forEach((m: any) => m.remove());\r\n markersRef.current = [];\r\n\r\n markers.forEach((markerData: MarkerData, index: number) => {\r\n const el = document.createElement('div');\r\n el.innerHTML = `\r\n <div style=\"\r\n background: red;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n border: 3px solid white;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.4);\r\n \"></div>\r\n `;\r\n el.style.cursor = 'pointer';\r\n el.style.transform = markerData.id === selectedMarkerId ? 'scale(1.4)' : 'scale(1)';\r\n el.style.transition = 'transform 0.3s ease';\r\n\r\n const marker = new mapLib.Marker({ element: el })\r\n .setLngLat([markerData.lng, markerData.lat])\r\n .addTo(mapInstanceRef.current!);\r\n\r\n el.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n onMarkerClick?.(markerData, index, mapInstanceRef.current!);\r\n });\r\n\r\n markersRef.current.push(marker);\r\n });\r\n }, [markers, mapLib, onMarkerClick, selectedMarkerId]);\r\n\r\n return (\r\n <div ref={mapContainerRef} className={className} style={style}>\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nexport default Map;"],"mappings":";;;AAEA,SAAgB,WAAW,QAAQ,gBAAgB;AA0F/C;AAvFJ,IAAM,MAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,UAAU,CAAC;AAAA,EACX,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAC1C,MAAM;AACJ,QAAM,kBAAkB,OAAuB,IAAI;AACnD,QAAM,iBAAiB,OAAyB,IAAI;AACpD,QAAM,aAAa,OAAc,CAAC,CAAC;AACnC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAc,IAAI;AAE9C,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,QAAI,WAAW;AAEf,WAAO,iCAAiC,EAAE,KAAK,CAAC,QAAQ;AACtD,UAAI,CAAC,SAAU,WAAU,IAAI,WAAW,GAAG;AAAA,IAC7C,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,IACb;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,gBAAgB,WAAW,eAAe,QAAS;AAEnE,UAAM,MAAM,IAAI,OAAO,IAAI;AAAA,MACzB,WAAW,gBAAgB;AAAA,MAC3B,OAAO;AAAA;AAAA,MACP,GAAG;AAAA,IACL,CAAC;AAED,QAAI,GAAG,QAAQ,MAAM;AACnB,qBAAe,UAAU;AACzB,kBAAY,GAAG;AAAA,IACjB,CAAC;AAED,WAAO,MAAM;AACX,iBAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,iBAAW,UAAU,CAAC;AACtB,UAAI,OAAO;AACX,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,QAAQ,SAAS,SAAS,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI,CAAC,eAAe,WAAW,CAAC,OAAQ;AAExC,eAAW,QAAQ,QAAQ,CAAC,MAAW,EAAE,OAAO,CAAC;AACjD,eAAW,UAAU,CAAC;AAEtB,YAAQ,QAAQ,CAAC,YAAwB,UAAkB;AACzD,YAAM,KAAK,SAAS,cAAc,KAAK;AACvC,SAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUf,SAAG,MAAM,SAAS;AAClB,SAAG,MAAM,YAAY,WAAW,OAAO,mBAAmB,eAAe;AACzE,SAAG,MAAM,aAAa;AAEtB,YAAM,SAAS,IAAI,OAAO,OAAO,EAAE,SAAS,GAAG,CAAC,EAC7C,UAAU,CAAC,WAAW,KAAK,WAAW,GAAG,CAAC,EAC1C,MAAM,eAAe,OAAQ;AAEhC,SAAG,iBAAiB,SAAS,CAAC,MAAM;AAClC,UAAE,gBAAgB;AAClB,wBAAgB,YAAY,OAAO,eAAe,OAAQ;AAAA,MAC5D,CAAC;AAED,iBAAW,QAAQ,KAAK,MAAM;AAAA,IAChC,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,QAAQ,eAAe,gBAAgB,CAAC;AAErD,SACE,oBAAC,SAAI,KAAK,iBAAiB,WAAsB,OAC9C,UACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}
|
package/dist/styles.css
CHANGED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
.neshan-map-container * {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
.neshan-marker {
|
|
10
|
+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
11
|
+
will-change: transform;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.neshan-marker:hover {
|
|
15
|
+
transform: scale(1.2) !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
.neshan-marker-label {
|
|
20
|
+
background: white;
|
|
21
|
+
color: #1f2937;
|
|
22
|
+
font-size: 10px;
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
padding: 4px 8px;
|
|
25
|
+
border-radius: 6px;
|
|
26
|
+
margin-top: 4px;
|
|
27
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
.neshan-marker-selected {
|
|
34
|
+
animation: pulse 2s infinite;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@keyframes pulse {
|
|
38
|
+
0% {
|
|
39
|
+
transform: scale(1);
|
|
40
|
+
}
|
|
41
|
+
50% {
|
|
42
|
+
transform: scale(1.15);
|
|
43
|
+
}
|
|
44
|
+
100% {
|
|
45
|
+
transform: scale(1);
|
|
46
|
+
}
|
|
47
|
+
}
|