datastake-daf 0.6.282 โ 0.6.283
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 +1 -1
- package/package.json +1 -1
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.jsx +55 -3
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.stories.js +16 -2
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeStraatosDebug.jsx +322 -0
- package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeStraatosDebug.standalone.jsx +349 -0
package/dist/components/index.js
CHANGED
|
@@ -20990,7 +20990,7 @@ const SimpleGlobe = _ref => {
|
|
|
20990
20990
|
// Hide Mapbox logo and attribution completely
|
|
20991
20991
|
map.current.getContainer();
|
|
20992
20992
|
const style = document.createElement('style');
|
|
20993
|
-
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 /*
|
|
20993
|
+
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 \n /* AGGRESSIVE CSS ISOLATION: Override ALL Leaflet CSS interference */\n .daf-simple-globe-container .mapboxgl-canvas-container {\n position: relative !important;\n left: auto !important;\n top: auto !important;\n transform: none !important;\n }\n .daf-simple-globe-container .mapboxgl-canvas-container canvas {\n position: relative !important;\n left: auto !important;\n top: auto !important;\n transform: none !important;\n }\n \n /* CRITICAL: Override Leaflet marker positioning that affects Mapbox */\n .daf-simple-globe-container .mapboxgl-marker {\n position: absolute !important;\n left: auto !important;\n top: auto !important;\n transform: none !important;\n pointer-events: auto !important;\n }\n \n /* Override Leaflet div icon styles */\n .daf-simple-globe-container .mapboxgl-marker .daf-globe-marker {\n position: relative !important;\n left: auto !important;\n top: auto !important;\n transform: none !important;\n width: auto !important;\n height: auto !important;\n background: none !important;\n border: none !important;\n pointer-events: auto !important;\n }\n \n /* Override any Leaflet pane positioning */\n .daf-simple-globe-container .mapboxgl-marker-pane {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n transform: none !important;\n }\n \n /* Override Leaflet tile container interference */\n .daf-simple-globe-container .mapboxgl-tile-container {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n transform: none !important;\n }\n \n /* Override any Leaflet zoom animations */\n .daf-simple-globe-container .mapboxgl-zoom-animated {\n transform-origin: 0 0 !important;\n }\n \n /* Override Leaflet interactive cursor styles */\n .daf-simple-globe-container .mapboxgl-marker.leaflet-interactive {\n cursor: pointer !important;\n }\n \n /* Override Leaflet popup positioning */\n .daf-simple-globe-container .mapboxgl-popup {\n position: absolute !important;\n left: auto !important;\n top: auto !important;\n transform: none !important;\n }\n ";
|
|
20994
20994
|
document.head.appendChild(style);
|
|
20995
20995
|
|
|
20996
20996
|
// Set the space background with stars
|
package/package.json
CHANGED
|
@@ -91,11 +91,13 @@ const SimpleGlobe = ({
|
|
|
91
91
|
.mapboxgl-canvas {
|
|
92
92
|
overflow: hidden !important;
|
|
93
93
|
}
|
|
94
|
-
|
|
94
|
+
|
|
95
|
+
/* AGGRESSIVE CSS ISOLATION: Override ALL Leaflet CSS interference */
|
|
95
96
|
.daf-simple-globe-container .mapboxgl-canvas-container {
|
|
96
97
|
position: relative !important;
|
|
97
98
|
left: auto !important;
|
|
98
99
|
top: auto !important;
|
|
100
|
+
transform: none !important;
|
|
99
101
|
}
|
|
100
102
|
.daf-simple-globe-container .mapboxgl-canvas-container canvas {
|
|
101
103
|
position: relative !important;
|
|
@@ -103,11 +105,61 @@ const SimpleGlobe = ({
|
|
|
103
105
|
top: auto !important;
|
|
104
106
|
transform: none !important;
|
|
105
107
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
+
|
|
109
|
+
/* CRITICAL: Override Leaflet marker positioning that affects Mapbox */
|
|
110
|
+
.daf-simple-globe-container .mapboxgl-marker {
|
|
111
|
+
position: absolute !important;
|
|
112
|
+
left: auto !important;
|
|
113
|
+
top: auto !important;
|
|
114
|
+
transform: none !important;
|
|
115
|
+
pointer-events: auto !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Override Leaflet div icon styles */
|
|
119
|
+
.daf-simple-globe-container .mapboxgl-marker .daf-globe-marker {
|
|
108
120
|
position: relative !important;
|
|
109
121
|
left: auto !important;
|
|
110
122
|
top: auto !important;
|
|
123
|
+
transform: none !important;
|
|
124
|
+
width: auto !important;
|
|
125
|
+
height: auto !important;
|
|
126
|
+
background: none !important;
|
|
127
|
+
border: none !important;
|
|
128
|
+
pointer-events: auto !important;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Override any Leaflet pane positioning */
|
|
132
|
+
.daf-simple-globe-container .mapboxgl-marker-pane {
|
|
133
|
+
position: absolute !important;
|
|
134
|
+
left: 0 !important;
|
|
135
|
+
top: 0 !important;
|
|
136
|
+
transform: none !important;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Override Leaflet tile container interference */
|
|
140
|
+
.daf-simple-globe-container .mapboxgl-tile-container {
|
|
141
|
+
position: absolute !important;
|
|
142
|
+
left: 0 !important;
|
|
143
|
+
top: 0 !important;
|
|
144
|
+
transform: none !important;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Override any Leaflet zoom animations */
|
|
148
|
+
.daf-simple-globe-container .mapboxgl-zoom-animated {
|
|
149
|
+
transform-origin: 0 0 !important;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Override Leaflet interactive cursor styles */
|
|
153
|
+
.daf-simple-globe-container .mapboxgl-marker.leaflet-interactive {
|
|
154
|
+
cursor: pointer !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Override Leaflet popup positioning */
|
|
158
|
+
.daf-simple-globe-container .mapboxgl-popup {
|
|
159
|
+
position: absolute !important;
|
|
160
|
+
left: auto !important;
|
|
161
|
+
top: auto !important;
|
|
162
|
+
transform: none !important;
|
|
111
163
|
}
|
|
112
164
|
`;
|
|
113
165
|
document.head.appendChild(style);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import SimpleGlobe from "./SimpleGlobe";
|
|
2
2
|
import SimpleGlobeDebug from "./SimpleGlobeDebug";
|
|
3
3
|
import SimpleGlobeTestDebug from "./SimpleGlobeTestDebug";
|
|
4
|
+
import SimpleGlobeStraatosDebug from "./SimpleGlobeStraatosDebug";
|
|
4
5
|
import ThemeLayout from "../../ThemeLayout";
|
|
5
6
|
import Widget from "../Widget";
|
|
6
7
|
|
|
@@ -297,5 +298,18 @@ export const TestDebugVersion = {
|
|
|
297
298
|
)
|
|
298
299
|
};
|
|
299
300
|
|
|
300
|
-
|
|
301
|
-
|
|
301
|
+
export const StraatosDebugVersion = {
|
|
302
|
+
name: "Straatos Debug Version (Aggressive CSS Isolation)",
|
|
303
|
+
render: () => (
|
|
304
|
+
<div style={{ margin: "3em" }}>
|
|
305
|
+
<ThemeLayout>
|
|
306
|
+
<Widget title="Straatos Debug Globe (Aggressive CSS Isolation)" className="no-px no-pb-body">
|
|
307
|
+
<SimpleGlobeStraatosDebug projects={SAMPLE_PROJECTS} />
|
|
308
|
+
</Widget>
|
|
309
|
+
</ThemeLayout>
|
|
310
|
+
</div>
|
|
311
|
+
)
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
// Export the components for reuse in other projects
|
|
315
|
+
export { SimpleGlobeTestDebug, SimpleGlobeStraatosDebug };
|
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import mapboxgl from 'mapbox-gl';
|
|
3
|
+
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* SimpleGlobeStraatosDebug - Aggressive CSS isolation for straatos environment
|
|
7
|
+
* This component is specifically designed to work in straatos where Leaflet CSS
|
|
8
|
+
* is globally loaded and interferes with Mapbox markers.
|
|
9
|
+
*
|
|
10
|
+
* @param {Array} projects - Array of project objects with location data
|
|
11
|
+
* @param {string} projects[].name - Project name
|
|
12
|
+
* @param {number} projects[].latitude - Latitude coordinate
|
|
13
|
+
* @param {number} projects[].longitude - Longitude coordinate
|
|
14
|
+
* @param {string} projects[].projectDescription - Project description (optional)
|
|
15
|
+
*/
|
|
16
|
+
const SimpleGlobeStraatosDebug = ({ projects = [] }) => {
|
|
17
|
+
const mapContainer = useRef(null);
|
|
18
|
+
const map = useRef(null);
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (map.current) return;
|
|
22
|
+
|
|
23
|
+
console.log('๐งช [STRAATOS DEBUG] Creating map with aggressive CSS isolation...');
|
|
24
|
+
|
|
25
|
+
// Set Mapbox access token
|
|
26
|
+
mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
|
|
27
|
+
|
|
28
|
+
// Create minimal map
|
|
29
|
+
map.current = new mapboxgl.Map({
|
|
30
|
+
container: mapContainer.current,
|
|
31
|
+
style: 'mapbox://styles/mapbox/satellite-v9',
|
|
32
|
+
center: [0, 0],
|
|
33
|
+
zoom: 2,
|
|
34
|
+
projection: 'globe'
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
// Add markers when map loads
|
|
38
|
+
map.current.on('load', () => {
|
|
39
|
+
console.log('๐งช [STRAATOS DEBUG] Map loaded, adding test markers...');
|
|
40
|
+
|
|
41
|
+
// AGGRESSIVE CSS ISOLATION - Override ALL Leaflet CSS
|
|
42
|
+
const aggressiveStyle = document.createElement('style');
|
|
43
|
+
aggressiveStyle.textContent = `
|
|
44
|
+
/* AGGRESSIVE ISOLATION: Override ALL Leaflet CSS that affects Mapbox */
|
|
45
|
+
.straatos-globe-debug-container {
|
|
46
|
+
position: relative !important;
|
|
47
|
+
width: 100% !important;
|
|
48
|
+
height: 100% !important;
|
|
49
|
+
overflow: hidden !important;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.straatos-globe-debug-container .mapboxgl-canvas-container {
|
|
53
|
+
position: relative !important;
|
|
54
|
+
left: 0 !important;
|
|
55
|
+
top: 0 !important;
|
|
56
|
+
transform: none !important;
|
|
57
|
+
width: 100% !important;
|
|
58
|
+
height: 100% !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.straatos-globe-debug-container .mapboxgl-canvas-container canvas {
|
|
62
|
+
position: relative !important;
|
|
63
|
+
left: 0 !important;
|
|
64
|
+
top: 0 !important;
|
|
65
|
+
transform: none !important;
|
|
66
|
+
width: 100% !important;
|
|
67
|
+
height: 100% !important;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Override Leaflet marker positioning */
|
|
71
|
+
.straatos-globe-debug-container .mapboxgl-marker {
|
|
72
|
+
position: absolute !important;
|
|
73
|
+
left: auto !important;
|
|
74
|
+
top: auto !important;
|
|
75
|
+
transform: none !important;
|
|
76
|
+
pointer-events: auto !important;
|
|
77
|
+
z-index: 1000 !important;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Override Leaflet div icon styles */
|
|
81
|
+
.straatos-globe-debug-container .mapboxgl-marker .straatos-debug-marker {
|
|
82
|
+
position: relative !important;
|
|
83
|
+
left: auto !important;
|
|
84
|
+
top: auto !important;
|
|
85
|
+
transform: none !important;
|
|
86
|
+
width: 20px !important;
|
|
87
|
+
height: 20px !important;
|
|
88
|
+
background: #FF0000 !important;
|
|
89
|
+
border: 2px solid white !important;
|
|
90
|
+
border-radius: 50% !important;
|
|
91
|
+
pointer-events: auto !important;
|
|
92
|
+
cursor: pointer !important;
|
|
93
|
+
box-shadow: 0px 3px 6px rgba(0,0,0,0.3) !important;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Override Leaflet pane positioning */
|
|
97
|
+
.straatos-globe-debug-container .mapboxgl-marker-pane {
|
|
98
|
+
position: absolute !important;
|
|
99
|
+
left: 0 !important;
|
|
100
|
+
top: 0 !important;
|
|
101
|
+
transform: none !important;
|
|
102
|
+
z-index: 600 !important;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Override Leaflet tile container */
|
|
106
|
+
.straatos-globe-debug-container .mapboxgl-tile-container {
|
|
107
|
+
position: absolute !important;
|
|
108
|
+
left: 0 !important;
|
|
109
|
+
top: 0 !important;
|
|
110
|
+
transform: none !important;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Override Leaflet zoom animations */
|
|
114
|
+
.straatos-globe-debug-container .mapboxgl-zoom-animated {
|
|
115
|
+
transform-origin: 0 0 !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Override Leaflet interactive styles */
|
|
119
|
+
.straatos-globe-debug-container .mapboxgl-marker.leaflet-interactive {
|
|
120
|
+
cursor: pointer !important;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* Override Leaflet popup positioning */
|
|
124
|
+
.straatos-globe-debug-container .mapboxgl-popup {
|
|
125
|
+
position: absolute !important;
|
|
126
|
+
left: auto !important;
|
|
127
|
+
top: auto !important;
|
|
128
|
+
transform: none !important;
|
|
129
|
+
z-index: 700 !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Override any Leaflet control positioning */
|
|
133
|
+
.straatos-globe-debug-container .mapboxgl-ctrl-group {
|
|
134
|
+
position: absolute !important;
|
|
135
|
+
z-index: 1000 !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* Override Leaflet attribution */
|
|
139
|
+
.straatos-globe-debug-container .mapboxgl-ctrl-attrib {
|
|
140
|
+
position: absolute !important;
|
|
141
|
+
bottom: 0 !important;
|
|
142
|
+
right: 0 !important;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Override any Leaflet tooltip positioning */
|
|
146
|
+
.straatos-globe-debug-container .mapboxgl-popup-content {
|
|
147
|
+
position: relative !important;
|
|
148
|
+
left: auto !important;
|
|
149
|
+
top: auto !important;
|
|
150
|
+
transform: none !important;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Override Leaflet marker shadow */
|
|
154
|
+
.straatos-globe-debug-container .mapboxgl-marker .mapboxgl-marker-shadow {
|
|
155
|
+
display: none !important;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Override any Leaflet image layer positioning */
|
|
159
|
+
.straatos-globe-debug-container .mapboxgl-image-layer {
|
|
160
|
+
position: absolute !important;
|
|
161
|
+
left: 0 !important;
|
|
162
|
+
top: 0 !important;
|
|
163
|
+
transform: none !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* Override Leaflet overlay pane */
|
|
167
|
+
.straatos-globe-debug-container .mapboxgl-overlay-pane {
|
|
168
|
+
position: absolute !important;
|
|
169
|
+
left: 0 !important;
|
|
170
|
+
top: 0 !important;
|
|
171
|
+
transform: none !important;
|
|
172
|
+
z-index: 400 !important;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* Override Leaflet shadow pane */
|
|
176
|
+
.straatos-globe-debug-container .mapboxgl-shadow-pane {
|
|
177
|
+
position: absolute !important;
|
|
178
|
+
left: 0 !important;
|
|
179
|
+
top: 0 !important;
|
|
180
|
+
transform: none !important;
|
|
181
|
+
z-index: 500 !important;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Override Leaflet tooltip pane */
|
|
185
|
+
.straatos-globe-debug-container .mapboxgl-tooltip-pane {
|
|
186
|
+
position: absolute !important;
|
|
187
|
+
left: 0 !important;
|
|
188
|
+
top: 0 !important;
|
|
189
|
+
transform: none !important;
|
|
190
|
+
z-index: 650 !important;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* Override Leaflet popup pane */
|
|
194
|
+
.straatos-globe-debug-container .mapboxgl-popup-pane {
|
|
195
|
+
position: absolute !important;
|
|
196
|
+
left: 0 !important;
|
|
197
|
+
top: 0 !important;
|
|
198
|
+
transform: none !important;
|
|
199
|
+
z-index: 700 !important;
|
|
200
|
+
}
|
|
201
|
+
`;
|
|
202
|
+
document.head.appendChild(aggressiveStyle);
|
|
203
|
+
|
|
204
|
+
projects.forEach((project, index) => {
|
|
205
|
+
console.log(`๐งช [STRAATOS DEBUG] Processing project ${index}:`, project);
|
|
206
|
+
|
|
207
|
+
// Create simple marker with unique class
|
|
208
|
+
const el = document.createElement('div');
|
|
209
|
+
el.className = 'straatos-debug-marker';
|
|
210
|
+
el.style.width = '20px';
|
|
211
|
+
el.style.height = '20px';
|
|
212
|
+
el.style.backgroundColor = '#FF0000';
|
|
213
|
+
el.style.borderRadius = '50%';
|
|
214
|
+
el.style.border = '2px solid white';
|
|
215
|
+
el.style.cursor = 'pointer';
|
|
216
|
+
el.style.boxShadow = '0px 3px 6px rgba(0,0,0,0.3)';
|
|
217
|
+
|
|
218
|
+
// Get coordinates
|
|
219
|
+
const lng = Number(project.longitude);
|
|
220
|
+
const lat = Number(project.latitude);
|
|
221
|
+
|
|
222
|
+
console.log(`๐งช [STRAATOS DEBUG] Coordinates for ${project.name}:`, {
|
|
223
|
+
original: { longitude: project.longitude, latitude: project.latitude },
|
|
224
|
+
processed: { lng, lat },
|
|
225
|
+
valid: !isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
|
|
226
|
+
});
|
|
227
|
+
|
|
228
|
+
if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
|
|
229
|
+
console.error(`โ [STRAATOS DEBUG] Invalid coordinates for ${project.name}:`, { lng, lat });
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
// Create popup
|
|
234
|
+
const popup = new mapboxgl.Popup({ offset: 25 })
|
|
235
|
+
.setHTML(`
|
|
236
|
+
<div style="padding: 8px;">
|
|
237
|
+
<h3 style="margin: 0 0 8px 0; font-size: 14px;">${project.name}</h3>
|
|
238
|
+
<p style="margin: 0; font-size: 12px; color: #666;">
|
|
239
|
+
Lat: ${lat.toFixed(4)}, Lng: ${lng.toFixed(4)}
|
|
240
|
+
</p>
|
|
241
|
+
<p style="margin: 4px 0 0 0; font-size: 12px;">
|
|
242
|
+
${project.projectDescription || 'No description'}
|
|
243
|
+
</p>
|
|
244
|
+
</div>
|
|
245
|
+
`);
|
|
246
|
+
|
|
247
|
+
// Add marker with explicit positioning
|
|
248
|
+
const marker = new mapboxgl.Marker({
|
|
249
|
+
element: el,
|
|
250
|
+
anchor: 'center'
|
|
251
|
+
})
|
|
252
|
+
.setLngLat([lng, lat])
|
|
253
|
+
.setPopup(popup)
|
|
254
|
+
.addTo(map.current);
|
|
255
|
+
|
|
256
|
+
// Verify position after a delay
|
|
257
|
+
setTimeout(() => {
|
|
258
|
+
const markerLngLat = marker.getLngLat();
|
|
259
|
+
const positionMatch = Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001;
|
|
260
|
+
|
|
261
|
+
console.log(`๐ [STRAATOS DEBUG] Position verification for ${project.name}:`, {
|
|
262
|
+
expected: [lng, lat],
|
|
263
|
+
actual: [markerLngLat.lng, markerLngLat.lat],
|
|
264
|
+
match: positionMatch,
|
|
265
|
+
difference: {
|
|
266
|
+
lng: Math.abs(markerLngLat.lng - lng),
|
|
267
|
+
lat: Math.abs(markerLngLat.lat - lat)
|
|
268
|
+
}
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
if (!positionMatch) {
|
|
272
|
+
console.error(`โ [STRAATOS DEBUG] Position mismatch for ${project.name}!`);
|
|
273
|
+
}
|
|
274
|
+
}, 200);
|
|
275
|
+
|
|
276
|
+
console.log(`โ
[STRAATOS DEBUG] Marker added for ${project.name} at:`, [lng, lat]);
|
|
277
|
+
});
|
|
278
|
+
});
|
|
279
|
+
|
|
280
|
+
return () => {
|
|
281
|
+
if (map.current) {
|
|
282
|
+
map.current.remove();
|
|
283
|
+
map.current = null;
|
|
284
|
+
}
|
|
285
|
+
};
|
|
286
|
+
}, [projects]);
|
|
287
|
+
|
|
288
|
+
return (
|
|
289
|
+
<div className="straatos-globe-debug-container" style={{
|
|
290
|
+
width: '100%',
|
|
291
|
+
height: '600px',
|
|
292
|
+
border: '2px solid #ccc',
|
|
293
|
+
position: 'relative'
|
|
294
|
+
}}>
|
|
295
|
+
<div
|
|
296
|
+
ref={mapContainer}
|
|
297
|
+
style={{
|
|
298
|
+
width: '100%',
|
|
299
|
+
height: '100%',
|
|
300
|
+
position: 'relative'
|
|
301
|
+
}}
|
|
302
|
+
/>
|
|
303
|
+
<div style={{
|
|
304
|
+
position: 'absolute',
|
|
305
|
+
top: '10px',
|
|
306
|
+
left: '10px',
|
|
307
|
+
background: 'rgba(255,255,255,0.9)',
|
|
308
|
+
padding: '8px',
|
|
309
|
+
borderRadius: '4px',
|
|
310
|
+
fontSize: '12px',
|
|
311
|
+
zIndex: 1000
|
|
312
|
+
}}>
|
|
313
|
+
<strong>Straatos Debug Map</strong><br/>
|
|
314
|
+
Projects: {projects.length}<br/>
|
|
315
|
+
Aggressive CSS isolation applied<br/>
|
|
316
|
+
Check console for position verification
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
);
|
|
320
|
+
};
|
|
321
|
+
|
|
322
|
+
export default SimpleGlobeStraatosDebug;
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import mapboxgl from 'mapbox-gl';
|
|
3
|
+
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* SimpleGlobeStraatosDebug - Aggressive CSS isolation for straatos environment
|
|
7
|
+
* This component is specifically designed to work in straatos where Leaflet CSS
|
|
8
|
+
* is globally loaded and interferes with Mapbox markers.
|
|
9
|
+
*
|
|
10
|
+
* USAGE:
|
|
11
|
+
* 1. Copy this file to your straatos project
|
|
12
|
+
* 2. Install mapbox-gl: npm install mapbox-gl
|
|
13
|
+
* 3. Import and use: <SimpleGlobeStraatosDebug projects={yourProjects} />
|
|
14
|
+
*
|
|
15
|
+
* @param {Array} projects - Array of project objects with location data
|
|
16
|
+
* @param {string} projects[].name - Project name
|
|
17
|
+
* @param {number} projects[].latitude - Latitude coordinate
|
|
18
|
+
* @param {number} projects[].longitude - Longitude coordinate
|
|
19
|
+
* @param {string} projects[].projectDescription - Project description (optional)
|
|
20
|
+
*/
|
|
21
|
+
const SimpleGlobeStraatosDebug = ({ projects = [] }) => {
|
|
22
|
+
const mapContainer = useRef(null);
|
|
23
|
+
const map = useRef(null);
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (map.current) return;
|
|
27
|
+
|
|
28
|
+
console.log('๐งช [STRAATOS DEBUG] Creating map with aggressive CSS isolation...');
|
|
29
|
+
|
|
30
|
+
// Set Mapbox access token - REPLACE WITH YOUR TOKEN
|
|
31
|
+
mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
|
|
32
|
+
|
|
33
|
+
// Create minimal map
|
|
34
|
+
map.current = new mapboxgl.Map({
|
|
35
|
+
container: mapContainer.current,
|
|
36
|
+
style: 'mapbox://styles/mapbox/satellite-v9',
|
|
37
|
+
center: [0, 0],
|
|
38
|
+
zoom: 2,
|
|
39
|
+
projection: 'globe'
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// Add markers when map loads
|
|
43
|
+
map.current.on('load', () => {
|
|
44
|
+
console.log('๐งช [STRAATOS DEBUG] Map loaded, adding test markers...');
|
|
45
|
+
|
|
46
|
+
// AGGRESSIVE CSS ISOLATION - Override ALL Leaflet CSS
|
|
47
|
+
const aggressiveStyle = document.createElement('style');
|
|
48
|
+
aggressiveStyle.textContent = `
|
|
49
|
+
/* AGGRESSIVE ISOLATION: Override ALL Leaflet CSS that affects Mapbox */
|
|
50
|
+
.straatos-globe-debug-container {
|
|
51
|
+
position: relative !important;
|
|
52
|
+
width: 100% !important;
|
|
53
|
+
height: 100% !important;
|
|
54
|
+
overflow: hidden !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.straatos-globe-debug-container .mapboxgl-canvas-container {
|
|
58
|
+
position: relative !important;
|
|
59
|
+
left: 0 !important;
|
|
60
|
+
top: 0 !important;
|
|
61
|
+
transform: none !important;
|
|
62
|
+
width: 100% !important;
|
|
63
|
+
height: 100% !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.straatos-globe-debug-container .mapboxgl-canvas-container canvas {
|
|
67
|
+
position: relative !important;
|
|
68
|
+
left: 0 !important;
|
|
69
|
+
top: 0 !important;
|
|
70
|
+
transform: none !important;
|
|
71
|
+
width: 100% !important;
|
|
72
|
+
height: 100% !important;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Override Leaflet marker positioning */
|
|
76
|
+
.straatos-globe-debug-container .mapboxgl-marker {
|
|
77
|
+
position: absolute !important;
|
|
78
|
+
left: auto !important;
|
|
79
|
+
top: auto !important;
|
|
80
|
+
transform: none !important;
|
|
81
|
+
pointer-events: auto !important;
|
|
82
|
+
z-index: 1000 !important;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Override Leaflet div icon styles */
|
|
86
|
+
.straatos-globe-debug-container .mapboxgl-marker .straatos-debug-marker {
|
|
87
|
+
position: relative !important;
|
|
88
|
+
left: auto !important;
|
|
89
|
+
top: auto !important;
|
|
90
|
+
transform: none !important;
|
|
91
|
+
width: 20px !important;
|
|
92
|
+
height: 20px !important;
|
|
93
|
+
background: #FF0000 !important;
|
|
94
|
+
border: 2px solid white !important;
|
|
95
|
+
border-radius: 50% !important;
|
|
96
|
+
pointer-events: auto !important;
|
|
97
|
+
cursor: pointer !important;
|
|
98
|
+
box-shadow: 0px 3px 6px rgba(0,0,0,0.3) !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Override Leaflet pane positioning */
|
|
102
|
+
.straatos-globe-debug-container .mapboxgl-marker-pane {
|
|
103
|
+
position: absolute !important;
|
|
104
|
+
left: 0 !important;
|
|
105
|
+
top: 0 !important;
|
|
106
|
+
transform: none !important;
|
|
107
|
+
z-index: 600 !important;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Override Leaflet tile container */
|
|
111
|
+
.straatos-globe-debug-container .mapboxgl-tile-container {
|
|
112
|
+
position: absolute !important;
|
|
113
|
+
left: 0 !important;
|
|
114
|
+
top: 0 !important;
|
|
115
|
+
transform: none !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Override Leaflet zoom animations */
|
|
119
|
+
.straatos-globe-debug-container .mapboxgl-zoom-animated {
|
|
120
|
+
transform-origin: 0 0 !important;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* Override Leaflet interactive styles */
|
|
124
|
+
.straatos-globe-debug-container .mapboxgl-marker.leaflet-interactive {
|
|
125
|
+
cursor: pointer !important;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Override Leaflet popup positioning */
|
|
129
|
+
.straatos-globe-debug-container .mapboxgl-popup {
|
|
130
|
+
position: absolute !important;
|
|
131
|
+
left: auto !important;
|
|
132
|
+
top: auto !important;
|
|
133
|
+
transform: none !important;
|
|
134
|
+
z-index: 700 !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Override any Leaflet control positioning */
|
|
138
|
+
.straatos-globe-debug-container .mapboxgl-ctrl-group {
|
|
139
|
+
position: absolute !important;
|
|
140
|
+
z-index: 1000 !important;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Override Leaflet attribution */
|
|
144
|
+
.straatos-globe-debug-container .mapboxgl-ctrl-attrib {
|
|
145
|
+
position: absolute !important;
|
|
146
|
+
bottom: 0 !important;
|
|
147
|
+
right: 0 !important;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Override any Leaflet tooltip positioning */
|
|
151
|
+
.straatos-globe-debug-container .mapboxgl-popup-content {
|
|
152
|
+
position: relative !important;
|
|
153
|
+
left: auto !important;
|
|
154
|
+
top: auto !important;
|
|
155
|
+
transform: none !important;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Override Leaflet marker shadow */
|
|
159
|
+
.straatos-globe-debug-container .mapboxgl-marker .mapboxgl-marker-shadow {
|
|
160
|
+
display: none !important;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Override any Leaflet image layer positioning */
|
|
164
|
+
.straatos-globe-debug-container .mapboxgl-image-layer {
|
|
165
|
+
position: absolute !important;
|
|
166
|
+
left: 0 !important;
|
|
167
|
+
top: 0 !important;
|
|
168
|
+
transform: none !important;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Override Leaflet overlay pane */
|
|
172
|
+
.straatos-globe-debug-container .mapboxgl-overlay-pane {
|
|
173
|
+
position: absolute !important;
|
|
174
|
+
left: 0 !important;
|
|
175
|
+
top: 0 !important;
|
|
176
|
+
transform: none !important;
|
|
177
|
+
z-index: 400 !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Override Leaflet shadow pane */
|
|
181
|
+
.straatos-globe-debug-container .mapboxgl-shadow-pane {
|
|
182
|
+
position: absolute !important;
|
|
183
|
+
left: 0 !important;
|
|
184
|
+
top: 0 !important;
|
|
185
|
+
transform: none !important;
|
|
186
|
+
z-index: 500 !important;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* Override Leaflet tooltip pane */
|
|
190
|
+
.straatos-globe-debug-container .mapboxgl-tooltip-pane {
|
|
191
|
+
position: absolute !important;
|
|
192
|
+
left: 0 !important;
|
|
193
|
+
top: 0 !important;
|
|
194
|
+
transform: none !important;
|
|
195
|
+
z-index: 650 !important;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Override Leaflet popup pane */
|
|
199
|
+
.straatos-globe-debug-container .mapboxgl-popup-pane {
|
|
200
|
+
position: absolute !important;
|
|
201
|
+
left: 0 !important;
|
|
202
|
+
top: 0 !important;
|
|
203
|
+
transform: none !important;
|
|
204
|
+
z-index: 700 !important;
|
|
205
|
+
}
|
|
206
|
+
`;
|
|
207
|
+
document.head.appendChild(aggressiveStyle);
|
|
208
|
+
|
|
209
|
+
projects.forEach((project, index) => {
|
|
210
|
+
console.log(`๐งช [STRAATOS DEBUG] Processing project ${index}:`, project);
|
|
211
|
+
|
|
212
|
+
// Create simple marker with unique class
|
|
213
|
+
const el = document.createElement('div');
|
|
214
|
+
el.className = 'straatos-debug-marker';
|
|
215
|
+
el.style.width = '20px';
|
|
216
|
+
el.style.height = '20px';
|
|
217
|
+
el.style.backgroundColor = '#FF0000';
|
|
218
|
+
el.style.borderRadius = '50%';
|
|
219
|
+
el.style.border = '2px solid white';
|
|
220
|
+
el.style.cursor = 'pointer';
|
|
221
|
+
el.style.boxShadow = '0px 3px 6px rgba(0,0,0,0.3)';
|
|
222
|
+
|
|
223
|
+
// Get coordinates
|
|
224
|
+
const lng = Number(project.longitude);
|
|
225
|
+
const lat = Number(project.latitude);
|
|
226
|
+
|
|
227
|
+
console.log(`๐งช [STRAATOS DEBUG] Coordinates for ${project.name}:`, {
|
|
228
|
+
original: { longitude: project.longitude, latitude: project.latitude },
|
|
229
|
+
processed: { lng, lat },
|
|
230
|
+
valid: !isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
|
|
234
|
+
console.error(`โ [STRAATOS DEBUG] Invalid coordinates for ${project.name}:`, { lng, lat });
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
// Create popup
|
|
239
|
+
const popup = new mapboxgl.Popup({ offset: 25 })
|
|
240
|
+
.setHTML(`
|
|
241
|
+
<div style="padding: 8px;">
|
|
242
|
+
<h3 style="margin: 0 0 8px 0; font-size: 14px;">${project.name}</h3>
|
|
243
|
+
<p style="margin: 0; font-size: 12px; color: #666;">
|
|
244
|
+
Lat: ${lat.toFixed(4)}, Lng: ${lng.toFixed(4)}
|
|
245
|
+
</p>
|
|
246
|
+
<p style="margin: 4px 0 0 0; font-size: 12px;">
|
|
247
|
+
${project.projectDescription || 'No description'}
|
|
248
|
+
</p>
|
|
249
|
+
</div>
|
|
250
|
+
`);
|
|
251
|
+
|
|
252
|
+
// Add marker with explicit positioning
|
|
253
|
+
const marker = new mapboxgl.Marker({
|
|
254
|
+
element: el,
|
|
255
|
+
anchor: 'center'
|
|
256
|
+
})
|
|
257
|
+
.setLngLat([lng, lat])
|
|
258
|
+
.setPopup(popup)
|
|
259
|
+
.addTo(map.current);
|
|
260
|
+
|
|
261
|
+
// Verify position after a delay
|
|
262
|
+
setTimeout(() => {
|
|
263
|
+
const markerLngLat = marker.getLngLat();
|
|
264
|
+
const positionMatch = Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001;
|
|
265
|
+
|
|
266
|
+
console.log(`๐ [STRAATOS DEBUG] Position verification for ${project.name}:`, {
|
|
267
|
+
expected: [lng, lat],
|
|
268
|
+
actual: [markerLngLat.lng, markerLngLat.lat],
|
|
269
|
+
match: positionMatch,
|
|
270
|
+
difference: {
|
|
271
|
+
lng: Math.abs(markerLngLat.lng - lng),
|
|
272
|
+
lat: Math.abs(markerLngLat.lat - lat)
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
if (!positionMatch) {
|
|
277
|
+
console.error(`โ [STRAATOS DEBUG] Position mismatch for ${project.name}!`);
|
|
278
|
+
}
|
|
279
|
+
}, 200);
|
|
280
|
+
|
|
281
|
+
console.log(`โ
[STRAATOS DEBUG] Marker added for ${project.name} at:`, [lng, lat]);
|
|
282
|
+
});
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
return () => {
|
|
286
|
+
if (map.current) {
|
|
287
|
+
map.current.remove();
|
|
288
|
+
map.current = null;
|
|
289
|
+
}
|
|
290
|
+
};
|
|
291
|
+
}, [projects]);
|
|
292
|
+
|
|
293
|
+
return (
|
|
294
|
+
<div className="straatos-globe-debug-container" style={{
|
|
295
|
+
width: '100%',
|
|
296
|
+
height: '600px',
|
|
297
|
+
border: '2px solid #ccc',
|
|
298
|
+
position: 'relative'
|
|
299
|
+
}}>
|
|
300
|
+
<div
|
|
301
|
+
ref={mapContainer}
|
|
302
|
+
style={{
|
|
303
|
+
width: '100%',
|
|
304
|
+
height: '100%',
|
|
305
|
+
position: 'relative'
|
|
306
|
+
}}
|
|
307
|
+
/>
|
|
308
|
+
<div style={{
|
|
309
|
+
position: 'absolute',
|
|
310
|
+
top: '10px',
|
|
311
|
+
left: '10px',
|
|
312
|
+
background: 'rgba(255,255,255,0.9)',
|
|
313
|
+
padding: '8px',
|
|
314
|
+
borderRadius: '4px',
|
|
315
|
+
fontSize: '12px',
|
|
316
|
+
zIndex: 1000
|
|
317
|
+
}}>
|
|
318
|
+
<strong>Straatos Debug Map</strong><br/>
|
|
319
|
+
Projects: {projects.length}<br/>
|
|
320
|
+
Aggressive CSS isolation applied<br/>
|
|
321
|
+
Check console for position verification
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
);
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
export default SimpleGlobeStraatosDebug;
|
|
328
|
+
|
|
329
|
+
// Example usage:
|
|
330
|
+
/*
|
|
331
|
+
import SimpleGlobeStraatosDebug from './SimpleGlobeStraatosDebug';
|
|
332
|
+
|
|
333
|
+
const MyStraatosComponent = () => {
|
|
334
|
+
const projects = [
|
|
335
|
+
{
|
|
336
|
+
name: "Your Project",
|
|
337
|
+
latitude: 14.7167,
|
|
338
|
+
longitude: -17.4677,
|
|
339
|
+
projectDescription: "Your project description"
|
|
340
|
+
}
|
|
341
|
+
];
|
|
342
|
+
|
|
343
|
+
return (
|
|
344
|
+
<div style={{ width: '100%', height: '600px' }}>
|
|
345
|
+
<SimpleGlobeStraatosDebug projects={projects} />
|
|
346
|
+
</div>
|
|
347
|
+
);
|
|
348
|
+
};
|
|
349
|
+
*/
|