mapicgc-gl-js 1.0.2 → 1.0.3
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/README.md +35 -1
- package/dist/chunk-efA98nb6-Dfm7IivL.mjs +13 -0
- package/dist/html2canvas-DhrjCa5K-zEqRDH-g.mjs +4024 -0
- package/dist/index.es-D_FsJY9H-CO3QIBGM.mjs +5741 -0
- package/dist/mapicgc-gl-js.css +2 -0
- package/dist/mapicgc-gl.css +1948 -1
- package/dist/mapicgc-gl.js +224 -440
- package/dist/mapicgc-gl.mjs +88130 -5
- package/dist/purify.es-DVGU85zV-CJOZ7ABI.mjs +549 -0
- package/dist/typeof-CTd55yxz-BxqQpTq1.mjs +11 -0
- package/dist/webgl-device-CDzrheIu.mjs +2 -0
- package/dist/webgl-device-DPB4IspV.mjs +5573 -0
- package/package.json +19 -20
- package/src/map/Map.js +33 -3
- package/test/exemples/addMapStyle.html +7 -5
- package/test/vitest/Config.test.js +145 -0
- package/test/vitest/MapFunctions.test.js +971 -0
- package/vite.config.mjs +7 -2
- package/dist/html2canvas.esm-Dmi1NfiH-AQaq32X6.mjs +0 -4534
- package/dist/index-DdkbNQVU.mjs +0 -83555
- package/dist/index.es-CDV9zB2B-CB-dpJjG.mjs +0 -6731
- package/dist/mapicgc-gl.umd.js +0 -4064
- package/dist/purify.es-DHbHSKL1-2rarU4M1.mjs +0 -480
- package/test/vitest/Map.test.js +0 -215
- package/test/vitest/MapStyle.test.js +0 -129
package/test/vitest/Map.test.js
DELETED
|
@@ -1,215 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// import Map from '../../src/map/Map.js';
|
|
3
|
-
import jest from "jest";
|
|
4
|
-
import maplibregl from "maplibre-gl";
|
|
5
|
-
import { vi } from 'vitest';
|
|
6
|
-
import { JSDOM } from 'jsdom';
|
|
7
|
-
import { AmbientLight, LightingEffect } from "@deck.gl/core";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import { beforeEach, describe, expect, test, vi } from 'vitest';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
describe('setStyle method', () => {
|
|
14
|
-
let instance;
|
|
15
|
-
let mockElement;
|
|
16
|
-
|
|
17
|
-
beforeEach(() => {
|
|
18
|
-
// Create a DOM environment
|
|
19
|
-
const dom = new JSDOM(`<!DOCTYPE html><div class="maplibregl-compact-show"></div>`);
|
|
20
|
-
global.document = dom.window.document;
|
|
21
|
-
vi.mock('maplibre-gl', () => ({
|
|
22
|
-
default: {
|
|
23
|
-
Map: vi.fn().mockImplementation(() => ({
|
|
24
|
-
addControl: vi.fn(),
|
|
25
|
-
// Mock additional methods if necessary
|
|
26
|
-
})),
|
|
27
|
-
},
|
|
28
|
-
}));
|
|
29
|
-
// Mock map initialization
|
|
30
|
-
const map = new maplibregl.Map({
|
|
31
|
-
container: 'map',
|
|
32
|
-
center: [0, 0],
|
|
33
|
-
zoom: 10,
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
// Mock methods used in setStyle
|
|
37
|
-
map.setStyle = vi.fn();
|
|
38
|
-
map.getStyle = vi.fn(() => ({ name: 'mockStyle' }));
|
|
39
|
-
map.on = vi.fn((event, callback) => {
|
|
40
|
-
if (event === 'styledata') callback();
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
// Mock DOM manipulation
|
|
44
|
-
mockElement = { classList: { remove: vi.fn() } };
|
|
45
|
-
vi.spyOn(document, 'querySelector').mockImplementation((selector) => {
|
|
46
|
-
if (selector === '.maplibregl-compact-show') return mockElement;
|
|
47
|
-
return null;
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
// Mock _dealOrto3dStyle
|
|
51
|
-
const _dealOrto3dStyleMock = vi.fn();
|
|
52
|
-
|
|
53
|
-
// Mock the instance
|
|
54
|
-
instance = {
|
|
55
|
-
map,
|
|
56
|
-
_dealOrto3dStyle: _dealOrto3dStyleMock,
|
|
57
|
-
setStyle: function (style, options) {
|
|
58
|
-
try {
|
|
59
|
-
if (options !== undefined) {
|
|
60
|
-
this.map.setStyle(style, options);
|
|
61
|
-
} else {
|
|
62
|
-
this.map.setStyle(style);
|
|
63
|
-
}
|
|
64
|
-
this.map.on('styledata', () => {
|
|
65
|
-
const element = document.querySelector('.maplibregl-compact-show');
|
|
66
|
-
if (element) {
|
|
67
|
-
element.classList.remove('maplibregl-compact-show');
|
|
68
|
-
}
|
|
69
|
-
this._dealOrto3dStyle(this.map.getStyle().name);
|
|
70
|
-
});
|
|
71
|
-
} catch (error) {
|
|
72
|
-
console.error(`Error setting style: ${error.message}`);
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
};
|
|
76
|
-
});
|
|
77
|
-
test('should initialize a MapLibre map instance and call addControl', () => {
|
|
78
|
-
|
|
79
|
-
// Mock map initialization options
|
|
80
|
-
const options = {
|
|
81
|
-
container: 'map',
|
|
82
|
-
center: [0, 0],
|
|
83
|
-
zoom: 10,
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
// Instantiate the mocked map
|
|
87
|
-
const map = new maplibregl.Map(options);
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
// Verify that the Map constructor is called with the correct options
|
|
91
|
-
expect(maplibregl.Map).toHaveBeenCalledWith(options);
|
|
92
|
-
|
|
93
|
-
// Mock a control and call addControl
|
|
94
|
-
const controlMock = vi.fn();
|
|
95
|
-
map.addControl(controlMock, 'top-right');
|
|
96
|
-
|
|
97
|
-
// Verify that the addControl method is called with the correct arguments
|
|
98
|
-
expect(map.addControl).toHaveBeenCalledWith(controlMock, 'top-right');
|
|
99
|
-
});
|
|
100
|
-
test('should set map style and handle styledata event correctly', () => {
|
|
101
|
-
const style = 'mockStyle';
|
|
102
|
-
const styleOptions = { transition: true };
|
|
103
|
-
|
|
104
|
-
// Test the function with options
|
|
105
|
-
instance.setStyle(style, styleOptions);
|
|
106
|
-
expect(instance.map.setStyle).toHaveBeenCalledWith(style, styleOptions);
|
|
107
|
-
|
|
108
|
-
// Test the function without options
|
|
109
|
-
instance.setStyle(style);
|
|
110
|
-
expect(instance.map.setStyle).toHaveBeenCalledWith(style);
|
|
111
|
-
|
|
112
|
-
// Verify DOM manipulation
|
|
113
|
-
expect(document.querySelector).toHaveBeenCalledWith('.maplibregl-compact-show');
|
|
114
|
-
expect(mockElement.classList.remove).toHaveBeenCalledWith('maplibregl-compact-show');
|
|
115
|
-
|
|
116
|
-
// Verify _dealOrto3dStyle is called with the correct style name
|
|
117
|
-
expect(instance._dealOrto3dStyle).toHaveBeenCalledWith('mockStyle');
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
test('should set map properties correctly when name is "orto3d"', async () => {
|
|
121
|
-
// Mocks
|
|
122
|
-
const setMaxZoomMock = vi.fn();
|
|
123
|
-
const easeToMock = vi.fn();
|
|
124
|
-
const setTerrainMock = vi.fn();
|
|
125
|
-
const addLayerMock = vi.fn();
|
|
126
|
-
const setLayerZoomRangeMock = vi.fn();
|
|
127
|
-
const setSkyMock = vi.fn();
|
|
128
|
-
|
|
129
|
-
// Configuración de los mocks de maplibregl.Map
|
|
130
|
-
const mapOptions = {
|
|
131
|
-
container: 'map', // Este es solo un ejemplo, asegúrate de adaptarlo según tu caso
|
|
132
|
-
center: [0, 0],
|
|
133
|
-
zoom: 10,
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
// Instanciar el objeto de mapa y mockearlo
|
|
137
|
-
const map = new maplibregl.Map(mapOptions);
|
|
138
|
-
|
|
139
|
-
// Mock de los métodos relevantes del mapa
|
|
140
|
-
map.setMaxZoom = setMaxZoomMock;
|
|
141
|
-
map.easeTo = easeToMock;
|
|
142
|
-
map.setTerrain = setTerrainMock;
|
|
143
|
-
map.addLayer = addLayerMock;
|
|
144
|
-
map.getLayer = vi.fn(() => false); // Mock de getLayer para que no devuelva la capa
|
|
145
|
-
map.removeLayer = vi.fn();
|
|
146
|
-
map.setLayerZoomRange = setLayerZoomRangeMock;
|
|
147
|
-
map.setSky = setSkyMock;
|
|
148
|
-
|
|
149
|
-
// Crear una instancia con el mapa mockeado
|
|
150
|
-
const instance = {
|
|
151
|
-
map: map,
|
|
152
|
-
_createCitiesMapboxLayer: vi.fn(() => 'mockCitiesLayer'),
|
|
153
|
-
_dealOrto3dStyle: function(name) {
|
|
154
|
-
if (name === 'orto3d') {
|
|
155
|
-
this.map.setMaxZoom(18.8);
|
|
156
|
-
this.map.easeTo({ pitch: 45 });
|
|
157
|
-
const ambientLight = new AmbientLight({ intensity: 4 });
|
|
158
|
-
const lightingEffect = new LightingEffect({ ambientLight });
|
|
159
|
-
this.map.setTerrain({
|
|
160
|
-
source: 'ICGC5M',
|
|
161
|
-
exaggeration: 1,
|
|
162
|
-
});
|
|
163
|
-
const citiesMapboxLayer = this._createCitiesMapboxLayer();
|
|
164
|
-
|
|
165
|
-
if (!this.map.getLayer('edificisMapboxLayer')) {
|
|
166
|
-
this.map.addLayer(citiesMapboxLayer, 'place-isolated');
|
|
167
|
-
this.map.setLayerZoomRange('edificisMapboxLayer', 15.5, 22);
|
|
168
|
-
// citiesMapboxLayer.deck.setProps({
|
|
169
|
-
// effects: [lightingEffect],
|
|
170
|
-
// });
|
|
171
|
-
}
|
|
172
|
-
this.map.setSky({
|
|
173
|
-
'sky-color': '#86bbd5',
|
|
174
|
-
'sky-horizon-blend': 0.3,
|
|
175
|
-
'horizon-color': '#ffffff33',
|
|
176
|
-
'horizon-fog-blend': 0.1,
|
|
177
|
-
'fog-ground-blend': 0.75,
|
|
178
|
-
'fog-color': '#c5d6d6',
|
|
179
|
-
});
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
// Ejecutar la función
|
|
185
|
-
await instance._dealOrto3dStyle("orto3d");
|
|
186
|
-
|
|
187
|
-
// Verificación
|
|
188
|
-
expect(setMaxZoomMock).toHaveBeenCalledWith(18.8);
|
|
189
|
-
expect(easeToMock).toHaveBeenCalledWith({ pitch: 45 });
|
|
190
|
-
expect(setTerrainMock).toHaveBeenCalledWith({
|
|
191
|
-
source: 'ICGC5M',
|
|
192
|
-
exaggeration: 1,
|
|
193
|
-
});
|
|
194
|
-
expect(addLayerMock).toHaveBeenCalledWith('mockCitiesLayer', 'place-isolated');
|
|
195
|
-
expect(setLayerZoomRangeMock).toHaveBeenCalledWith(
|
|
196
|
-
'edificisMapboxLayer',
|
|
197
|
-
15.5,
|
|
198
|
-
22
|
|
199
|
-
);
|
|
200
|
-
expect(setSkyMock).toHaveBeenCalledWith({
|
|
201
|
-
'sky-color': '#86bbd5',
|
|
202
|
-
'sky-horizon-blend': 0.3,
|
|
203
|
-
'horizon-color': '#ffffff33',
|
|
204
|
-
'horizon-fog-blend': 0.1,
|
|
205
|
-
'fog-ground-blend': 0.75,
|
|
206
|
-
'fog-color': '#c5d6d6',
|
|
207
|
-
});
|
|
208
|
-
});
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
});
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import maplibregl from "maplibre-gl";
|
|
2
|
-
import { vi } from 'vitest';
|
|
3
|
-
import { JSDOM } from 'jsdom';
|
|
4
|
-
import { beforeEach, describe, expect, test } from 'vitest';
|
|
5
|
-
|
|
6
|
-
describe('Map class methods', () => {
|
|
7
|
-
let instance;
|
|
8
|
-
let mockElement;
|
|
9
|
-
|
|
10
|
-
beforeEach(() => {
|
|
11
|
-
// Create a DOM environment
|
|
12
|
-
const dom = new JSDOM(`<!DOCTYPE html><div class="maplibregl-compact-show"></div>`);
|
|
13
|
-
global.document = dom.window.document;
|
|
14
|
-
|
|
15
|
-
vi.mock('maplibre-gl', () => ({
|
|
16
|
-
default: {
|
|
17
|
-
Map: vi.fn().mockImplementation(() => ({
|
|
18
|
-
addControl: vi.fn(),
|
|
19
|
-
setStyle: vi.fn(),
|
|
20
|
-
getStyle: vi.fn(() => ({ name: 'mockStyle' })),
|
|
21
|
-
on: vi.fn((event, callback) => {
|
|
22
|
-
if (event === 'styledata') callback();
|
|
23
|
-
}),
|
|
24
|
-
setEventedParent: vi.fn(),
|
|
25
|
-
setFeatureState: vi.fn(),
|
|
26
|
-
getTerrain: vi.fn(),
|
|
27
|
-
getZoom: vi.fn(() => 10),
|
|
28
|
-
hasControl: vi.fn(() => true),
|
|
29
|
-
getSource: vi.fn(),
|
|
30
|
-
getSprite: vi.fn(),
|
|
31
|
-
setBearing: vi.fn(),
|
|
32
|
-
setCenter: vi.fn(),
|
|
33
|
-
})),
|
|
34
|
-
},
|
|
35
|
-
}));
|
|
36
|
-
|
|
37
|
-
// Mock map initialization
|
|
38
|
-
const map = new maplibregl.Map({
|
|
39
|
-
container: 'map',
|
|
40
|
-
center: [0, 0],
|
|
41
|
-
zoom: 10,
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
// Mock DOM manipulation
|
|
45
|
-
mockElement = { classList: { remove: vi.fn() } };
|
|
46
|
-
vi.spyOn(document, 'querySelector').mockImplementation((selector) => {
|
|
47
|
-
if (selector === '.maplibregl-compact-show') return mockElement;
|
|
48
|
-
return null;
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
// Mock the instance
|
|
52
|
-
instance = {
|
|
53
|
-
map,
|
|
54
|
-
setStyle: function (style, options) {
|
|
55
|
-
try {
|
|
56
|
-
if (options !== undefined) {
|
|
57
|
-
this.map.setStyle(style, options);
|
|
58
|
-
} else {
|
|
59
|
-
this.map.setStyle(style);
|
|
60
|
-
}
|
|
61
|
-
this.map.on('styledata', () => {
|
|
62
|
-
const element = document.querySelector('.maplibregl-compact-show');
|
|
63
|
-
if (element) {
|
|
64
|
-
element.classList.remove('maplibregl-compact-show');
|
|
65
|
-
}
|
|
66
|
-
this._dealOrto3dStyle(this.map.getStyle().name);
|
|
67
|
-
});
|
|
68
|
-
} catch (error) {
|
|
69
|
-
console.error(`Error setting style: ${error.message}`);
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
_dealOrto3dStyle: vi.fn(),
|
|
73
|
-
};
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
test('should set evented parent correctly', () => {
|
|
77
|
-
const parent = {};
|
|
78
|
-
const data = {};
|
|
79
|
-
instance.map.setEventedParent(parent, data);
|
|
80
|
-
expect(instance.map.setEventedParent).toHaveBeenCalledWith(parent, data);
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
test('should set feature state correctly', () => {
|
|
84
|
-
const feature = { id: 1 };
|
|
85
|
-
const state = { selected: true };
|
|
86
|
-
instance.map.setFeatureState(feature, state);
|
|
87
|
-
expect(instance.map.setFeatureState).toHaveBeenCalledWith(feature, state);
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
test('should get zoom level correctly', () => {
|
|
93
|
-
const zoom = instance.map.getZoom();
|
|
94
|
-
expect(instance.map.getZoom).toHaveBeenCalled();
|
|
95
|
-
expect(zoom).toBe(10);
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
test('should check if control exists correctly', () => {
|
|
99
|
-
const control = {};
|
|
100
|
-
const hasControl = instance.map.hasControl(control);
|
|
101
|
-
expect(instance.map.hasControl).toHaveBeenCalledWith(control);
|
|
102
|
-
expect(hasControl).toBe(true);
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
test('should get source correctly', () => {
|
|
106
|
-
const sourceId = 'source-id';
|
|
107
|
-
instance.map.getSource(sourceId);
|
|
108
|
-
expect(instance.map.getSource).toHaveBeenCalledWith(sourceId);
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
test('should get sprite correctly', () => {
|
|
112
|
-
instance.map.getSprite();
|
|
113
|
-
expect(instance.map.getSprite).toHaveBeenCalled();
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
test('should set bearing correctly', () => {
|
|
117
|
-
const bearing = 45;
|
|
118
|
-
const eventData = {};
|
|
119
|
-
instance.map.setBearing(bearing, eventData);
|
|
120
|
-
expect(instance.map.setBearing).toHaveBeenCalledWith(bearing, eventData);
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
test('should set center correctly', () => {
|
|
124
|
-
const center = [0, 0];
|
|
125
|
-
const eventData = {};
|
|
126
|
-
instance.map.setCenter(center, eventData);
|
|
127
|
-
expect(instance.map.setCenter).toHaveBeenCalledWith(center, eventData);
|
|
128
|
-
});
|
|
129
|
-
});
|