datastake-daf 0.6.271 → 0.6.273
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/components/index.js
CHANGED
|
@@ -19363,39 +19363,23 @@ const Style$A = dt.div`
|
|
|
19363
19363
|
height: 100%;
|
|
19364
19364
|
}
|
|
19365
19365
|
|
|
19366
|
+
/* Narrow marker styling used by legacy components; avoid width/height overrides for SimpleGlobe */
|
|
19366
19367
|
.map-marker {
|
|
19367
19368
|
text-align: center;
|
|
19368
|
-
width 100%;
|
|
19369
|
-
height: 100%;
|
|
19370
19369
|
border-radius: 50% 50% 50% 0;
|
|
19371
19370
|
|
|
19372
19371
|
span {
|
|
19373
19372
|
color: white;
|
|
19374
19373
|
}
|
|
19375
19374
|
|
|
19376
|
-
&.rounded {
|
|
19377
|
-
|
|
19378
|
-
}
|
|
19379
|
-
|
|
19380
|
-
&.incident {
|
|
19381
|
-
border-radius: 100%;
|
|
19382
|
-
|
|
19383
|
-
.main {
|
|
19384
|
-
border-radius: 100%;
|
|
19385
|
-
height: 100%;
|
|
19386
|
-
display: flex;
|
|
19387
|
-
flex-direction: column;
|
|
19388
|
-
justify-content: center;
|
|
19389
|
-
}
|
|
19390
|
-
}
|
|
19391
|
-
|
|
19392
|
-
&.marker {
|
|
19393
|
-
background: var(--color-primary-70);
|
|
19394
|
-
border: 1px solid white;
|
|
19395
|
-
box-shadow: 0px 3.45px 3.45px 0px #00000029;
|
|
19396
|
-
}
|
|
19375
|
+
&.rounded { border-radius: 100%; }
|
|
19376
|
+
&.incident { border-radius: 100%; }
|
|
19377
|
+
&.marker { background: var(--color-primary-70); border: 1px solid white; box-shadow: 0px 3.45px 3.45px 0px #00000029; }
|
|
19397
19378
|
}
|
|
19398
19379
|
|
|
19380
|
+
/* Scoped class used by SimpleGlobe to avoid picking up broad .map-marker rules */
|
|
19381
|
+
.daf-globe-marker { text-align: center; }
|
|
19382
|
+
|
|
19399
19383
|
#globe {
|
|
19400
19384
|
flex: 1;
|
|
19401
19385
|
background: rgb(0, 0, 0);
|
|
@@ -20934,7 +20918,7 @@ const SimpleGlobe = _ref => {
|
|
|
20934
20918
|
// Hide Mapbox logo and attribution completely
|
|
20935
20919
|
map.current.getContainer();
|
|
20936
20920
|
const style = document.createElement('style');
|
|
20937
|
-
style.textContent = "\n .mapboxgl-ctrl-logo,\n .mapboxgl-ctrl-attrib,\n .mapboxgl-ctrl-bottom-left,\n .mapboxgl-ctrl-bottom-right {\n display: none !important;\n }\n ";
|
|
20921
|
+
style.textContent = "\n .mapboxgl-ctrl-logo,\n .mapboxgl-ctrl-attrib,\n .mapboxgl-ctrl-bottom-left,\n .mapboxgl-ctrl-bottom-right {\n display: none !important;\n }\n .mapboxgl-canvas-container {\n overflow: hidden !important;\n }\n .mapboxgl-canvas {\n overflow: hidden !important;\n }\n ";
|
|
20938
20922
|
document.head.appendChild(style);
|
|
20939
20923
|
|
|
20940
20924
|
// Set the space background with stars
|
|
@@ -20971,14 +20955,13 @@ const SimpleGlobe = _ref => {
|
|
|
20971
20955
|
|
|
20972
20956
|
// Create marker element based on type
|
|
20973
20957
|
const el = document.createElement('div');
|
|
20974
|
-
|
|
20958
|
+
// Use a scoped class to avoid picking up broad styles like `.map-marker { width:100% }`
|
|
20959
|
+
el.className = 'daf-globe-marker';
|
|
20975
20960
|
el.style.cursor = 'pointer';
|
|
20976
20961
|
el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
|
|
20977
20962
|
el.style.display = 'flex';
|
|
20978
20963
|
el.style.alignItems = 'center';
|
|
20979
20964
|
el.style.justifyContent = 'center';
|
|
20980
|
-
el.style.position = 'absolute';
|
|
20981
|
-
el.style.transform = 'translate(-50%, -50%)';
|
|
20982
20965
|
if (type === "location") {
|
|
20983
20966
|
// Location marker - SVG map pin style
|
|
20984
20967
|
el.style.width = '28px';
|
|
@@ -21045,8 +21028,14 @@ const SimpleGlobe = _ref => {
|
|
|
21045
21028
|
if (hasValidCoordinates && !bounds.isEmpty()) {
|
|
21046
21029
|
console.log('🗺️ [SIMPLE GLOBE] Fitting map to bounds:', bounds);
|
|
21047
21030
|
map.current.fitBounds(bounds, {
|
|
21048
|
-
padding:
|
|
21049
|
-
|
|
21031
|
+
padding: {
|
|
21032
|
+
top: 20,
|
|
21033
|
+
bottom: 20,
|
|
21034
|
+
left: 20,
|
|
21035
|
+
right: 20
|
|
21036
|
+
},
|
|
21037
|
+
maxZoom: 6,
|
|
21038
|
+
duration: 1000
|
|
21050
21039
|
});
|
|
21051
21040
|
}
|
|
21052
21041
|
});
|
|
@@ -21062,7 +21051,9 @@ const SimpleGlobe = _ref => {
|
|
|
21062
21051
|
ref: mapContainer,
|
|
21063
21052
|
style: {
|
|
21064
21053
|
width: '100%',
|
|
21065
|
-
height: '500px'
|
|
21054
|
+
height: '500px',
|
|
21055
|
+
overflow: 'hidden',
|
|
21056
|
+
position: 'relative'
|
|
21066
21057
|
}
|
|
21067
21058
|
})
|
|
21068
21059
|
});
|
package/package.json
CHANGED
|
@@ -67,6 +67,12 @@ const SimpleGlobe = ({
|
|
|
67
67
|
.mapboxgl-ctrl-bottom-right {
|
|
68
68
|
display: none !important;
|
|
69
69
|
}
|
|
70
|
+
.mapboxgl-canvas-container {
|
|
71
|
+
overflow: hidden !important;
|
|
72
|
+
}
|
|
73
|
+
.mapboxgl-canvas {
|
|
74
|
+
overflow: hidden !important;
|
|
75
|
+
}
|
|
70
76
|
`;
|
|
71
77
|
document.head.appendChild(style);
|
|
72
78
|
|
|
@@ -104,14 +110,13 @@ const SimpleGlobe = ({
|
|
|
104
110
|
|
|
105
111
|
// Create marker element based on type
|
|
106
112
|
const el = document.createElement('div');
|
|
107
|
-
|
|
113
|
+
// Use a scoped class to avoid picking up broad styles like `.map-marker { width:100% }`
|
|
114
|
+
el.className = 'daf-globe-marker';
|
|
108
115
|
el.style.cursor = 'pointer';
|
|
109
116
|
el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
|
|
110
117
|
el.style.display = 'flex';
|
|
111
118
|
el.style.alignItems = 'center';
|
|
112
119
|
el.style.justifyContent = 'center';
|
|
113
|
-
el.style.position = 'absolute';
|
|
114
|
-
el.style.transform = 'translate(-50%, -50%)';
|
|
115
120
|
|
|
116
121
|
if (type === "location") {
|
|
117
122
|
// Location marker - SVG map pin style
|
|
@@ -221,8 +226,9 @@ const SimpleGlobe = ({
|
|
|
221
226
|
if (hasValidCoordinates && !bounds.isEmpty()) {
|
|
222
227
|
console.log('🗺️ [SIMPLE GLOBE] Fitting map to bounds:', bounds);
|
|
223
228
|
map.current.fitBounds(bounds, {
|
|
224
|
-
padding:
|
|
225
|
-
maxZoom:
|
|
229
|
+
padding: { top: 20, bottom: 20, left: 20, right: 20 },
|
|
230
|
+
maxZoom: 6,
|
|
231
|
+
duration: 1000
|
|
226
232
|
});
|
|
227
233
|
}
|
|
228
234
|
});
|
|
@@ -237,7 +243,15 @@ const SimpleGlobe = ({
|
|
|
237
243
|
|
|
238
244
|
return (
|
|
239
245
|
<Style>
|
|
240
|
-
<div
|
|
246
|
+
<div
|
|
247
|
+
ref={mapContainer}
|
|
248
|
+
style={{
|
|
249
|
+
width: '100%',
|
|
250
|
+
height: '500px',
|
|
251
|
+
overflow: 'hidden',
|
|
252
|
+
position: 'relative'
|
|
253
|
+
}}
|
|
254
|
+
/>
|
|
241
255
|
</Style>
|
|
242
256
|
);
|
|
243
257
|
};
|
|
@@ -59,39 +59,23 @@ const Style = styled.div`
|
|
|
59
59
|
height: 100%;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
/* Narrow marker styling used by legacy components; avoid width/height overrides for SimpleGlobe */
|
|
62
63
|
.map-marker {
|
|
63
64
|
text-align: center;
|
|
64
|
-
width 100%;
|
|
65
|
-
height: 100%;
|
|
66
65
|
border-radius: 50% 50% 50% 0;
|
|
67
66
|
|
|
68
67
|
span {
|
|
69
68
|
color: white;
|
|
70
69
|
}
|
|
71
70
|
|
|
72
|
-
&.rounded {
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
&.incident {
|
|
77
|
-
border-radius: 100%;
|
|
78
|
-
|
|
79
|
-
.main {
|
|
80
|
-
border-radius: 100%;
|
|
81
|
-
height: 100%;
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
84
|
-
justify-content: center;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
&.marker {
|
|
89
|
-
background: var(--color-primary-70);
|
|
90
|
-
border: 1px solid white;
|
|
91
|
-
box-shadow: 0px 3.45px 3.45px 0px #00000029;
|
|
92
|
-
}
|
|
71
|
+
&.rounded { border-radius: 100%; }
|
|
72
|
+
&.incident { border-radius: 100%; }
|
|
73
|
+
&.marker { background: var(--color-primary-70); border: 1px solid white; box-shadow: 0px 3.45px 3.45px 0px #00000029; }
|
|
93
74
|
}
|
|
94
75
|
|
|
76
|
+
/* Scoped class used by SimpleGlobe to avoid picking up broad .map-marker rules */
|
|
77
|
+
.daf-globe-marker { text-align: center; }
|
|
78
|
+
|
|
95
79
|
#globe {
|
|
96
80
|
flex: 1;
|
|
97
81
|
background: rgb(0, 0, 0);
|