Skip to content

Commit c27df50

Browse files
lesbaaLes Moffat
lesbaa
and
Les Moffat
authored
RD 25 26 (Release v3.6.0) (#220)
* Rd 1025 flyto then terrain does not work (#214) * hotfix: Reformat latest changelog entry * RD-1025: Fix enableTerrain call whilst camera is still undergoing flyTo * RD-1025 Update changelog * RD-1025 appease linter. --------- Co-authored-by: Les Moffat <[email protected]> * RD-1086 Fix minor spacebox bug (#215) * RD-1086 Fix minor spacebox that triggered fade in when only colour was changed * RD-1086 Update changelog --------- Co-authored-by: Les Moffat <[email protected]> * Rd 1086 reduce logging output (#217) * RD-1066 Fix overlogging of extractCustomLayerStyle * RD-1066 Update changelog, word console warning a little better. * 3.6.0 * RD-1066 Remove superfluous code in demo file --------- Co-authored-by: Les Moffat <[email protected]> * RD-1099 fix terrain spacebox bug (#219) * RD-1099 Only set space and halo style _after terrain has loaded_ * RC version bump for test release * RD-1099 Appease linter * RD-1099 refactor style application to spacebox * RD-1099 version bump for RC release * RD-1009 Remove superlfuous import * RD-1009 Bump RC version * RD-1009 Version bump for another RC release * RD-1009: Add case to re-include the layer if it has been removed during setStyle * RD-1009 Rework spacebox on style change * RD-1009 - Fix Race condition in spacebox image loading - version bump for rc release * 3.5.1 * RD-1099 Update release * RD-1099 Add comment to disable linter * RD-1099 Remoe superfluous console.log --------- Co-authored-by: Les Moffat <[email protected]> --------- Co-authored-by: Les Moffat <[email protected]>
1 parent 9c007b5 commit c27df50

File tree

10 files changed

+222
-117
lines changed

10 files changed

+222
-117
lines changed

‎CHANGELOG.md‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,28 @@
11
# MapTiler SDK Changelog
22

3+
## 3.6.0
4+
5+
### ✨ Features and improvements
6+
- None
7+
8+
### 🐛 Bug fixes
9+
- Fixes bug where terrain does not load when `map.enableTerrain()` is called directly after `.flyTo`
10+
- Adds `StyleDefinitionWithMetadata` as an accepted type to `setStyle` ([#216](https://github.com/maptiler/maptiler-sdk-js/issues/216))
11+
- Adds condition to log calls in `extractCustomLayerStyle` ([#216](https://github.com/maptiler/maptiler-sdk-js/issues/216))
12+
- Fix to spacebox where image was fading in and out when only color was changed.
13+
- Fix to spacebox when, having been set from setStyle, with terrain activated, the map breaks
14+
- Fix to spacebox where changes made via to setStyle were not always being propogated
15+
- Resolved a race condition in `loadCubemapTexture` where WebGL draw calls could occur before all cubemap face textures were fully loaded. Texture setup is now performed only after _all_ cubemap faces have finished loading, rather than processing each face as it loads.
16+
17+
### Others
18+
- None
19+
320
## 3.5.0
4-
- Now able to include cubemap background images and Earth radial gradient halo via `space` and `halo` in map constructor _or_ via `setSpace` or `setHalo` methods _or_ via incoming MT style spec.
5-
- Additional bugfixes to spacebox
21+
### ✨ Features and improvements
22+
- Now able to include cubemap background images and Earth radial gradient halo via `space` and `halo` in map
23+
constructor _or_ via `setSpace` or `setHalo` methods _or_ via incoming MT style spec.
24+
25+
### Others
626
- Version bump client-js to the latest version
727

828
## 3.4.1

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@maptiler/sdk",
3-
"version": "3.5.0",
3+
"version": "3.6.0",
44
"description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
55
"author": "MapTiler",
66
"module": "dist/maptiler-sdk.mjs",

‎src/Map.ts‎

Lines changed: 113 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import { MaptilerProjectionControl } from "./controls/MaptilerProjectionControl"
4141
import { Telemetry } from "./Telemetry";
4242
import { CubemapDefinition, CubemapLayer, CubemapLayerConstructorOptions } from "./custom-layers/CubemapLayer";
4343
import { GradientDefinition, RadialGradientLayer, RadialGradientLayerConstructorOptions } from "./custom-layers/RadialGradientLayer";
44-
import extractCustomLayerStyle, { StyleSpecificationWithMetaData } from "./custom-layers/extractCustomLayerStyle";
44+
import { StyleSpecificationWithMetaData } from "./custom-layers/extractCustomLayerStyle";
4545

4646
export type LoadWithTerrainEvent = {
4747
type: "loadWithTerrain";
@@ -224,6 +224,10 @@ export class Map extends maplibregl.Map {
224224
* unless explicitly set when calling.
225225
*/
226226
public setSpace(space: CubemapDefinition) {
227+
if (!this.isGlobeProjection()) {
228+
return;
229+
}
230+
227231
if (this.space) {
228232
void this.space.setCubemap(space);
229233
return;
@@ -240,13 +244,26 @@ export class Map extends maplibregl.Map {
240244
}
241245

242246
private setSpaceFromStyle({ style }: { style: StyleSpecificationWithMetaData }) {
243-
if (!style.metadata?.maptiler?.space) {
247+
const space = style.metadata?.maptiler?.space;
248+
if (!space) {
249+
this.setSpace({
250+
color: "transparent",
251+
});
252+
return;
253+
}
254+
255+
if (JSON.stringify(this.space?.getConfig()) === JSON.stringify(space)) {
256+
// because maplibre removes ALL layers when setting a new style, we need to add the space layer back
257+
// even if it hasn't changed
258+
if (this.space && !this.getLayer(this.space.id)) {
259+
const before = this.getLayersOrder()[0];
260+
this.addLayer(this.space, before);
261+
}
244262
return;
245263
}
246264

247-
const space = style.metadata.maptiler.space;
248265
const updateSpace = () => {
249-
if (this.space) {
266+
if (this.space && this.isGlobeProjection()) {
250267
if (!this.getLayer(this.space.id)) {
251268
const before = this.getLayersOrder()[0];
252269
this.addLayer(this.space, before);
@@ -262,39 +279,44 @@ export class Map extends maplibregl.Map {
262279
private setHaloFromStyle({ style }: { style: StyleSpecificationWithMetaData }) {
263280
const maptiler = style.metadata?.maptiler;
264281

282+
if (JSON.stringify(this.halo?.getConfig()) === JSON.stringify(maptiler?.halo)) {
283+
// because maplibre removes ALL layers when setting a new style, we need to add the halo layer back
284+
// even if it hasn't changed
285+
if (this.halo && !this.getLayer(this.halo.id)) {
286+
const beforeIndex = this.getLayersOrder().indexOf(this.space?.id ?? "") + 1;
287+
const before = this.getLayersOrder()[beforeIndex];
288+
this.addLayer(this.halo, before);
289+
}
290+
return;
291+
}
292+
265293
if (!maptiler?.halo) {
294+
this.setHalo({
295+
stops: [
296+
[0, "transparent"],
297+
[1, "transparent"],
298+
],
299+
scale: 0,
300+
});
266301
return;
267302
}
268303

269304
const updateHalo = () => {
270305
if (this.halo) {
271-
const beforeIndex = this.getLayersOrder().indexOf(this.space?.id ?? "") + 1;
272-
const before = this.getLayersOrder()[beforeIndex];
273-
this.addLayer(this.halo, before);
306+
if (!this.getLayer(this.halo.id)) {
307+
const beforeIndex = this.getLayersOrder().indexOf(this.space?.id ?? "") + 1;
308+
const before = this.getLayersOrder()[beforeIndex];
309+
this.addLayer(this.halo, before);
310+
}
311+
274312
void this.halo.setGradient(maptiler.halo);
275313
}
276314
};
277315

278316
updateHalo();
279317
}
280318

281-
private setSpaceFromCurrentStyle() {
282-
const spaceOptionsFromStyleSpec = extractCustomLayerStyle<CubemapDefinition>({ map: this, property: "space" });
283-
if (spaceOptionsFromStyleSpec && this.space) {
284-
this.space.setCubemap(spaceOptionsFromStyleSpec);
285-
return;
286-
}
287-
}
288-
289-
private setHaloFromCurrentStyle() {
290-
const haloOptionsFromStyleSpec = extractCustomLayerStyle<GradientDefinition>({ map: this, property: "halo" });
291-
if (haloOptionsFromStyleSpec && this.halo) {
292-
void this.halo.setGradient(haloOptionsFromStyleSpec);
293-
return;
294-
}
295-
}
296-
297-
private initSpace({ options = this.options, before }: { options?: MapOptions; before: string }) {
319+
private initSpace({ options = this.options, before, spec }: { options?: MapOptions; before: string; spec?: CubemapDefinition }) {
298320
if (this.space) {
299321
if (!this.getLayer(this.space.id)) {
300322
// If the space layer is already initialized but not added to the map, we add it now
@@ -305,7 +327,7 @@ export class Map extends maplibregl.Map {
305327

306328
if (options.space === false) return;
307329

308-
const spaceOptionsFromStyleSpec = extractCustomLayerStyle<CubemapDefinition>({ map: this, property: "space" });
330+
const spaceOptionsFromStyleSpec = spec;
309331
if (options.space) {
310332
this.space = new CubemapLayer(options.space);
311333
this.addLayer(this.space, before);
@@ -318,14 +340,13 @@ export class Map extends maplibregl.Map {
318340
}
319341
}
320342

321-
private initHalo({ options = this.options, before }: { options?: MapOptions; before: string }) {
343+
private initHalo({ options = this.options, before, spec }: { options?: MapOptions; before: string; spec?: GradientDefinition }) {
322344
if (this.halo && this.getLayer(this.halo.id)) {
323345
return;
324346
}
325-
326347
if (options.halo === false) return;
327348

328-
const haloOptionsFromStyleSpec = extractCustomLayerStyle<GradientDefinition>({ map: this, property: "halo" });
349+
const haloOptionsFromStyleSpec = spec;
329350
if (options.halo) {
330351
this.halo = new RadialGradientLayer(options.halo);
331352
this.addLayer(this.halo, before);
@@ -343,6 +364,10 @@ export class Map extends maplibregl.Map {
343364
}
344365

345366
public setHalo(halo: GradientDefinition) {
367+
if (!this.isGlobeProjection()) {
368+
return;
369+
}
370+
346371
if (this.halo) {
347372
void this.halo.setGradient(halo);
348373
return;
@@ -838,9 +863,13 @@ export class Map extends maplibregl.Map {
838863
});
839864

840865
const firstLayer = this.getLayersOrder()[0];
866+
if (options.space) {
867+
this.initSpace({ options, before: firstLayer });
868+
}
841869

842-
this.initSpace({ options, before: firstLayer });
843-
this.initHalo({ options, before: firstLayer });
870+
if (options.halo) {
871+
this.initHalo({ options, before: firstLayer });
872+
}
844873
});
845874

846875
this.telemetry = new Telemetry(this);
@@ -956,7 +985,10 @@ export class Map extends maplibregl.Map {
956985
* - a shorthand with only the MapTIler style name (eg. `"streets-v2"`)
957986
* - a longer form with the prefix `"maptiler://"` (eg. `"maptiler://streets-v2"`)
958987
*/
959-
override setStyle(style: null | ReferenceMapStyle | MapStyleVariant | StyleSpecification | string, options?: StyleSwapOptions & StyleOptions): this {
988+
override setStyle(
989+
style: null | ReferenceMapStyle | MapStyleVariant | StyleSpecification | StyleSpecificationWithMetaData | string,
990+
options?: StyleSwapOptions & StyleOptions,
991+
): this {
960992
this.originalLabelStyle.clear();
961993
this.minimap?.setStyle(style);
962994
this.forceLanguageUpdate = true;
@@ -987,49 +1019,58 @@ export class Map extends maplibregl.Map {
9871019

9881020
this.styleInProcess = true;
9891021

1022+
// because the style must be finished loading and parsed before we can add custom layers
1023+
// we need to check if the terrain has changed, because if it has, we also need to wait
1024+
// for the terrain to load...
1025+
const oldStyle = this.getStyle() as StyleSpecificationWithMetaData;
1026+
const newStyle = styleInfo.style as StyleSpecificationWithMetaData;
1027+
1028+
// the type returned from getStyle is incorrect, it can be null
1029+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
1030+
const spaceAndHaloMustAwaitTerrain = oldStyle?.terrain?.source !== newStyle?.terrain?.source || oldStyle?.terrain?.exaggeration !== newStyle?.terrain?.exaggeration;
1031+
9901032
try {
9911033
super.setStyle(styleInfo.style, options);
9921034
} catch (e) {
993-
// this.styleInProcess = false;
1035+
this.styleInProcess = false;
9941036
console.error("[Map.setStyle]: Error while setting style:", e);
9951037
}
9961038

997-
// reload spacebox when the new style loads
998-
const before = this.getLayersOrder()[0];
999-
1000-
if (typeof styleInfo.style !== "string" && !styleInfo.requiresUrlMonitoring) {
1001-
if (this.halo) {
1002-
const styleWithMetaData = styleInfo.style as StyleSpecificationWithMetaData;
1003-
this.setHaloFromStyle({ style: styleWithMetaData });
1004-
} else {
1005-
this.initHalo({ before });
1006-
}
1039+
// if it's a url or a uuid, it is of no use to us
1040+
if (typeof styleInfo.style === "string" || styleInfo.requiresUrlMonitoring) {
1041+
return this;
1042+
}
10071043

1008-
if (this.space) {
1009-
const styleWithMetaData = styleInfo.style as StyleSpecificationWithMetaData;
1010-
this.setSpaceFromStyle({ style: styleWithMetaData });
1011-
} else {
1012-
this.initSpace({ before });
1013-
}
1044+
const setSpaceAndHalo = () => {
1045+
this.setSpaceFromStyle({ style: styleInfo.style as StyleSpecificationWithMetaData });
1046+
this.setHaloFromStyle({ style: styleInfo.style as StyleSpecificationWithMetaData });
1047+
};
10141048

1049+
if (spaceAndHaloMustAwaitTerrain) {
1050+
void this.once("terrain", setSpaceAndHalo);
1051+
} else {
1052+
setSpaceAndHalo();
10151053
return this;
10161054
}
10171055

1018-
void this.once("style.load", () => {
1019-
const targetBeforeLayer = this.getLayersOrder()[0];
1020-
1021-
if (this.space) {
1022-
this.setSpaceFromCurrentStyle();
1023-
} else {
1024-
this.initSpace({ before: targetBeforeLayer });
1025-
}
1056+
if (this.styleInProcess) {
1057+
// this handles setting space and halo from style on load
1058+
void this.once("style.load", () => {
1059+
const targetBeforeLayer = this.getLayersOrder()[0];
1060+
const styleSpec = styleInfo.style as StyleSpecificationWithMetaData;
1061+
if (this.space) {
1062+
this.setSpaceFromStyle({ style: styleSpec });
1063+
} else {
1064+
this.initSpace({ before: targetBeforeLayer, spec: styleSpec.metadata?.maptiler?.space });
1065+
}
10261066

1027-
if (this.halo) {
1028-
this.setHaloFromCurrentStyle();
1029-
} else {
1030-
this.initHalo({ before: targetBeforeLayer });
1031-
}
1032-
});
1067+
if (this.halo) {
1068+
this.setHaloFromStyle({ style: styleSpec });
1069+
} else {
1070+
this.initHalo({ before: targetBeforeLayer, spec: styleSpec.metadata?.maptiler?.halo });
1071+
}
1072+
});
1073+
}
10331074

10341075
return this;
10351076
}
@@ -1560,11 +1601,20 @@ export class Map extends maplibregl.Map {
15601601
if (this.loaded() || this.isTerrainEnabled) {
15611602
addTerrain();
15621603
} else {
1563-
this.once("load", () => {
1604+
const checkSourceAndAddTerrain = () => {
15641605
if (this.getTerrain() && this.getSource(defaults.terrainSourceId)) {
15651606
return;
15661607
}
1608+
15671609
addTerrain();
1610+
};
1611+
1612+
this.once("load", () => {
1613+
checkSourceAndAddTerrain();
1614+
});
1615+
1616+
this.once("moveend", () => {
1617+
checkSourceAndAddTerrain();
15681618
});
15691619
}
15701620
}

‎src/custom-layers/CubemapLayer/CubemapLayer.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ class CubemapLayer implements CustomLayerInterface {
214214
* It creates a new Object3D instance with the specified vertex and fragment shaders,
215215
* attributes, and uniforms. The cubemap will be rendered using this configuration.
216216
*/
217-
public updateCubemap(): void {
217+
public updateCubemap({ facesNeedUpdate }: { facesNeedUpdate: boolean } = { facesNeedUpdate: true }): void {
218218
this.useCubemapTexture = this.faces !== null;
219219
const uniformsKeys = UNIFORMS_KEYS.filter((uniformKey) => {
220220
if (uniformKey === "cubeSampler" || uniformKey === "fadeOpacity") {
@@ -237,7 +237,7 @@ class CubemapLayer implements CustomLayerInterface {
237237
indices: INDICES,
238238
});
239239

240-
this.cubeMapNeedsUpdate = true;
240+
this.cubeMapNeedsUpdate = facesNeedUpdate;
241241

242242
if (this.useCubemapTexture) {
243243
this.updateTexture(this.gl, this.faces!);
@@ -534,7 +534,9 @@ class CubemapLayer implements CustomLayerInterface {
534534
this.options = cubemap;
535535
const facesKey = JSON.stringify(cubemap.faces ?? cubemap.preset ?? cubemap.path);
536536

537-
if (this.currentFacesDefinitionKey !== facesKey) {
537+
const facesNeedUpdate = this.currentFacesDefinitionKey !== facesKey;
538+
539+
if (facesNeedUpdate) {
538540
await this.setCubemapFaces(cubemap);
539541
this.cubeMapNeedsUpdate = true;
540542
}
@@ -543,12 +545,12 @@ class CubemapLayer implements CustomLayerInterface {
543545

544546
if (cubemap.color && this.targetBgColor.toString() !== color.toString()) {
545547
this.setBgColor(color);
546-
} else if (cubemap.preset && cubemap.preset in cubemapPresets) {
548+
} else if (!cubemap.color && cubemap.preset && cubemap.preset in cubemapPresets) {
547549
const preset = cubemapPresets[cubemap.preset];
548550
this.setBgColor(parseColorStringToVec4(preset.color));
549551
}
550552

551-
this.updateCubemap();
553+
this.updateCubemap({ facesNeedUpdate });
552554
}
553555

554556
/**

0 commit comments

Comments
 (0)