Rd-324-2

[jonathanlurie]

RD-324

Using a fallback style in case the provided one is at a URL that does not resolve.

Can be tested with the following:

const resCustomStreets = await fetch("/demos/tmp_streets_style.json");
const customStreetsStyleStr = await resCustomStreets.text();
const customStreetsStyleObj = JSON.parse(customStreetsStyleStr);

const resCustomStreetsInvalid = await fetch("/demos/tmp_streets_style_wrong.json"); // missing "version" prop
const customStreetsStyleInvalidStr = await resCustomStreetsInvalid.text();
const customStreetsStyleInvalidObj = JSON.parse(customStreetsStyleInvalidStr);

const map = new maptilersdk.Map({
  container: document.getElementById("map-container"),
  hash: true,

  // PICK ONE OF THE FOLLOWING:
  // style: maptilersdk.MapStyle.OUTDOOR.DARK,      // A working style
  // style: maptilersdk.MapStyle.OUTDOORR,          // A non-working style
  // style: "e49a2a11-7892-4d37-9296-4a9cca814de5", // A valid custom style hosted on MT Cloud
  // style: "00000000-0000-0000-0000-000000000000", // A non-existent custom style
  // style: "/demos/tmp_streets_style.json",        // An existing local style
  // style: "/demos/tmp_streets_style_000.json",    // A non-existing custom style
  // style: customStreetsStyleStr,                  // A valid style description as string
  // style: customStreetsStyleObj,                  // A valid style description object
  // style: customStreetsStyleInvalidStr,           // A invalid style description as string
  // style: customStreetsStyleInvalidObj,           // A invalid style description object
  // style: "https://api.maptiler.com/maps/outdoor-v2/style.json" // Existing style URL from MapTiler Cloud (key added internally)
  // style: "https://example.com/style.json",          // An invalid absolute URL
})

[jonathanlurie]

This PR comes as a replacement of #124

[jonathanlurie]

This version of the fix took longer than expected because of how Maplibre GL JS deals (or rather doesn't deal) with failed HTTP requests due to CORS error. As we can see here, the fetch call is is awaited but is not framed with a try/catch. In case of CORS error, such call would not return a valid Response instance where .ok would be false, instead it would just throw, bypassing the making of a dedicated AJAXError that would include the URL (see here).

Due to the error being generic (and not containing any info about the URL), there was a need to implement a second system just for detecting CORS errors: the whole logic with the .styleInProcess map attribute.

[petrsloup]

It's a little bit of extra code, but it should not create any significant performance overhead and covers quite a lot of different cases that could happen.

👍