RD-1226 style not done loading (#253)

* hotfix: update changelog and readme with correct links to docs (#246)

Co-authored-by: Les Moffat <[email protected]>

* RD-1226 Bug is reproducible

* RD-1226 Implement fix for "Style Not Done loading" error when Image is used with spacebox.

* RD-1226 Update changelog

* RD-1226 Tidy up demos

* RD-1226 Appease linter and typecheck

* RD-1226 Remove unneeded changes

* RD-1226 Fix logic in setSpaceFromStyle

---------

Co-authored-by: Les Moffat <[email protected]>

Author: lesbaa

CHANGELOG.md

@@ -12,8 +12,10 @@
  - `ImageViewerMarker` class added. `ImageViewer`can now have markers positioned in image pixels.
 
 
-### 🐛 Bug fixes
-- fixes a bug where `map.getProjection()` did not return a value when default projection was used
+### 🐛 Bug Fixes
+- Fixes a bug where `map.getProjection()` did not return a value when default projection was used
+- Fixes a bug where "Style Not Done Loading" error is thrown when an Image is used in conjunction with Spacebox.
+- Fixes a bug where switching between remote styles causes flickering in Halo.
 
 ### ⚙️ Others
 - Right to left text is now opt-out. `rtlTextPlugin` can be passed in the constructor options to opt-out of installing the RTL text-plugin or install a different RTL text-plugin. Without this option the behaviour will remain the same.
@@ -25,11 +27,12 @@
 - Adds `enableHaloAnimations`, `enableSpaceAnimations`, `disableHaloAnimations`, `disableSpaceAnimations` to Map instance for toggling halo and space animations.
 - Adds custom controls that can be styled however you wish and can do whatever you need, in both declarative (auto-detected) and programmatic way. See [the section in the readme](https://github.com/maptiler/maptiler-sdk-js#-custom-controls) for more info.
 
-### 🐛 Bug fixes
-- fixes a bug on `halo` where sharp edged stops cause noise to surface when scaled down.
-- fixes bug where space would not load correctly when style is a URI.
-- fixes a bug in the UMD module where space crashes when only a color is set.
-- fixes a bug when `space: true` and no style is passed, `space` becomes unset.
+### 🐛 Bug Fixes
+- Fixes a bug on `halo` where sharp edged stops cause noise to surface when scaled down.
+- Fixes bug where space would not load correctly when style is a URI.
+- Fixes a bug in the UMD module where space crashes when only a color is set.
+- Fixes a bug when `space: true` and no style is passed, `space` becomes unset.
+
 
 ⚙️ Others
 - Removes superfluous dependencies from package.json
@@ -39,7 +42,7 @@
 ### ✨ Features and improvements
 - Version Bump @maptiler/client to 2.5.0 adding `at`, `batch`, `computeOn`, `canParsePixelData` functions for working with elevations.
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 - Includes workaround where internal event is not fired correctly and causes breaking of space box.
 
 ### Others
@@ -50,7 +53,7 @@
 ### ✨ Features and improvements
 - None 
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 - Fixes a bug that breaks spacebox when projection is changed in style.json
 
 ### Others
@@ -61,7 +64,7 @@
 ### ✨ Features and improvements
 - None 
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 - Fixes bug where terrain does not load when `map.enableTerrain()` is called directly after `.flyTo`
 - Adds `StyleDefinitionWithMetadata` as an accepted type to `setStyle` ([#216](https://github.com/maptiler/maptiler-sdk-js/issues/216))
 - Adds condition to log calls in `extractCustomLayerStyle` ([#216](https://github.com/maptiler/maptiler-sdk-js/issues/216))
@@ -86,7 +89,7 @@ constructor _or_ via `setSpace` or `setHalo` methods _or_ via incoming MT style
 ### ✨ Features and improvements
 - Update Maplibre to 5.6.0
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 - Fix for [RD-900](https://maptiler.atlassian.net/browse/RD-900?atlOrigin=eyJpIjoiOTRjZGRhYjg2Y2JhNGY2NGI2NzM2M2E1MGNkNjBmYWYiLCJwIjoiaiJ9)
 
 ### Others
@@ -103,7 +106,7 @@ constructor _or_ via `setSpace` or `setHalo` methods _or_ via incoming MT style
 ### ✨ Features and improvements
 None
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 - Fixes incorrect exports of some types from sdk helper functions.
 
 ### 🔧 Others
@@ -113,7 +116,7 @@ None
 ### ✨ Features and improvements
 None
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 - [RD-902](https://maptiler.atlassian.net/browse/RD-902?atlOrigin=eyJpIjoiNGM2NGQxNzg0ZjEzNGJlMGI3M2Y1YTM3YTIyNjdkMDkiLCJwIjoiaiJ9) Changes to use default import for maplibre-gl as it uses commonjs modules under the hood.
 
 ### 🔧 Others
@@ -132,7 +135,7 @@ None
 ### ✨ Features and improvements
 None
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 None
 
 ### 🔧 Others
@@ -142,7 +145,7 @@ Version bump for maptiler-client-js
 ### ✨ Features and improvements
 Updates MapTiler Client JS version to include new MapStyles
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 None
 
 ### 🔧 Others
@@ -152,7 +155,7 @@ None
 ### ✨ Features and improvements
 None
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 Fixes a bug that accesses undefined `projection` object in `Map.getProjection` method
 
 ### 🔧 Others
@@ -162,7 +165,7 @@ None
 ### ✨ Features and improvements
 None
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 None
 
 ### 🔧 Others
@@ -180,7 +183,7 @@ Restructuring of repo, additon of tests to check consistency of library exports.
 * Globe projection support
 * `MaptilerProjectionControl`  to toggle Globe/Mercator projection
 
-### 🐛 Bug fixes
+### 🐛 Bug Fixes
 * Navigation now relies on `Map` methods instead of `Transform` methods for bearing due to globe projection being available
 
 ### 🔧 Others

demos/public/XX-scratch-pad.html

@@ -7,13 +7,12 @@
 
   <title>Document</title>
   <style>
-        body { margin: 0; padding: 0; }
+      body { margin: 0; padding: 0; }
     #map { position: absolute; top: 0; bottom: 0; width: 100%; }
     .button { position: absolute; top: 10px; left: 10px; z-index: 10; }
   </style>
 </head>
 <body>
-    <button class="button">change language</button>
   <div id="map"></div>
   <script type="module" src="/src/XX-scratch-pad.ts"></script>
 </body>

demos/src/01-simple.ts

@@ -6,27 +6,37 @@ setupMapTilerApiKey({ config });
 
 const container = document.getElementById("map")!;
 
-const map = new Map({
-  container,
-  style: MapStyle.OUTDOOR.DARK,
-  hash: true,
-  geolocate: true,
-  scaleControl: true,
-  fullscreenControl: true,
-  terrainControl: true,
-  projectionControl: true,
-});
-
-const styleDropDown = document.getElementById("mapstyles-picker") as HTMLOptionElement;
-
-styleDropDown.onchange = () => {
-  map.setStyle(styleDropDown.value);
-};
-
-Object.keys(MapStyle).forEach((s) => {
-  const styleOption = document.createElement("option");
-  // @ts-expect-error we know that `id` is private.
-  styleOption.value = MapStyle[s as keyof typeof MapStyle].DEFAULT.id;
-  styleOption.innerHTML = s.replace("_", " ").toLowerCase();
-  styleDropDown.appendChild(styleOption);
-});
+async function main() {
+  const map = new Map({
+    container,
+    style: MapStyle.OUTDOOR.DARK,
+    hash: true,
+    geolocate: false,
+    scaleControl: true,
+    fullscreenControl: true,
+    terrainControl: true,
+    projectionControl: true,
+    projection: "globe",
+    space: true,
+    halo: true,
+    zoom: 1,
+  });
+
+  const styleDropDown = document.getElementById("mapstyles-picker") as HTMLOptionElement;
+
+  styleDropDown.onchange = () => {
+    map.setStyle(styleDropDown.value);
+  };
+
+  await map.onReadyAsync();
+
+  Object.keys(MapStyle).forEach((s) => {
+    const styleOption = document.createElement("option");
+    // @ts-expect-error we know that `id` is private.
+    styleOption.value = MapStyle[s as keyof typeof MapStyle].DEFAULT.id;
+    styleOption.innerHTML = s.replace("_", " ").toLowerCase();
+    styleDropDown.appendChild(styleOption);
+  });
+}
+
+main();

demos/src/XX-scratch-pad.ts

@@ -1,24 +1,30 @@
-import "../../src/style/style_template.css";
+// This file is intended for quick testing or development. Please do not commit changes to this file.
+
 import { Map, MapStyle, config } from "../../src/index";
 import { addPerformanceStats, setupMapTilerApiKey } from "./demo-utils";
 
 addPerformanceStats();
 setupMapTilerApiKey({ config });
 
-const container = document.getElementById("map") as HTMLDivElement;
+const container = document.getElementById("map")!;
+
+async function main() {
+  const map = new Map({
+    container,
+    style: MapStyle.OUTDOOR.DARK,
+    hash: true,
+    geolocate: true,
+    scaleControl: true,
+    fullscreenControl: true,
+    terrainControl: true,
+    projectionControl: true,
+    projection: "globe",
+    halo: true,
+    space: true,
+    zoom: 10,
+  });
 
-const map = new Map({
-  container,
-  style: MapStyle.STREETS.DEFAULT,
-  hash: true,
-  geolocate: true,
-  scaleControl: true,
-  fullscreenControl: true,
-  terrain: true,
-  projectionControl: true,
-});
+  await map.onReadyAsync();
+}
 
-document.getElementsByTagName("button")[0].addEventListener("click", () => {
-  map.setStyle(MapStyle.TONER.DEFAULT);
-  map.flyTo({ zoom: 12, center: [-7.39468, 39.32507] });
-});
+void main();