npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.75 → 0.1.77 - Mend

@mapcomponents/react-maplibre 0.1.75 → 0.1.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +23 -0
package/dist/components/MlWmsLoader/MlWmsLoader.d.ts +3 -0
package/dist/hooks/useLayer.d.ts +2 -2
package/dist/index.esm.js +435 -384
package/dist/index.esm.js.map +1 -1
package/dist/ui_components/AddLayerButton/AddLayerPopup.d.ts +1 -0
package/dist/ui_components/LayerList/LayerList.stories.d.ts +1 -1
package/dist/ui_components/LayerList/LayerListItemFactory.d.ts +1 -0
package/dist/ui_components/SelectStyleButton/SelectStyleButton.d.ts +3 -0
package/dist/ui_components/SelectStyleButton/SelectStylePopup.d.ts +6 -1
package/package.json +1 -2
package/dist/ui_components/Tooltip.d.ts +0 -2

package/dist/index.esm.js CHANGED Viewed

@@ -3469,27 +3469,32 @@ function useLayer(props) {
             return;
         }
         initializedRef.current = true;
-        mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson &&
-            (!((_a = props.options) === null || _a === void 0 ? void 0 : _a.source) ||
-                (((_c = (_b = props.options) === null || _b === void 0 ? void 0 : _b.source) === null || _c === void 0 ? void 0 : _c.attribution) && !((_e = (_d = props.options) === null || _d === void 0 ? void 0 : _d.source) === null || _e === void 0 ? void 0 : _e.type))) // if either options.source isn't defined or only options.source.attribution is defined
-            ? {
-                source: {
-                    type: 'geojson',
-                    data: props.geojson,
-                    attribution: ((_f = props.options.source) === null || _f === void 0 ? void 0 : _f.attribution)
-                        ? (_g = props.options.source) === null || _g === void 0 ? void 0 : _g.attribution
-                        : '',
-                },
-            }
-            : {})), (typeof ((_h = props.options) === null || _h === void 0 ? void 0 : _h.source) === 'string'
-            ? {
-                source: props.options.source,
-            }
-            : {})), { id: layerId.current }), props.insertBeforeLayer
-            ? props.insertBeforeLayer
-            : props.insertBeforeFirstSymbolLayer
-                ? mapHook.map.firstSymbolLayer
-                : undefined, mapHook.componentId);
+        try {
+            mapHook.map.addLayer(__assign(__assign(__assign(__assign({}, props.options), (props.geojson &&
+                (!((_a = props.options) === null || _a === void 0 ? void 0 : _a.source) ||
+                    (((_c = (_b = props.options) === null || _b === void 0 ? void 0 : _b.source) === null || _c === void 0 ? void 0 : _c.attribution) && !((_e = (_d = props.options) === null || _d === void 0 ? void 0 : _d.source) === null || _e === void 0 ? void 0 : _e.type))) // if either options.source isn't defined or only options.source.attribution is defined
+                ? {
+                    source: {
+                        type: 'geojson',
+                        data: props.geojson,
+                        attribution: ((_f = props.options.source) === null || _f === void 0 ? void 0 : _f.attribution)
+                            ? (_g = props.options.source) === null || _g === void 0 ? void 0 : _g.attribution
+                            : '',
+                    },
+                }
+                : {})), (typeof ((_h = props.options) === null || _h === void 0 ? void 0 : _h.source) === 'string'
+                ? {
+                    source: props.options.source,
+                }
+                : {})), { id: layerId.current }), props.insertBeforeLayer
+                ? props.insertBeforeLayer
+                : props.insertBeforeFirstSymbolLayer
+                    ? mapHook.map.firstSymbolLayer
+                    : undefined, mapHook.componentId);
+        }
+        catch (e) {
+            console.log(e);
+        }
         setLayer(function () { var _a; return (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map.getLayer(layerId.current); });
         if (typeof props.onHover !== 'undefined') {
             mapHook.map.on('mousemove', layerId.current, props.onHover, mapHook.componentId);
@@ -3638,7 +3643,6 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 'line-blur': 0,
             };
         case 'circle':
-        default:
             if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.circle) {
                 return defaultPaintOverrides.circle;
             }
@@ -3648,6 +3652,8 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 'circle-stroke-width': 2,
                 'circle-radius': 4,
             };
+        default:
+            return {};
     }
 };
