fix MapTiler map loading in other SDKs + fix resizing

src/components/GlMap.svelte

@@ -3,6 +3,7 @@
   import throttle from 'lodash.throttle';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { config as configStore } from '../stores';
+  import { normalizeMapTilerUrl } from '../maptiler-urls';
 
   export let id;
   export let bearing;
@@ -50,7 +51,9 @@
   let mapViewProps = {};
 
   // We can set style (an object) here because mapStyle only changes when it needs to
-  $: ({ style, url } = mapStyle);
+  $: ({ style, url: baseUrl } = mapStyle);
+  $: url = normalizeMapTilerUrl(baseUrl, $configStore.maptilerApiKey);
+
   // We group map-view props here as they are useful in a few contexts
   $: mapViewProps = { bearing, center, pitch, zoom };
 
@@ -199,7 +202,7 @@
   // Resize the map when adding more maps and changing container size
   $: if (map && numberOfMaps) {
     // As of `v3.0.0` maplibre no longer needs this resizing: https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#potentially-breaking-changes
-    if (mapRenderer !== 'maplibre-gl' || mapRenderer !== 'maptiler-sdk') {
+    if (mapRenderer !== 'maplibre-gl' && mapRenderer !== 'maptiler-sdk') {
       map.once('render', () => {
         const container = document.getElementById(id);
         if (container) {

src/fetch-url.js

@@ -1,5 +1,6 @@
 import { config as configStore } from './stores';
 import { isMapboxUrl, normalizeMapboxUrl } from './mapbox-urls';
+import { normalizeMapTilerUrl } from './maptiler-urls';
 
 let mapboxGlAccessToken, maptilerApiKey;
 configStore.subscribe(
@@ -11,12 +12,8 @@ const fetchUrl = async url => {
   let nextUrl = new URL(url);
   if (urlIsMapbox) {
     nextUrl = normalizeMapboxUrl(nextUrl.toString(), mapboxGlAccessToken);
-  } else if (
-    maptilerApiKey &&
-    nextUrl.host === 'api.maptiler.com' &&
-    !nextUrl.searchParams.has('key')
-  ) {
-    nextUrl.searchParams.append('key', maptilerApiKey);
+  } else if (nextUrl.host === 'api.maptiler.com') {
+    nextUrl = normalizeMapTilerUrl(nextUrl, maptilerApiKey);
   }
   let response;
   try {

src/maptiler-urls.js

@@ -0,0 +1,14 @@
+/*
+ * Add key to MapTiler url if it is missing
+ */
+export const normalizeMapTilerUrl = (url, maptilerApiKey) => {
+  let nextUrl = new URL(url);
+  if (
+    maptilerApiKey &&
+    nextUrl.host === 'api.maptiler.com' &&
+    !nextUrl.searchParams.has('key')
+  ) {
+    nextUrl.searchParams.append('key', maptilerApiKey);
+  }
+  return nextUrl.toString();
+};