update renderer based on sources (#184)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Switch to module for Stamen attribution
 - Add CSS auto-prefixing to rollup config
+- Add check for Mapbox URLs in source object of stylesheet
 - Add labels when screenshotting
 
 ## 0.14.0

src/components/Map.svelte

@@ -147,6 +147,7 @@
         onClose={removeMap}
         disableClose={numberOfMaps <= 1}
         mapState={mapStateProps}
+        {stylesheet}
         on:mapState={handleMapMove}
       />
     </div>

src/components/MapLabel.svelte

@@ -12,6 +12,7 @@
   export let onClose;
   export let disableClose;
   export let mapState;
+  export let stylesheet;
 
   let locationProps;
 
@@ -25,7 +26,7 @@
     </button>
     <div class="map-name">{name}</div>
     <div class="options-container">
-      <MapStyleInputWrapper {index} />
+      <MapStyleInputWrapper {index} {stylesheet} />
       {#if !$linkLocationsStore && Object.keys(locationProps).length}
         <div class="location-control">
           <MapLocationControl on:mapState {...locationProps} />

src/components/MapStyleInputWrapper.svelte

@@ -10,6 +10,7 @@
   import MapStyleInput from './MapStyleInput.svelte';
 
   export let index;
+  export let stylesheet;
 
   let branchPatterns;
   configStore.subscribe(value => ({ branchPatterns } = value));
@@ -68,7 +69,7 @@
 
   // Set renderer options based on the selected map's type
   const setRendererOptions = () => {
-    rendererOptions = getRenderers(selectedValue);
+    rendererOptions = getRenderers(selectedValue, stylesheet?.sources);
     setRendererValue();
   };
 
@@ -77,7 +78,9 @@
   const setRendererValue = () => {
     let updatedRenderer = renderer;
 
-    const validRenderers = getRenderers(selectedValue).map(r => r.value);
+    const validRenderers = getRenderers(selectedValue, stylesheet?.sources).map(
+      r => r.value
+    );
 
     if (!updatedRenderer || !validRenderers.includes(updatedRenderer)) {
       updatedRenderer = validRenderers.includes(selectedValue.type)

src/mapbox-urls.js

@@ -3,9 +3,8 @@
  */
 export const isMapboxUrl = url => {
   if (typeof url !== 'string') return false;
-  const hasMapboxFormat =
-    url.startsWith('mapbox://styles/') && url.split('/').length === 5;
-  return hasMapboxFormat;
+  const hasMapboxProtocol = url.startsWith('mapbox://');
+  return hasMapboxProtocol;
 };
 
 /*

src/renderers.js

@@ -16,10 +16,24 @@ const typeToRenderers = {
   'maplibre-gl': glVectorRenderers,
 };
 
-export const getRenderers = map => {
+export const getRenderers = (map, sources) => {
+  let mapboxOnly = false;
+
+  if (map.type !== 'mapbox-gl') return typeToRenderers[map.type];
+
   // If using the mapbox:// protocol, force mapbox-gl
-  if (map.type === 'mapbox-gl' && map.url && isMapboxUrl(map.url)) {
-    return [mapboxGlOption];
+  if (map.url && isMapboxUrl(map.url)) {
+    mapboxOnly = true;
+  } else if (sources) {
+    mapboxOnly = Object.values(sources).some(value => {
+      return (
+        isMapboxUrl(value?.url) ||
+        (value?.tiles ?? []).some(url => isMapboxUrl(url))
+      );
+    });
   }
+
+  if (mapboxOnly) return [mapboxGlOption];
+
   return typeToRenderers[map.type];
 };

yarn.lock

@@ -1377,7 +1377,7 @@ js-tokens@^4.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-"js-yaml@github:tangrams/js-yaml#read-only":
+js-yaml@tangrams/js-yaml#read-only:
   version "3.5.3"
   resolved "https://codeload.github.com/tangrams/js-yaml/tar.gz/1637976c6f593bed33ed088aedb6d01390a947c0"
   dependencies:
@@ -2611,7 +2611,7 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-"topojson-client@github:tangrams/topojson-client#read-only":
+topojson-client@tangrams/topojson-client#read-only:
   version "2.1.0"
   resolved "https://codeload.github.com/tangrams/topojson-client/tar.gz/1068f4f2e03ddf8236499bbc896cec98d7a342b7"
   dependencies: