datastake-daf 0.6.286 β 0.6.288
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
|
@@ -20959,27 +20959,26 @@ const SimpleGlobe = _ref => {
|
|
|
20959
20959
|
// Set Mapbox access token
|
|
20960
20960
|
mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
|
|
20961
20961
|
|
|
20962
|
-
// Create map with custom Straatos style
|
|
20962
|
+
// Create map with custom Straatos style - 3D globe configuration
|
|
20963
20963
|
map.current = new mapboxgl.Map({
|
|
20964
20964
|
container: mapContainer.current,
|
|
20965
20965
|
style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
|
|
20966
20966
|
center: [0, 0],
|
|
20967
20967
|
zoom: mapConfig.maxZoom || 3,
|
|
20968
20968
|
projection: 'globe',
|
|
20969
|
+
// 3D globe settings for proper rendering
|
|
20970
|
+
pitch: 0,
|
|
20971
|
+
bearing: 0,
|
|
20972
|
+
antialias: true,
|
|
20973
|
+
fadeDuration: 0,
|
|
20969
20974
|
attributionControl: false
|
|
20970
20975
|
});
|
|
20971
20976
|
|
|
20972
|
-
//
|
|
20973
|
-
map.current.on('load', () => {
|
|
20974
|
-
console.log('
|
|
20977
|
+
// Configure 3D globe when style loads
|
|
20978
|
+
map.current.on('style.load', () => {
|
|
20979
|
+
console.log('π¨ [SIMPLE GLOBE] Style loaded, configuring 3D globe...');
|
|
20975
20980
|
|
|
20976
|
-
//
|
|
20977
|
-
map.current.getContainer();
|
|
20978
|
-
const style = document.createElement('style');
|
|
20979
|
-
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 /* CRITICAL: Override Leaflet CSS interference with Mapbox */\n .daf-simple-globe-container .mapboxgl-canvas-container {\n position: relative !important;\n left: auto !important;\n top: auto !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 /* Prevent Leaflet styles from affecting Mapbox markers */\n .daf-simple-globe-container .daf-globe-marker {\n position: relative !important;\n left: auto !important;\n top: auto !important;\n }\n ";
|
|
20980
|
-
document.head.appendChild(style);
|
|
20981
|
-
|
|
20982
|
-
// Set the space background with stars
|
|
20981
|
+
// Set fog for the space background effect with stars
|
|
20983
20982
|
try {
|
|
20984
20983
|
map.current.setFog({
|
|
20985
20984
|
'color': 'rgb(0, 0, 0)',
|
|
@@ -21004,6 +21003,29 @@ const SimpleGlobe = _ref => {
|
|
|
21004
21003
|
}
|
|
21005
21004
|
}
|
|
21006
21005
|
|
|
21006
|
+
// Set lighting for better 3D globe visibility
|
|
21007
|
+
try {
|
|
21008
|
+
map.current.setLight({
|
|
21009
|
+
'anchor': 'viewport',
|
|
21010
|
+
'color': 'white',
|
|
21011
|
+
'intensity': 0.4
|
|
21012
|
+
});
|
|
21013
|
+
console.log('π‘ [SIMPLE GLOBE] Lighting configured for 3D globe');
|
|
21014
|
+
} catch (e) {
|
|
21015
|
+
console.log('β οΈ [SIMPLE GLOBE] Could not set lighting');
|
|
21016
|
+
}
|
|
21017
|
+
});
|
|
21018
|
+
|
|
21019
|
+
// Add markers when map loads
|
|
21020
|
+
map.current.on('load', () => {
|
|
21021
|
+
console.log('πΊοΈ [SIMPLE GLOBE] Map loaded, adding markers...');
|
|
21022
|
+
|
|
21023
|
+
// Hide Mapbox logo and attribution completely
|
|
21024
|
+
map.current.getContainer();
|
|
21025
|
+
const style = document.createElement('style');
|
|
21026
|
+
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 /* CRITICAL: Override Leaflet CSS interference with Mapbox */\n .daf-simple-globe-container .mapboxgl-canvas-container {\n position: relative !important;\n left: auto !important;\n top: auto !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 /* Prevent Leaflet styles from affecting Mapbox markers */\n .daf-simple-globe-container .daf-globe-marker {\n position: relative !important;\n left: auto !important;\n top: auto !important;\n }\n ";
|
|
21027
|
+
document.head.appendChild(style);
|
|
21028
|
+
|
|
21007
21029
|
// Calculate bounds to fit all markers
|
|
21008
21030
|
const bounds = new mapboxgl.LngLatBounds();
|
|
21009
21031
|
let hasValidCoordinates = false;
|
|
@@ -21097,7 +21119,7 @@ const SimpleGlobe = _ref => {
|
|
|
21097
21119
|
bounds.extend([lng, lat]);
|
|
21098
21120
|
hasValidCoordinates = true;
|
|
21099
21121
|
|
|
21100
|
-
// Create marker with explicit positioning and anchor
|
|
21122
|
+
// Create marker with explicit positioning and anchor for 3D globe
|
|
21101
21123
|
const marker = new mapboxgl.Marker({
|
|
21102
21124
|
element: el,
|
|
21103
21125
|
anchor: 'center'
|
|
@@ -21139,6 +21161,14 @@ const SimpleGlobe = _ref => {
|
|
|
21139
21161
|
} else {
|
|
21140
21162
|
boundsRef.current = null;
|
|
21141
21163
|
}
|
|
21164
|
+
|
|
21165
|
+
// Force resize for 3D globe rendering
|
|
21166
|
+
setTimeout(() => {
|
|
21167
|
+
if (map.current && map.current.resize) {
|
|
21168
|
+
map.current.resize();
|
|
21169
|
+
console.log('π [SIMPLE GLOBE] Map resized for 3D globe rendering');
|
|
21170
|
+
}
|
|
21171
|
+
}, 100);
|
|
21142
21172
|
});
|
|
21143
21173
|
return () => {
|
|
21144
21174
|
if (map.current) {
|
package/package.json
CHANGED
|
@@ -47,16 +47,63 @@ const SimpleGlobe = ({
|
|
|
47
47
|
// Set Mapbox access token
|
|
48
48
|
mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
|
|
49
49
|
|
|
50
|
-
// Create map with custom Straatos style
|
|
50
|
+
// Create map with custom Straatos style - 3D globe configuration
|
|
51
51
|
map.current = new mapboxgl.Map({
|
|
52
52
|
container: mapContainer.current,
|
|
53
53
|
style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
|
|
54
54
|
center: [0, 0],
|
|
55
55
|
zoom: mapConfig.maxZoom || 3,
|
|
56
56
|
projection: 'globe',
|
|
57
|
+
// 3D globe settings for proper rendering
|
|
58
|
+
pitch: 0,
|
|
59
|
+
bearing: 0,
|
|
60
|
+
antialias: true,
|
|
61
|
+
fadeDuration: 0,
|
|
57
62
|
attributionControl: false
|
|
58
63
|
});
|
|
59
64
|
|
|
65
|
+
// Configure 3D globe when style loads
|
|
66
|
+
map.current.on('style.load', () => {
|
|
67
|
+
console.log('π¨ [SIMPLE GLOBE] Style loaded, configuring 3D globe...');
|
|
68
|
+
|
|
69
|
+
// Set fog for the space background effect with stars
|
|
70
|
+
try {
|
|
71
|
+
map.current.setFog({
|
|
72
|
+
'color': 'rgb(0, 0, 0)',
|
|
73
|
+
'high-color': 'rgb(0, 0, 0)',
|
|
74
|
+
'horizon-blend': 0.1,
|
|
75
|
+
'space-color': 'rgb(0, 0, 0)',
|
|
76
|
+
'star-intensity': 0.6
|
|
77
|
+
});
|
|
78
|
+
console.log('β¨ [SIMPLE GLOBE] Space background with stars set');
|
|
79
|
+
} catch (e) {
|
|
80
|
+
console.log('β οΈ [SIMPLE GLOBE] Could not set fog, trying alternative...');
|
|
81
|
+
// Fallback: try simpler fog configuration
|
|
82
|
+
try {
|
|
83
|
+
map.current.setFog({
|
|
84
|
+
'color': 'rgb(0, 0, 0)',
|
|
85
|
+
'high-color': 'rgb(0, 0, 0)',
|
|
86
|
+
'horizon-blend': 0.1
|
|
87
|
+
});
|
|
88
|
+
console.log('β¨ [SIMPLE GLOBE] Alternative space background set');
|
|
89
|
+
} catch (e2) {
|
|
90
|
+
console.log('β οΈ [SIMPLE GLOBE] Could not set any fog configuration');
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Set lighting for better 3D globe visibility
|
|
95
|
+
try {
|
|
96
|
+
map.current.setLight({
|
|
97
|
+
'anchor': 'viewport',
|
|
98
|
+
'color': 'white',
|
|
99
|
+
'intensity': 0.4
|
|
100
|
+
});
|
|
101
|
+
console.log('π‘ [SIMPLE GLOBE] Lighting configured for 3D globe');
|
|
102
|
+
} catch (e) {
|
|
103
|
+
console.log('β οΈ [SIMPLE GLOBE] Could not set lighting');
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
|
|
60
107
|
// Add markers when map loads
|
|
61
108
|
map.current.on('load', () => {
|
|
62
109
|
console.log('πΊοΈ [SIMPLE GLOBE] Map loaded, adding markers...');
|
|
@@ -98,31 +145,6 @@ const SimpleGlobe = ({
|
|
|
98
145
|
`;
|
|
99
146
|
document.head.appendChild(style);
|
|
100
147
|
|
|
101
|
-
// Set the space background with stars
|
|
102
|
-
try {
|
|
103
|
-
map.current.setFog({
|
|
104
|
-
'color': 'rgb(0, 0, 0)',
|
|
105
|
-
'high-color': 'rgb(0, 0, 0)',
|
|
106
|
-
'horizon-blend': 0.1,
|
|
107
|
-
'space-color': 'rgb(0, 0, 0)',
|
|
108
|
-
'star-intensity': 0.6
|
|
109
|
-
});
|
|
110
|
-
console.log('β¨ [SIMPLE GLOBE] Space background with stars set');
|
|
111
|
-
} catch (e) {
|
|
112
|
-
console.log('β οΈ [SIMPLE GLOBE] Could not set fog, trying alternative...');
|
|
113
|
-
// Fallback: try simpler fog configuration
|
|
114
|
-
try {
|
|
115
|
-
map.current.setFog({
|
|
116
|
-
'color': 'rgb(0, 0, 0)',
|
|
117
|
-
'high-color': 'rgb(0, 0, 0)',
|
|
118
|
-
'horizon-blend': 0.1
|
|
119
|
-
});
|
|
120
|
-
console.log('β¨ [SIMPLE GLOBE] Alternative space background set');
|
|
121
|
-
} catch (e2) {
|
|
122
|
-
console.log('β οΈ [SIMPLE GLOBE] Could not set any fog configuration');
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
148
|
// Calculate bounds to fit all markers
|
|
127
149
|
const bounds = new mapboxgl.LngLatBounds();
|
|
128
150
|
let hasValidCoordinates = false;
|
|
@@ -241,7 +263,7 @@ const SimpleGlobe = ({
|
|
|
241
263
|
bounds.extend([lng, lat]);
|
|
242
264
|
hasValidCoordinates = true;
|
|
243
265
|
|
|
244
|
-
// Create marker with explicit positioning and anchor
|
|
266
|
+
// Create marker with explicit positioning and anchor for 3D globe
|
|
245
267
|
const marker = new mapboxgl.Marker({
|
|
246
268
|
element: el,
|
|
247
269
|
anchor: 'center'
|
|
@@ -282,6 +304,14 @@ const SimpleGlobe = ({
|
|
|
282
304
|
} else {
|
|
283
305
|
boundsRef.current = null;
|
|
284
306
|
}
|
|
307
|
+
|
|
308
|
+
// Force resize for 3D globe rendering
|
|
309
|
+
setTimeout(() => {
|
|
310
|
+
if (map.current && map.current.resize) {
|
|
311
|
+
map.current.resize();
|
|
312
|
+
console.log('π [SIMPLE GLOBE] Map resized for 3D globe rendering');
|
|
313
|
+
}
|
|
314
|
+
}, 100);
|
|
285
315
|
});
|
|
286
316
|
|
|
287
317
|
return () => {
|