@@ -3683,13 +3689,14 @@ var getDefaulLayerTypeByGeometry = function (geojson) {
  * @component
  */
 var MlGeoJsonLayer = function (props) {
+    var _a, _b;
     var layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
     // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
     useLayer({
         mapId: props.mapId,
         layerId: props.layerId || 'MlGeoJsonLayer-' + uuid.v4(),
         geojson: props.geojson,
-        options: __assign(__assign({ paint: props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides), layout: props.layout || {} }, props.options), { type: layerType }),
+        options: __assign(__assign({}, props.options), { paint: __assign(__assign({}, (props.paint || getDefaultPaintPropsByType(layerType, props.defaultPaintOverrides))), (_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.paint), layout: __assign(__assign({}, ((props === null || props === void 0 ? void 0 : props.layout) || {})), (_b = props === null || props === void 0 ? void 0 : props.options) === null || _b === void 0 ? void 0 : _b.layout), type: layerType }),
         insertBeforeLayer: props.insertBeforeLayer,
         onHover: props.onHover,
         onClick: props.onClick,
@@ -6388,8 +6395,8 @@ var MlWmsLoader = function (props) {
     }, [_capabilities]);
     var name = React.useMemo(function () {
         var _a, _b;
-        return ((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.name) || ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service) === null || _b === void 0 ? void 0 : _b.Title);
-    }, [(_f = props === null || props === void 0 ? void 0 : props.config) === null || _f === void 0 ? void 0 : _f.name, (_g = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service) === null || _g === void 0 ? void 0 : _g.Title]);
+        return (props === null || props === void 0 ? void 0 : props.name) || ((_a = props === null || props === void 0 ? void 0 : props.config) === null || _a === void 0 ? void 0 : _a.name) || ((_b = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service) === null || _b === void 0 ? void 0 : _b.Title);
+    }, [props === null || props === void 0 ? void 0 : props.name, (_f = props === null || props === void 0 ? void 0 : props.config) === null || _f === void 0 ? void 0 : _f.name, (_g = capabilities === null || capabilities === void 0 ? void 0 : capabilities.Service) === null || _g === void 0 ? void 0 : _g.Title]);
     var layers = React.useMemo(function () {
         var _a;
         if (!(props === null || props === void 0 ? void 0 : props.setLayers))
@@ -6483,10 +6490,11 @@ var MlWmsLoader = function (props) {
             .catch(function (error) { return console.log(error); });
     }, [capabilities, getFeatureInfoUrl, props, mapHook, layers]);
     var _featureInfoEventsEnabled = React.useMemo(function () {
-        return (featureInfoEventsEnabled &&
+        return (((typeof (props === null || props === void 0 ? void 0 : props.featureInfoActive) !== 'undefined' && props.featureInfoActive) ||
+            featureInfoEventsEnabled) &&
             (layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) &&
             !!mapHook.map);
-    }, [featureInfoEventsEnabled, layers, mapHook.map]);
+    }, [props === null || props === void 0 ? void 0 : props.featureInfoActive, featureInfoEventsEnabled, layers, mapHook.map]);
     React.useEffect(function () {
         if (!_featureInfoEventsEnabled) {
             resetFeatureInfo();
@@ -6565,7 +6573,14 @@ var MlWmsLoader = function (props) {
                                     return theme.palette.info.light;
                                 return theme.palette.grey[300];
                             },
-                        }, "aria-label": "featureinfo", onClick: function () { return setFeatureInfoEventsEnabled(function (current) { return !current; }); }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
+                        }, "aria-label": "featureinfo", onClick: function () {
+                            if (typeof (props === null || props === void 0 ? void 0 : props.setFeatureInfoActive) === 'function') {
+                                props.setFeatureInfoActive(function (current) { return !current; });
+                            }
+                            else {
+                                setFeatureInfoEventsEnabled(function (current) { return !current; });
+                            }
+                        }, disabled: !(layers === null || layers === void 0 ? void 0 : layers.some(function (layer) { return layer.visible && layer.queryable; })) },
                         React__default["default"].createElement(InfoIcon__default["default"], null))),
                     React__default["default"].createElement(IconButton__default["default"], { edge: props.showDeleteButton ? false : 'end', sx: __assign({ padding: '4px', marginTop: '-3px' }, (props.showDeleteButton ? { marginRight: '4px' } : {})), "aria-label": "open", onClick: function () { return setOpen(function (current) { return !current; }); } }, open ? React__default["default"].createElement(iconsMaterial.ExpandLess, null) : React__default["default"].createElement(iconsMaterial.ExpandMore, null)),
                     props.showDeleteButton && (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -7540,7 +7555,8 @@ function LayerPropertyForm(_a) {
     var key = React.useRef(Math.round(Math.random() * 10000000000));
     //const onChange = (event) => {};
     var getFormInputByType = React.useCallback(function (key) {
-        if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1) {
+        if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1 &&
+            (typeof paintProps[key] === 'number' || typeof paintProps[key] === 'string')) {
             var label = (React__default["default"].createElement(material.Typography, { id: key + '_label', gutterBottom: true }, key));
             switch (mapPropKeyToFormInputType[key]) {
                 case 'slider':
@@ -7689,16 +7705,16 @@ LayerListItemVectorLayer.defaultProps = {
 };
 function LayerListItem(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var layerComponent = _a.layerComponent, visible = _a.visible, type = _a.type, name = _a.name, description = _a.description, configurable = _a.configurable, setLayerState = _a.setLayerState, props = __rest(_a, ["layerComponent", "visible", "type", "name", "description", "configurable", "setLayerState"]);
-    var _m = React.useState(true), localVisible = _m[0], setLocalVisible = _m[1];
-    var _o = React.useState(false), paintPropsFormVisible = _o[0], setPaintPropsFormVisible = _o[1];
-    var _p = React.useState(false), showDeletionConfirmationDialog = _p[0], setShowDeletionConfirmationDialog = _p[1];
+    var _o = React.useState(true), localVisible = _o[0], setLocalVisible = _o[1];
+    var _p = React.useState(false), paintPropsFormVisible = _p[0], setPaintPropsFormVisible = _p[1];
+    var _q = React.useState(false), showDeletionConfirmationDialog = _q[0], setShowDeletionConfirmationDialog = _q[1];
     var deletedRef = React.useRef(false);
     var visibleRef = React.useRef(visible);
     // this state variable is used for layer components that provide a paint attribute
-    var _q = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
-        getDefaultPaintPropsByType(((_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _q[0], setPaintProps = _q[1];
+    var _r = React.useState(((_b = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _b === void 0 ? void 0 : _b.paint) ||
+        getDefaultPaintPropsByType(((_c = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _c === void 0 ? void 0 : _c.type) || getDefaulLayerTypeByGeometry(layerComponent.props.geojson))), paintProps = _r[0], setPaintProps = _r[1];
     var _visible = React.useMemo(function () {
         if (!visible) {
             return false;
@@ -7772,7 +7788,7 @@ function LayerListItem(_a) {
                 paddingLeft: 0,
                 paddingTop: 0,
                 paddingBottom: '4px',
-            }, secondaryAction: configurable ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            }, secondaryAction: configurable && ((_g = Object.keys(paintProps)) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(material.IconButton, { edge: props.showDeleteButton ? false : 'end', "aria-label": "visibility", onClick: function () {
                         setPaintPropsFormVisible(function (current) {
                             return !current;
@@ -7804,8 +7820,11 @@ function LayerListItem(_a) {
                     } })),
             React__default["default"].createElement(material.ListItemText, { variant: "layerlist", primary: name, secondary: description }))),
         _layerComponent,
-        !((_g = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _g === void 0 ? void 0 : _g.layers) && configurable && paintPropsFormVisible && (React__default["default"].createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType })),
-        ((_h = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _h === void 0 ? void 0 : _h.layers) && (React__default["default"].createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_l = (_k = (_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) === null || _k === void 0 ? void 0 : _k.map) === null || _l === void 0 ? void 0 : _l.call(_k, function (_el, idx) { return (React__default["default"].createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
+        !((_h = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _h === void 0 ? void 0 : _h.layers) &&
+            Object.keys(paintProps).length > 0 &&
+            configurable &&
+            paintPropsFormVisible && (React__default["default"].createElement(LayerPropertyForm, { paintProps: paintProps, setPaintProps: setPaintProps, layerType: layerType })),
+        ((_j = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _j === void 0 ? void 0 : _j.layers) && (React__default["default"].createElement(LayerListFolder, { visible: localVisible, setVisible: setLocalVisible, name: name }, (_m = (_l = (_k = layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props) === null || _k === void 0 ? void 0 : _k.layers) === null || _l === void 0 ? void 0 : _l.map) === null || _m === void 0 ? void 0 : _m.call(_l, function (_el, idx) { return (React__default["default"].createElement(LayerListItemVectorLayer, { vtProps: layerComponent === null || layerComponent === void 0 ? void 0 : layerComponent.props, setVtProps: setLayerState, id: '' + idx, key: '' + idx, visibleMaster: _visible })); })))));
 }
 LayerListItem.defaultProps = {
     type: 'layer',
@@ -7822,7 +7841,7 @@ function LayerListItemFactory(props) {
                 layerContext.setBackgroundLayers(state === null || state === void 0 ? void 0 : state.layers);
             }, visible: true, configurable: true, type: "layer", name: "Background" })),
         props.layers.map(function (layer, idx) {
-            var _a;
+            var _a, _b;
             if (!(layer === null || layer === void 0 ? void 0 : layer.id))
                 return null;
             switch (layer.type) {
@@ -7855,6 +7874,16 @@ function LayerListItemFactory(props) {
                                     }
                                     return _layers;
                                 });
+                            }, featureInfoActive: ((_b = layer === null || layer === void 0 ? void 0 : layer.config) === null || _b === void 0 ? void 0 : _b.featureInfoActive) || false, setFeatureInfoActive: function (updateFunction) {
+                                var _a;
+                                (_a = props === null || props === void 0 ? void 0 : props.setLayers) === null || _a === void 0 ? void 0 : _a.call(props, function (current) {
+                                    var _a;
+                                    var _layers = __spreadArray([], current, true);
+                                    if (typeof updateFunction === 'function') {
+                                        _layers[idx].config.featureInfoActive = updateFunction(((_a = _layers[idx].config) === null || _a === void 0 ? void 0 : _a.featureInfoActive) || false);
+                                    }
+                                    return _layers;
+                                });
                             }, showDeleteButton: true }))));
                 default:
                     return null;
@@ -7866,6 +7895,7 @@ function LayerListItemFactory(props) {
 }
 LayerListItemFactory.defaultProps = {
     mapId: undefined,
+    layers: [],
 };
 var types = [
@@ -7935,7 +7965,7 @@ function WmsLayerForm(props) {
 }
 var AddLayerPopup = function (props) {
-    var _a = React.useState(), layerConfig = _a[0], setLayerConfig = _a[1];
+    var _a = React.useState(props === null || props === void 0 ? void 0 : props.config), layerConfig = _a[0], setLayerConfig = _a[1];
     var updateLayerType = function (type) {
         setLayerConfig({ type: type, config: {} });
     };
@@ -8149,13 +8179,25 @@ var SelectStylePopup = function (props) {
     var handleCancel = function () {
         props.setOpen(false);
     };
-    return (React__default["default"].createElement(material.Dialog, { open: props.open, onClose: handleCancel, PaperProps: { sx: { padding: '20px' } } }, (_a = props === null || props === void 0 ? void 0 : props.styles) === null || _a === void 0 ? void 0 : _a.map(function (style) {
-        return (React__default["default"].createElement(material.Button, { key: style.name, onClick: function () { var _a; return (_a = props === null || props === void 0 ? void 0 : props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, style); } }, style.name));
-    })));
+    return (React__default["default"].createElement(material.Dialog, { open: props.open, onClose: handleCancel, PaperProps: { sx: { padding: '20px' } } },
+        React__default["default"].createElement(material.DialogTitle, null, "Select a style"),
+        React__default["default"].createElement(material.List, null, (_a = props === null || props === void 0 ? void 0 : props.styles) === null || _a === void 0 ? void 0 : _a.map(function (style) {
+            var _a;
+            return (React__default["default"].createElement(material.ListItem, { disableGutters: true, key: style.name },
+                React__default["default"].createElement(material.ListItemButton, { autoFocus: true, onClick: function () {
+                        var _a;
+                        (_a = props === null || props === void 0 ? void 0 : props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, style);
+                    } },
+                    React__default["default"].createElement(material.ListItemAvatar, null,
+                        React__default["default"].createElement(material.Avatar, { sx: { width: '50px', height: '50px' }, alt: style.name, src: (style === null || style === void 0 ? void 0 : style.name) && ((_a = props === null || props === void 0 ? void 0 : props.styleThumbnailPaths) === null || _a === void 0 ? void 0 : _a[style.name]) })),
+                    React__default["default"].createElement(material.ListItemText, { primary: style.name }))));
+        }))));
 };
-SelectStylePopup.defaultProps = {};
+SelectStylePopup.defaultProps = {
+    styleThumbnailPaths: {},
+};
-var GruvboxStyle = {
+var MonokaiStyle = {
     version: 8,
     name: 'Monokai',
     center: [8.542, 47.372],
@@ -10707,31 +10749,9 @@ var GruvboxStyle = {
     ],
 };
-var SelectStyleButton = function (props) {
-    var layerContext = React__default["default"].useContext(LayerContext);
-    var _a = React__default["default"].useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(material.Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
-            React__default["default"].createElement(WallpaperIcon__default["default"], null)),
-        React__default["default"].createElement(SelectStylePopup, { styles: __spreadArray(__spreadArray([], (props.defaultStyles
-                ? [GruvboxStyle, GruvboxStyle, GruvboxStyle, GruvboxStyle, GruvboxStyle]
-                : []), true), (props.styles || []), true), open: popupOpen, setOpen: setPopupOpen, onSelect: function (style) {
-                // Todo: should be possible without clearing bg layers first & setTimeout
-                layerContext.setBackgroundLayers([]);
-                setTimeout(function () {
-                    layerContext.updateStyle(style);
-                }, 100);
-                setPopupOpen(false);
-            } })));
-};
-SelectStyleButton.defaultProps = {
-    style: [],
-    defaultStyles: true,
-};
-var gruvbox = {
+var SolarizedStyle = {
     version: 8,
-    name: 'Gruvbox',
+    name: 'Solarized',
     center: [8.542, 47.372],
     zoom: 11.6,
     bearing: 0,
@@ -10745,7 +10765,7 @@ var gruvbox = {
     sprite: config.sprite,
     glyphs: config.glyphs,
     layers: [
-        { id: 'background', type: 'background', paint: { 'background-color': '#282822' } },
+        { id: 'background', type: 'background', paint: { 'background-color': '#073642' } },
         {
             id: 'landcover-glacier',
             type: 'fill',
@@ -10755,7 +10775,7 @@ var gruvbox = {
             filter: ['==', 'subclass', 'glacier'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#83a598',
+                'fill-color': '#2aa198',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -10772,7 +10792,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'residential'],
-            paint: { 'fill-color': '#b8bb26' },
+            paint: { 'fill-color': '#657b83' },
         },
         {
             id: 'landuse-commercial',
@@ -10781,7 +10801,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'commercial']],
-            paint: { 'fill-color': '#bfc23c' },
+            paint: { 'fill-color': '#74888f' },
         },
         {
             id: 'landuse-industrial',
@@ -10790,7 +10810,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'industrial']],
-            paint: { 'fill-color': '#c6c951' },
+            paint: { 'fill-color': '#84959c' },
         },
         {
             id: 'park',
@@ -10800,7 +10820,7 @@ var gruvbox = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             paint: {
-                'fill-color': '#b8bb26',
+                'fill-color': '#859900',
                 'fill-opacity': {
                     base: 1.8,
                     stops: [
@@ -10818,7 +10838,7 @@ var gruvbox = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             layout: {},
-            paint: { 'line-color': 'rgba(184,187,38,0.6)', 'line-dasharray': [3, 3] },
+            paint: { 'line-color': 'rgba(133,153,0,0.6)', 'line-dasharray': [3, 3] },
         },
         {
             id: 'landuse-cemetery',
@@ -10827,7 +10847,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'cemetery'],
-            paint: { 'fill-color': '#eceeaa' },
+            paint: { 'fill-color': '#f2ff99' },
         },
         {
             id: 'landuse-hospital',
@@ -10836,7 +10856,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'hospital'],
-            paint: { 'fill-color': '#fe8019' },
+            paint: { 'fill-color': '#d30102' },
         },
         {
             id: 'landuse-school',
@@ -10845,7 +10865,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'school'],
-            paint: { 'fill-color': 'rgba(254,128,25,0.8)' },
+            paint: { 'fill-color': 'rgba(211,1,2,0.8)' },
         },
         {
             id: 'landuse-railway',
@@ -10854,7 +10874,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'railway'],
-            paint: { 'fill-color': 'rgba(118,51,8,0.4)' },
+            paint: { 'fill-color': 'rgba(58,63,144,0.4)' },
         },
         {
             id: 'landcover-wood',
@@ -10864,7 +10884,7 @@ var gruvbox = {
             'source-layer': 'landcover',
             filter: ['==', 'class', 'wood'],
             paint: {
-                'fill-color': '#83a598',
+                'fill-color': '#2aa198',
                 'fill-opacity': 0.1,
                 'fill-outline-color': 'hsla(0, 0%, 0%, 0.03)',
                 'fill-antialias': {
@@ -10883,7 +10903,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'landcover',
             filter: ['==', 'class', 'grass'],
-            paint: { 'fill-color': '#b8bb26', 'fill-opacity': 1 },
+            paint: { 'fill-color': '#859900', 'fill-opacity': 1 },
         },
         {
             id: 'landcover-grass-park',
@@ -10892,7 +10912,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'park',
             filter: ['==', 'class', 'public_park'],
-            paint: { 'fill-color': '#b8bb26', 'fill-opacity': 0.8 },
+            paint: { 'fill-color': '#859900', 'fill-opacity': 0.8 },
         },
         {
             id: 'waterway-other',
@@ -10903,7 +10923,7 @@ var gruvbox = {
             filter: ['!in', 'class', 'canal', 'river', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#83a598',
+                'line-color': '#268bd2',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -10922,7 +10942,7 @@ var gruvbox = {
             filter: ['in', 'class', 'canal', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#83a598',
+                'line-color': '#268bd2',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -10941,7 +10961,7 @@ var gruvbox = {
             filter: ['==', 'class', 'river'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#83a598',
+                'line-color': '#268bd2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -10962,7 +10982,7 @@ var gruvbox = {
             layout: { visibility: 'visible' },
             paint: {
                 'fill-opacity': 1,
-                'fill-color': '#83a598',
+                'fill-color': '#268bd2',
                 'fill-translate': {
                     base: 1,
                     stops: [
@@ -10979,7 +10999,7 @@ var gruvbox = {
             source: 'openmaptiles',
             'source-layer': 'water',
             layout: { visibility: 'visible' },
-            paint: { 'fill-color': '#5c7f72' },
+            paint: { 'fill-color': '#1a6091' },
         },
         {
             id: 'water-pattern',
@@ -10999,7 +11019,7 @@ var gruvbox = {
             filter: ['==', 'subclass', 'ice_shelf'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#83a598',
+                'fill-color': '#2aa198',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -11015,7 +11035,7 @@ var gruvbox = {
             metadata: { 'mapbox:group': '1444849364238.8171' },
             source: 'openmaptiles',
             'source-layer': 'building',
-            paint: { 'fill-color': '#928374', 'fill-antialias': true },
+            paint: { 'fill-color': '#eee8d5', 'fill-antialias': true },
         },
         {
             id: 'building-top',
@@ -11033,7 +11053,7 @@ var gruvbox = {
                     ],
                 },
                 'fill-outline-color': '#dfdbd7',
-                'fill-color': '#a89c91',
+                'fill-color': '#fdfcf9',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -11052,7 +11072,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#6c71c4',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -11073,7 +11093,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#6c71c4',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -11100,7 +11120,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11120,7 +11140,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11141,7 +11161,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -11166,7 +11186,7 @@ var gruvbox = {
                 ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#9094d3',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -11186,7 +11206,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#9094d3',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11206,7 +11226,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor_road']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#9094d3',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11227,7 +11247,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#f2853e',
+                'line-color': '#a3a6da',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11247,7 +11267,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11267,7 +11287,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(235,219,178,0.8)',
+                'line-color': 'rgba(108,113,196,0.8)',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11286,7 +11306,7 @@ var gruvbox = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#3a3f90',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -11308,7 +11328,7 @@ var gruvbox = {
             filter: ['all', ['in', 'class', 'taxiway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#763308',
+                'line-color': '#3a3f90',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -11329,7 +11349,7 @@ var gruvbox = {
             filter: ['all', ['in', 'class', 'runway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#763308',
+                'line-color': '#3a3f90',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -11357,7 +11377,7 @@ var gruvbox = {
                         [14, 1],
                     ],
                 },
-                'fill-color': 'rgba(214,93,14,0.5)',
+                'fill-color': 'rgba(108,113,196,0.5)',
             },
         },
         {
@@ -11370,7 +11390,7 @@ var gruvbox = {
             filter: ['all', ['in', 'class', 'taxiway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#f2853e',
+                'line-color': '#a3a6da',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -11397,7 +11417,7 @@ var gruvbox = {
             filter: ['all', ['in', 'class', 'runway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#f2853e',
+                'line-color': '#a3a6da',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -11423,7 +11443,7 @@ var gruvbox = {
             filter: ['==', '$type', 'Polygon'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#a6480b',
+                'fill-color': '#484fb5',
                 'fill-outline-color': '#cfcdca',
                 'fill-opacity': 0.9,
                 'fill-antialias': false,
@@ -11439,7 +11459,7 @@ var gruvbox = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11466,7 +11486,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11492,7 +11512,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': 'rgba(214,93,14,0.8)',
+                'line-color': 'rgba(108,113,196,0.8)',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -11523,7 +11543,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11544,7 +11564,7 @@ var gruvbox = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'primary']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': {
                     stops: [
                         [7, 0],
@@ -11572,7 +11592,7 @@ var gruvbox = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'trunk']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': {
                     stops: [
                         [5, 0],
@@ -11600,7 +11620,7 @@ var gruvbox = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11631,7 +11651,7 @@ var gruvbox = {
                 ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#fe8019',
+                'line-color': '#cb4b16',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -11652,7 +11672,7 @@ var gruvbox = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11678,7 +11698,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11703,7 +11723,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#f49456',
+                'line-color': '#e58ab6',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11728,7 +11748,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11752,7 +11772,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11776,7 +11796,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11801,7 +11821,7 @@ var gruvbox = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -11824,7 +11844,7 @@ var gruvbox = {
                 ['all', ['==', 'class', 'rail'], ['has', 'service']],
             ],
             paint: {
-                'line-color': 'rgba(118,51,8,0.7)',
+                'line-color': 'rgba(58,63,144,0.7)',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -11847,7 +11867,7 @@ var gruvbox = {
             ],
             layout: { visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(118,51,8,0.7)',
+                'line-color': 'rgba(58,63,144,0.7)',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -11876,7 +11896,7 @@ var gruvbox = {
                 ],
             ],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#3a3f90',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -11904,7 +11924,7 @@ var gruvbox = {
                 ],
             ],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#3a3f90',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -11925,7 +11945,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11951,7 +11971,7 @@ var gruvbox = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11973,7 +11993,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -11993,7 +12013,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12014,7 +12034,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#d33682',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12038,7 +12058,7 @@ var gruvbox = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#9094d3',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12060,7 +12080,7 @@ var gruvbox = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#fe8019',
+                'line-color': '#cb4b16',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12080,7 +12100,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12105,7 +12125,7 @@ var gruvbox = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12126,7 +12146,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12146,7 +12166,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12166,7 +12186,7 @@ var gruvbox = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#6c71c4',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -12185,7 +12205,7 @@ var gruvbox = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#3a3f90',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -12204,7 +12224,7 @@ var gruvbox = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#3a3f90',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -12224,7 +12244,7 @@ var gruvbox = {
             filter: ['all', ['in', 'admin_level', 4, 6, 8], ['!=', 'maritime', 1]],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#fb4934',
+                'line-color': '#268bd2',
                 'line-dasharray': [3, 1, 1, 1],
                 'line-width': {
                     base: 1.4,
@@ -12244,7 +12264,7 @@ var gruvbox = {
             filter: ['all', ['==', 'admin_level', 2], ['!=', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#fb4934',
+                'line-color': '#268bd2',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -12264,7 +12284,7 @@ var gruvbox = {
             filter: ['all', ['in', 'admin_level', 2, 4], ['==', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#83a598',
+                'line-color': '#268bd2',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -13281,9 +13301,9 @@ var gruvbox = {
     ],
 };
-var medieval_kingdom = {
+var OceanicNextStyle = {
     version: 8,
-    name: 'Medieval Kingdom',
+    name: 'Oceanic Next',
     center: [8.542, 47.372],
     zoom: 11.6,
     bearing: 0,
@@ -13297,7 +13317,7 @@ var medieval_kingdom = {
     sprite: config.sprite,
     glyphs: config.glyphs,
     layers: [
-        { id: 'background', type: 'background', paint: { 'background-color': '#ffd1a8' } },
+        { id: 'background', type: 'background', paint: { 'background-color': '#282822' } },
         {
             id: 'landcover-glacier',
             type: 'fill',
@@ -13307,7 +13327,7 @@ var medieval_kingdom = {
             filter: ['==', 'subclass', 'glacier'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#228B22',
+                'fill-color': '#81a1c1',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -13324,7 +13344,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'residential'],
-            paint: { 'fill-color': '#bfa677' },
+            paint: { 'fill-color': '#a3be8c' },
         },
         {
             id: 'landuse-commercial',
@@ -13333,7 +13353,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'commercial']],
-            paint: { 'fill-color': '#c5af85' },
+            paint: { 'fill-color': '#acc598' },
         },
         {
             id: 'landuse-industrial',
@@ -13342,7 +13362,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'industrial']],
-            paint: { 'fill-color': '#ccb892' },
+            paint: { 'fill-color': '#b5cba3' },
         },
         {
             id: 'park',
@@ -13352,7 +13372,7 @@ var medieval_kingdom = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             paint: {
-                'fill-color': '#556B2F',
+                'fill-color': '#a3be8c',
                 'fill-opacity': {
                     base: 1.8,
                     stops: [
@@ -13370,7 +13390,7 @@ var medieval_kingdom = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             layout: {},
-            paint: { 'line-color': 'rgba(85,107,47,0.6)', 'line-dasharray': [3, 3] },
+            paint: { 'line-color': 'rgba(163,19,14,0.6)', 'line-dasharray': [3, 3] },
         },
         {
             id: 'landuse-cemetery',
@@ -13379,7 +13399,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'cemetery'],
-            paint: { 'fill-color': '#d1e0b8' },
+            paint: { 'fill-color': '#cbdabe' },
         },
         {
             id: 'landuse-hospital',
@@ -13388,7 +13408,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'hospital'],
-            paint: { 'fill-color': '#FFC0CB' },
+            paint: { 'fill-color': '#b48ead' },
         },
         {
             id: 'landuse-school',
@@ -13397,7 +13417,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'school'],
-            paint: { 'fill-color': 'rgba(255,192,203,0.8)' },
+            paint: { 'fill-color': 'rgba(18,142,173,0.8)' },
         },
         {
             id: 'landuse-railway',
@@ -13406,7 +13426,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'railway'],
-            paint: { 'fill-color': 'rgba(149,46,46,0.4)' },
+            paint: { 'fill-color': 'rgba(118,51,8,0.4)' },
         },
         {
             id: 'landcover-wood',
@@ -13416,7 +13436,7 @@ var medieval_kingdom = {
             'source-layer': 'landcover',
             filter: ['==', 'class', 'wood'],
             paint: {
-                'fill-color': '#228B22',
+                'fill-color': '#81a1c1',
                 'fill-opacity': 0.1,
                 'fill-outline-color': 'hsla(0, 0%, 0%, 0.03)',
                 'fill-antialias': {
@@ -13435,7 +13455,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'landcover',
             filter: ['==', 'class', 'grass'],
-            paint: { 'fill-color': '#556B2F', 'fill-opacity': 1 },
+            paint: { 'fill-color': '#a3be8c', 'fill-opacity': 1 },
         },
         {
             id: 'landcover-grass-park',
@@ -13444,7 +13464,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'park',
             filter: ['==', 'class', 'public_park'],
-            paint: { 'fill-color': '#556B2F', 'fill-opacity': 0.8 },
+            paint: { 'fill-color': '#a3be8c', 'fill-opacity': 0.8 },
         },
         {
             id: 'waterway-other',
@@ -13455,7 +13475,7 @@ var medieval_kingdom = {
             filter: ['!in', 'class', 'canal', 'river', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#1E90FF',
+                'line-color': '#8fbcbb',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -13474,7 +13494,7 @@ var medieval_kingdom = {
             filter: ['in', 'class', 'canal', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#1E90FF',
+                'line-color': '#8fbcbb',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -13493,7 +13513,7 @@ var medieval_kingdom = {
             filter: ['==', 'class', 'river'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#1E90FF',
+                'line-color': '#8fbcbb',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -13514,7 +13534,7 @@ var medieval_kingdom = {
             layout: { visibility: 'visible' },
             paint: {
                 'fill-opacity': 1,
-                'fill-color': '#1E90FF',
+                'fill-color': '#8fbcbb',
                 'fill-translate': {
                     base: 1,
                     stops: [
@@ -13531,7 +13551,7 @@ var medieval_kingdom = {
             source: 'openmaptiles',
             'source-layer': 'water',
             layout: { visibility: 'visible' },
-            paint: { 'fill-color': '#006ad1' },
+            paint: { 'fill-color': '#5f9f9e' },
         },
         {
             id: 'water-pattern',
@@ -13551,7 +13571,7 @@ var medieval_kingdom = {
             filter: ['==', 'subclass', 'ice_shelf'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#228B22',
+                'fill-color': '#81a1c1',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -13567,7 +13587,7 @@ var medieval_kingdom = {
             metadata: { 'mapbox:group': '1444849364238.8171' },
             source: 'openmaptiles',
             'source-layer': 'building',
-            paint: { 'fill-color': '#f9e9cb', 'fill-antialias': true },
+            paint: { 'fill-color': '#65737e', 'fill-antialias': true },
         },
         {
             id: 'building-top',
@@ -13585,7 +13605,7 @@ var medieval_kingdom = {
                     ],
                 },
                 'fill-outline-color': '#dfdbd7',
-                'fill-color': '#fefcf9',
+                'fill-color': '#7e8d98',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -13604,7 +13624,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -13625,7 +13645,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -13652,7 +13672,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -13672,7 +13692,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -13693,7 +13713,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -13718,7 +13738,7 @@ var medieval_kingdom = {
                 ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#d98383',
+                'line-color': '#f17626',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -13738,7 +13758,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d98383',
+                'line-color': '#f17626',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -13758,7 +13778,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor_road']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d98383',
+                'line-color': '#f17626',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -13779,7 +13799,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#df9797',
+                'line-color': '#f2853e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -13799,7 +13819,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -13819,7 +13839,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(139,94,6,0.8)',
+                'line-color': 'rgba(235,219,178,0.8)',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -13838,7 +13858,7 @@ var medieval_kingdom = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#952e2e',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -13860,7 +13880,7 @@ var medieval_kingdom = {
             filter: ['all', ['in', 'class', 'taxiway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#952e2e',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -13881,7 +13901,7 @@ var medieval_kingdom = {
             filter: ['all', ['in', 'class', 'runway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#952e2e',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -13909,7 +13929,7 @@ var medieval_kingdom = {
                         [14, 1],
                     ],
                 },
-                'fill-color': 'rgba(205,92,92,0.5)',
+                'fill-color': 'rgba(214,93,14,0.5)',
             },
         },
         {
@@ -13922,7 +13942,7 @@ var medieval_kingdom = {
             filter: ['all', ['in', 'class', 'taxiway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#df9797',
+                'line-color': '#f2853e',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -13949,7 +13969,7 @@ var medieval_kingdom = {
             filter: ['all', ['in', 'class', 'runway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#df9797',
+                'line-color': '#f2853e',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -13975,7 +13995,7 @@ var medieval_kingdom = {
             filter: ['==', '$type', 'Polygon'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#bc3a3a',
+                'fill-color': '#a6480b',
                 'fill-outline-color': '#cfcdca',
                 'fill-opacity': 0.9,
                 'fill-antialias': false,
@@ -13991,7 +14011,7 @@ var medieval_kingdom = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -14018,7 +14038,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -14044,7 +14064,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': 'rgba(205,92,92,0.8)',
+                'line-color': 'rgba(214,93,14,0.8)',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -14075,7 +14095,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -14096,7 +14116,7 @@ var medieval_kingdom = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'primary']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': {
                     stops: [
                         [7, 0],
@@ -14124,7 +14144,7 @@ var medieval_kingdom = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'trunk']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': {
                     stops: [
                         [5, 0],
@@ -14152,7 +14172,7 @@ var medieval_kingdom = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14183,7 +14203,7 @@ var medieval_kingdom = {
                 ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#FFC0CB',
+                'line-color': '#b48ead',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -14204,7 +14224,7 @@ var medieval_kingdom = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#8b5e3c',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14230,7 +14250,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#8B5E3C',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14255,7 +14275,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#e5aaaa',
+                'line-color': '#f49456',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -14280,7 +14300,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#8B5E3C',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14304,7 +14324,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#8B5E3C',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14328,7 +14348,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#8B5E3C',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14353,7 +14373,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#8b5e3c',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14376,7 +14396,7 @@ var medieval_kingdom = {
                 ['all', ['==', 'class', 'rail'], ['has', 'service']],
             ],
             paint: {
-                'line-color': 'rgba(149,46,46,0.7)',
+                'line-color': 'rgba(118,51,8,0.7)',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -14399,7 +14419,7 @@ var medieval_kingdom = {
             ],
             layout: { visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(149,46,46,0.7)',
+                'line-color': 'rgba(118,51,8,0.7)',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -14428,7 +14448,7 @@ var medieval_kingdom = {
                 ],
             ],
             paint: {
-                'line-color': '#952e2e',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -14456,7 +14476,7 @@ var medieval_kingdom = {
                 ],
             ],
             paint: {
-                'line-color': '#952e2e',
+                'line-color': '#763308',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -14477,7 +14497,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -14503,7 +14523,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -14525,7 +14545,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -14545,7 +14565,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14566,7 +14586,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#CD5C5C',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14590,7 +14610,7 @@ var medieval_kingdom = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#d98383',
+                'line-color': '#f17626',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14612,7 +14632,7 @@ var medieval_kingdom = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#FFC0CB',
+                'line-color': '#b48ead',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14632,7 +14652,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#8b5e3c',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14657,7 +14677,7 @@ var medieval_kingdom = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#8B5E3C',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14678,7 +14698,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#8B5E3C',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14698,7 +14718,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#8B5E3C',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14718,7 +14738,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#8b5e3c',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -14737,7 +14757,7 @@ var medieval_kingdom = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#952e2e',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -14756,7 +14776,7 @@ var medieval_kingdom = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#952e2e',
+                'line-color': '#763308',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -14776,7 +14796,7 @@ var medieval_kingdom = {
             filter: ['all', ['in', 'admin_level', 4, 6, 8], ['!=', 'maritime', 1]],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#A0522D',
+                'line-color': '#8fbcbb',
                 'line-dasharray': [3, 1, 1, 1],
                 'line-width': {
                     base: 1.4,
@@ -14796,7 +14816,7 @@ var medieval_kingdom = {
             filter: ['all', ['==', 'admin_level', 2], ['!=', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#A0522D',
+                'line-color': '#8fbcbb',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -14816,7 +14836,7 @@ var medieval_kingdom = {
             filter: ['all', ['in', 'admin_level', 2, 4], ['==', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#1E90FF',
+                'line-color': '#8fbcbb',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -15833,9 +15853,9 @@ var medieval_kingdom = {
     ],
 };
-var oceanic_next = {
+var MedievalKingdomStyle = {
     version: 8,
-    name: 'Oceanic Next',
+    name: 'Medieval Kingdom',
     center: [8.542, 47.372],
     zoom: 11.6,
     bearing: 0,
@@ -15849,7 +15869,7 @@ var oceanic_next = {
     sprite: config.sprite,
     glyphs: config.glyphs,
     layers: [
-        { id: 'background', type: 'background', paint: { 'background-color': '#282822' } },
+        { id: 'background', type: 'background', paint: { 'background-color': '#ffd1a8' } },
         {
             id: 'landcover-glacier',
             type: 'fill',
@@ -15859,7 +15879,7 @@ var oceanic_next = {
             filter: ['==', 'subclass', 'glacier'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#81a1c1',
+                'fill-color': '#228B22',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -15876,7 +15896,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'residential'],
-            paint: { 'fill-color': '#a3be8c' },
+            paint: { 'fill-color': '#bfa677' },
         },
         {
             id: 'landuse-commercial',
@@ -15885,7 +15905,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'commercial']],
-            paint: { 'fill-color': '#acc598' },
+            paint: { 'fill-color': '#c5af85' },
         },
         {
             id: 'landuse-industrial',
@@ -15894,7 +15914,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'industrial']],
-            paint: { 'fill-color': '#b5cba3' },
+            paint: { 'fill-color': '#ccb892' },
         },
         {
             id: 'park',
@@ -15904,7 +15924,7 @@ var oceanic_next = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             paint: {
-                'fill-color': '#a3be8c',
+                'fill-color': '#556B2F',
                 'fill-opacity': {
                     base: 1.8,
                     stops: [
@@ -15922,7 +15942,7 @@ var oceanic_next = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             layout: {},
-            paint: { 'line-color': 'rgba(163,19,14,0.6)', 'line-dasharray': [3, 3] },
+            paint: { 'line-color': 'rgba(85,107,47,0.6)', 'line-dasharray': [3, 3] },
         },
         {
             id: 'landuse-cemetery',
@@ -15931,7 +15951,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'cemetery'],
-            paint: { 'fill-color': '#cbdabe' },
+            paint: { 'fill-color': '#d1e0b8' },
         },
         {
             id: 'landuse-hospital',
@@ -15940,7 +15960,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'hospital'],
-            paint: { 'fill-color': '#b48ead' },
+            paint: { 'fill-color': '#FFC0CB' },
         },
         {
             id: 'landuse-school',
@@ -15949,7 +15969,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'school'],
-            paint: { 'fill-color': 'rgba(18,142,173,0.8)' },
+            paint: { 'fill-color': 'rgba(255,192,203,0.8)' },
         },
         {
             id: 'landuse-railway',
@@ -15958,7 +15978,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'railway'],
-            paint: { 'fill-color': 'rgba(118,51,8,0.4)' },
+            paint: { 'fill-color': 'rgba(149,46,46,0.4)' },
         },
         {
             id: 'landcover-wood',
@@ -15968,7 +15988,7 @@ var oceanic_next = {
             'source-layer': 'landcover',
             filter: ['==', 'class', 'wood'],
             paint: {
-                'fill-color': '#81a1c1',
+                'fill-color': '#228B22',
                 'fill-opacity': 0.1,
                 'fill-outline-color': 'hsla(0, 0%, 0%, 0.03)',
                 'fill-antialias': {
@@ -15987,7 +16007,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'landcover',
             filter: ['==', 'class', 'grass'],
-            paint: { 'fill-color': '#a3be8c', 'fill-opacity': 1 },
+            paint: { 'fill-color': '#556B2F', 'fill-opacity': 1 },
         },
         {
             id: 'landcover-grass-park',
@@ -15996,7 +16016,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'park',
             filter: ['==', 'class', 'public_park'],
-            paint: { 'fill-color': '#a3be8c', 'fill-opacity': 0.8 },
+            paint: { 'fill-color': '#556B2F', 'fill-opacity': 0.8 },
         },
         {
             id: 'waterway-other',
@@ -16007,7 +16027,7 @@ var oceanic_next = {
             filter: ['!in', 'class', 'canal', 'river', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#8fbcbb',
+                'line-color': '#1E90FF',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -16026,7 +16046,7 @@ var oceanic_next = {
             filter: ['in', 'class', 'canal', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#8fbcbb',
+                'line-color': '#1E90FF',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -16045,7 +16065,7 @@ var oceanic_next = {
             filter: ['==', 'class', 'river'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#8fbcbb',
+                'line-color': '#1E90FF',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16066,7 +16086,7 @@ var oceanic_next = {
             layout: { visibility: 'visible' },
             paint: {
                 'fill-opacity': 1,
-                'fill-color': '#8fbcbb',
+                'fill-color': '#1E90FF',
                 'fill-translate': {
                     base: 1,
                     stops: [
@@ -16083,7 +16103,7 @@ var oceanic_next = {
             source: 'openmaptiles',
             'source-layer': 'water',
             layout: { visibility: 'visible' },
-            paint: { 'fill-color': '#5f9f9e' },
+            paint: { 'fill-color': '#006ad1' },
         },
         {
             id: 'water-pattern',
@@ -16103,7 +16123,7 @@ var oceanic_next = {
             filter: ['==', 'subclass', 'ice_shelf'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#81a1c1',
+                'fill-color': '#228B22',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -16119,7 +16139,7 @@ var oceanic_next = {
             metadata: { 'mapbox:group': '1444849364238.8171' },
             source: 'openmaptiles',
             'source-layer': 'building',
-            paint: { 'fill-color': '#65737e', 'fill-antialias': true },
+            paint: { 'fill-color': '#f9e9cb', 'fill-antialias': true },
         },
         {
             id: 'building-top',
@@ -16137,7 +16157,7 @@ var oceanic_next = {
                     ],
                 },
                 'fill-outline-color': '#dfdbd7',
-                'fill-color': '#7e8d98',
+                'fill-color': '#fefcf9',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -16156,7 +16176,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -16177,7 +16197,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -16204,7 +16224,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -16224,7 +16244,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16245,7 +16265,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -16270,7 +16290,7 @@ var oceanic_next = {
                 ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#d98383',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -16290,7 +16310,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#d98383',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16310,7 +16330,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor_road']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#d98383',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -16331,7 +16351,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#f2853e',
+                'line-color': '#df9797',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16351,7 +16371,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16371,7 +16391,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(235,219,178,0.8)',
+                'line-color': 'rgba(139,94,6,0.8)',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16390,7 +16410,7 @@ var oceanic_next = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#952e2e',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -16412,7 +16432,7 @@ var oceanic_next = {
             filter: ['all', ['in', 'class', 'taxiway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#763308',
+                'line-color': '#952e2e',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -16433,7 +16453,7 @@ var oceanic_next = {
             filter: ['all', ['in', 'class', 'runway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#763308',
+                'line-color': '#952e2e',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -16461,7 +16481,7 @@ var oceanic_next = {
                         [14, 1],
                     ],
                 },
-                'fill-color': 'rgba(214,93,14,0.5)',
+                'fill-color': 'rgba(205,92,92,0.5)',
             },
         },
         {
@@ -16474,7 +16494,7 @@ var oceanic_next = {
             filter: ['all', ['in', 'class', 'taxiway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#f2853e',
+                'line-color': '#df9797',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -16501,7 +16521,7 @@ var oceanic_next = {
             filter: ['all', ['in', 'class', 'runway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#f2853e',
+                'line-color': '#df9797',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -16527,7 +16547,7 @@ var oceanic_next = {
             filter: ['==', '$type', 'Polygon'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#a6480b',
+                'fill-color': '#bc3a3a',
                 'fill-outline-color': '#cfcdca',
                 'fill-opacity': 0.9,
                 'fill-antialias': false,
@@ -16543,7 +16563,7 @@ var oceanic_next = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -16570,7 +16590,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -16596,7 +16616,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': 'rgba(214,93,14,0.8)',
+                'line-color': 'rgba(205,92,92,0.8)',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -16627,7 +16647,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -16648,7 +16668,7 @@ var oceanic_next = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'primary']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': {
                     stops: [
                         [7, 0],
@@ -16676,7 +16696,7 @@ var oceanic_next = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'trunk']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': {
                     stops: [
                         [5, 0],
@@ -16704,7 +16724,7 @@ var oceanic_next = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16735,7 +16755,7 @@ var oceanic_next = {
                 ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#b48ead',
+                'line-color': '#FFC0CB',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -16756,7 +16776,7 @@ var oceanic_next = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8b5e3c',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16782,7 +16802,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8B5E3C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16807,7 +16827,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#f49456',
+                'line-color': '#e5aaaa',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -16832,7 +16852,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8B5E3C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16856,7 +16876,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8B5E3C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16880,7 +16900,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8B5E3C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16905,7 +16925,7 @@ var oceanic_next = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8b5e3c',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -16928,7 +16948,7 @@ var oceanic_next = {
                 ['all', ['==', 'class', 'rail'], ['has', 'service']],
             ],
             paint: {
-                'line-color': 'rgba(118,51,8,0.7)',
+                'line-color': 'rgba(149,46,46,0.7)',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -16951,7 +16971,7 @@ var oceanic_next = {
             ],
             layout: { visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(118,51,8,0.7)',
+                'line-color': 'rgba(149,46,46,0.7)',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -16980,7 +17000,7 @@ var oceanic_next = {
                 ],
             ],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#952e2e',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -17008,7 +17028,7 @@ var oceanic_next = {
                 ],
             ],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#952e2e',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -17029,7 +17049,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -17055,7 +17075,7 @@ var oceanic_next = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -17077,7 +17097,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -17097,7 +17117,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17118,7 +17138,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d65d0e',
+                'line-color': '#CD5C5C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17142,7 +17162,7 @@ var oceanic_next = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#f17626',
+                'line-color': '#d98383',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17164,7 +17184,7 @@ var oceanic_next = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#b48ead',
+                'line-color': '#FFC0CB',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17184,7 +17204,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8b5e3c',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17209,7 +17229,7 @@ var oceanic_next = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8B5E3C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17230,7 +17250,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8B5E3C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17250,7 +17270,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8B5E3C',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17270,7 +17290,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#ebdbb2',
+                'line-color': '#8b5e3c',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -17289,7 +17309,7 @@ var oceanic_next = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#952e2e',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -17308,7 +17328,7 @@ var oceanic_next = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#763308',
+                'line-color': '#952e2e',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -17328,7 +17348,7 @@ var oceanic_next = {
             filter: ['all', ['in', 'admin_level', 4, 6, 8], ['!=', 'maritime', 1]],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#8fbcbb',
+                'line-color': '#A0522D',
                 'line-dasharray': [3, 1, 1, 1],
                 'line-width': {
                     base: 1.4,
@@ -17348,7 +17368,7 @@ var oceanic_next = {
             filter: ['all', ['==', 'admin_level', 2], ['!=', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#8fbcbb',
+                'line-color': '#A0522D',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -17368,7 +17388,7 @@ var oceanic_next = {
             filter: ['all', ['in', 'admin_level', 2, 4], ['==', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#8fbcbb',
+                'line-color': '#1E90FF',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -18385,9 +18405,9 @@ var oceanic_next = {
     ],
 };
-var solarized = {
+var GruvboxStyle = {
     version: 8,
-    name: 'Solarized',
+    name: 'Gruvbox',
     center: [8.542, 47.372],
     zoom: 11.6,
     bearing: 0,
@@ -18401,7 +18421,7 @@ var solarized = {
     sprite: config.sprite,
     glyphs: config.glyphs,
     layers: [
-        { id: 'background', type: 'background', paint: { 'background-color': '#073642' } },
+        { id: 'background', type: 'background', paint: { 'background-color': '#282822' } },
         {
             id: 'landcover-glacier',
             type: 'fill',
@@ -18411,7 +18431,7 @@ var solarized = {
             filter: ['==', 'subclass', 'glacier'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#2aa198',
+                'fill-color': '#83a598',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -18428,7 +18448,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'residential'],
-            paint: { 'fill-color': '#657b83' },
+            paint: { 'fill-color': '#b8bb26' },
         },
         {
             id: 'landuse-commercial',
@@ -18437,7 +18457,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'commercial']],
-            paint: { 'fill-color': '#74888f' },
+            paint: { 'fill-color': '#bfc23c' },
         },
         {
             id: 'landuse-industrial',
@@ -18446,7 +18466,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['all', ['==', '$type', 'Polygon'], ['==', 'class', 'industrial']],
-            paint: { 'fill-color': '#84959c' },
+            paint: { 'fill-color': '#c6c951' },
         },
         {
             id: 'park',
@@ -18456,7 +18476,7 @@ var solarized = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             paint: {
-                'fill-color': '#859900',
+                'fill-color': '#b8bb26',
                 'fill-opacity': {
                     base: 1.8,
                     stops: [
@@ -18474,7 +18494,7 @@ var solarized = {
             'source-layer': 'park',
             filter: ['==', '$type', 'Polygon'],
             layout: {},
-            paint: { 'line-color': 'rgba(133,153,0,0.6)', 'line-dasharray': [3, 3] },
+            paint: { 'line-color': 'rgba(184,187,38,0.6)', 'line-dasharray': [3, 3] },
         },
         {
             id: 'landuse-cemetery',
@@ -18483,7 +18503,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'cemetery'],
-            paint: { 'fill-color': '#f2ff99' },
+            paint: { 'fill-color': '#eceeaa' },
         },
         {
             id: 'landuse-hospital',
@@ -18492,7 +18512,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'hospital'],
-            paint: { 'fill-color': '#d30102' },
+            paint: { 'fill-color': '#fe8019' },
         },
         {
             id: 'landuse-school',
@@ -18501,7 +18521,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'school'],
-            paint: { 'fill-color': 'rgba(211,1,2,0.8)' },
+            paint: { 'fill-color': 'rgba(254,128,25,0.8)' },
         },
         {
             id: 'landuse-railway',
@@ -18510,7 +18530,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landuse',
             filter: ['==', 'class', 'railway'],
-            paint: { 'fill-color': 'rgba(58,63,144,0.4)' },
+            paint: { 'fill-color': 'rgba(118,51,8,0.4)' },
         },
         {
             id: 'landcover-wood',
@@ -18520,7 +18540,7 @@ var solarized = {
             'source-layer': 'landcover',
             filter: ['==', 'class', 'wood'],
             paint: {
-                'fill-color': '#2aa198',
+                'fill-color': '#83a598',
                 'fill-opacity': 0.1,
                 'fill-outline-color': 'hsla(0, 0%, 0%, 0.03)',
                 'fill-antialias': {
@@ -18539,7 +18559,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'landcover',
             filter: ['==', 'class', 'grass'],
-            paint: { 'fill-color': '#859900', 'fill-opacity': 1 },
+            paint: { 'fill-color': '#b8bb26', 'fill-opacity': 1 },
         },
         {
             id: 'landcover-grass-park',
@@ -18548,7 +18568,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'park',
             filter: ['==', 'class', 'public_park'],
-            paint: { 'fill-color': '#859900', 'fill-opacity': 0.8 },
+            paint: { 'fill-color': '#b8bb26', 'fill-opacity': 0.8 },
         },
         {
             id: 'waterway-other',
@@ -18559,7 +18579,7 @@ var solarized = {
             filter: ['!in', 'class', 'canal', 'river', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#268bd2',
+                'line-color': '#83a598',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -18578,7 +18598,7 @@ var solarized = {
             filter: ['in', 'class', 'canal', 'stream'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#268bd2',
+                'line-color': '#83a598',
                 'line-width': {
                     base: 1.3,
                     stops: [
@@ -18597,7 +18617,7 @@ var solarized = {
             filter: ['==', 'class', 'river'],
             layout: { 'line-cap': 'round' },
             paint: {
-                'line-color': '#268bd2',
+                'line-color': '#83a598',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -18618,7 +18638,7 @@ var solarized = {
             layout: { visibility: 'visible' },
             paint: {
                 'fill-opacity': 1,
-                'fill-color': '#268bd2',
+                'fill-color': '#83a598',
                 'fill-translate': {
                     base: 1,
                     stops: [
@@ -18635,7 +18655,7 @@ var solarized = {
             source: 'openmaptiles',
             'source-layer': 'water',
             layout: { visibility: 'visible' },
-            paint: { 'fill-color': '#1a6091' },
+            paint: { 'fill-color': '#5c7f72' },
         },
         {
             id: 'water-pattern',
@@ -18655,7 +18675,7 @@ var solarized = {
             filter: ['==', 'subclass', 'ice_shelf'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#2aa198',
+                'fill-color': '#83a598',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -18671,7 +18691,7 @@ var solarized = {
             metadata: { 'mapbox:group': '1444849364238.8171' },
             source: 'openmaptiles',
             'source-layer': 'building',
-            paint: { 'fill-color': '#eee8d5', 'fill-antialias': true },
+            paint: { 'fill-color': '#928374', 'fill-antialias': true },
         },
         {
             id: 'building-top',
@@ -18689,7 +18709,7 @@ var solarized = {
                     ],
                 },
                 'fill-outline-color': '#dfdbd7',
-                'fill-color': '#fdfcf9',
+                'fill-color': '#a89c91',
                 'fill-opacity': {
                     base: 1,
                     stops: [
@@ -18708,7 +18728,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#d65d0e',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -18729,7 +18749,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#d65d0e',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -18756,7 +18776,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -18776,7 +18796,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -18797,7 +18817,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-dasharray': [0.5, 0.25],
                 'line-width': {
                     base: 1.2,
@@ -18822,7 +18842,7 @@ var solarized = {
                 ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#9094d3',
+                'line-color': '#f17626',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -18842,7 +18862,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'service', 'track']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#9094d3',
+                'line-color': '#f17626',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -18862,7 +18882,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'minor_road']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#9094d3',
+                'line-color': '#f17626',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -18883,7 +18903,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#a3a6da',
+                'line-color': '#f2853e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -18903,7 +18923,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -18923,7 +18943,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(108,113,196,0.8)',
+                'line-color': 'rgba(235,219,178,0.8)',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -18942,7 +18962,7 @@ var solarized = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'tunnel'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#3a3f90',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -18964,7 +18984,7 @@ var solarized = {
             filter: ['all', ['in', 'class', 'taxiway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#3a3f90',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -18985,7 +19005,7 @@ var solarized = {
             filter: ['all', ['in', 'class', 'runway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#3a3f90',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -19013,7 +19033,7 @@ var solarized = {
                         [14, 1],
                     ],
                 },
-                'fill-color': 'rgba(108,113,196,0.5)',
+                'fill-color': 'rgba(214,93,14,0.5)',
             },
         },
         {
@@ -19026,7 +19046,7 @@ var solarized = {
             filter: ['all', ['in', 'class', 'taxiway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#a3a6da',
+                'line-color': '#f2853e',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -19053,7 +19073,7 @@ var solarized = {
             filter: ['all', ['in', 'class', 'runway'], ['==', '$type', 'LineString']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#a3a6da',
+                'line-color': '#f2853e',
                 'line-width': {
                     base: 1.5,
                     stops: [
@@ -19079,7 +19099,7 @@ var solarized = {
             filter: ['==', '$type', 'Polygon'],
             layout: { visibility: 'visible' },
             paint: {
-                'fill-color': '#484fb5',
+                'fill-color': '#a6480b',
                 'fill-outline-color': '#cfcdca',
                 'fill-opacity': 0.9,
                 'fill-antialias': false,
@@ -19095,7 +19115,7 @@ var solarized = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -19122,7 +19142,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -19148,7 +19168,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': 'rgba(108,113,196,0.8)',
+                'line-color': 'rgba(214,93,14,0.8)',
                 'line-opacity': {
                     stops: [
                         [12, 0],
@@ -19179,7 +19199,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -19200,7 +19220,7 @@ var solarized = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'primary']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': {
                     stops: [
                         [7, 0],
@@ -19228,7 +19248,7 @@ var solarized = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['in', 'class', 'trunk']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': {
                     stops: [
                         [5, 0],
@@ -19256,7 +19276,7 @@ var solarized = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway']],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19287,7 +19307,7 @@ var solarized = {
                 ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#cb4b16',
+                'line-color': '#fe8019',
                 'line-dasharray': [1.5, 0.75],
                 'line-width': {
                     base: 1.2,
@@ -19308,7 +19328,7 @@ var solarized = {
             filter: ['all', ['!in', 'brunnel', 'bridge', 'tunnel'], ['==', 'class', 'motorway_link']],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19334,7 +19354,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19359,7 +19379,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#e58ab6',
+                'line-color': '#f49456',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -19384,7 +19404,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19408,7 +19428,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19432,7 +19452,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19457,7 +19477,7 @@ var solarized = {
             ],
             layout: { 'line-cap': 'round', 'line-join': 'round', visibility: 'visible' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19480,7 +19500,7 @@ var solarized = {
                 ['all', ['==', 'class', 'rail'], ['has', 'service']],
             ],
             paint: {
-                'line-color': 'rgba(58,63,144,0.7)',
+                'line-color': 'rgba(118,51,8,0.7)',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -19503,7 +19523,7 @@ var solarized = {
             ],
             layout: { visibility: 'visible' },
             paint: {
-                'line-color': 'rgba(58,63,144,0.7)',
+                'line-color': 'rgba(118,51,8,0.7)',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -19532,7 +19552,7 @@ var solarized = {
                 ],
             ],
             paint: {
-                'line-color': '#3a3f90',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -19560,7 +19580,7 @@ var solarized = {
                 ],
             ],
             paint: {
-                'line-color': '#3a3f90',
+                'line-color': '#763308',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -19581,7 +19601,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -19607,7 +19627,7 @@ var solarized = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -19629,7 +19649,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-opacity': 1,
                 'line-width': {
                     base: 1.2,
@@ -19649,7 +19669,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19670,7 +19690,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#d33682',
+                'line-color': '#d65d0e',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19694,7 +19714,7 @@ var solarized = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#9094d3',
+                'line-color': '#f17626',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19716,7 +19736,7 @@ var solarized = {
                 ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'path']],
             ],
             paint: {
-                'line-color': '#cb4b16',
+                'line-color': '#fe8019',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19736,7 +19756,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway_link']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19761,7 +19781,7 @@ var solarized = {
             ],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19782,7 +19802,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'secondary', 'tertiary']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19802,7 +19822,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['in', 'class', 'primary', 'trunk']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19822,7 +19842,7 @@ var solarized = {
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'motorway']],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#6c71c4',
+                'line-color': '#ebdbb2',
                 'line-width': {
                     base: 1.2,
                     stops: [
@@ -19841,7 +19861,7 @@ var solarized = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#3a3f90',
+                'line-color': '#763308',
                 'line-width': {
                     base: 1.4,
                     stops: [
@@ -19860,7 +19880,7 @@ var solarized = {
             'source-layer': 'transportation',
             filter: ['all', ['==', 'brunnel', 'bridge'], ['==', 'class', 'rail']],
             paint: {
-                'line-color': '#3a3f90',
+                'line-color': '#763308',
                 'line-dasharray': [0.2, 8],
                 'line-width': {
                     base: 1.4,
@@ -19880,7 +19900,7 @@ var solarized = {
             filter: ['all', ['in', 'admin_level', 4, 6, 8], ['!=', 'maritime', 1]],
             layout: { 'line-join': 'round' },
             paint: {
-                'line-color': '#268bd2',
+                'line-color': '#fb4934',
                 'line-dasharray': [3, 1, 1, 1],
                 'line-width': {
                     base: 1.4,
@@ -19900,7 +19920,7 @@ var solarized = {
             filter: ['all', ['==', 'admin_level', 2], ['!=', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#268bd2',
+                'line-color': '#fb4934',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -19920,7 +19940,7 @@ var solarized = {
             filter: ['all', ['in', 'admin_level', 2, 4], ['==', 'maritime', 1]],
             layout: { 'line-cap': 'round', 'line-join': 'round' },
             paint: {
-                'line-color': '#268bd2',
+                'line-color': '#83a598',
                 'line-width': {
                     base: 1,
                     stops: [
@@ -20937,6 +20957,37 @@ var solarized = {
     ],
 };
+var defaultStyleThumbnailPath = 'https://mapcomponents.github.io/react-map-components-maplibre/assets/style_thumbnails/';
+var SelectStyleButton = function (props) {
+    var layerContext = React__default["default"].useContext(LayerContext);
+    var _a = React__default["default"].useState(false), popupOpen = _a[0], setPopupOpen = _a[1];
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(material.Button, { variant: "contained", sx: __assign({ marginTop: '10px' }, props.sx), onClick: function () { return setPopupOpen(true); } },
+            React__default["default"].createElement(WallpaperIcon__default["default"], null)),
+        React__default["default"].createElement(SelectStylePopup, { styles: __spreadArray(__spreadArray([], (props.defaultStyles
+                ? [MonokaiStyle, SolarizedStyle, OceanicNextStyle, MedievalKingdomStyle, GruvboxStyle]
+                : []), true), (props.styles || []), true), styleThumbnailPaths: __assign(__assign({}, props === null || props === void 0 ? void 0 : props.styleThumbnailPaths), (props.defaultStyles
+                ? {
+                    Monokai: defaultStyleThumbnailPath + 'monokai.png',
+                    Gruvbox: defaultStyleThumbnailPath + 'gruvbox.png',
+                    'Oceanic Next': defaultStyleThumbnailPath + 'oceanic_next.png',
+                    Solarized: defaultStyleThumbnailPath + 'solarized.png',
+                    'Medieval Kingdom': defaultStyleThumbnailPath + 'medieval_kingdom.png',
+                }
+                : {})), open: popupOpen, setOpen: setPopupOpen, onSelect: function (style) {
+                // Todo: should be possible without clearing bg layers first & setTimeout
+                layerContext.setBackgroundLayers([]);
+                setTimeout(function () {
+                    layerContext.updateStyle(style);
+                }, 100);
+                setPopupOpen(false);
+            } })));
+};
+SelectStyleButton.defaultProps = {
+    style: [],
+    defaultStyles: true,
+};
 exports.AddLayerButton = AddLayerButton;
 exports.AddLayerPopup = AddLayerPopup;
 exports.ColorPicker = PaintPropsColorPicker;
@@ -20944,7 +20995,7 @@ exports.ConfirmDialog = ConfirmDialog;
 exports.GeoJsonContext = GeoJsonContext;
 exports.GeoJsonLayerForm = GeoJsonLayerForm;
 exports.GeoJsonProvider = GeoJsonProvider;
-exports.GruvboxStyle = gruvbox;
+exports.GruvboxStyle = GruvboxStyle;
 exports.LayerContext = LayerContext;
 exports.LayerContextProvider = LayerContextProvider;
 exports.LayerList = LayerList;
@@ -20958,7 +21009,7 @@ exports.MapComponentsProvider = MapComponentsProvider;
 exports.MapContext = MapContext;
 exports.MapLibreGlWrapper = MapLibreGlWrapper;
 exports.MapLibreMap = MapLibreMap;
-exports.MedievalKingdomStyle = medieval_kingdom;
+exports.MedievalKingdomStyle = MedievalKingdomStyle;
 exports.MlBasicComponent = MlBasicComponent;
 exports.MlCenterPosition = MlCenterPosition;
 exports.MlComponentTemplate = MlComponentTemplate;
@@ -20989,8 +21040,8 @@ exports.MlVectorTileLayer = MlVectorTileLayer;
 exports.MlWmsFeatureInfoPopup = MlWmsFeatureInfoPopup;
 exports.MlWmsLayer = MlWmsLayer;
 exports.MlWmsLoader = MlWmsLoader;
-exports.MonokaiStyle = GruvboxStyle;
-exports.OceanicNextStyle = oceanic_next;
+exports.MonokaiStyle = MonokaiStyle;
+exports.OceanicNextStyle = OceanicNextStyle;
 exports.PdfContext = PdfContext;
 exports.PdfForm = PdfForm;
 exports.SelectStyleButton = SelectStyleButton;
@@ -20998,7 +21049,7 @@ exports.SelectStylePopup = SelectStylePopup;
 exports.Sidebar = Sidebar;
 exports.SimpleDataContext = SimpleDataContext;
 exports.SimpleDataProvider = SimpleDataProvider;
-exports.SolarizedStyle = solarized;
+exports.SolarizedStyle = SolarizedStyle;
 exports.TopToolbar = TopToolbar;
 exports.UploadButton = UploadButton;
 exports.WmsLayerForm = WmsLayerForm;