@redus/georedus-ui 0.19.5 → 0.20.0

package/dist/main.js

@@ -1,26 +1,26 @@
-import { get, isPlainObject, pick, omit, set, uniqBy, groupBy, sortBy, uniq } from 'lodash';
+import { isPlainObject, pick, omit, set, get as get$1, uniqBy, groupBy, sortBy, uniq } from 'lodash';
 import { slugify, dataJoin, interpolate } from '@orioro/util';
 import { makeResolve, $$literal, withExpressionResolvers, expressions, ALL_EXPR, fetchExpr, resolve, resolveAsync } from '@orioro/resolve';
 import { __assign, __spreadArray, __awaiter, __generator, __makeTemplateObject } from 'tslib';
 import { schemeTableau10, schemeSet3, schemeSet2, schemeSet1, schemePastel2, schemePastel1, schemePaired, schemeObservable10, schemeDark2, schemeAccent, schemeCategory10, schemeSpectral, schemeRdYlGn, schemeRdYlBu, schemeRdGy, schemeRdBu, schemePuOr, schemePiYG, schemePRGn, schemeBrBG, schemeYlOrRd, schemeYlOrBr, schemeYlGn, schemeYlGnBu, schemeRdPu, schemePuRd, schemePuBu, schemePuBuGn, schemeOrRd, schemeGnBu, schemeBuPu, schemeBuGn, schemeReds, schemePurples, schemeOranges, schemeGreys, schemeGreens, schemeBlues, interpolateSpectral } from 'd3-scale-chromatic';
-import { saveAs } from 'file-saver';
-import { CANCELLED, fileReadAs, AspectRatio, LoadingIndicator, Flex, Box, RichTextOutput, EvenSpacedList, FileOutput, MARKDOWN_DEFAULT_REMARK_PLUGINS, MARKDOWN_DEFAULT_REHYPE_PLUGINS, Markdown as Markdown$1, DropdownMenu, Input, SwitchInput, TextEllipsis, withDefaults, LoadingOverlay, Button, SingleFileInput, InputProvider as InputProvider$1, rendererSpecList, TextInput, withLabeledLayout, INPUTS, useLocalState } from '@orioro/react-ui-core';
+import { get } from '@orioro/get';
+import { saveAs as saveAs$1 } from 'file-saver';
+import { CANCELLED, fileReadAs, Flex, AspectRatio, LoadingIndicator, Box, RichTextOutput, EvenSpacedList, FileOutput, MARKDOWN_DEFAULT_REMARK_PLUGINS, MARKDOWN_DEFAULT_REHYPE_PLUGINS, Markdown as Markdown$1, DropdownMenu, Input, SwitchInput, TextEllipsis, withDefaults, Button, LoadingOverlay, SingleFileInput, InputProvider as InputProvider$1, rendererSpecList, TextInput, withLabeledLayout, INPUTS, useLocalState } from '@orioro/react-ui-core';
 import initGdalJs from 'gdal3.js';
 import queryString from 'query-string';
 import { wrap } from 'comlink';
 import { dataMergeProtocol } from '@orioro/vector-tile-util';
 import maplibregl from 'maplibre-gl';
-import { get as get$1 } from '@orioro/get';
 import { buffer } from '@turf/turf';
 import { scaleQuantile } from 'd3-scale';
-import { fmtLayerAbsoluteId, waves_1, makeSyncedMaps, LayeredMap, svgImageGenerator, SVG_PATTERNS, useMapRegistry, useTilesLoading, HoverTooltip, layeredMapOnClickHandler, DynamicImages, ControlContainer, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
+import { SVG_PATTERNS, fmtLayerAbsoluteId, waves_1, ControlContainer, LayeredMap, makeSyncedMaps, svgImageGenerator, useMapRegistry, useTilesLoading, HoverTooltip, layeredMapOnClickHandler, DynamicImages, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
+import { cast, strAutoCast } from '@orioro/cast';
 import { csvParse } from 'd3-dsv';
-import { strAutoCast } from '@orioro/cast';
-import React$1, { useState, useMemo, useCallback, useContext, createContext, memo, useReducer, useEffect, useRef } from 'react';
+import React$1, { useState, useMemo, useCallback, useContext, createContext, useRef, useEffect, forwardRef, useImperativeHandle, memo, useReducer } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { colord } from 'colord';
-import { Heading, Portal, Badge, Tabs, Tooltip, IconButton, Theme, Text, Popover, Dialog } from '@radix-ui/themes';
-import { mdiSprout, mdiTree, mdiCurrencyUsd, mdiAccountMultipleOutline, mdiScaleBalance, mdiHelpCircleOutline, mdiDownload, mdiDotsVertical, mdiOpacity, mdiFilterVariant, mdiBookOpenVariant, mdiMap, mdiEarth, mdiHospitalBox, mdiHomeCity, mdiSchool, mdiAccountGroup, mdiContentCopy, mdiLinkVariant, mdiChevronLeft, mdiShareVariantOutline, mdiForumOutline, mdiDragVertical, mdiLayers, mdiClose, mdiHospital } from '@mdi/js';
+import { Heading, Portal, Badge, Tabs, Tooltip, IconButton, Theme, Text, Popover, Strong } from '@radix-ui/themes';
+import { mdiSprout, mdiTree, mdiCurrencyUsd, mdiAccountMultipleOutline, mdiScaleBalance, mdiHelpCircleOutline, mdiDownload, mdiDotsVertical, mdiOpacity, mdiFilterVariant, mdiBookOpenVariant, mdiMap, mdiEarth, mdiHospitalBox, mdiHomeCity, mdiSchool, mdiAccountGroup, mdiContentCopy, mdiLinkVariant, mdiNavigation, mdiChevronLeft, mdiForumOutline, mdiShareVariantOutline, mdiDragVertical, mdiLayers, mdiClose, mdiHospital } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import Confetti from 'react-confetti';
 import { nodeIdFromPath } from '@orioro/tree-model';
@@ -35,12 +35,15 @@ import { CsvImportDialog } from '@orioro/react-csv';
 import Highlighter from 'react-highlight-words';
 import { LinkedinShareButton, LinkedinIcon, EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, WhatsappShareButton, WhatsappIcon } from 'react-share';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import { Legend } from '@orioro/react-chart-util';
+import QRCode from 'react-qr-code';
+import { useMap, useControl, AttributionControl, ScaleControl, GeolocateControl, FullscreenControl, NavigationControl } from 'react-map-gl/maplibre';
+import { createPortal } from 'react-dom';
+import { toBlob } from 'html-to-image';
 import { makeSortableMultiList } from '@orioro/react-sortable';
 import '@maplibre/maplibre-gl-inspect/dist/maplibre-gl-inspect.css';
-import { Legend } from '@orioro/react-chart-util';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useQueries, useQuery } from '@tanstack/react-query';
-import { AttributionControl, GeolocateControl, FullscreenControl, NavigationControl, ScaleControl, useMap } from 'react-map-gl/maplibre';
 import { pointToTile, tileToBBOX } from '@mapbox/tilebelt';
 
 function _arrayLikeToArray(r, a) {
@@ -180,6 +183,9 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -2931,7 +2937,10 @@ var D3_SEQUENTIAL = {
   schemeYlOrBr: schemeYlOrBr,
   schemeYlOrRd: schemeYlOrRd
 };
-var COLOR_SCHEMES = __assign(__assign(__assign(__assign(__assign({}, _objMap(D3_CATEGORICAL, function (_a) {
+var SCHEME_GEOREDUS = ['#FF7F00', '#CAB2D6', '#FFE551', '#39BBA7', '#FB9A99', '#B15928', '#FDBF6F', '#DA5AD8', '#B4B282', '#6A3D9A'];
+var D3_COLOR_SCHEMES = __assign(__assign(__assign(__assign(__assign({
+  schemeGeoReDUS: SCHEME_GEOREDUS
+}, _objMap(D3_CATEGORICAL, function (_a) {
   var id = _a[0],
     scheme = _a[1];
   return [id, _categoricalScheme(scheme)];
@@ -2952,6 +2961,96 @@ var COLOR_SCHEMES = __assign(__assign(__assign(__assign(__assign({}, _objMap(D3_
     scheme = _a[1];
   return ["-".concat(id), _reverseByKScheme(scheme)];
 }));
+
+var GEOREDUS_LABELED_SAFE_COLORS = {
+  laranja: {
+    label: 'Laranja',
+    value: '#FF7F00'
+  },
+  lilas: {
+    label: 'Lilás',
+    value: '#CAB2D6'
+  },
+  amarelo: {
+    label: 'Amarelo',
+    value: '#FFE551'
+  },
+  verde_agua: {
+    label: 'Verde-água',
+    value: '#39BBA7'
+  },
+  vermelho_claro: {
+    label: 'Vermelho claro',
+    value: '#FB9A99'
+  },
+  marrom: {
+    label: 'Marrom',
+    value: '#B15928'
+  },
+  laranja_claro: {
+    label: 'Laranja claro',
+    value: '#FDBF6F'
+  },
+  rosa: {
+    label: 'Rosa',
+    value: '#DA5AD8'
+  },
+  verde_marrom: {
+    label: 'Verde-marrom',
+    value: '#B4B282'
+  },
+  roxo: {
+    label: 'Roxo',
+    value: '#6A3D9A'
+  }
+};
+var GEOREDUS_LABELED_RESTRICTED_USE_COLORS = {
+  azul_claro: {
+    label: 'Azul claro',
+    value: '#A6CEE3'
+  },
+  azul: {
+    label: 'Azul',
+    value: '#1F78B4'
+  },
+  verde_claro: {
+    label: 'Verde claro',
+    value: '#B2DF8A'
+  },
+  verde: {
+    label: 'Verde',
+    value: '#33A02C'
+  },
+  vermelho: {
+    label: 'Vermelho',
+    value: '#E31A1C'
+  },
+  cinza_claro: {
+    label: 'Cinza claro',
+    value: '#CCCCCC'
+  },
+  cinza: {
+    label: 'Cinza',
+    value: '#828282'
+  }
+};
+var GEOREDUS_LABELED_COLORS = __assign(__assign({}, GEOREDUS_LABELED_SAFE_COLORS), GEOREDUS_LABELED_RESTRICTED_USE_COLORS);
+var schemeGeoReDUS = Object.fromEntries(Object.entries(GEOREDUS_LABELED_COLORS).map(function (_a) {
+  var key = _a[0],
+    value = _a[1].value;
+  return [key, value];
+}));
+var schemeGeoReDUSSafe = Object.fromEntries(Object.entries(GEOREDUS_LABELED_SAFE_COLORS).map(function (_a) {
+  var key = _a[0],
+    value = _a[1].value;
+  return [key, value];
+}));
+var GEOREDUS_COLOR_SCHEMES = {
+  schemeGeoReDUS: schemeGeoReDUS,
+  schemeGeoReDUSSafe: schemeGeoReDUSSafe
+};
+
+var COLOR_SCHEMES = __assign(__assign({}, D3_COLOR_SCHEMES), GEOREDUS_COLOR_SCHEMES);
 function colorScheme(path) {
   var scheme = get(COLOR_SCHEMES, path);
   if (!scheme) {
@@ -2959,6 +3058,13 @@ function colorScheme(path) {
   }
   return scheme;
 }
+function resolveColor(colorInput) {
+  return colorInput ? get(COLOR_SCHEMES, colorInput) || colorInput : colorInput;
+}
+function resolveSchemeColor(colorSchemeId, indexOrId) {
+  var colorScheme = COLOR_SCHEMES[colorSchemeId];
+  return typeof indexOrId === 'string' ? colorScheme[indexOrId] : (Array.isArray(colorScheme) ? colorScheme : Object.values(colorScheme))[indexOrId];
+}
 
 //
 // Formats the filter to be a compatible searchParams for fetching
@@ -3267,7 +3373,7 @@ var _b = makeResolve({
   resolveExprAsync = _b.resolveAsync,
   resolveExpr = _b.resolve;
 
-var EXTENSIONS_BY_FORMAT = {
+var EXTENSIONS_BY_FORMAT$1 = {
   GeoJSON: 'geojson',
   GPKG: 'gpkg',
   CSV: 'csv',
@@ -3398,9 +3504,9 @@ function downloadResolver(downloadConf) {
                         });
                       case 10:
                         blob = _context.sent;
-                        saveAs(blob, "".concat(typeof fileNameBase === 'function' ? fileNameBase({
+                        saveAs$1(blob, "".concat(typeof fileNameBase === 'function' ? fileNameBase({
                           options: options
-                        }) : fileNameBase, ".").concat(EXTENSIONS_BY_FORMAT[options.format]));
+                        }) : fileNameBase, ".").concat(EXTENSIONS_BY_FORMAT$1[options.format]));
                         _context.next = 19;
                         break;
                       case 14:
@@ -3540,7 +3646,7 @@ function influenceAreaMetadata(_a) {
     getGeoJson = _c === void 0 ? _defaultGetGeoJson : _c,
     _d = _b.getConf,
     getConf = _d === void 0 ? function (context) {
-      return get$1(context, 'view.conf.data') || {};
+      return get(context, 'view.conf.data') || {};
     } : _d;
   return {
     influenceArea: resolveAsync.fn(function (context) {
@@ -3631,12 +3737,12 @@ function influenceAreaLayers(_a) {
   };
 }
 
-var _excluded$9 = ["version"];
+var _excluded$e = ["version"];
 function tableVectorSource(context, tableId) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
     _ref$version = _ref.version,
     version = _ref$version === void 0 ? '1' : _ref$version,
-    override = _objectWithoutProperties(_ref, _excluded$9);
+    override = _objectWithoutProperties(_ref, _excluded$e);
   var VECTOR_TILE_SERVER_ENDPOINT = context.VECTOR_TILE_SERVER_ENDPOINT;
   return _objectSpread2({
     type: 'vector',
@@ -3818,7 +3924,7 @@ function numerical_size$1(base, _ref) {
           minSize: SIZE_MIN,
           maxSize: SIZE_MAX
         }), 10],
-        'circle-color': get(COLOR_SCHEMES, color_scheme) || color_scheme
+        'circle-color': get$1(COLOR_SCHEMES, color_scheme) || color_scheme
       }
     })))
   });
@@ -3839,7 +3945,7 @@ function categorical$1(base, _ref) {
   var VECTOR_SOURCE_ID = "".concat(TABLE_ID, ".geom");
   categories = categories ? categories.map(function (category) {
     return _objectSpread2(_objectSpread2({}, category), {}, {
-      color: get(COLOR_SCHEMES, category.color) || category.color
+      color: get$1(COLOR_SCHEMES, category.color) || category.color
     });
   }) : null;
   return _objectSpread2(_objectSpread2({}, base), {}, {
@@ -4014,11 +4120,11 @@ function cem_escolas_2022(config, allViewSpecs, context) {
       zIndex: Z_OVERLAY_MIDDLE_2000,
       dataPath: 'view.metadata.influenceArea',
       fillPaint: {
-        'fill-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
+        'fill-color': get$1(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
         'fill-opacity': 0.3
       },
       boundaryPaint: {
-        'line-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
+        'line-color': get$1(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
         'line-opacity': 0.8,
         'line-width': 2,
         'line-dasharray': [2, 2]
@@ -4278,7 +4384,7 @@ function chartUtil(viewSpec, allViewSpecs, context) {
 }
 
 var DEFAULT_BUFFER_SIZE$1 = 200;
-function confSchema(viewSpec, allViewSpecs, context, _ref) {
+function confSchema$4(viewSpec, allViewSpecs, context, _ref) {
   var PARSED_SCHEMA = _ref.PARSED_SCHEMA;
   var variable_id = viewSpec.variable_id;
   return {
@@ -4414,7 +4520,7 @@ var _resolveSourceBounds = resolve.fn(function (context) {
     return UNBOUNDED_BOUNDS;
   }
 });
-function metadata$3(viewSpec, allViewSpecs, context, _ref2) {
+function metadata$8(viewSpec, allViewSpecs, context, _ref2) {
   var PARSED_SCHEMA = _ref2.PARSED_SCHEMA,
     DATA_UTIL = _ref2.DATA_UTIL,
     CHART_UTIL = _ref2.CHART_UTIL;
@@ -4546,7 +4652,7 @@ function dataUtil(viewSpec, allViewSpecs, context, _ref) {
   var PARSED_SCHEMA = _ref.PARSED_SCHEMA;
   var METADATA_API_ENDPOINT = context.METADATA_API_ENDPOINT;
   var _resolveDataUrl = resolve.fn(function (context) {
-    var _variableId = get$1(context, 'view.conf.data.variableId');
+    var _variableId = get(context, 'view.conf.data.variableId');
     var _variant = PARSED_SCHEMA.variantsByVariableId[_variableId];
     var url = "".concat(METADATA_API_ENDPOINT, "/").concat(_variant.source_table_id, "?").concat($urlSearch([{
       select: ['cd_setor', _variableId].join(','),
@@ -4811,7 +4917,7 @@ function setor_censitario(viewSpec, allViewSpecs, context, _ref) {
     promoteId: 'cd_setor',
     bounds: _resolveSourceBounds,
     tiles: [resolve.fn(function (context) {
-      var _variableId = get$1(context, 'view.conf.data.variableId');
+      var _variableId = get(context, 'view.conf.data.variableId');
       var _variant = PARSED_SCHEMA.variantsByVariableId[_variableId];
       return ['$vtxUrl', {
         tiles: "".concat(VECTOR_TILE_SERVER_ENDPOINT, "/dvt/{z}/{x}/{y}?").concat($urlSearch([{
@@ -4875,7 +4981,7 @@ function setor_censitario(viewSpec, allViewSpecs, context, _ref) {
   };
 }
 
-function download$1(viewSpec, allViewSpecs, context, _ref) {
+function download$6(viewSpec, allViewSpecs, context, _ref) {
   var PARSED_SCHEMA = _ref.PARSED_SCHEMA;
   var METADATA_API_ENDPOINT = context.METADATA_API_ENDPOINT;
   return downloadResolver({
@@ -4945,7 +5051,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
     PARSED_SCHEMA: PARSED_SCHEMA,
     DATA_UTIL: DATA_UTIL
   });
-  var DOWNLOAD = download$1(viewSpec, allViewSpecs, context, {
+  var DOWNLOAD = download$6(viewSpec, allViewSpecs, context, {
     PARSED_SCHEMA: PARSED_SCHEMA
   });
   return {
@@ -4957,10 +5063,10 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
     sourceLabel: PARSED_SCHEMA.sourceLabel,
     keywords: PARSED_SCHEMA.keywords,
     viewType: VIEW_TYPE_SURFACE_CHOROPLETH,
-    confSchema: confSchema(viewSpec, allViewSpecs, context, {
+    confSchema: confSchema$4(viewSpec, allViewSpecs, context, {
       PARSED_SCHEMA: PARSED_SCHEMA
     }),
-    metadata: metadata$3(viewSpec, allViewSpecs, context, {
+    metadata: metadata$8(viewSpec, allViewSpecs, context, {
       PARSED_SCHEMA: PARSED_SCHEMA,
       CHART_UTIL: CHART_UTIL,
       DATA_UTIL: DATA_UTIL
@@ -4978,7 +5084,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
   };
 }
 
-function download(context, _ref) {
+function download$5(context, _ref) {
   var PARSED_SCHEMA = _ref.PARSED_SCHEMA;
   var METADATA_API_ENDPOINT = context.METADATA_API_ENDPOINT;
   return downloadResolver({
@@ -5098,7 +5204,7 @@ function _defaultMetadata() {
           GLOBAL_CONTEXT = _ref2.GLOBAL_CONTEXT, PARSED_SCHEMA = _ref2.PARSED_SCHEMA;
           METADATA_API_ENDPOINT = GLOBAL_CONTEXT.METADATA_API_ENDPOINT; // Load data on the municipio
           municipioId = context.app.municipioId;
-          variableId = get$1(context, 'view.conf.data.variableId');
+          variableId = get(context, 'view.conf.data.variableId');
           variant = PARSED_SCHEMA.variantsByVariableId[variableId]; //
           // The rawDataCacheUrl should be shared with following pipeline steps
           // so that it may be effectively cached
@@ -5113,7 +5219,7 @@ function _defaultMetadata() {
           return vtx.memoFetchData(rawDataCacheUrl);
         case 8:
           rawData = _context.sent;
-          scaleValues = get$1(rawData, "[].".concat(variableId));
+          scaleValues = get(rawData, "[].".concat(variableId));
           colorScheme = _censoColorScheme(variant.colorScheme);
           colorScaleStops = variant.classificationMethod === 'quantile(5)' ? _quantileBreakpoints(_objectSpread2({
             k: 5,
@@ -5339,7 +5445,7 @@ function customGeoJson_layers(opts) {
   };
 }
 
-function metadata$2(opts) {
+function metadata$7(opts) {
   return resolveAsync.fn(/*#__PURE__*/function () {
     var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(context) {
       var _context$view;
@@ -5385,7 +5491,7 @@ function buildings_sources(_ref) {
     minzoom: BUILDINGS_MIN_ZOOM,
     maxzoom: BUILDINGS_MIN_ZOOM,
     tiles: [resolve.fn(function (context) {
-      var variableId = get$1(context, 'view.conf.data.variableId');
+      var variableId = get(context, 'view.conf.data.variableId');
       var variant = PARSED_SCHEMA.variantsByVariableId[variableId];
       return ['$vtxUrl', {
         tiles: "".concat(VECTOR_TILE_SERVER_ENDPOINT, "/").concat(BUILDINGS_SOURCE_ID, "/{z}/{x}/{y}"),
@@ -5487,7 +5593,7 @@ function setor_censitario_sources(_ref2) {
     // bounds: ['$get', 'view.metadata.municipioData.group_bbox'],
     promoteId: 'id',
     tiles: [resolve.fn(function (context) {
-      var variableId = get$1(context, 'view.conf.data.variableId');
+      var variableId = get(context, 'view.conf.data.variableId');
       var variant = PARSED_SCHEMA.variantsByVariableId[variableId];
       return ['$vtxUrl', {
         tiles: "".concat(VECTOR_TILE_SERVER_ENDPOINT, "/").concat(SETOR_CENSITARIO_SOURCE_ID, "/{z}/{x}/{y}"),
@@ -5533,8 +5639,8 @@ function setor_censitario_layers(opts) {
     tooltip: {
       title: ['$literal', ['$template', 'Setor censitário ${0}', ['$get', 'feature.properties.id']]],
       entries: ['$literal', resolve.fn(function (context) {
-        var variableId = get$1(context, 'view.conf.data.variableId');
-        var variableLabel = get$1(context, "view.metadata.labels.".concat(variableId));
+        var variableId = get(context, 'view.conf.data.variableId');
+        var variableLabel = get(context, "view.metadata.labels.".concat(variableId));
         var mainValueDisplay;
         if (variableId === 'total_pessoas_por_km2') {
           try {
@@ -5545,7 +5651,7 @@ function setor_censitario_layers(opts) {
             mainValueDisplay = null;
           }
         } else {
-          var value = get$1(context, 'feature.properties.value');
+          var value = get(context, 'feature.properties.value');
           var isPercentage = variableId.endsWith('_2'); // _2 is the new suffix to indicate percentage variables
           var format = isPercentage ? {
             style: 'percent'
@@ -5598,7 +5704,7 @@ function setor_censitario_layers(opts) {
     filter: _filter,
     paint: {
       'line-color': resolve.fn(function (context) {
-        var variableId = get$1(context, 'view.conf.data.variableId');
+        var variableId = get(context, 'view.conf.data.variableId');
         var variant = PARSED_SCHEMA.variantsByVariableId[variableId];
         return _censoColorScheme(variant.colorScheme).scalesByK[3][2];
       }),
@@ -5613,7 +5719,7 @@ function setor_censitario_layers(opts) {
 }
 
 var intramun = {
-  metadata: metadata$2,
+  metadata: metadata$7,
   sources: function sources(opts) {
     return _objectSpread2(_objectSpread2(_objectSpread2({}, setor_censitario_sources(opts)), buildings_sources(opts)), customGeoJson_sources());
   },
@@ -5623,7 +5729,7 @@ var intramun = {
 };
 
 var DEFAULT_COLOR_SCHEME$1 = COLOR_SCHEMES.schemeOranges;
-function metadata$1(_ref) {
+function metadata$6(_ref) {
   var GLOBAL_CONTEXT = _ref.GLOBAL_CONTEXT,
     PARSED_SCHEMA = _ref.PARSED_SCHEMA;
   var METADATA_API_ENDPOINT = GLOBAL_CONTEXT.METADATA_API_ENDPOINT;
@@ -5653,7 +5759,7 @@ function metadata$1(_ref) {
             }
             throw new Error("Municipio not found: ".concat(municipioId));
           case 9:
-            variableId = get$1(context, 'view.conf.data.variableId');
+            variableId = get(context, 'view.conf.data.variableId');
             variant = PARSED_SCHEMA.variantsByVariableId[variableId]; //
             // The rawDataCacheUrl should be shared with following pipeline steps
             // so that it may be effectively cached
@@ -5671,7 +5777,7 @@ function metadata$1(_ref) {
             //
             // Use values for the focusMunicipio to build the scale
             //
-            scaleValues = get$1(rawData, "[].".concat(variableId));
+            scaleValues = get(rawData, "[].".concat(variableId));
             colorScheme = variant.colorScheme ? COLOR_SCHEMES[variant.colorScheme] || DEFAULT_COLOR_SCHEME$1 : DEFAULT_COLOR_SCHEME$1;
             return _context.abrupt("return", {
               ufData: ufData,
@@ -5710,7 +5816,7 @@ function municipio_sources$1(_ref) {
     bounds: ['$get', 'view.metadata.ufData.bbox'],
     promoteId: 'id',
     tiles: [resolve.fn(function (context) {
-      get$1(context, 'view.conf.data.variableId');
+      get(context, 'view.conf.data.variableId');
       return ['$vtxUrl', {
         tiles: "".concat(VECTOR_TILE_SERVER_ENDPOINT, "/").concat(MUNICIPIO_SOURCE_ID$1, "/{z}/{x}/{y}"),
         data: [['id', ['$get', 'view.metadata.rawDataCacheUrl']]]
@@ -5748,7 +5854,7 @@ function municipio_layers$1() {
 }
 
 var intrauf = {
-  metadata: metadata$1,
+  metadata: metadata$6,
   sources: function sources(opts) {
     return _objectSpread2({}, municipio_sources$1(opts));
   },
@@ -5758,7 +5864,7 @@ var intrauf = {
 };
 
 var DEFAULT_COLOR_SCHEME = COLOR_SCHEMES.schemeOranges;
-function metadata(_ref) {
+function metadata$5(_ref) {
   var GLOBAL_CONTEXT = _ref.GLOBAL_CONTEXT,
     PARSED_SCHEMA = _ref.PARSED_SCHEMA;
   var METADATA_API_ENDPOINT = GLOBAL_CONTEXT.METADATA_API_ENDPOINT;
@@ -5787,7 +5893,7 @@ function metadata(_ref) {
             }
             throw new Error("BR data not found");
           case 9:
-            variableId = get$1(context, 'view.conf.data.variableId');
+            variableId = get(context, 'view.conf.data.variableId');
             variant = PARSED_SCHEMA.variantsByVariableId[variableId]; //
             // The rawDataCacheUrl should be shared with following pipeline steps
             // so that it may be effectively cached
@@ -5804,7 +5910,7 @@ function metadata(_ref) {
             //
             // Use values for the focusMunicipio to build the scale
             //
-            scaleValues = get$1(rawData, "[].".concat(variableId));
+            scaleValues = get(rawData, "[].".concat(variableId));
             colorScheme = variant.colorScheme ? COLOR_SCHEMES[variant.colorScheme] || DEFAULT_COLOR_SCHEME : DEFAULT_COLOR_SCHEME;
             return _context.abrupt("return", {
               brData: brData,
@@ -5843,7 +5949,7 @@ function municipio_sources(_ref) {
     bounds: ['$get', 'view.metadata.brData.bbox'],
     promoteId: 'id',
     tiles: [resolve.fn(function (context) {
-      get$1(context, 'view.conf.data.variableId');
+      get(context, 'view.conf.data.variableId');
       return ['$vtxUrl', {
         tiles: "".concat(VECTOR_TILE_SERVER_ENDPOINT, "/").concat(MUNICIPIO_SOURCE_ID, "/{z}/{x}/{y}"),
         data: [['id', ['$get', 'view.metadata.rawDataCacheUrl']]]
@@ -5878,7 +5984,7 @@ function municipio_layers() {
 }
 
 var intrabr = {
-  metadata: metadata,
+  metadata: metadata$5,
   sources: function sources(opts) {
     return _objectSpread2({}, municipio_sources(opts));
   },
@@ -5913,14 +6019,14 @@ function cem_censo_2022(viewSpec, allViewSpecs, context) {
   if (!PARSED_SCHEMA) {
     return null;
   }
-  var DOWNLOAD = download(context, {
+  var DOWNLOAD = download$5(context, {
     PARSED_SCHEMA: PARSED_SCHEMA
   });
   var CHOROPLETH = choropleth({
     GLOBAL_CONTEXT: context,
     PARSED_SCHEMA: PARSED_SCHEMA
   });
-  var CONF_SCHEMA = confSchema(viewSpec, allViewSpecs, context, {
+  var CONF_SCHEMA = confSchema$4(viewSpec, allViewSpecs, context, {
     PARSED_SCHEMA: PARSED_SCHEMA
   });
   return {
@@ -5992,7 +6098,7 @@ function numerical_size(base, _ref) {
           minSize: SIZE_MIN,
           maxSize: SIZE_MAX
         }), 10],
-        'circle-color': get(COLOR_SCHEMES, color_scheme) || color_scheme
+        'circle-color': get$1(COLOR_SCHEMES, color_scheme) || color_scheme
       }
     })))
   });
@@ -6014,7 +6120,7 @@ function categorical(base, _ref) {
   var VECTOR_SOURCE_ID = "".concat(TABLE_ID, ".geom");
   categories = categories ? categories.map(function (category) {
     return _objectSpread2(_objectSpread2({}, category), {}, {
-      color: get(COLOR_SCHEMES, category.color) || category.color
+      color: get$1(COLOR_SCHEMES, category.color) || category.color
     });
   }) : null;
   var $circleColor = categories ? ['match', ['to-string', ['get', VARIABLE_ID]]].concat(_toConsumableArray(categories.flatMap(function (category) {
@@ -6320,7 +6426,341 @@ function cem_saude_2024(viewSpec, allViewSpecs, context) {
   }));
 }
 
-var _excluded$8 = ["label", "color", "line", "fill", "tiles", "source_layer", "sources", "layers"];
+var DEFAULT_FILL_OPACITY$1 = 0.5;
+function applyOpacity(color, alpha) {
+  if (color.startsWith('#')) {
+    var hex = color;
+    if (hex.length === 4) {
+      hex = '#' + __spreadArray([], hex.slice(1), true).map(function (c) {
+        return c + c;
+      }).join('');
+    }
+    var r = parseInt(hex.slice(1, 3), 16);
+    var g = parseInt(hex.slice(3, 5), 16);
+    var b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+  }
+  console.warn("applyOpacity: unsupported color format \"".concat(color, "\", returning as-is"));
+  return color;
+}
+
+function parseTiles(tiles, context) {
+  var parsedTiles = Array.isArray(tiles) ? tiles : typeof tiles === 'string' ? [tiles] : null;
+  if (!parsedTiles) {
+    throw new Error("tiles is required");
+  }
+  return parsedTiles.map(function (tileSrcUrl) {
+    return interpolate(tileSrcUrl, context);
+  });
+}
+
+var LOWERCASE_WORDS = new Set(['de', 'da', 'do', 'das', 'dos', 'e', 'a', 'o', 'as', 'os', 'em', 'no', 'na', 'nos', 'nas', 'por', 'para', 'com', 'sem']);
+function humanize(str) {
+  if (!str) return '';
+  return str.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[-_]+/g, ' ').replace(/\s+/g, ' ').trim().toLowerCase().replace(/(^\S+|\s\S+)/g, function (match, _, offset) {
+    var word = match.trim();
+    var isFirst = offset === 0;
+    return isFirst || !LOWERCASE_WORDS.has(word) ? match.replace(word[0], word[0].toUpperCase()) : match;
+  });
+}
+
+function basicTooltip() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    title = _ref.title,
+    entries = _ref.entries;
+  var titleKey = title || 'name';
+  return {
+    title: ['$literal', resolve.fn(function (ctx) {
+      var _ctx$feature;
+      return ctx === null || ctx === void 0 || (_ctx$feature = ctx.feature) === null || _ctx$feature === void 0 || (_ctx$feature = _ctx$feature.properties) === null || _ctx$feature === void 0 ? void 0 : _ctx$feature[titleKey];
+    })],
+    entries: ['$literal', resolve.fn(function (ctx) {
+      var _ctx$feature2;
+      if (_typeof((_ctx$feature2 = ctx.feature) === null || _ctx$feature2 === void 0 ? void 0 : _ctx$feature2.properties) !== 'object') {
+        return [];
+      }
+      var entrySpecs = Array.isArray(entries) ? Object.fromEntries(entries.map(function (spec) {
+        return typeof spec === 'string' ? [spec, {
+          label: humanize(spec)
+        }] : [spec.key, spec];
+      })) : _typeof(entries) === 'object' ? entries : Object.fromEntries(Object.keys(ctx.feature.properties).filter(function (key) {
+        return key !== titleKey;
+      }).map(function (key) {
+        return [key, {
+          label: humanize(key)
+        }];
+      }));
+      return Object.entries(entrySpecs).map(function (_ref2) {
+        var _ctx$feature3;
+        var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          spec = _ref3[1];
+        spec = typeof spec === 'string' ? {
+          label: spec
+        } : spec;
+        var _spec = spec,
+          label = _spec.label,
+          format = _spec.format;
+        return [label, cast(_objectSpread2({
+          type: 'string'
+        }, format), (_ctx$feature3 = ctx.feature) === null || _ctx$feature3 === void 0 ? void 0 : _ctx$feature3.properties[key])];
+      });
+    })]
+  };
+}
+
+var GEOMETRY_KEY = 'geom';
+var EXTENSIONS_BY_FORMAT = {
+  GeoJSON: 'geojson',
+  GPKG: 'gpkg',
+  CSV: 'csv',
+  KML: 'kml'
+};
+var OPTIONS_SCHEMA = {
+  format: {
+    label: 'Selecione o formato do arquivo',
+    type: 'radioSelect',
+    required: true,
+    options: [
+    // {
+    //   value: 'CSV',
+    //   label: 'Planilha CSV (dados tabulares separados por vírgulas)',
+    // },
+    {
+      value: 'GPKG',
+      label: 'GeoPackage (banco de dados geoespacial compacto)'
+    }, {
+      value: 'GeoJSON',
+      label: 'GeoJSON (dados geográficos em JSON)'
+    }, {
+      value: 'KML',
+      label: 'KML (Keyhole Markup Language - mapas em XML)'
+    }]
+  }
+};
+function basicDownload(_ref) {
+  var fileName = _ref.fileName,
+    downloadUrl = _ref.downloadUrl;
+  return resolve.fn(function (ctx) {
+    return /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
+        var dialogs, options;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              dialogs = _ref2.dialogs;
+              _context2.next = 3;
+              return dialogs.prompt({
+                title: 'Baixar dados',
+                submit: 'Baixar',
+                input: {
+                  type: 'object',
+                  properties: OPTIONS_SCHEMA
+                },
+                defaultValue: {
+                  format: 'GPKG'
+                }
+              });
+            case 3:
+              options = _context2.sent;
+              _context2.next = 6;
+              return dialogs.loading(/*#__PURE__*/function () {
+                var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref4) {
+                  var setMessage, data, geoJsonData, blob;
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        setMessage = _ref4.setMessage;
+                        _context.next = 3;
+                        return fetch(downloadUrl).then(function (res) {
+                          return res.json();
+                        });
+                      case 3:
+                        data = _context.sent;
+                        //
+                        // Build a geoJson data object
+                        //
+                        geoJsonData = {
+                          type: 'FeatureCollection',
+                          features: data.map(function (entry) {
+                            var geometry = entry[GEOMETRY_KEY];
+                            return {
+                              type: 'Feature',
+                              properties: omit(entry, [GEOMETRY_KEY]),
+                              geometry: geometry
+                            };
+                          })
+                        };
+                        _context.prev = 5;
+                        setMessage('Preparando arquivo');
+                        //
+                        // Convert to requested format using ogr2ogr
+                        //
+                        _context.next = 9;
+                        return ogr2ogr({
+                          src: geoJsonData,
+                          format: options.format
+                        });
+                      case 9:
+                        blob = _context.sent;
+                        saveAs(blob, "".concat(fileName, ".").concat(EXTENSIONS_BY_FORMAT[options.format]));
+                        _context.next = 18;
+                        break;
+                      case 13:
+                        _context.prev = 13;
+                        _context.t0 = _context["catch"](5);
+                        console.error(_context.t0.message);
+                        _context.next = 18;
+                        return dialogs.info("Ocorreu um erro ao gerar o arquivo: ".concat(_context.t0.message));
+                      case 18:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee, null, [[5, 13]]);
+                }));
+                return function (_x2) {
+                  return _ref5.apply(this, arguments);
+                };
+              }(), 'Carregando dados');
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+  });
+}
+
+var COLOR_OPTIONS = Object.values(GEOREDUS_LABELED_COLORS);
+function colorSelector(_initialColor) {
+  return {
+    label: 'Cor',
+    helperText: 'Selecione a cor para a camada',
+    type: 'select',
+    clearable: false,
+    defaultValue: _initialColor,
+    options: COLOR_OPTIONS.map(function (opt) {
+      return _objectSpread2(_objectSpread2({}, opt), {}, {
+        label: /*#__PURE__*/React.createElement(Flex, {
+          direction: "row",
+          alignItems: "center",
+          gap: "2"
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: '15px',
+            height: '15px',
+            backgroundColor: opt.value
+          }
+        }), /*#__PURE__*/React.createElement("div", null, opt.label))
+      });
+    })
+  };
+}
+function svgBgImage$2(svg) {
+  return "url(\"data:image/svg+xml,".concat(encodeURIComponent(svg), "\")");
+}
+var FILL_PATTERN_SOLID = 'solid';
+var FILL_PATTERN_OPTIONS$1 = [{
+  label: 'Preenchido',
+  value: FILL_PATTERN_SOLID
+}, {
+  label: 'Quadrados',
+  value: 'squares_1'
+}, {
+  label: 'Triângulos',
+  value: 'triangles_1'
+}, {
+  label: 'Diamantes',
+  value: 'diamonds_1'
+}, {
+  label: 'Cruz',
+  value: 'cross_1'
+}, {
+  label: 'Mosaico 1',
+  value: 'mosaic_1'
+}, {
+  label: 'Mosaico 2',
+  value: 'mosaic_2'
+}, {
+  label: 'Ondas',
+  value: 'waves_1'
+}, {
+  label: 'Círculos',
+  value: 'circles_1'
+}, {
+  label: 'Linhas',
+  value: 'lines_1'
+}];
+function fillPatternSelector() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread2({
+    label: 'Textura',
+    type: 'select',
+    clearable: false,
+    defaultValue: FILL_PATTERN_SOLID,
+    options: FILL_PATTERN_OPTIONS$1.map(function (opt) {
+      var pattern = opt.value === FILL_PATTERN_SOLID ? null : svgBgImage$2(SVG_PATTERNS[opt.value]({
+        scale: '0.25'
+      }));
+      return _objectSpread2(_objectSpread2({}, opt), {}, {
+        label: /*#__PURE__*/React.createElement(Flex, {
+          direction: "row",
+          alignItems: "center",
+          gap: "2"
+        }, /*#__PURE__*/React.createElement("div", {
+          style: _objectSpread2({
+            width: 15,
+            height: 15,
+            border: '1px solid #aaa'
+          }, pattern ? {
+            backgroundImage: pattern
+          } : {
+            backgroundColor: '#ccc'
+          })
+        }), /*#__PURE__*/React.createElement("div", null, " ", opt.label))
+      });
+    })
+  }, props);
+}
+
+var _excluded$d = ["label", "color", "line", "fill", "tiles", "source_layer", "sources", "layers", "fill_pattern"];
+var SOLID = 'solid';
+var DEFAULT_FILL_OPACITY = 0.5;
+var FILL_PATTERN_OPTIONS = [{
+  label: 'Preenchido',
+  value: SOLID
+}, {
+  label: 'Quadrados',
+  value: 'squares_1'
+}, {
+  label: 'Triângulos',
+  value: 'triangles_1'
+}, {
+  label: 'Diamantes',
+  value: 'diamonds_1'
+}, {
+  label: 'Cruz',
+  value: 'cross_1'
+}, {
+  label: 'Mosaico 1',
+  value: 'mosaic_1'
+}, {
+  label: 'Mosaico 2',
+  value: 'mosaic_2'
+}, {
+  label: 'Ondas',
+  value: 'waves_1'
+}, {
+  label: 'Círculos',
+  value: 'circles_1'
+}, {
+  label: 'Linhas',
+  value: 'lines_1'
+}];
 function _parseTiles$2(tiles, context) {
   tiles = Array.isArray(tiles) ? tiles : typeof tiles === 'string' ? [tiles] : null;
   if (!tiles) {
@@ -6330,6 +6770,9 @@ function _parseTiles$2(tiles, context) {
     return interpolate(tileSrcUrl, context);
   });
 }
+function svgBgImage$1(svg) {
+  return "url(\"data:image/svg+xml,".concat(encodeURIComponent(svg), "\")");
+}
 function vector_polygon(_ref, allViewSpecs, context) {
   var label = _ref.label,
     color = _ref.color,
@@ -6343,12 +6786,87 @@ function vector_polygon(_ref, allViewSpecs, context) {
     sources = _ref$sources === void 0 ? {} : _ref$sources,
     _ref$layers = _ref.layers,
     layers = _ref$layers === void 0 ? {} : _ref$layers,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    fill_pattern = _ref.fill_pattern,
+    props = _objectWithoutProperties(_ref, _excluded$d);
   if (!source_layer) {
     throw new Error('source_layer must be defined');
   }
+  var _initialColor = resolveColor(color);
+  var _color = resolve.fn(function (ctx) {
+    var _ctx$view;
+    return resolveColor((_ctx$view = ctx.view) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.conf) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.style) === null || _ctx$view === void 0 ? void 0 : _ctx$view.color) || _initialColor;
+  });
+  var _legend = resolve.fn(_color, function (_resolvedColor, ctx) {
+    var _ctx$view2;
+    var resolvedFillPattern = ((_ctx$view2 = ctx.view) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.conf) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.style) === null || _ctx$view2 === void 0 ? void 0 : _ctx$view2.fillPattern) || fill_pattern;
+    var legendItemProps = resolvedFillPattern || line ? {
+      box: {
+        style: _objectSpread2({
+          borderColor: line !== null && line !== void 0 && line.paint && line.paint['line-color'] ? line.paint['line-color'] : _resolvedColor,
+          borderStyle: line !== null && line !== void 0 && line.paint && line.paint['line-dasharray'] ? 'dashed' : 'solid',
+          borderWidth: '1px'
+        }, resolvedFillPattern && resolvedFillPattern !== SOLID ? {
+          backgroundColor: 'transparent',
+          backgroundImage: resolvedFillPattern && typeof SVG_PATTERNS[resolvedFillPattern] === 'function' ? svgBgImage$1(SVG_PATTERNS[resolvedFillPattern]({
+            stroke: _resolvedColor,
+            scale: '0.25'
+          })) : ''
+        } : {})
+      }
+    } : {};
+    return {
+      type: 'CategoricalLegend',
+      items: [_objectSpread2({
+        label: label,
+        color: _color
+      }, legendItemProps)]
+    };
+  });
+  var _fillPaint = resolve.fn(_color, function (_resolvedColor, ctx) {
+    var _ctx$view3;
+    var resolvedFillPattern = ((_ctx$view3 = ctx.view) === null || _ctx$view3 === void 0 || (_ctx$view3 = _ctx$view3.conf) === null || _ctx$view3 === void 0 || (_ctx$view3 = _ctx$view3.style) === null || _ctx$view3 === void 0 ? void 0 : _ctx$view3.fillPattern) || fill_pattern;
+    var resolvedFillPatternStr = resolvedFillPattern && resolvedFillPattern !== SOLID ? "".concat(resolvedFillPattern, "({ stroke: \"").concat(_resolvedColor, "\", scale: 0.5 })") : null;
+    return _objectSpread2(_objectSpread2({
+      'fill-opacity': fill.paint && fill.paint['fill-opacity'] ? fill.paint['fill-opacity'] : DEFAULT_FILL_OPACITY,
+      'fill-color': _color
+    }, fill['paint']), resolvedFillPatternStr ? {
+      'fill-pattern': resolvedFillPatternStr
+    } : {});
+  });
   return _objectSpread2(_objectSpread2({}, props), {}, {
     label: label,
+    confSchema: {
+      style: {
+        color: colorSelector(_initialColor),
+        fillPattern: {
+          label: 'Textura',
+          type: 'select',
+          clearable: false,
+          defaultValue: fill_pattern || SOLID,
+          options: FILL_PATTERN_OPTIONS.map(function (opt) {
+            var pattern = opt.value === SOLID ? null : svgBgImage$1(SVG_PATTERNS[opt.value]({
+              scale: '0.25'
+            }));
+            return _objectSpread2(_objectSpread2({}, opt), {}, {
+              label: /*#__PURE__*/React.createElement(Flex, {
+                direction: "row",
+                alignItems: "center",
+                gap: "2"
+              }, /*#__PURE__*/React.createElement("div", {
+                style: _objectSpread2({
+                  width: 15,
+                  height: 15
+                }, pattern ? {
+                  backgroundImage: pattern
+                } : {
+                  backgroundColor: '#ccc'
+                })
+              }), /*#__PURE__*/React.createElement("div", null, " ", opt.label))
+            });
+          })
+        }
+      }
+    },
     metadata: {},
     sources: _objectSpread2({
       main: {
@@ -6363,26 +6881,18 @@ function vector_polygon(_ref, allViewSpecs, context) {
       'source-layer': source_layer,
       type: 'line'
     }, line), {}, {
-      paint: {
-        'line-color': color
-      }
+      paint: _objectSpread2({
+        'line-color': _color
+      }, line.paint)
     })), "main_fill", _objectSpread2(_objectSpread2({
       zIndex: Z_OVERLAY_BASE_1000,
       source: 'main',
       'source-layer': source_layer,
       type: 'fill'
     }, fill), {}, {
-      paint: _objectSpread2({
-        'fill-opacity': 0.5,
-        'fill-color': color
-      }, fill.paint),
-      legends: [{
-        type: 'CategoricalLegend',
-        items: [{
-          color: color,
-          label: label
-        }]
-      }],
+      layout: _objectSpread2({}, fill['layout']),
+      paint: _fillPaint,
+      legends: [_legend],
       tooltip: {
         title: ['$literal', resolve.fn(function (ctx) {
           var _ctx$feature;
@@ -6397,64 +6907,846 @@ function vector_polygon(_ref, allViewSpecs, context) {
   });
 }
 
-var _excluded$7 = ["line", "color", "tiles", "source_layer", "sources", "layers"];
-function _parseTiles$1(tiles, context) {
-  tiles = Array.isArray(tiles) ? tiles : typeof tiles === 'string' ? [tiles] : null;
-  if (!tiles) {
-    throw new Error("tiles is required");
-  }
-  return tiles.map(function (tileSrcUrl) {
-    return interpolate(tileSrcUrl, context);
-  });
-}
-function vector_line(_ref, allViewSpecs, context) {
-  var _ref$line = _ref.line,
-    line = _ref$line === void 0 ? {} : _ref$line,
-    color = _ref.color,
-    tiles = _ref.tiles,
-    source_layer = _ref.source_layer,
-    _ref$sources = _ref.sources,
-    sources = _ref$sources === void 0 ? {} : _ref$sources,
-    _ref$layers = _ref.layers,
-    layers = _ref$layers === void 0 ? {} : _ref$layers,
-    props = _objectWithoutProperties(_ref, _excluded$7);
-  if (!source_layer) {
-    throw new Error('source_layer must be defined');
-  }
-  return _objectSpread2(_objectSpread2({}, props), {}, {
-    metadata: {},
-    sources: _objectSpread2({
-      main: {
-        promoteId: 'id',
-        type: 'vector',
-        tiles: _parseTiles$1(tiles, context)
-      }
-    }, sources),
-    layers: _objectSpread2(_defineProperty({}, "main_line", _objectSpread2(_objectSpread2({
-      zIndex: Z_OVERLAY_MIDDLE_2000,
-      source: 'main',
-      'source-layer': source_layer,
-      type: 'line'
-    }, line), {}, {
-      paint: _objectSpread2({
-        'line-width': 1,
-        'line-color': color
-      }, line.paint || {}),
-      tooltip: {
-        title: ['$literal', resolve.fn(function (ctx) {
-          var _ctx$feature;
-          return ctx === null || ctx === void 0 || (_ctx$feature = ctx.feature) === null || _ctx$feature === void 0 || (_ctx$feature = _ctx$feature.properties) === null || _ctx$feature === void 0 ? void 0 : _ctx$feature.name;
-        })],
-        entries: ['$literal', resolve.fn(function (ctx) {
-          var _ctx$feature2;
-          return _typeof((_ctx$feature2 = ctx.feature) === null || _ctx$feature2 === void 0 ? void 0 : _ctx$feature2.properties) === 'object' ? Object.entries(ctx.feature.properties) : [];
-        })]
-      }
-    })), layers)
-  });
+function confSchema$3(viewSpec, allViewSpecs, context) {
+  return {
+    style: {
+      fillPattern: fillPatternSelector()
+    }
+  };
 }
 
-var _excluded$6 = ["circle", "color", "tiles", "source_layer", "sources", "layers"];
+function metadata$4(viewSpec, allViewSpecs, context) {
+  var style = viewSpec.style;
+  var categories = resolveAsync.fn(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(ctx) {
+      var _ctx$view;
+      var colorSchemeId, resolvedCategories;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // Resolve color scheme
+            colorSchemeId = ((_ctx$view = ctx.view) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.conf) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.style) === null || _ctx$view === void 0 ? void 0 : _ctx$view.colorScheme) || 'schemeGeoReDUSSafe'; // resolve categories
+            if (!(typeof style.categories === 'string')) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 4;
+            return fetch(interpolate(style.categories, {
+              METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT
+            })).then(function (res) {
+              return res.json();
+            }).then(function (categories) {
+              return uniqBy(categories, function (cat) {
+                return cat.value;
+              });
+            });
+          case 4:
+            _context.t0 = _context.sent;
+            _context.next = 8;
+            break;
+          case 7:
+            _context.t0 = Array.isArray(style.categories) ? style.categories.map(function (categoryInput) {
+              return typeof categoryInput === 'string' ? {
+                value: categoryInput
+              } : categoryInput;
+            }) : null;
+          case 8:
+            resolvedCategories = _context.t0;
+            if (resolvedCategories) {
+              _context.next = 11;
+              break;
+            }
+            throw new Error('could not resolve categories ' + viewSpec.id);
+          case 11:
+            return _context.abrupt("return", resolvedCategories.map(function (cat, index) {
+              var color = cat.color || resolveSchemeColor(colorSchemeId, index);
+              if (!color) {
+                throw new Error("Could not resolve color for ".concat(cat.value));
+              }
+              return _objectSpread2(_objectSpread2({}, cat), {}, {
+                color: color,
+                label: cat.label || humanize(cat.value)
+              });
+            }));
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  return {
+    categories: categories
+  };
+}
+
+var MAIN_SOURCE_ID$3 = 'main';
+function sources$4(viewSpec, allViewSpecs, context) {
+  var tiles = viewSpec.tiles;
+  return _defineProperty({}, MAIN_SOURCE_ID$3, {
+    promoteId: 'id',
+    type: 'vector',
+    tiles: parseTiles(tiles, context)
+  });
+}
+
+function _main_line$2(_ref, viewSpec, allViewSpecs, context) {
+  var _viewSpec$style;
+  var _maplibreColorExp = _ref._maplibreColorExp;
+  var source_layer = viewSpec.source_layer;
+  var borderStyle = ((_viewSpec$style = viewSpec.style) === null || _viewSpec$style === void 0 ? void 0 : _viewSpec$style.borderStyle) || 'solid';
+  if (borderStyle === 'none') {
+    return null;
+  }
+  var paint = {
+    dashed: {
+      'line-dasharray': [4, 2],
+      'line-width': 2
+    },
+    dotted: {
+      'line-dasharray': [0.5, 2],
+      'line-width': 2
+    },
+    solid: {}
+  }[borderStyle];
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: MAIN_SOURCE_ID$3,
+    'source-layer': source_layer,
+    type: 'line',
+    layout: borderStyle === 'dotted' ? {
+      'line-cap': 'round'
+    } : {},
+    paint: _objectSpread2({
+      'line-color': _maplibreColorExp,
+      'line-width': 2
+    }, paint)
+  };
+}
+function _main_fill_legends$2(props, viewSpec, allViewSpecs, context) {
+  var _legends = resolve.fn(function (context) {
+    var categories = context.view.metadata.categories;
+    return [{
+      type: 'CategoricalLegend',
+      title: viewSpec.label,
+      items: categories.map(function (cat) {
+        return {
+          id: cat.value,
+          label: cat.label,
+          color: cat.color,
+          box: {
+            style: {
+              backgroundColor: applyOpacity(cat.color, DEFAULT_FILL_OPACITY$1)
+            }
+          }
+        };
+      })
+    }];
+  });
+  return _legends;
+}
+function _main_fill$2(props, viewSpec, allViewSpecs, context) {
+  var _maplibreColorExp = props._maplibreColorExp,
+    _fillPattern = props._fillPattern;
+  var source_layer = viewSpec.source_layer;
+  var _fillPaint = resolve.fn([_fillPattern], function (_ref2, ctx) {
+    var _ref3 = _slicedToArray(_ref2, 1),
+      resolvedFillPattern = _ref3[0];
+    var resolvedFillPatternStr = resolvedFillPattern && resolvedFillPattern !== FILL_PATTERN_SOLID ? ['match', ['get', viewSpec.style.categoryKey]].concat(_toConsumableArray(ctx.view.metadata.categories.map(function (cat) {
+      return [cat.value, "".concat(resolvedFillPattern, "({ stroke: \"").concat(cat.color, "\", scale: 0.5 })")];
+    }).flat()), ['#CCCCCC']) : null;
+    return _objectSpread2({
+      'fill-color': _maplibreColorExp,
+      'fill-opacity': DEFAULT_FILL_OPACITY$1
+    }, resolvedFillPatternStr ? {
+      'fill-pattern': resolvedFillPatternStr
+    } : {});
+  });
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: MAIN_SOURCE_ID$3,
+    'source-layer': source_layer,
+    type: 'fill',
+    paint: _fillPaint,
+    legends: _main_fill_legends$2(props, viewSpec),
+    tooltip: basicTooltip(viewSpec.tooltip)
+  };
+}
+function layers$4(viewSpec, allViewSpecs, context) {
+  var styleSpec = viewSpec.style;
+  var source_layer = viewSpec.source_layer;
+  if (!source_layer) {
+    throw new Error('source_layer must be defined');
+  }
+  var _maplibreColorExp = resolve.fn(function (ctx) {
+    return ['match', ['get', viewSpec.style.categoryKey]].concat(_toConsumableArray(ctx.view.metadata.categories.map(function (cat) {
+      return [cat.value, cat.color];
+    }).flat()), ['#CCCCCC']);
+  });
+  var _fillPattern = resolve.fn(function (ctx) {
+    var _ctx$view;
+    return ((_ctx$view = ctx.view) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.conf) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.style) === null || _ctx$view === void 0 ? void 0 : _ctx$view.fillPattern) || styleSpec.fillPattern;
+  });
+  return _defineProperty(_defineProperty({}, "main_line", _main_line$2({
+    _maplibreColorExp: _maplibreColorExp
+  }, viewSpec)), "main_fill", _main_fill$2({
+    _maplibreColorExp: _maplibreColorExp,
+    _fillPattern: _fillPattern
+  }, viewSpec));
+}
+
+function download$4(viewSpec, allViewSpecs, context) {
+  return basicDownload({
+    fileName: slugify(viewSpec.label),
+    downloadUrl: interpolate(viewSpec.download_url, {
+      METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT
+    })
+  });
+}
+
+var DEFAULT_COLOR_SCHEME_ID$1 = 'schemeGeoReDUSSafe';
+function parseStyleSpec$4(styleInput) {
+  if (!styleInput) {
+    throw new Error('expected existing styleInput');
+  }
+  return __assign({
+    colorScheme: DEFAULT_COLOR_SCHEME_ID$1
+  }, styleInput);
+}
+
+var _excluded$c = ["style"];
+function vector_polygon_categorical(_ref, allViewSpecs, context) {
+  var style = _ref.style,
+    viewSpec = _objectWithoutProperties(_ref, _excluded$c);
+  viewSpec = _objectSpread2(_objectSpread2({}, viewSpec), {}, {
+    style: parseStyleSpec$4(style)
+  });
+  return _objectSpread2(_objectSpread2({}, pick(viewSpec, ['id', 'path', 'label', 'sourceLabel'])), {}, {
+    confSchema: confSchema$3(),
+    metadata: metadata$4(viewSpec, allViewSpecs, context),
+    sources: sources$4(viewSpec, allViewSpecs, context),
+    layers: layers$4(viewSpec),
+    download: download$4(viewSpec, allViewSpecs, context)
+  });
+}
+
+function confSchema$2(viewSpec, allViewSpecs, context) {
+  var styleSpec = viewSpec.style;
+  return {
+    style: {
+      color: colorSelector(styleSpec.color),
+      fillPattern: fillPatternSelector()
+    }
+  };
+}
+
+function metadata$3(viewSpec, allViewSpecs, context) {
+  viewSpec.style;
+  return {};
+}
+
+function _main_fill_legends$1(_ref, viewSpec, allViewSpecs, context) {
+  var _color = _ref._color,
+    _fillPattern = _ref._fillPattern;
+  var _legend = resolve.fn([_color, _fillPattern], function (_ref2, ctx) {
+    var _viewSpec$style;
+    var _ref3 = _slicedToArray(_ref2, 2),
+      resolvedColor = _ref3[0],
+      resolvedFillPattern = _ref3[1];
+    var patternProps = resolvedFillPattern && resolvedFillPattern !== FILL_PATTERN_SOLID ? {
+      color: resolvedColor,
+      backgroundColor: 'transparent',
+      backgroundImage: resolvedFillPattern && typeof SVG_PATTERNS[resolvedFillPattern] === 'function' ? svgBgImage$2(SVG_PATTERNS[resolvedFillPattern]({
+        stroke: resolvedColor,
+        scale: '0.25'
+      })) : ''
+    } : {
+      backgroundColor: applyOpacity(resolvedColor, DEFAULT_FILL_OPACITY$1)
+    };
+    var legendItemProps = {
+      box: {
+        style: _objectSpread2({
+          borderColor: resolvedColor,
+          borderStyle: ((_viewSpec$style = viewSpec.style) === null || _viewSpec$style === void 0 ? void 0 : _viewSpec$style.borderStyle) || 'solid',
+          borderWidth: '1px'
+        }, patternProps)
+      }
+    };
+    return {
+      type: 'CategoricalLegend',
+      items: [_objectSpread2({
+        label: viewSpec.label,
+        color: resolvedColor
+      }, legendItemProps)]
+    };
+  });
+  return [_legend];
+}
+function _main_fill$1(props, viewSpec, allViewSpecs, context) {
+  var _color = props._color,
+    _fillPattern = props._fillPattern;
+  var source_layer = viewSpec.source_layer;
+  var _fillPaint = resolve.fn([_color, _fillPattern], function (_ref4, ctx) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      resolvedColor = _ref5[0],
+      resolvedFillPattern = _ref5[1];
+    var resolvedFillPatternStr = resolvedFillPattern && resolvedFillPattern !== FILL_PATTERN_SOLID ? "".concat(resolvedFillPattern, "({ stroke: \"").concat(resolvedColor, "\", scale: 0.5 })") : null;
+    return _objectSpread2({
+      'fill-opacity': DEFAULT_FILL_OPACITY$1,
+      'fill-color': resolvedColor
+    }, resolvedFillPatternStr ? {
+      'fill-pattern': resolvedFillPatternStr
+    } : {});
+  });
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: 'main',
+    'source-layer': source_layer,
+    type: 'fill',
+    paint: _fillPaint,
+    legends: _main_fill_legends$1(props, viewSpec),
+    tooltip: basicTooltip(viewSpec.tooltip)
+  };
+}
+function _main_line$1(_ref6, viewSpec, allViewSpecs, context) {
+  var _viewSpec$style2;
+  var _color = _ref6._color;
+  var source_layer = viewSpec.source_layer;
+  var borderStyle = ((_viewSpec$style2 = viewSpec.style) === null || _viewSpec$style2 === void 0 ? void 0 : _viewSpec$style2.borderStyle) || 'solid';
+  if (borderStyle === 'none') {
+    return null;
+  }
+  var paint = {
+    dashed: {
+      'line-dasharray': [4, 2],
+      'line-width': 2
+    },
+    dotted: {
+      'line-dasharray': [0.5, 2],
+      'line-width': 2
+    },
+    solid: {}
+  }[borderStyle];
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: 'main',
+    'source-layer': source_layer,
+    type: 'line',
+    layout: borderStyle === 'dotted' ? {
+      'line-cap': 'round'
+    } : {},
+    paint: _objectSpread2({
+      'line-color': _color
+    }, paint)
+  };
+}
+function layers$3(viewSpec, allViewSpecs, context) {
+  var styleSpec = viewSpec.style;
+  var source_layer = viewSpec.source_layer;
+  if (!source_layer) {
+    throw new Error('source_layer must be defined');
+  }
+  var _color = resolve.fn(function (ctx) {
+    var _ctx$view;
+    return resolveColor(((_ctx$view = ctx.view) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.conf) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.style) === null || _ctx$view === void 0 ? void 0 : _ctx$view.color) || styleSpec.color);
+  });
+  var _fillPattern = resolve.fn(function (ctx) {
+    var _ctx$view2;
+    return ((_ctx$view2 = ctx.view) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.conf) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.style) === null || _ctx$view2 === void 0 ? void 0 : _ctx$view2.fillPattern) || styleSpec.fillPattern;
+  });
+  return _defineProperty(_defineProperty({}, "main_line", _main_line$1({
+    _color: _color}, viewSpec)), "main_fill", _main_fill$1({
+    _color: _color,
+    _fillPattern: _fillPattern
+  }, viewSpec));
+}
+
+function sources$3(viewSpec, allViewSpecs, context) {
+  var tiles = viewSpec.tiles;
+  return {
+    main: {
+      promoteId: 'id',
+      type: 'vector',
+      tiles: parseTiles(tiles, context)
+    }
+  };
+}
+
+function _defaultColor$1(inputColor) {
+  return inputColor ? resolveColor(inputColor) : schemeGeoReDUS.laranja;
+}
+function parseStyleSpec$3(styleInput) {
+  if (!styleInput) {
+    return {};
+  }
+  if (typeof styleInput === 'string') {
+    return {
+      color: _defaultColor$1(styleInput)
+    };
+  } else {
+    return __assign(__assign({}, styleInput), {
+      color: _defaultColor$1(styleInput.color)
+    });
+  }
+}
+
+function download$3(viewSpec, allViewSpecs, context) {
+  return basicDownload({
+    fileName: slugify(viewSpec.label),
+    downloadUrl: interpolate(viewSpec.download_url, {
+      METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT
+    })
+  });
+}
+
+var _excluded$b = ["style"];
+function vector_polygon_single(_ref, allViewSpecs, context) {
+  var style = _ref.style,
+    viewSpec = _objectWithoutProperties(_ref, _excluded$b);
+  viewSpec = _objectSpread2(_objectSpread2({}, viewSpec), {}, {
+    style: parseStyleSpec$3(style)
+  });
+  return _objectSpread2(_objectSpread2({}, pick(viewSpec, ['id', 'path', 'label', 'sourceLabel'])), {}, {
+    confSchema: confSchema$2(viewSpec),
+    metadata: metadata$3(viewSpec),
+    sources: sources$3(viewSpec, allViewSpecs, context),
+    layers: layers$3(viewSpec),
+    download: download$3(viewSpec, allViewSpecs, context)
+  });
+}
+
+var DEFAULT_COLOR_SCHEME_ID = 'schemeOrRd';
+function parseStyleSpec$2(styleInput) {
+  return __assign(__assign({
+    colorScheme: DEFAULT_COLOR_SCHEME_ID
+  }, styleInput), {
+    classificationMethod: !styleInput.classificationMethod ? {
+      type: 'naturalBreaks',
+      k: 5
+    } : typeof styleInput.classificationMethod === 'string' ? {
+      type: styleInput.classificationMethod,
+      k: 5
+    } : styleInput.classificationMethod
+  });
+}
+
+var getLargestColorArray = function getLargestColorArray(scheme) {
+  return scheme[scheme.length - 1];
+};
+var D3_SCHEMES = _objectSpread2(_objectSpread2({}, D3_SEQUENTIAL), D3_DIVERGING);
+var COLOR_SCHEME_OPTIONS = Object.entries(D3_SCHEMES).map(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    name = _ref2[0],
+    scheme = _ref2[1];
+  var colors = getLargestColorArray(scheme);
+  return {
+    value: name,
+    label: /*#__PURE__*/React.createElement(Flex, {
+      direction: "row",
+      gap: "2",
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '2px'
+      }
+    }, colors.map(function (color, idx) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: idx,
+        style: {
+          width: 15,
+          height: 15,
+          backgroundColor: color,
+          border: 'none'
+        }
+      });
+    })))
+  };
+});
+function confSchema$1(viewSpec, allViewSpecs, context) {
+  var _viewSpec$style, _viewSpec$style2;
+  return {
+    style: {
+      classificationMethodType: {
+        label: 'Método de classificação',
+        type: 'select',
+        clearable: false,
+        defaultValue: ((_viewSpec$style = viewSpec.style) === null || _viewSpec$style === void 0 || (_viewSpec$style = _viewSpec$style.classificationMethod) === null || _viewSpec$style === void 0 ? void 0 : _viewSpec$style.type) || 'naturalBreaks',
+        options: [{
+          value: 'naturalBreaks',
+          label: 'Quebras naturais'
+        }, {
+          value: 'quantile',
+          label: 'Quantis'
+        }]
+      },
+      colorScheme: {
+        label: 'Esquema de cores',
+        type: 'select',
+        clearable: false,
+        defaultValue: ((_viewSpec$style2 = viewSpec.style) === null || _viewSpec$style2 === void 0 ? void 0 : _viewSpec$style2.colorScheme) || DEFAULT_COLOR_SCHEME_ID,
+        options: COLOR_SCHEME_OPTIONS
+      }
+    }
+  };
+}
+
+var DEFAULT_COLOR = '#CCC';
+function custom(_ref) {
+  _ref.values;
+    var colorScheme = _ref.colorScheme,
+    classificationMethod = _ref.classificationMethod;
+  var k = classificationMethod.breaks.length;
+  return [DEFAULT_COLOR].concat(_toConsumableArray(classificationMethod.breaks.map(function (breakValue, index) {
+    return [breakValue, colorScheme.scalesByK[k][index]];
+  }).flat()));
+}
+function quantile(_ref2) {
+  var values = _ref2.values,
+    colorScheme = _ref2.colorScheme,
+    classificationMethod = _ref2.classificationMethod;
+  var scale = scaleQuantile().domain(values) // your data
+  .range(new Array(classificationMethod.k).fill(null).map(function (_, idx) {
+    return idx;
+  })); // number of bins
+
+  var breaks = scale.quantiles(); // → the cutoff values
+
+  //
+  // Will produce an array such as:
+  // [
+  //   "below_10",
+  //   10,
+  //   "between_10_20",
+  //   20,
+  //   "between_20_30",
+  //   30,
+  //   "above_30"
+  // ]
+  //
+
+  var colorScale = colorScheme.scalesByK[classificationMethod.k];
+  var colorScaleStops = breaks.map(function (breakValue, index) {
+    var color = colorScale[index + 1];
+    return index === 0 ? [
+    // For below 0 values, will use defaultColor
+    DEFAULT_COLOR, 0,
+    // colorScale
+    colorScale[0], breakValue, color] : [breakValue, color];
+  }).flat(1);
+  return colorScaleStops;
+}
+function naturalBreaks(_ref3) {
+  var values = _ref3.values,
+    colorScheme = _ref3.colorScheme,
+    classificationMethod = _ref3.classificationMethod;
+  return ['$naturalBreaks', values, _objectSpread2(_objectSpread2({}, colorScheme), {}, {
+    defaultColor: DEFAULT_COLOR,
+    k: classificationMethod.k,
+    minK: 5
+  })];
+}
+var COLOR_SCALE_STOPS_RESOLVERS = {
+  custom: custom,
+  quantile: quantile,
+  naturalBreaks: naturalBreaks
+};
+
+function metadata$2(viewSpec, allViewSpecs, context) {
+  var style = viewSpec.style;
+  return resolveAsync.fn(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(ctx) {
+      var _ctx$view$conf, _ctx$view$conf$style, _style$classification, _ctx$view$conf$style2, _style$classification2;
+      var resolvedValues, colorSchemeId, colorScheme, _classificationMethod, colorScaleStops;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(typeof style.values === 'string')) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 3;
+            return fetch(interpolate(style.values, {
+              METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT
+            })).then(function (res) {
+              return res.json();
+            });
+          case 3:
+            _context.t0 = _context.sent;
+            _context.next = 7;
+            break;
+          case 6:
+            _context.t0 = Array.isArray(style.values) ? style.values : null;
+          case 7:
+            resolvedValues = _context.t0.map(function (entry) {
+              return typeof entry === 'number' ? entry : entry.value;
+            });
+            //
+            // Resolve color scale stops
+            //
+            colorSchemeId = ((_ctx$view$conf = ctx.view.conf) === null || _ctx$view$conf === void 0 || (_ctx$view$conf = _ctx$view$conf.style) === null || _ctx$view$conf === void 0 ? void 0 : _ctx$view$conf.colorScheme) || style.colorScheme;
+            colorScheme = COLOR_SCHEMES[colorSchemeId] || COLOR_SCHEMES.schemeOrRd;
+            _classificationMethod = _objectSpread2(_objectSpread2({}, style.classificationMethod || {}), {}, {
+              type: ((_ctx$view$conf$style = ctx.view.conf.style) === null || _ctx$view$conf$style === void 0 ? void 0 : _ctx$view$conf$style.classificationMethodType) || ((_style$classification = style.classificationMethod) === null || _style$classification === void 0 ? void 0 : _style$classification.type),
+              k: ((_ctx$view$conf$style2 = ctx.view.conf.style) === null || _ctx$view$conf$style2 === void 0 ? void 0 : _ctx$view$conf$style2.classificationMethodK) || ((_style$classification2 = style.classificationMethod) === null || _style$classification2 === void 0 ? void 0 : _style$classification2.k)
+            });
+            colorScaleStops = COLOR_SCALE_STOPS_RESOLVERS[_classificationMethod.type]({
+              values: resolvedValues,
+              colorScheme: colorScheme,
+              classificationMethod: _classificationMethod
+            });
+            return _context.abrupt("return", {
+              values: resolvedValues,
+              colorScaleStops: colorScaleStops
+            });
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+}
+
+var MAIN_SOURCE_ID$2 = 'main';
+function sources$2(viewSpec, allViewSpecs, context) {
+  var tiles = viewSpec.tiles;
+  return _defineProperty({}, MAIN_SOURCE_ID$2, {
+    promoteId: 'id',
+    type: 'vector',
+    tiles: parseTiles(tiles, context)
+  });
+}
+
+function _main_line(props, viewSpec, allViewSpecs, context) {
+  var source_layer = viewSpec.source_layer;
+
+  //
+  // Resolve color scale stops
+  //
+  var colorScheme = COLOR_SCHEMES[viewSpec.style.colorScheme];
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: MAIN_SOURCE_ID$2,
+    'source-layer': source_layer,
+    type: 'line',
+    interactive: true,
+    paint: {
+      'line-color': colorScheme.scalesByK[3][2],
+      'line-width': 2,
+      'line-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0]
+    }
+  };
+}
+var DEFAULT_NUMBER_FORMAT = ['pt-BR', {}];
+function _main_fill_legends(props, viewSpec, allViewSpecs, context) {
+  var _legends = resolve.fn(function (ctx) {
+    var _viewSpec$style$legen;
+    console.log('ctx', ctx);
+    return [{
+      type: 'SequentialColorLegend',
+      title: viewSpec.label,
+      unit: viewSpec.unit,
+      steps: ctx.view.metadata.colorScaleStops,
+      format: _objectSpread2({
+        number: viewSpec.style.numberFormat || DEFAULT_NUMBER_FORMAT,
+        below: 'Sem dados',
+        above: 'Acima de ${0}'
+      }, ((_viewSpec$style$legen = viewSpec.style.legend) === null || _viewSpec$style$legen === void 0 ? void 0 : _viewSpec$style$legen.format) || {})
+    }];
+  });
+  return _legends;
+}
+function _main_fill(props, viewSpec, allViewSpecs, context) {
+  var _maplibreColorExp = props._maplibreColorExp;
+  var source_layer = viewSpec.source_layer;
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: MAIN_SOURCE_ID$2,
+    'source-layer': source_layer,
+    interactive: true,
+    type: 'fill',
+    paint: {
+      'fill-color': _maplibreColorExp,
+      'fill-opacity': DEFAULT_FILL_OPACITY$1
+    },
+    legends: _main_fill_legends(props, viewSpec),
+    tooltip: basicTooltip(viewSpec.tooltip)
+  };
+}
+function layers$2(viewSpec, allViewSpecs, context) {
+  viewSpec.style;
+  var source_layer = viewSpec.source_layer;
+  if (!source_layer) {
+    throw new Error('source_layer must be defined');
+  }
+  var _maplibreColorExp = resolve.fn(function (ctx) {
+    return ['step', ['coalesce', ['get', viewSpec.style.valueKey],
+    //
+    // Just need to coalesce to value lower than the least existing value
+    //
+    Math.min.apply(Math, _toConsumableArray(ctx.view.metadata.values)) - 1]].concat(_toConsumableArray(ctx.view.metadata.colorScaleStops));
+  });
+
+  // const _fillPattern = resolve.fn(
+  //   (ctx) => ctx.view?.conf?.style?.fillPattern || styleSpec.fillPattern,
+  // )
+
+  return _defineProperty(_defineProperty({}, "main_line", _main_line({
+    }, viewSpec)), "main_fill", _main_fill({
+    _maplibreColorExp: _maplibreColorExp
+  }, viewSpec));
+}
+
+function download$2(viewSpec, allViewSpecs, context) {
+  return basicDownload({
+    fileName: slugify(viewSpec.label),
+    downloadUrl: interpolate(viewSpec.download_url, {
+      METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT
+    })
+  });
+}
+
+var _excluded$a = ["style"];
+function vector_polygon_continuous(_ref, allViewSpecs, context) {
+  var style = _ref.style,
+    viewSpec = _objectWithoutProperties(_ref, _excluded$a);
+  viewSpec = _objectSpread2(_objectSpread2({}, viewSpec), {}, {
+    style: parseStyleSpec$2(style)
+  });
+  return _objectSpread2(_objectSpread2({}, pick(viewSpec, ['id', 'path', 'label', 'sourceLabel'])), {}, {
+    confSchema: confSchema$1(viewSpec),
+    metadata: metadata$2(viewSpec, allViewSpecs, context),
+    sources: sources$2(viewSpec, allViewSpecs, context),
+    layers: layers$2(viewSpec),
+    download: download$2(viewSpec, allViewSpecs, context)
+  });
+}
+
+var _excluded$9 = ["label", "line", "color", "tiles", "source_layer", "sources", "layers", "tooltip"];
+var LINE_PATTERN_OPTIONS = [{
+  label: 'Continua',
+  value: 'line'
+}, {
+  label: 'Tracejada',
+  value: 'dashed'
+}];
+function _parseTiles$1(tiles, context) {
+  tiles = Array.isArray(tiles) ? tiles : typeof tiles === 'string' ? [tiles] : null;
+  if (!tiles) {
+    throw new Error("tiles is required");
+  }
+  return tiles.map(function (tileSrcUrl) {
+    return interpolate(tileSrcUrl, context);
+  });
+}
+function vector_line(_ref, allViewSpecs, context) {
+  var label = _ref.label,
+    _ref$line = _ref.line,
+    line = _ref$line === void 0 ? {} : _ref$line,
+    color = _ref.color,
+    tiles = _ref.tiles,
+    source_layer = _ref.source_layer,
+    _ref$sources = _ref.sources,
+    sources = _ref$sources === void 0 ? {} : _ref$sources,
+    _ref$layers = _ref.layers,
+    layers = _ref$layers === void 0 ? {} : _ref$layers,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? {} : _ref$tooltip,
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  if (!source_layer) {
+    throw new Error('source_layer must be defined');
+  }
+  var _initialColor = resolveColor(color);
+  var _color = resolve.fn(function (ctx) {
+    var _ctx$view;
+    return resolveColor((_ctx$view = ctx.view) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.conf) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.style) === null || _ctx$view === void 0 ? void 0 : _ctx$view.color) || _initialColor;
+  });
+  var _initialLinePattern = line.paint && line.paint['line-dasharray'] ? 'dashed' : 'line';
+  var _linePattern = resolve.fn(_color, function (_resolvedColor, ctx) {
+    var _ctx$view2;
+    var resolvedLinePattern = ((_ctx$view2 = ctx.view) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.conf) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.style) === null || _ctx$view2 === void 0 ? void 0 : _ctx$view2.linePattern) || _initialLinePattern;
+    return _objectSpread2(_objectSpread2({
+      'line-width': 1,
+      'line-color': _color
+    }, line.paint || {}), resolvedLinePattern === 'dashed' ? {
+      'line-dasharray': [2, 2]
+    } : {});
+  });
+  var _legend = resolve.fn(_color, function (_resolvedColor, ctx) {
+    var _ctx$view3;
+    return {
+      type: 'CategoricalLegend',
+      items: [{
+        label: label,
+        box: {
+          style: {
+            height: 0,
+            borderColor: _resolvedColor,
+            borderStyle: ((_ctx$view3 = ctx.view) === null || _ctx$view3 === void 0 || (_ctx$view3 = _ctx$view3.conf) === null || _ctx$view3 === void 0 || (_ctx$view3 = _ctx$view3.style) === null || _ctx$view3 === void 0 ? void 0 : _ctx$view3.linePattern) || _initialLinePattern,
+            borderWidth: '1px'
+          }
+        }
+      }]
+    };
+  });
+  return _objectSpread2(_objectSpread2({}, props), {}, {
+    label: label,
+    confSchema: {
+      style: {
+        color: colorSelector(_initialColor),
+        linePattern: {
+          label: 'Linha',
+          type: 'select',
+          clearable: false,
+          defaultValue: _initialLinePattern || 'line',
+          options: LINE_PATTERN_OPTIONS.map(function (opt) {
+            return _objectSpread2(_objectSpread2({}, opt), {}, {
+              label: /*#__PURE__*/React.createElement(Flex, {
+                direction: "row",
+                alignItems: "center",
+                gap: "2"
+              }, /*#__PURE__*/React.createElement("div", {
+                style: {
+                  width: 15,
+                  height: 0,
+                  borderStyle: opt.value === 'line' ? 'solid' : 'dashed',
+                  borderWidth: 1
+                }
+              }), /*#__PURE__*/React.createElement("div", null, " ", opt.label))
+            });
+          })
+        }
+      }
+    },
+    metadata: {},
+    sources: _objectSpread2({
+      main: {
+        promoteId: 'id',
+        type: 'vector',
+        tiles: _parseTiles$1(tiles, context)
+      }
+    }, sources),
+    layers: _objectSpread2(_defineProperty({}, "main_line", _objectSpread2(_objectSpread2({
+      zIndex: Z_OVERLAY_MIDDLE_2000,
+      source: 'main',
+      'source-layer': source_layer,
+      type: 'line'
+    }, line), {}, {
+      paint: _linePattern,
+      legends: [_legend],
+      tooltip: basicTooltip(tooltip)
+    })), layers)
+  });
+}
+
+var _excluded$8 = ["label", "circle", "color", "tiles", "source_layer", "sources", "layers"];
 function _parseTiles(tiles, context) {
   tiles = Array.isArray(tiles) ? tiles : typeof tiles === 'string' ? [tiles] : null;
   if (!tiles) {
@@ -6465,7 +7757,8 @@ function _parseTiles(tiles, context) {
   });
 }
 function vector_circle(_ref, allViewSpecs, context) {
-  var _ref$circle = _ref.circle,
+  var label = _ref.label,
+    _ref$circle = _ref.circle,
     circle = _ref$circle === void 0 ? {} : _ref$circle,
     color = _ref.color,
     tiles = _ref.tiles,
@@ -6474,11 +7767,37 @@ function vector_circle(_ref, allViewSpecs, context) {
     sources = _ref$sources === void 0 ? {} : _ref$sources,
     _ref$layers = _ref.layers,
     layers = _ref$layers === void 0 ? {} : _ref$layers,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   if (!source_layer) {
     throw new Error('source_layer must be defined');
   }
+  var _initialColor = resolveColor(color);
+  var _color = resolve.fn(function (ctx) {
+    var _ctx$view;
+    return resolveColor((_ctx$view = ctx.view) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.conf) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.style) === null || _ctx$view === void 0 ? void 0 : _ctx$view.color) || _initialColor;
+  });
+  var _legend = resolve.fn(_color, function (_resolvedColor) {
+    return {
+      type: 'CategoricalLegend',
+      items: [{
+        label: label,
+        box: {
+          style: {
+            backgroundColor: _resolvedColor,
+            border: '1px solid black',
+            borderRadius: '30px'
+          }
+        }
+      }]
+    };
+  });
   return _objectSpread2(_objectSpread2({}, props), {}, {
+    label: label,
+    confSchema: {
+      style: {
+        color: colorSelector(_initialColor)
+      }
+    },
     metadata: {},
     sources: _objectSpread2({
       main: {
@@ -6495,11 +7814,12 @@ function vector_circle(_ref, allViewSpecs, context) {
     }, circle), {}, {
       paint: _objectSpread2({
         'circle-radius': 8,
-        'circle-color': color,
+        'circle-color': _color,
         'circle-opacity': 1,
         'circle-stroke-color': '#000000',
         'circle-stroke-width': 1
       }, circle.paint || {}),
+      legends: [_legend],
       tooltip: {
         title: ['$literal', resolve.fn(function (ctx) {
           var _ctx$feature;
@@ -6514,6 +7834,313 @@ function vector_circle(_ref, allViewSpecs, context) {
   });
 }
 
+function confSchema(viewSpec, allViewSpecs, context) {
+  var styleSpec = viewSpec.style;
+  return {
+    style: {
+      color: colorSelector(styleSpec.color)
+    }
+  };
+}
+
+function metadata$1(viewSpec, allViewSpecs, context) {
+  return {};
+}
+
+var MAIN_SOURCE_ID$1 = 'main';
+function sources$1(viewSpec, allViewSpecs, context) {
+  var tiles = viewSpec.tiles;
+  return _defineProperty({}, MAIN_SOURCE_ID$1, {
+    promoteId: 'id',
+    type: 'vector',
+    tiles: parseTiles(tiles, context)
+  });
+}
+
+function _main_circle_legends$1(props, viewSpec, allViewSpecs, context) {
+  var _legends = resolve.fn(function (ctx) {
+    var _ctx$view, _viewSpec$style, _viewSpec$style2;
+    var _resolvedColor = resolveColor(((_ctx$view = ctx.view) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.conf) === null || _ctx$view === void 0 || (_ctx$view = _ctx$view.style) === null || _ctx$view === void 0 ? void 0 : _ctx$view.color) || ((_viewSpec$style = viewSpec.style) === null || _viewSpec$style === void 0 ? void 0 : _viewSpec$style.color)) || schemeGeoReDUS.laranja;
+    return [{
+      type: 'CategoricalLegend',
+      items: [{
+        label: viewSpec.label,
+        box: {
+          style: {
+            backgroundColor: _resolvedColor,
+            border: 'none',
+            borderRadius: '30px',
+            opacity: ((_viewSpec$style2 = viewSpec.style) === null || _viewSpec$style2 === void 0 ? void 0 : _viewSpec$style2.opacity) || 1
+          }
+        }
+      }]
+    }];
+  });
+  return _legends;
+}
+function _main_circle$1(props, viewSpec, allViewSpecs, context) {
+  var _viewSpec$style4, _viewSpec$style5, _viewSpec$style6;
+  _objectDestructuringEmpty(props);
+  var source_layer = viewSpec.source_layer;
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: MAIN_SOURCE_ID$1,
+    'source-layer': source_layer,
+    interactive: true,
+    type: 'circle',
+    paint: {
+      'circle-color': resolve.fn(function (ctx) {
+        var _ctx$view2, _viewSpec$style3;
+        var _resolvedColor = resolveColor(((_ctx$view2 = ctx.view) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.conf) === null || _ctx$view2 === void 0 || (_ctx$view2 = _ctx$view2.style) === null || _ctx$view2 === void 0 ? void 0 : _ctx$view2.color) || ((_viewSpec$style3 = viewSpec.style) === null || _viewSpec$style3 === void 0 ? void 0 : _viewSpec$style3.color)) || schemeGeoReDUS.laranja;
+        return _resolvedColor;
+      }),
+      'circle-opacity': ((_viewSpec$style4 = viewSpec.style) === null || _viewSpec$style4 === void 0 ? void 0 : _viewSpec$style4.opacity) || 1,
+      'circle-radius': ((_viewSpec$style5 = viewSpec.style) === null || _viewSpec$style5 === void 0 ? void 0 : _viewSpec$style5.radius) || 10,
+      'circle-stroke-color': '#ffffff',
+      'circle-stroke-width': (_viewSpec$style6 = viewSpec.style) !== null && _viewSpec$style6 !== void 0 && _viewSpec$style6.border ? 2 : 0
+    },
+    legends: _main_circle_legends$1(props, viewSpec),
+    tooltip: basicTooltip(viewSpec.tooltip)
+  };
+}
+function layers$1(viewSpec, allViewSpecs, context) {
+  var source_layer = viewSpec.source_layer;
+  if (!source_layer) {
+    throw new Error('source_layer must be defined');
+  }
+  return _defineProperty({}, "main_circle", _main_circle$1({}, viewSpec));
+}
+
+function _defaultColor(inputColor) {
+  return inputColor ? resolveColor(inputColor) : schemeGeoReDUS.laranja;
+}
+function parseStyleSpec$1(styleInput) {
+  if (!styleInput) {
+    return {};
+  }
+  if (typeof styleInput === 'string') {
+    return {
+      color: _defaultColor(styleInput),
+      border: true
+    };
+  } else {
+    return __assign(__assign({
+      border: true
+    }, styleInput), {
+      color: _defaultColor(styleInput.color)
+    });
+  }
+}
+
+function download$1(viewSpec, allViewSpecs, context) {
+  return basicDownload({
+    fileName: slugify(viewSpec.label),
+    downloadUrl: interpolate(viewSpec.download_url || "", {
+      METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT
+    })
+  });
+}
+
+var _excluded$7 = ["style"];
+function vector_point_single(_ref, allViewSpecs, context) {
+  var style = _ref.style,
+    viewSpec = _objectWithoutProperties(_ref, _excluded$7);
+  viewSpec = _objectSpread2(_objectSpread2({}, viewSpec), {}, {
+    style: parseStyleSpec$1(style)
+  });
+  return _objectSpread2(_objectSpread2({}, pick(viewSpec, ['id', 'path', 'label', 'sourceLabel'])), {}, {
+    confSchema: confSchema(viewSpec),
+    metadata: metadata$1(),
+    sources: sources$1(viewSpec, allViewSpecs, context),
+    layers: layers$1(viewSpec),
+    download: download$1(viewSpec, allViewSpecs, context)
+  });
+}
+
+function metadata(viewSpec, allViewSpecs, context) {
+  var _style$radius;
+  var style = viewSpec.style;
+  var radiusData = (_style$radius = style.radius) !== null && _style$radius !== void 0 && _style$radius.values ? resolveAsync.fn(/*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(ctx) {
+      var resolvedValues;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(typeof style.radius.values === 'string')) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 3;
+            return fetch(interpolate(style.radius.values, {
+              METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT,
+              municipioId: context.municipioId,
+              //
+              // TODO: remove these hotfixes
+              //
+              municipioId_SUS: context.municipioId.substr(0, 6)
+            })).then(function (res) {
+              return res.json();
+            });
+          case 3:
+            _context.t0 = _context.sent;
+            _context.next = 7;
+            break;
+          case 6:
+            _context.t0 = Array.isArray(style.radius.values) ? style.radius.values : null;
+          case 7:
+            resolvedValues = _context.t0.map(function (entry) {
+              return typeof entry === 'number' ? entry : entry.value;
+            });
+            return _context.abrupt("return", {
+              values: resolvedValues
+            });
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }()) : null;
+  return {
+    radiusData: radiusData
+  };
+}
+
+var MAIN_SOURCE_ID = 'main';
+function sources(viewSpec, allViewSpecs, context) {
+  var tiles = viewSpec.tiles;
+  return _defineProperty({}, MAIN_SOURCE_ID, {
+    promoteId: 'id',
+    type: 'vector',
+    tiles: parseTiles(tiles, context)
+  });
+}
+
+var SIZE_MAX = 25;
+var SIZE_MIN = 6;
+function _validNumericalValues(values) {
+  return values.filter(function (value) {
+    return typeof value === 'number' && !Number.isNaN(value);
+  });
+}
+var NO_DATA_COLOR = GEOREDUS_LABELED_RESTRICTED_USE_COLORS.cinza_claro.value;
+function _main_circle_legends(props, viewSpec, allViewSpecs, context) {
+  var _legends = resolve.fn(function (ctx) {
+    var _viewSpec$style;
+    var _values = _validNumericalValues(ctx.view.metadata.radiusData.values);
+    var _resolvedColor = resolveColor((_viewSpec$style = viewSpec.style) === null || _viewSpec$style === void 0 ? void 0 : _viewSpec$style.color) || schemeGeoReDUS.laranja;
+    return [{
+      type: 'CategoricalLegend',
+      title: viewSpec.label,
+      items: [{
+        label: 'Com dados',
+        color: _resolvedColor
+      }, {
+        label: 'Sem dados',
+        color: NO_DATA_COLOR
+      }]
+    }, {
+      type: 'ProportionalSymbolLegend',
+      unit: viewSpec.measure_unit,
+      title: viewSpec.label,
+      min: Math.min.apply(Math, _toConsumableArray(_values)),
+      max: Math.max.apply(Math, _toConsumableArray(_values)),
+      sizeMin: SIZE_MIN * 2,
+      sizeMax: SIZE_MAX * 2,
+      numberFormat: ['pt-BR', {
+        maximumFractionDigits: 0
+      }]
+    }];
+  });
+  return _legends;
+}
+function _main_circle(props, viewSpec, allViewSpecs, context) {
+  _objectDestructuringEmpty(props);
+  var source_layer = viewSpec.source_layer;
+  return {
+    zIndex: Z_OVERLAY_BASE_1000,
+    source: MAIN_SOURCE_ID,
+    'source-layer': source_layer,
+    interactive: true,
+    type: 'circle',
+    // 'circle-sort-key': resolve.fn((ctx) => {
+    //   if (!viewSpec.style.radius?.valueKey) {
+    //     return 0
+    //   }
+
+    //   return ['coalesce', ['get', viewSpec.style.radius.valueKey], 0]
+    // }),
+    paint: {
+      'circle-color': resolve.fn(function (ctx) {
+        var _viewSpec$style2, _viewSpec$style3;
+        var _resolvedColor = resolveColor((_viewSpec$style2 = viewSpec.style) === null || _viewSpec$style2 === void 0 ? void 0 : _viewSpec$style2.color) || schemeGeoReDUS.laranja;
+        if ((_viewSpec$style3 = viewSpec.style) !== null && _viewSpec$style3 !== void 0 && (_viewSpec$style3 = _viewSpec$style3.radius) !== null && _viewSpec$style3 !== void 0 && _viewSpec$style3.valueKey) {
+          var _viewSpec$style4;
+          return ['case', ['==', ['typeof', ['get', (_viewSpec$style4 = viewSpec.style) === null || _viewSpec$style4 === void 0 || (_viewSpec$style4 = _viewSpec$style4.radius) === null || _viewSpec$style4 === void 0 ? void 0 : _viewSpec$style4.valueKey]], 'number'], _resolvedColor, NO_DATA_COLOR];
+        } else {
+          return _resolvedColor;
+        }
+      }),
+      'circle-opacity': 1,
+      'circle-radius': resolve.fn(function (ctx) {
+        var _viewSpec$style$radiu, _viewSpec$style5;
+        if (!((_viewSpec$style$radiu = viewSpec.style.radius) !== null && _viewSpec$style$radiu !== void 0 && _viewSpec$style$radiu.valueKey)) {
+          return 10;
+        }
+        var values = _validNumericalValues(ctx.view.metadata.radiusData.values);
+        return zoomSensitiveLinearSizes({
+          variable: ['get', (_viewSpec$style5 = viewSpec.style) === null || _viewSpec$style5 === void 0 || (_viewSpec$style5 = _viewSpec$style5.radius) === null || _viewSpec$style5 === void 0 ? void 0 : _viewSpec$style5.valueKey],
+          minValue: Math.min.apply(Math, _toConsumableArray(values)),
+          maxValue: Math.max.apply(Math, _toConsumableArray(values)),
+          minSize: SIZE_MIN,
+          maxSize: SIZE_MAX
+        });
+      })
+    },
+    legends: _main_circle_legends(props, viewSpec),
+    tooltip: basicTooltip(viewSpec.tooltip)
+  };
+}
+function layers(viewSpec, allViewSpecs, context) {
+  var source_layer = viewSpec.source_layer;
+  if (!source_layer) {
+    throw new Error('source_layer must be defined');
+  }
+  return _defineProperty({}, "main_circle", _main_circle({}, viewSpec));
+}
+
+function parseStyleSpec(styleInput) {
+  return __assign({}, styleInput);
+}
+
+function download(viewSpec, allViewSpecs, context) {
+  return basicDownload({
+    fileName: slugify(viewSpec.label),
+    downloadUrl: interpolate(viewSpec.download_url || "", {
+      METADATA_API_ENDPOINT: context.METADATA_API_ENDPOINT
+    })
+  });
+}
+
+var _excluded$6 = ["style"];
+function vector_point_continuous(_ref, allViewSpecs, context) {
+  var style = _ref.style,
+    viewSpec = _objectWithoutProperties(_ref, _excluded$6);
+  viewSpec = _objectSpread2(_objectSpread2({}, viewSpec), {}, {
+    style: parseStyleSpec(style)
+  });
+  return _objectSpread2(_objectSpread2({}, pick(viewSpec, ['id', 'path', 'label', 'sourceLabel'])), {}, {
+    // confSchema: confSchema(viewSpec, allViewSpecs, context),
+    metadata: metadata(viewSpec, allViewSpecs, context),
+    sources: sources(viewSpec, allViewSpecs, context),
+    layers: layers(viewSpec),
+    download: download(viewSpec, allViewSpecs, context)
+  });
+}
+
 var PRESETS = /*#__PURE__*/Object.freeze({
   __proto__: null,
   cem_censo_2010_2022: cem_censo_2010_2022,
@@ -6522,7 +8149,12 @@ var PRESETS = /*#__PURE__*/Object.freeze({
   cem_saude_2024: cem_saude_2024,
   vector_circle: vector_circle,
   vector_line: vector_line,
-  vector_polygon: vector_polygon
+  vector_point_continuous: vector_point_continuous,
+  vector_point_single: vector_point_single,
+  vector_polygon: vector_polygon,
+  vector_polygon_categorical: vector_polygon_categorical,
+  vector_polygon_continuous: vector_polygon_continuous,
+  vector_polygon_single: vector_polygon_single
 });
 
 function parseViewSpec(specInput, otherSpecInputs, context) {
@@ -6662,7 +8294,17 @@ function resolveConfSchema(viewSpec, partialView, viewResolutionContextBase) {
   });
   return resolveExpr(viewSpec.confSchema, resolveFinalContext);
 }
-var resolveMetadata = _stageResolver('metadata');
+// export const resolveMetadata = _stageResolver<
+//   Pick<ResolvedView, 'conf'>,
+//   ResolvedView['metadata']
+// >('metadata')
+//Changed resolveMetadata to get sourceLabel from viewSpec
+var resolveMetadata = _stageResolver('metadata', function (metadata, _a) {
+  var viewSpec = _a.viewSpec;
+  return __assign(__assign({}, metadata), {
+    sourceLabel: viewSpec.sourceLabel
+  });
+});
 var resolveSources = _stageResolver('sources');
 var resolveLayers = _stageResolver('layers', function (layersBase, _a) {
   //
@@ -7133,8 +8775,8 @@ function br_divisao_territorial_views(conf) {
   ];
 }
 
-var _templateObject$6;
-var StyledIframe = styled.iframe(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  border: none;\n  width: 100%;\n  height: 100%;\n"])));
+var _templateObject$8;
+var StyledIframe = styled.iframe(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  border: none;\n  width: 100%;\n  height: 100%;\n"])));
 function DocumentIframe(_ref) {
   var src = _ref.src;
   return /*#__PURE__*/React.createElement(AspectRatio, {
@@ -7595,8 +9237,8 @@ function overture_places_poc(_ref) {
   };
 }
 
-var _templateObject$5, _templateObject2$3;
-var AutoWrapContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  direction: row;\n  flex-wrap: wrap;\n  margin-left: -10px;\n  margin-top: -10px;\n\n  > * {\n    margin-left: 10px;\n    margin-top: 10px;\n  }\n"])));
+var _templateObject$7, _templateObject2$3;
+var AutoWrapContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  display: flex;\n  direction: row;\n  flex-wrap: wrap;\n  margin-left: -10px;\n  margin-top: -10px;\n\n  > * {\n    margin-left: 10px;\n    margin-top: 10px;\n  }\n"])));
 var UnstyledList = styled.ul(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
 var REDUS_MUTIRAO_COP_2025_ID = 'redus_mutirao_cop_2025.geom';
 var URL_RE = /^https?:\/\//;
@@ -8300,7 +9942,12 @@ var index = /*#__PURE__*/Object.freeze({
   temperatura_superficie: temperatura_superficie,
   vector_circle: vector_circle,
   vector_line: vector_line,
-  vector_polygon: vector_polygon
+  vector_point_continuous: vector_point_continuous,
+  vector_point_single: vector_point_single,
+  vector_polygon: vector_polygon,
+  vector_polygon_categorical: vector_polygon_categorical,
+  vector_polygon_continuous: vector_polygon_continuous,
+  vector_polygon_single: vector_polygon_single
 });
 
 var CollapsibleContent_slideDown = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n"], ["\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n"])));
@@ -8540,8 +10187,8 @@ function ViewConfTabs(_ref) {
 }
 
 var _excluded$4 = ["textSearch", "content", "maxLines"];
-var _templateObject$4, _templateObject2$2;
-var Container$1 = styled(Box)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  --view-control-base-padding: 12px;\n  box-shadow:\n    rgba(0, 0, 0, 0.12) 0px 1px 3px,\n    rgba(0, 0, 0, 0.24) 0px 1px 2px;\n\n  border-radius: 2px;\n  background-color: var(--redus-bege, white);\n  // background-color: var(--accent-4, white);\n"])));
+var _templateObject$6, _templateObject2$2;
+var Container$1 = styled(Box)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  --view-control-base-padding: 12px;\n  box-shadow:\n    rgba(0, 0, 0, 0.12) 0px 1px 3px,\n    rgba(0, 0, 0, 0.24) 0px 1px 2px;\n\n  border-radius: 2px;\n  background-color: var(--redus-bege, white);\n  // background-color: var(--accent-4, white);\n"])));
 var Summary = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  // background-color: var(--redus-bege, white);\n  background-color: ", ";\n  padding: 0;\n\n  transition: background-color 0.1s ease-out;\n\n  display: flex;\n  border: none;\n  text-align: left;\n  width: 100%;\n\n  cursor: pointer;\n\n  &:hover {\n    // background-color: color-mix(in srgb, var(--redus-bege) 80%, white);\n    background-color: ", ";\n  }\n\n  &:active {\n    filter: brightness(96%);\n  }\n"])), function (_ref) {
   var $active = _ref.$active;
   return $active ? 'var(--redus-bege, white)' : 'var(--accent-2)';
@@ -8691,7 +10338,7 @@ function ViewControl(_ref8) {
 }
 
 var _excluded$3 = ["viewSpecs", "viewConfState", "resolvedViews", "onSetView", "onDeactivateView", "style", "categoryIcons"];
-var _templateObject$3, _templateObject2$1;
+var _templateObject$5, _templateObject2$1;
 var CATEGORY_ICONS = {
   'populacao-e-domicilios': /*#__PURE__*/React$1.createElement(Icon, {
     path: mdiAccountGroup
@@ -8720,7 +10367,7 @@ var ViewMenuContext = /*#__PURE__*/createContext({
   onSetView: errNoViewMenuContext,
   onDeactivateView: errNoViewMenuContext
 });
-var ActiveCounter = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(-30%, -30%);\n  border-radius: 50%;\n  border: 1px solid white;\n  height: 20px;\n  width: 20px;\n  font-size: 12px;\n  background-color: var(--accent-9);\n  color: white;\n  font-weight: bold;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var ActiveCounter = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(-30%, -30%);\n  border-radius: 50%;\n  border: 1px solid white;\n  height: 20px;\n  width: 20px;\n  font-size: 12px;\n  background-color: var(--accent-9);\n  color: white;\n  font-weight: bold;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 function Item(_ref) {
   var node = _ref.node;
     _ref.depth;
@@ -8880,6 +10527,76 @@ function ViewMenu(_ref4) {
   }, props))));
 }
 
+function GeoReDUSLogo(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? '#ffffff' : _props$color;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    version: "1.1",
+    id: "Layer_1",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 419.41 149.65"
+  }, /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M182.02,70.21c-7.67,0-13.57-2.05-17.71-6.14c-4.14-4.09-6.21-10.45-6.21-19.06c0-5.73,0.99-10.45,2.98-14.16 c1.99-3.72,4.87-6.48,8.66-8.31c3.79-1.82,8.33-2.73,13.63-2.73c3.17,0,6.15,0.35,8.95,1.06s5.27,1.8,7.42,3.27 c2.15,1.47,3.83,3.3,5.04,5.5c1.21,2.2,1.81,4.82,1.81,7.85h-10.72c0-1.47-0.32-2.77-0.96-3.91c-0.64-1.14-1.53-2.08-2.66-2.84 c-1.14-0.76-2.44-1.32-3.9-1.7c-1.47-0.38-3.01-0.57-4.62-0.57c-2.46,0-4.61,0.32-6.46,0.96s-3.37,1.61-4.58,2.91 c-1.21,1.3-2.12,2.92-2.73,4.86c-0.62,1.94-0.92,4.19-0.92,6.75v2.13c0,3.55,0.52,6.46,1.56,8.73c1.04,2.27,2.6,3.96,4.69,5.08 c2.08,1.11,4.66,1.67,7.74,1.67c2.56,0,4.82-0.39,6.78-1.17c1.96-0.78,3.5-1.9,4.62-3.37c1.11-1.47,1.67-3.27,1.67-5.4v-0.5 h-14.56v-8.09h25.06v26.34h-6.96l-0.92-5.25c-1.42,1.37-2.95,2.51-4.58,3.41c-1.63,0.9-3.44,1.57-5.43,2.02 C186.7,69.99,184.48,70.21,182.02,70.21z"
+  })), /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M272.34,70.12c-3.84,0-7.1-0.66-9.78-1.98c-2.68-1.32-4.71-3.35-6.1-6.1c-1.38-2.75-2.08-6.2-2.08-10.35 c0-4.24,0.69-7.72,2.08-10.42c1.38-2.7,3.42-4.71,6.1-6.03c2.68-1.32,5.94-1.98,9.78-1.98c3.93,0,7.22,0.66,9.88,1.98 c2.66,1.32,4.68,3.33,6.06,6.03c1.38,2.7,2.08,6.18,2.08,10.42c0,4.15-0.69,7.6-2.08,10.35c-1.38,2.75-3.41,4.78-6.06,6.1 C279.56,69.46,276.27,70.12,272.34,70.12z M272.34,62.88c2.05,0,3.7-0.38,4.92-1.14c1.23-0.76,2.13-1.92,2.71-3.48 c0.58-1.56,0.87-3.48,0.87-5.76v-1.61c0-2.28-0.29-4.2-0.87-5.76c-0.58-1.56-1.49-2.74-2.71-3.52c-1.23-0.78-2.87-1.17-4.92-1.17 c-2.01,0-3.63,0.39-4.86,1.17c-1.23,0.78-2.13,1.95-2.71,3.52c-0.58,1.56-0.87,3.48-0.87,5.76v1.61c0,2.28,0.29,4.2,0.87,5.76 c0.58,1.56,1.48,2.73,2.71,3.48C268.71,62.5,270.33,62.88,272.34,62.88z"
+  })), /*#__PURE__*/React$1.createElement("g", null, /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M234.74,107.79c0-1.95-0.59-3.58-1.77-4.91c-1.18-1.33-3.02-1.99-5.53-1.99c-2.53,0-4.49,0.71-5.88,2.14 c-1.39,1.42-2.26,3.38-2.63,5.86l15.77-0.15C234.73,108.52,234.74,108.21,234.74,107.79L234.74,107.79z M236.92,95.29 c2.45,1.52,4.25,3.51,5.42,5.97c1.17,2.46,1.75,5.12,1.75,7.99c0,1.95-0.29,3.93-0.88,5.95l-23.98,0.18 c0.61,2.26,1.77,4.02,3.49,5.26c1.72,1.24,3.95,1.86,6.7,1.86c1.63,0,3.36-0.18,5.18-0.55c1.83-0.37,3.65-0.9,5.48-1.61l1.86,7.56 c-1.73,0.73-3.92,1.34-6.57,1.83c-2.65,0.49-5.06,0.73-7.23,0.73c-5.91,0-10.51-1.54-13.78-4.62c-3.27-3.08-4.91-7.82-4.91-14.22 c0-3.99,0.72-7.38,2.17-10.17c1.45-2.79,3.54-4.89,6.28-6.32c2.74-1.42,6.03-2.14,9.87-2.14 C231.42,93.01,234.47,93.77,236.92,95.29L236.92,95.29z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M239.62,47.35c0-1.95-0.59-3.58-1.77-4.91c-1.18-1.33-3.02-1.99-5.53-1.99c-2.53,0-4.49,0.71-5.88,2.14 c-1.39,1.42-2.26,3.38-2.63,5.86l15.77-0.15C239.61,48.08,239.62,47.76,239.62,47.35L239.62,47.35z M241.8,34.84 c2.45,1.52,4.25,3.51,5.42,5.97c1.17,2.46,1.75,5.12,1.75,7.99c0,1.95-0.29,3.93-0.88,5.95l-23.98,0.18 c0.61,2.26,1.77,4.02,3.49,5.26c1.72,1.24,3.95,1.86,6.7,1.86c1.63,0,3.36-0.18,5.18-0.55c1.83-0.37,3.65-0.9,5.48-1.61l1.86,7.56 c-1.73,0.73-3.92,1.34-6.57,1.83c-2.65,0.49-5.06,0.73-7.23,0.73c-5.91,0-10.51-1.54-13.78-4.62c-3.27-3.08-4.91-7.82-4.91-14.22 c0-3.99,0.72-7.38,2.17-10.17c1.45-2.79,3.54-4.89,6.28-6.32c2.74-1.42,6.03-2.14,9.87-2.14C236.3,32.56,239.35,33.32,241.8,34.84 L241.8,34.84z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M270.56,121.41c3.65,0,6.77-0.72,9.36-2.15c2.59-1.44,4.56-3.52,5.91-6.26c1.35-2.74,2.03-6.05,2.03-9.95 c0-5.91-1.43-10.33-4.29-13.23c-2.86-2.91-7.09-4.35-12.69-4.33l-8.4,0.07v35.85H270.56L270.56,121.41z M252.82,77.31h18.22 c8.83,0,15.5,2.09,20,6.28c4.5,4.19,6.75,10.6,6.75,19.24c0,5.45-1.13,10.19-3.39,14.22c-2.26,4.03-5.46,7.13-9.58,9.31 c-4.13,2.18-8.9,3.27-14.33,3.27l-17.67,0.07V77.31L252.82,77.31z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M311.42,125.06c-3.37-3.63-5.06-8.88-5.06-15.77V77.27h9.71v31.36c0,8.81,3.84,13.22,11.54,13.22 c7.3,0,10.95-4.22,10.95-12.67V77.27h9.67v31.18c0,14.7-7.08,22.05-21.25,22.05C319.98,130.5,314.8,128.69,311.42,125.06 L311.42,125.06z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M365.43,129.29c-2.51-0.66-5.38-1.74-8.62-3.25l3.36-8.62c2.85,1.44,5.24,2.42,7.19,2.96 c1.95,0.54,3.95,0.8,6.02,0.8c3.21,0,5.56-0.6,7.05-1.81c1.48-1.21,2.23-2.82,2.23-4.84c0-1.22-0.41-2.26-1.22-3.14 c-0.82-0.88-1.84-1.61-3.07-2.19c-1.23-0.58-2.96-1.3-5.2-2.15c-3.12-1.17-5.66-2.28-7.63-3.34c-1.97-1.06-3.66-2.55-5.06-4.47 c-1.4-1.92-2.1-4.37-2.1-7.34c0-3.46,0.85-6.34,2.56-8.65c1.7-2.31,3.95-4.01,6.75-5.09c2.8-1.08,5.89-1.62,9.27-1.62 c2.46,0,4.77,0.24,6.94,0.71c2.17,0.47,4.31,1.14,6.42,1.99l-3.1,8.4l-0.91-0.33c-1.51-0.58-2.92-1.03-4.23-1.35 c-1.31-0.32-2.9-0.47-4.75-0.47c-2.39,0-4.42,0.47-6.1,1.42c-1.68,0.95-2.52,2.43-2.52,4.45c0,1.05,0.36,1.96,1.08,2.74 c0.72,0.78,1.63,1.44,2.74,1.99c1.11,0.55,2.66,1.21,4.65,1.99c3.09,1.24,5.63,2.42,7.63,3.54c1.99,1.12,3.71,2.72,5.15,4.8 c1.44,2.08,2.15,4.72,2.15,7.9c0,3.26-0.74,6.09-2.21,8.49c-1.47,2.4-3.61,4.24-6.41,5.53c-2.8,1.29-6.17,1.93-10.11,1.93 C370.59,130.28,367.94,129.95,365.43,129.29L365.43,129.29z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M191.16,105.78c3.07-1.17,5.48-2.91,7.25-5.24c1.76-2.32,2.66-5.08,2.68-8.27c0-3.21-0.71-5.94-2.12-8.18 c-1.41-2.24-3.41-3.94-6.01-5.09c-2.59-1.16-5.63-1.73-9.11-1.73h-18.47v52.35h9.71l-0.03-12.18l-0.01-32.65l5.99-0.04 c3.19-0.05,5.64,0.62,7.36,1.99c1.72,1.37,2.57,3.43,2.57,6.15c0,2.7-0.94,4.78-2.83,6.22c-1.77,1.36-4.22,2.08-7.32,2.16h-0.14 v5.79l14.52,22.56h11.57L191.16,105.78L191.16,105.78z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M90.31,32.32l-3.1-0.07c0.06-2.71-0.94-5.28-2.81-7.23c-1.87-1.96-4.39-3.07-7.1-3.13l0.07-3.1 c3.54,0.08,6.83,1.53,9.27,4.08C89.08,25.43,90.38,28.78,90.31,32.32L90.31,32.32z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M98.65,32.5l-3.1-0.07c0.22-10.18-7.88-18.65-18.07-18.87l0.07-3.1C89.45,10.72,98.91,20.6,98.65,32.5 L98.65,32.5z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M76.98,35.82c2.47,0.05,4.51-1.9,4.56-4.37c0.05-2.47-1.9-4.51-4.37-4.56c-2.47-0.05-4.51,1.9-4.56,4.37 C72.56,33.73,74.51,35.77,76.98,35.82L76.98,35.82z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M73.98,118.14c-3.84,0-6.97,3.13-6.97,6.97c0,3.84,3.13,6.97,6.97,6.97l0.23,0.02 c0.03,0.01,4.8,0.42,12.67-6.99c-7.86-7.49-12.62-6.99-12.67-6.98l-0.13,0.02L73.98,118.14L73.98,118.14z M74.44,135.2 c-0.24,0-0.43-0.01-0.55-0.03c-5.51-0.05-9.97-4.55-9.97-10.07c0-5.52,4.46-10.01,9.96-10.07c1.17-0.14,7.18-0.29,16.33,8.98 l1.08,1.1l-1.09,1.09C82.03,134.38,76.38,135.2,74.44,135.2L74.44,135.2z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M77.22,80.53c3.15,0,5.71-2.56,5.71-5.71c0-3.15-2.56-5.71-5.71-5.71c-3.15,0-5.71,2.56-5.71,5.71 C71.51,77.98,74.06,80.53,77.22,80.53L77.22,80.53z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M77.8,126.65c-23.03,0-41.76-18.73-41.76-41.76c0-23,18.7-41.71,41.69-41.71c23,0,41.71,18.71,41.71,41.71 h-3.1c0-21.29-17.32-38.61-38.61-38.61c-21.28,0-38.59,17.32-38.59,38.61c0,21.32,17.34,38.66,38.66,38.66V126.65L77.8,126.65z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M77.71,139.79c-30.28,0-54.92-24.63-54.92-54.9c0-30.28,24.64-54.92,54.92-54.92v3.1 c-28.58,0-51.82,23.25-51.82,51.82c0,28.56,23.25,51.8,51.82,51.8c28.56,0,51.8-23.24,51.8-51.8h3.1 C132.6,115.16,107.98,139.79,77.71,139.79L77.71,139.79z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M77.65,113.25c-4.64,0-8.27-1.37-10.8-4.07c-3.85-4.1-3.69-9.79-3.66-10.46v-6.47c0-4.73,3.85-8.57,8.57-8.57 h12.71c4.73,0,8.57,3.85,8.57,8.57l0,0.07c-0.01,0.11-0.7,11.23-15.96,11.23v-3.1c11.94,0,12.81-7.59,12.87-8.25 c-0.03-3-2.47-5.42-5.47-5.42H71.76c-3.02,0-5.47,2.46-5.47,5.47l0,6.61c0,0.05-0.25,4.94,2.84,8.22 c1.92,2.04,4.79,3.07,8.53,3.07c13.91,0,25.22-11.33,25.22-25.25c0-13.91-11.31-25.22-25.22-25.22 c-13.88,0-24.76,11.08-24.76,25.22h-3.1c0-15.88,12.24-28.32,27.86-28.32c15.62,0,28.32,12.7,28.32,28.32 C105.97,100.53,93.26,113.25,77.65,113.25L77.65,113.25z"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    fill: color,
+    d: "M131.1,66.21c-2.22,0-4.03-1.8-4.03-4.03c0-2.22,1.8-4.03,4.03-4.03c2.22,0,4.03,1.8,4.03,4.03 C135.12,64.41,133.32,66.21,131.1,66.21L131.1,66.21z M140.73,62.31c0-5.35-4.33-9.68-9.68-9.68c-5.35,0-9.68,4.33-9.68,9.68 c0,0-0.98,6.53,9.68,17.18C141.84,68.84,140.73,62.31,140.73,62.31L140.73,62.31z"
+  }), /*#__PURE__*/React$1.createElement("polygon", {
+    fill: color,
+    points: "120.73,93.6 112.2,93.6 112.2,102.12 120.73,102.12 120.73,93.6     "
+  }), /*#__PURE__*/React$1.createElement("polygon", {
+    fill: color,
+    points: "108.64,110.54 100.11,110.54 100.11,119.06 108.64,119.06 108.64,110.54     "
+  }))));
+}
+
 function GeoReDUSLogoSymbol() {
   var color = '#FFFFFF';
   return /*#__PURE__*/React$1.createElement("svg", {
@@ -9040,15 +10757,17 @@ function CopyToClipboardIconButton(_ref2) {
 }
 
 var _excluded$2 = ["url"];
-var _templateObject$2;
-var Container = styled(Flex)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  > * {\n    height: 32px;\n  }\n"])));
+var _templateObject$4;
+var Container = styled(Flex)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  > * {\n    height: 32px;\n  }\n"])));
 var ShareButtonBar = function ShareButtonBar(_ref) {
   var url = _ref.url,
     props = _objectWithoutProperties(_ref, _excluded$2);
   var _useLocation = useLocation(),
     href = _useLocation.href;
   var shareUrl = url ? url : href;
-  return /*#__PURE__*/React$1.createElement(Container, _extends({
+  return /*#__PURE__*/React$1.createElement(Flex, {
+    direction: "column"
+  }, /*#__PURE__*/React$1.createElement(Text, null, "Compartilhar"), /*#__PURE__*/React$1.createElement(Container, _extends({
     direction: "row",
     gap: "3"
   }, props), /*#__PURE__*/React$1.createElement(CopyToClipboardIconButton, {
@@ -9083,49 +10802,751 @@ var ShareButtonBar = function ShareButtonBar(_ref) {
   }, /*#__PURE__*/React$1.createElement(WhatsappIcon, {
     size: 32,
     round: true
-  })));
+  }))));
 };
 
-//
-// html2canvas does not support color functions
-// radix uses: oklch and color(...)
-//
-// https://github.com/niklasvh/html2canvas/issues/2700
-//
-// import html2canvas from 'html2canvas-pro'
-// import { useQuery } from '@tanstack/react-query'
+var SKY_STYLE = {
+  'sky-color': '#199EF3',
+  'sky-horizon-blend': 0.5,
+  'horizon-color': '#d3edfd',
+  'horizon-fog-blend': 0.5,
+  'fog-color': '#0000ff',
+  'fog-ground-blend': 0.5,
+  'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 1, 10, 1, 12, 0]
+};
 
-function SharePanel(_ref) {
-  _ref.syncedMapsRef;
-    _ref.mapContainerRef;
-  //
-  // Experimental image exporting
-  //
-  // const imageBlobQuery = useQuery({
-  //   queryKey: ['a'],
-  //   queryFn: async () => {
-  //     // const canvas = await html2canvas(mapContainerRef.current)
-  //     // const canvas = document.querySelector('canvas.maplibregl-canvas')
-  //     const canvas = syncedMapsRef.current?.mapInstances?.[0].map.getCanvas()
-
-  //     return new Promise((resolve, reject) => {
-  //       canvas.toBlob((blob) => {
-  //         if (blob) {
-  //           resolve(blob)
-  //         } else {
-  //           reject()
-  //         }
-  //       })
-  //     })
-  //   },
-  //   retry: false,
-  //   throwOnError: process.env.NODE_ENV !== 'production',
-  // })
+var _templateObject$3;
+var style = {
+  border: 'none',
+  borderRadius: '70px',
+  backgroundColor: 'transparent'
+};
+var circleStyle = {
+  border: '2px solid black',
+  borderRadius: '70px',
+  padding: '4px',
+  width: '30px',
+  height: '30px',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+var ArrowIcon = styled(Icon)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  transform: rotate(", "deg);\n"])), function (props) {
+  return -props.bearing;
+});
+
+/**
+ * NorthArrow Control Component
+ *
+ * Displays a rotatable north arrow that syncs with the map's bearing.
+ * Click to reset the map bearing to 0°.
+ *
+ * @param {Object} props
+ * @param {string} [props.position='bottom-right'] - Position in MapLibre control bar
+ * @param {React.CSSProperties} [props.style] - Additional styles for the container
+ */
+
+function NorthArrow(_ref) {
+  var _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom-right' : _ref$position,
+    className = _ref.className,
+    _ref$hidden = _ref.hidden,
+    hidden = _ref$hidden === void 0 ? false : _ref$hidden;
+  var containerRef = useRef(null);
+  var mapRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    mountPoint = _useState2[0],
+    setMountPoint = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    bearing = _useState4[0],
+    setBearing = _useState4[1];
+  var mapContext = useMap();
+
+  // Register as a MapLibre control
+  useControl(function () {
+    var container = document.createElement('div');
+    container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+    var mount = document.createElement('div');
+    container.appendChild(mount);
+    containerRef.current = container;
+    setMountPoint(mount);
+    return {
+      onAdd: function onAdd(map) {
+        mapRef.current = map;
+        return container;
+      },
+      onRemove: function onRemove() {
+        if (containerRef.current) {
+          containerRef.current.remove();
+        }
+        mapRef.current = null;
+      }
+    };
+  }, {
+    position: position
+  });
+
+  // Listen to map bearing changes
+  useEffect(function () {
+    var _mapContext$current, _mapContext$current$g;
+    var map = mapRef.current || (mapContext === null || mapContext === void 0 || (_mapContext$current = mapContext.current) === null || _mapContext$current === void 0 || (_mapContext$current$g = _mapContext$current.getMap) === null || _mapContext$current$g === void 0 ? void 0 : _mapContext$current$g.call(_mapContext$current));
+    if (!map) return;
+    var handleMove = function handleMove() {
+      setBearing(map.getBearing());
+    };
+    setBearing(map.getBearing());
+    map.on('move', handleMove);
+    return function () {
+      map.off('move', handleMove);
+    };
+  }, [mapContext]);
+
+  // Handle reset bearing on click
+  var handleClick = function handleClick() {
+    var _mapContext$current2, _mapContext$current2$;
+    var map = mapRef.current || (mapContext === null || mapContext === void 0 || (_mapContext$current2 = mapContext.current) === null || _mapContext$current2 === void 0 || (_mapContext$current2$ = _mapContext$current2.getMap) === null || _mapContext$current2$ === void 0 ? void 0 : _mapContext$current2$.call(_mapContext$current2));
+    if (map && map.getBearing() !== 0) {
+      map.easeTo({
+        bearing: 0
+      });
+    }
+  };
+  return mountPoint ? /*#__PURE__*/createPortal(/*#__PURE__*/React$1.createElement(ControlContainer, {
+    onClick: handleClick,
+    title: "Click to reset bearing to north",
+    style: style,
+    position: position
+  }, /*#__PURE__*/React$1.createElement("div", {
+    style: _objectSpread2(_objectSpread2({}, circleStyle), {}, {
+      display: hidden ? 'none' : 'flex'
+    }),
+    className: className
+  }, /*#__PURE__*/React$1.createElement(ArrowIcon, {
+    path: mdiNavigation,
+    size: "25px",
+    bearing: bearing
+    // style={{ marginTop: '3px' }}
+  }))), mountPoint) : null;
+}
+
+/**
+ * Calculate all paper layout dimensions based on a given paper width
+ * Uses A4 aspect ratio (1:√2) and derives all other constants
+ * 
+ * @param {number} paperWidth - The width of the paper in pixels
+ * @returns {Object} Object containing all calculated dimensions
+ */
+function getPaperDimensions(paperWidth) {
+  var PAPER_WIDTH = paperWidth;
+  var PAPER_HEIGHT = Math.round(PAPER_WIDTH / Math.sqrt(2));
+  var MARGIN = Math.round(PAPER_HEIGHT * 0.05);
+  var PIXELRATIO = 4;
+  var INSIDE_WIDTH = Math.round(PAPER_WIDTH - MARGIN * 2);
+  var INSIDE_HEIGHT = Math.round(PAPER_HEIGHT - MARGIN * 2);
+  var MAP_WIDTH = Math.round(INSIDE_WIDTH);
+  var MAP_HEIGHT = Math.round(INSIDE_HEIGHT * 0.7 - MARGIN / 2);
+  var BOTTOM_HEIGHT = Math.round(INSIDE_HEIGHT - MAP_HEIGHT - MARGIN / 2);
+  var DESCRIPTION_WIDTH = Math.round(INSIDE_WIDTH * 0.25);
+  var QRCODE_SIZE = Math.round(BOTTOM_HEIGHT);
+  var MAPINFO_PADDING = Math.round(MARGIN * 0.4);
+  var LOGO_HEIGHT = Math.round(MAP_HEIGHT * 0.15);
+  var PROJECTION_HEIGHT = Math.round(MAP_HEIGHT * 0.1);
+  var NORTH_SIZE = Math.round(PROJECTION_HEIGHT * 0.8);
+  return {
+    PAPER_WIDTH: PAPER_WIDTH,
+    PAPER_HEIGHT: PAPER_HEIGHT,
+    MARGIN: MARGIN,
+    PIXELRATIO: PIXELRATIO,
+    INSIDE_WIDTH: INSIDE_WIDTH,
+    INSIDE_HEIGHT: INSIDE_HEIGHT,
+    MAP_WIDTH: MAP_WIDTH,
+    MAP_HEIGHT: MAP_HEIGHT,
+    BOTTOM_HEIGHT: BOTTOM_HEIGHT,
+    DESCRIPTION_WIDTH: DESCRIPTION_WIDTH,
+    QRCODE_SIZE: QRCODE_SIZE,
+    LOGO_HEIGHT: LOGO_HEIGHT,
+    PROJECTION_HEIGHT: PROJECTION_HEIGHT,
+    MAPINFO_PADDING: MAPINFO_PADDING,
+    NORTH_SIZE: NORTH_SIZE
+  };
+}
+
+var PREVIEW_WIDTH_PX = 1200;
+var PAPER_WIDTH_PX = 3508;
+
+var _getPaperDimensions$2 = getPaperDimensions(PAPER_WIDTH_PX),
+  PIXELRATIO$2 = _getPaperDimensions$2.PIXELRATIO;
+var LEGEND_CLASS_NAME = 'LegendContainer';
+var IMAGE_DESCRIPTION_CLASS_NAME = 'ImageDescription';
+var QR_CODE_CLASS_NAME = 'QrCode';
+var LOGO_CLASS_NAME = 'Logo';
+var PROJECTION_CLASS_NAME = 'Projection';
+var NORTH_ARROW_CLASS_NAME = 'NorthArrow';
+var SCALE_CONTROL_CLASS_NAME = 'ScaleControl';
+function createBlob(_x, _x2) {
+  return _createBlob.apply(this, arguments);
+}
+function _createBlob() {
+  _createBlob = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(className, rootEl) {
+    var backgroundColor,
+      _args = arguments;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          backgroundColor = _args.length > 2 && _args[2] !== undefined ? _args[2] : '#ffffff';
+          return _context.abrupt("return", toBlob(rootEl.querySelector(".".concat(className)), {
+            cacheBust: true,
+            pixelRatio: PIXELRATIO$2,
+            fontEmbedCSS: false,
+            backgroundColor: backgroundColor
+          }));
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _createBlob.apply(this, arguments);
+}
+function createScaleWrapper(map) {
+  var scaleElement = map.getContainer().querySelector('.maplibregl-ctrl-scale');
+  var scaleWrapper = document.createElement('div');
+  scaleWrapper.style.padding = '0px';
+  scaleWrapper.style.backgroundColor = 'transparent';
+  scaleWrapper.style.display = 'block';
+  scaleWrapper.style.position = 'relative';
+  scaleWrapper.style.overflow = 'visible';
+  var scaleClone = scaleElement.cloneNode(true);
+  scaleClone.style.overflow = 'visible';
+  // Force the internal SVG/lines to not be clipped
+  scaleClone.style.position = 'relative';
+  scaleWrapper.appendChild(scaleClone);
+  document.body.appendChild(scaleWrapper);
+  return scaleWrapper;
+}
+
+// Extract all DOM elements to blobs FIRST (while DOM is visible)
+function extractMapImageBlobs(_x3) {
+  return _extractMapImageBlobs.apply(this, arguments);
+}
+function _extractMapImageBlobs() {
+  _extractMapImageBlobs = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref) {
+    var map, rootEl, blobLegend, blobDescription, blobQRCode, blobLogo, blobProjection, blobNorthArrow, scaleWrapper, blobScale;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          map = _ref.map, rootEl = _ref.rootEl;
+          _context2.next = 3;
+          return createBlob(LEGEND_CLASS_NAME, rootEl);
+        case 3:
+          blobLegend = _context2.sent;
+          _context2.next = 6;
+          return createBlob(IMAGE_DESCRIPTION_CLASS_NAME, rootEl);
+        case 6:
+          blobDescription = _context2.sent;
+          _context2.next = 9;
+          return createBlob(QR_CODE_CLASS_NAME, rootEl);
+        case 9:
+          blobQRCode = _context2.sent;
+          _context2.next = 12;
+          return createBlob(LOGO_CLASS_NAME, rootEl, 'transparent');
+        case 12:
+          blobLogo = _context2.sent;
+          _context2.next = 15;
+          return createBlob(PROJECTION_CLASS_NAME, rootEl, 'transparent');
+        case 15:
+          blobProjection = _context2.sent;
+          _context2.next = 18;
+          return createBlob(NORTH_ARROW_CLASS_NAME, rootEl, 'transparent');
+        case 18:
+          blobNorthArrow = _context2.sent;
+          scaleWrapper = createScaleWrapper(map);
+          _context2.next = 22;
+          return toBlob(scaleWrapper, {
+            cacheBust: true,
+            pixelRatio: PIXELRATIO$2,
+            fontEmbedCSS: false,
+            backgroundColor: 'transparent'
+          });
+        case 22:
+          blobScale = _context2.sent;
+          document.body.removeChild(scaleWrapper);
+          return _context2.abrupt("return", {
+            mapCanvas: map.getCanvas(),
+            blobLegend: blobLegend,
+            blobDescription: blobDescription,
+            blobQRCode: blobQRCode,
+            blobLogo: blobLogo,
+            blobProjection: blobProjection,
+            blobNorthArrow: blobNorthArrow,
+            blobScale: blobScale
+          });
+        case 25:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _extractMapImageBlobs.apply(this, arguments);
+}
+
+var _getPaperDimensions$1 = getPaperDimensions(PAPER_WIDTH_PX),
+  PAPER_WIDTH = _getPaperDimensions$1.PAPER_WIDTH,
+  PAPER_HEIGHT = _getPaperDimensions$1.PAPER_HEIGHT,
+  MARGIN$1 = _getPaperDimensions$1.MARGIN,
+  PIXELRATIO$1 = _getPaperDimensions$1.PIXELRATIO,
+  MAP_WIDTH$1 = _getPaperDimensions$1.MAP_WIDTH,
+  MAP_HEIGHT$1 = _getPaperDimensions$1.MAP_HEIGHT,
+  BOTTOM_HEIGHT$1 = _getPaperDimensions$1.BOTTOM_HEIGHT,
+  DESCRIPTION_WIDTH$1 = _getPaperDimensions$1.DESCRIPTION_WIDTH,
+  QRCODE_SIZE = _getPaperDimensions$1.QRCODE_SIZE,
+  LOGO_HEIGHT = _getPaperDimensions$1.LOGO_HEIGHT,
+  PROJECTION_HEIGHT = _getPaperDimensions$1.PROJECTION_HEIGHT,
+  MAPINFO_PADDING = _getPaperDimensions$1.MAPINFO_PADDING,
+  NORTH_SIZE = _getPaperDimensions$1.NORTH_SIZE;
+function createImg(blob) {
+  return new Promise(function (resolve) {
+    if (!blob) {
+      resolve(null);
+      return;
+    }
+    try {
+      var img = new Image();
+      img.onload = function () {
+        return resolve(img);
+      };
+      img.onerror = function () {
+        console.warn('Failed to load image');
+        resolve(null);
+      };
+      img.src = URL.createObjectURL(blob);
+    } catch (error) {
+      console.error('Error creating image from blob:', error);
+      resolve(null);
+    }
+  });
+}
+function roundRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+  ctx.lineTo(x + radius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+}
+
+// Compose canvas AFTER (using already-extracted blobs)
+function composeMapImageCanvas(_x) {
+  return _composeMapImageCanvas.apply(this, arguments);
+}
+function _composeMapImageCanvas() {
+  _composeMapImageCanvas = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(extractedBlobs) {
+    var mapCanvas, blobLegend, blobDescription, blobQRCode, blobLogo, blobProjection, blobNorthArrow, blobScale, combinedCanvas, ctx, projectionImg, northArrowImg, scaleImg, projectionPosX, projectionPosY, projectionWidth, northPadding, northPosX, northPosY, scaleX, scaleY, scalePadding, scalePosX, scalePosY, scaleWidth, scaleHeight, backgroundX, backgroundY, backgroundWidth, backgroundHeight, logoImg, logoScale, logoPosX, logoPosY, logoWidth, bottomStartY, descriptionImg, legendImg, legendScale, legendHeight, legendWidth, qrCodeImg;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          mapCanvas = extractedBlobs.mapCanvas, blobLegend = extractedBlobs.blobLegend, blobDescription = extractedBlobs.blobDescription, blobQRCode = extractedBlobs.blobQRCode, blobLogo = extractedBlobs.blobLogo, blobProjection = extractedBlobs.blobProjection, blobNorthArrow = extractedBlobs.blobNorthArrow, blobScale = extractedBlobs.blobScale; //0 - CREATE COMBINED CANVAS
+          combinedCanvas = document.createElement('canvas');
+          combinedCanvas.width = PAPER_WIDTH;
+          combinedCanvas.height = PAPER_HEIGHT;
+          ctx = combinedCanvas.getContext('2d'); // Fill background white
+          ctx.fillStyle = '#ffffff';
+          ctx.fillRect(0, 0, PAPER_WIDTH, PAPER_HEIGHT);
+
+          //1 - DRAW MAP ON CANVAS
+          ctx.drawImage(mapCanvas, MARGIN$1, MARGIN$1, MAP_WIDTH$1, MAP_HEIGHT$1);
+
+          //2 - Draw Map Infos
+          //2.1 - Create images from blobs (to get dimensions)
+          _context.next = 10;
+          return createImg(blobProjection);
+        case 10:
+          projectionImg = _context.sent;
+          _context.next = 13;
+          return createImg(blobNorthArrow);
+        case 13:
+          northArrowImg = _context.sent;
+          _context.next = 16;
+          return createImg(blobScale);
+        case 16:
+          scaleImg = _context.sent;
+          projectionPosX = 0;
+          projectionPosY = 0;
+          projectionWidth = 0; //2.2 - Projection dimensions and position
+          if (projectionImg && northArrowImg && scaleImg) {
+            projectionPosX = MARGIN$1 + MAPINFO_PADDING;
+            projectionPosY = MARGIN$1 + MAP_HEIGHT$1 - MAPINFO_PADDING - PROJECTION_HEIGHT;
+            projectionWidth = Math.round(PROJECTION_HEIGHT * (projectionImg.width / projectionImg.height));
+
+            //2.3 - North dimensions and position (to the right of projection)
+            northPadding = (PROJECTION_HEIGHT - NORTH_SIZE) / 2;
+            northPosX = projectionPosX + projectionWidth + MAPINFO_PADDING;
+            northPosY = projectionPosY + northPadding; //2.4 - Scale dimensions and position (below projection)
+            scaleX = MAP_WIDTH$1 / mapCanvas.width;
+            scaleY = MAP_HEIGHT$1 / mapCanvas.height;
+            scalePadding = (PROJECTION_HEIGHT - scaleImg.height * scaleY) / 2;
+            scalePosX = northPosX + NORTH_SIZE + MAPINFO_PADDING;
+            scalePosY = projectionPosY + scalePadding;
+            scaleWidth = Math.round(scaleImg.width * scaleX);
+            scaleHeight = Math.round(scaleImg.height * scaleY); //2.5 - Background dimensions and position
+            backgroundX = MARGIN$1 + MAPINFO_PADDING;
+            backgroundY = projectionPosY;
+            backgroundWidth = projectionWidth + NORTH_SIZE + scaleWidth / (PIXELRATIO$1 * PIXELRATIO$1) + 2 * MAPINFO_PADDING;
+            backgroundHeight = PROJECTION_HEIGHT; //2.6 - Draw Map Info background
+            ctx.fillStyle = '#ffffff80';
+            roundRect(ctx, backgroundX, backgroundY, backgroundWidth, backgroundHeight, MAPINFO_PADDING / 2);
+            ctx.fill();
+
+            //2.7 - Draw Map Infos
+            ctx.drawImage(projectionImg, projectionPosX, projectionPosY, projectionWidth, PROJECTION_HEIGHT);
+            ctx.drawImage(northArrowImg, northPosX, northPosY, NORTH_SIZE, NORTH_SIZE);
+            ctx.drawImage(scaleImg, scalePosX, scalePosY, scaleWidth, scaleHeight);
+          }
+
+          //3 - Draw logo on bottom left of map
+          _context.next = 23;
+          return createImg(blobLogo);
+        case 23:
+          logoImg = _context.sent;
+          if (logoImg) {
+            logoScale = logoImg.width / logoImg.height;
+            logoPosX = MARGIN$1 + MAPINFO_PADDING;
+            logoPosY = projectionPosY - MAPINFO_PADDING - LOGO_HEIGHT;
+            logoWidth = Math.round(LOGO_HEIGHT * logoScale);
+            ctx.fillStyle = '#ffffff80';
+            roundRect(ctx, logoPosX, logoPosY, logoWidth, LOGO_HEIGHT, MAPINFO_PADDING / 2);
+            ctx.fill();
+            ctx.drawImage(logoImg, logoPosX, logoPosY, logoWidth, LOGO_HEIGHT);
+          }
+
+          //3 - Calculate positions for bottom section elements and scale
+          bottomStartY = MAP_HEIGHT$1 + MARGIN$1 * 1.5; //4 - DRAW DESCRIPTION
+          _context.next = 28;
+          return createImg(blobDescription);
+        case 28:
+          descriptionImg = _context.sent;
+          if (descriptionImg) {
+            ctx.drawImage(descriptionImg, MARGIN$1, bottomStartY, DESCRIPTION_WIDTH$1, BOTTOM_HEIGHT$1);
+          }
+
+          //5 - DRAW LEGEND
+          _context.next = 32;
+          return createImg(blobLegend);
+        case 32:
+          legendImg = _context.sent;
+          if (legendImg) {
+            legendScale = legendImg.width / legendImg.height;
+            legendHeight = BOTTOM_HEIGHT$1;
+            legendWidth = legendHeight * legendScale;
+            ctx.drawImage(legendImg, MARGIN$1 * 1.5 + DESCRIPTION_WIDTH$1, bottomStartY, legendWidth, legendHeight);
+          }
+
+          //6 - DRAW QR CODE
+          _context.next = 36;
+          return createImg(blobQRCode);
+        case 36:
+          qrCodeImg = _context.sent;
+          if (qrCodeImg) {
+            ctx.drawImage(qrCodeImg, PAPER_WIDTH - MARGIN$1 - QRCODE_SIZE, PAPER_HEIGHT - MARGIN$1 - QRCODE_SIZE, QRCODE_SIZE, QRCODE_SIZE);
+          }
+          return _context.abrupt("return", new Promise(function (resolve) {
+            combinedCanvas.toBlob(function (blob) {
+              resolve(blob);
+            });
+          }));
+        case 39:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _composeMapImageCanvas.apply(this, arguments);
+}
+
+var _templateObject$2;
+var LegendContainer$1 = styled(Flex)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  flex-wrap: wrap;\n  background-color: white;\n  border: none;\n  box-shadow: none;\n"])));
+var _getPaperDimensions = getPaperDimensions(PREVIEW_WIDTH_PX),
+  MARGIN = _getPaperDimensions.MARGIN,
+  PIXELRATIO = _getPaperDimensions.PIXELRATIO,
+  INSIDE_WIDTH = _getPaperDimensions.INSIDE_WIDTH,
+  MAP_WIDTH = _getPaperDimensions.MAP_WIDTH,
+  MAP_HEIGHT = _getPaperDimensions.MAP_HEIGHT,
+  BOTTOM_HEIGHT = _getPaperDimensions.BOTTOM_HEIGHT,
+  DESCRIPTION_WIDTH = _getPaperDimensions.DESCRIPTION_WIDTH;
+var ExportImage = /*#__PURE__*/forwardRef(function ExportImage(_ref, ref) {
+  var _resolvedLayout$, _resolvedLayout$2, _layeredMapRef$curren, _resolvedLayout$3;
+  var resolvedLayout = _ref.resolvedLayout,
+    commitedViewState = _ref.commitedViewState,
+    municipioId = _ref.municipioId,
+    METADATA_API_ENDPOINT = _ref.METADATA_API_ENDPOINT,
+    baseMapStyle = _ref.baseMapStyle,
+    topViews = _ref.topViews;
+  ExportImage.displayName = 'ExportImage';
+  var dialogs = useDialogs();
+  var rootRef = useRef(null);
+  var layeredMapRef = useRef(null);
+  var legends = (resolvedLayout === null || resolvedLayout === void 0 || (_resolvedLayout$ = resolvedLayout[0]) === null || _resolvedLayout$ === void 0 ? void 0 : _resolvedLayout$.legends) || [];
+  var _useLocation = useLocation(),
+    href = _useLocation.href;
+
+  //Retrieve municipality data
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    munName = _useState2[0],
+    setMunName = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ufSigla = _useState4[0],
+    setUfSigla = _useState4[1];
+  useEffect(function () {
+    var fetchMunicipalityData = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _yield$fetch$then, _yield$fetch$then2, mun;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetch("".concat(METADATA_API_ENDPOINT, "/ibge_malha_br_municipio?select=nome,id,uf_sigla&id=eq.").concat(municipioId)).then(function (res) {
+                return res.json();
+              });
+            case 2:
+              _yield$fetch$then = _context.sent;
+              _yield$fetch$then2 = _slicedToArray(_yield$fetch$then, 1);
+              mun = _yield$fetch$then2[0];
+              setMunName(mun.nome);
+              setUfSigla(mun.uf_sigla);
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetchMunicipalityData() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchMunicipalityData();
+  }, [municipioId, METADATA_API_ENDPOINT]);
+  var sourceLabels = uniq((resolvedLayout === null || resolvedLayout === void 0 || (_resolvedLayout$2 = resolvedLayout[0]) === null || _resolvedLayout$2 === void 0 || (_resolvedLayout$2 = _resolvedLayout$2.views) === null || _resolvedLayout$2 === void 0 ? void 0 : _resolvedLayout$2.map(function (view) {
+    return view.metadata.sourceLabel || '';
+  }).filter(Boolean)) || []).join(' + ') || '';
+  var createImg = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var imageCanva;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return dialogs.loading(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+            var extractedBlobs;
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  _context2.next = 2;
+                  return extractMapImageBlobs({
+                    map: layeredMapRef.current.map,
+                    rootEl: rootRef.current
+                  });
+                case 2:
+                  extractedBlobs = _context2.sent;
+                  return _context2.abrupt("return", composeMapImageCanvas(extractedBlobs));
+                case 4:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          })));
+        case 2:
+          imageCanva = _context3.sent;
+          saveAs$1(imageCanva, "".concat(slugify(munName, '_'), "_georedus.png"));
+        case 4:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })), [dialogs, (_layeredMapRef$curren = layeredMapRef.current) === null || _layeredMapRef$curren === void 0 ? void 0 : _layeredMapRef$curren.map, rootRef.current]);
+  useImperativeHandle(ref, function () {
+    return {
+      createImg: createImg
+    };
+  }, [createImg]);
+  function ImageDescription() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, {
+      direction: "column",
+      width: "".concat(DESCRIPTION_WIDTH, "px"),
+      className: IMAGE_DESCRIPTION_CLASS_NAME
+    }, /*#__PURE__*/React.createElement(Flex, {
+      height: "100%",
+      wrap: "wrap",
+      gap: "2"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      size: "4",
+      color: "iris"
+    }, munName, " - ", ufSigla, " / BR"), /*#__PURE__*/React.createElement(Heading, {
+      size: "2",
+      color: "iris"
+    }, new Date().toLocaleDateString('pt-BR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    }).replace(/\//g, '.')), /*#__PURE__*/React.createElement(Text, {
+      size: "2"
+    }, /*#__PURE__*/React.createElement(Strong, null, "Fonte de dados: "), sourceLabels || ''), /*#__PURE__*/React.createElement(Text, {
+      size: "2"
+    }, /*#__PURE__*/React.createElement(Strong, null, "Outros dados: "), "\xA9 MapTiler | \xA9 OpenStreetMap contributors")), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement("img", {
+      style: {
+        height: 33,
+        width: 'auto'
+      },
+      src: "/georedus/assets/parcerias.png"
+    }))));
+  }
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement(LayeredMap, {
+    ref: layeredMapRef,
+    sky: SKY_STYLE,
+    maxPitch: 80,
+    pixelRatio: PIXELRATIO,
+    attributionControl: false,
+    mapStyle: baseMapStyle,
+    views: [].concat(_toConsumableArray(((resolvedLayout === null || resolvedLayout === void 0 || (_resolvedLayout$3 = resolvedLayout[0]) === null || _resolvedLayout$3 === void 0 ? void 0 : _resolvedLayout$3.views) || []).reverse()), _toConsumableArray(topViews || [])),
+    initialViewState: commitedViewState,
+    style: {
+      height: "".concat(MAP_HEIGHT, "px"),
+      width: "".concat(MAP_WIDTH, "px"),
+      marginTop: '0'
+    },
+    canvasContextAttributes: {
+      preserveDrawingBuffer: true
+    }
+  }, /*#__PURE__*/React.createElement(ControlContainer, {
+    position: "bottom-left",
+    style: {
+      boxShadow: 'none',
+      backgroundColor: '#ffffffd9',
+      borderRadius: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    width: "150",
+    p: "2",
+    className: LOGO_CLASS_NAME
+  }, /*#__PURE__*/React.createElement(GeoReDUSLogo, {
+    color: "#384DA0"
+  }))), /*#__PURE__*/React.createElement(AttributionControl, {
+    position: "bottom-right",
+    compact: false
+  }), /*#__PURE__*/React.createElement(ControlContainer //tirar north arrow dentro do container
+  , {
+    position: "bottom-left",
+    style: {
+      boxShadow: 'none',
+      backgroundColor: 'transparent',
+      borderRadius: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    p: "2",
+    className: PROJECTION_CLASS_NAME,
+    width: "fit-content"
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "Proje\xE7\xE3o universal "), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      marginTop: 0
+    }
+  }, "Mercator (EPSG:3857)"))), /*#__PURE__*/React.createElement(NorthArrow, {
+    position: "bottom-left",
+    animationDuration: 300,
+    className: NORTH_ARROW_CLASS_NAME
+  }), /*#__PURE__*/React.createElement(ScaleControl, {
+    position: "bottom-left",
+    className: SCALE_CONTROL_CLASS_NAME
+  })), /*#__PURE__*/React.createElement(Flex, null), /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    width: "".concat(INSIDE_WIDTH, "px"),
+    height: "".concat(BOTTOM_HEIGHT, "px"),
+    style: {
+      justifyContent: 'space-between',
+      marginTop: "".concat(MARGIN, "px !important")
+    }
+  }, /*#__PURE__*/React.createElement(ImageDescription, null), /*#__PURE__*/React.createElement(LegendContainer$1, {
+    className: LEGEND_CLASS_NAME,
+    direction: "column",
+    gap: "3",
+    p: "0",
+    style: {
+      margin: '0 !important'
+    }
+  }, legends.filter(function (legend) {
+    return legend === null || legend === void 0 ? void 0 : legend.type;
+  }).map(function (legend, i) {
+    return /*#__PURE__*/React.createElement(Legend, _extends({
+      key: legend.id || "".concat(legend.type, "-").concat(i)
+    }, legend, {
+      style: {
+        marginTop: '0 !important',
+        marginBottom: '10px',
+        fontSize: '8px !important'
+      }
+    }));
+  })), /*#__PURE__*/React.createElement(Flex, {
+    style: {
+      alignItems: 'end'
+    }
+  }, /*#__PURE__*/React.createElement(QRCode, {
+    value: href,
+    className: QR_CODE_CLASS_NAME
+  }))));
+});
 
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Dialog.Title, null, "Compartilhar"), /*#__PURE__*/React$1.createElement(Flex, {
+function SharePanel(_ref) {
+  var resolvedLayout = _ref.resolvedLayout,
+    commitedViewState = _ref.commitedViewState,
+    municipioId = _ref.municipioId,
+    METADATA_API_ENDPOINT = _ref.METADATA_API_ENDPOINT,
+    baseMapStyle = _ref.baseMapStyle,
+    topViews = _ref.topViews;
+  var exportImageRef = useRef();
+  var handleExportClick = function handleExportClick() {
+    var _exportImageRef$curre;
+    (_exportImageRef$curre = exportImageRef.current) === null || _exportImageRef$curre === void 0 || _exportImageRef$curre.createImg();
+  };
+  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Flex, {
+    direction: "column",
+    gap: "1",
+    alignItems: "center"
+  }, /*#__PURE__*/React$1.createElement(ExportImage, {
+    ref: exportImageRef,
+    resolvedLayout: resolvedLayout,
+    commitedViewState: commitedViewState,
+    municipioId: municipioId,
+    METADATA_API_ENDPOINT: METADATA_API_ENDPOINT,
+    baseMapStyle: baseMapStyle,
+    topViews: topViews
+  }), /*#__PURE__*/React$1.createElement(Flex, {
     direction: "row",
-    gap: "4"
-  }, /*#__PURE__*/React$1.createElement(ShareButtonBar, null)));
+    alignItems: "end",
+    justifyContent: "space-between",
+    width: "100%",
+    pt: "4"
+  }, /*#__PURE__*/React$1.createElement(ShareButtonBar, null), /*#__PURE__*/React$1.createElement(Button, {
+    onClick: handleExportClick,
+    style: {
+      marginRight: '30px'
+    },
+    size: "2"
+  }, /*#__PURE__*/React$1.createElement(Icon, {
+    path: mdiDownload,
+    size: "18px"
+  }), "Baixar imagem"))));
 }
 
 var _templateObject$1;
@@ -9141,10 +11562,14 @@ function LeftPanelInner(_ref) {
     viewConfDispatch = _ref.viewConfDispatch,
     viewSpecs = _ref.viewSpecs,
     resolvedViews = _ref.resolvedViews,
+    resolvedLayout = _ref.resolvedLayout,
     open = _ref.open,
     onSetOpen = _ref.onSetOpen,
-    syncedMapsRef = _ref.syncedMapsRef,
-    mapContainerRef = _ref.mapContainerRef,
+    commitedViewState = _ref.commitedViewState,
+    municipioId = _ref.municipioId,
+    METADATA_API_ENDPOINT = _ref.METADATA_API_ENDPOINT,
+    baseMapStyle = _ref.baseMapStyle,
+    topViews = _ref.topViews,
     _ref$categoryIcons = _ref.categoryIcons,
     categoryIcons = _ref$categoryIcons === void 0 ? undefined : _ref$categoryIcons,
     _ref$header = _ref.header,
@@ -9157,6 +11582,7 @@ function LeftPanelInner(_ref) {
     py: "10px",
     height: HEADER_HEIGHT,
     alignItems: "center",
+    justifyContent: "space-between",
     direction: "row",
     style: {
       backgroundColor: 'var(--accent-9)',
@@ -9172,7 +11598,57 @@ function LeftPanelInner(_ref) {
       transition: open ? 'opacity .7s ease-out' : 'opacity .1s ease-out',
       opacity: open ? 1 : 0
     }
-  }, /*#__PURE__*/React$1.createElement(GeoReDUSLogoText, null))));
+  }, /*#__PURE__*/React$1.createElement(GeoReDUSLogoText, null))), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(IconButton, {
+    variant: "soft",
+    size: "3",
+    asChild: true,
+    style: {
+      color: 'white'
+    }
+  }, /*#__PURE__*/React$1.createElement("a", {
+    href: "https://www.redus.org.br/georedus-rede-de-dados-urbanos/formularios/cbf766bb-9a74-4bc5-897a-70b9151afbdb",
+    target: "_blank",
+    rel: "noreferrer nofollow"
+  }, /*#__PURE__*/React$1.createElement(Tooltip, {
+    content: "D\xFAvidas e sugest\xF5es"
+  }, /*#__PURE__*/React$1.createElement(Icon, {
+    path: mdiForumOutline,
+    size: "24px"
+  })))), /*#__PURE__*/React$1.createElement(IconButton, {
+    variant: "soft",
+    size: "3",
+    style: {
+      color: 'white'
+    },
+    onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return dialogs.view({
+              maxWidth: '1500px',
+              width: '1200px',
+              children: /*#__PURE__*/React$1.createElement(SharePanel, {
+                resolvedLayout: resolvedLayout,
+                commitedViewState: commitedViewState,
+                municipioId: municipioId,
+                METADATA_API_ENDPOINT: METADATA_API_ENDPOINT,
+                baseMapStyle: baseMapStyle,
+                topViews: topViews
+              })
+            });
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))
+  }, /*#__PURE__*/React$1.createElement(Tooltip, {
+    content: "Compartilhar"
+  }, /*#__PURE__*/React$1.createElement(Icon, {
+    path: mdiShareVariantOutline,
+    size: "24px"
+  })))));
   var footer = typeof customFooter !== 'undefined' ? customFooter : /*#__PURE__*/React$1.createElement(Flex, {
     p: "2",
     style: {
@@ -9304,43 +11780,7 @@ function LeftPanelInner(_ref) {
       gap: "3",
       justifyContent: "flex-end",
       alignItems: "center"
-    }, /*#__PURE__*/React$1.createElement(IconButton, {
-      variant: "soft",
-      size: "3",
-      onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return dialogs.view(/*#__PURE__*/React$1.createElement(SharePanel, {
-                mapContainerRef: mapContainerRef,
-                syncedMapsRef: syncedMapsRef
-              }));
-            case 2:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }))
-    }, /*#__PURE__*/React$1.createElement(Tooltip, {
-      content: "Compartilhar"
-    }, /*#__PURE__*/React$1.createElement(Icon, {
-      path: mdiShareVariantOutline,
-      size: "24px"
-    }))), /*#__PURE__*/React$1.createElement(IconButton, {
-      variant: "soft",
-      size: "3",
-      asChild: true
-    }, /*#__PURE__*/React$1.createElement("a", {
-      href: "https://www.redus.org.br/georedus-rede-de-dados-urbanos/formularios/cbf766bb-9a74-4bc5-897a-70b9151afbdb",
-      target: "_blank",
-      rel: "noreferrer nofollow"
-    }, /*#__PURE__*/React$1.createElement(Tooltip, {
-      content: "D\xFAvidas e sugest\xF5es"
-    }, /*#__PURE__*/React$1.createElement(Icon, {
-      path: mdiForumOutline,
-      size: "24px"
-    })))))
+    })
   }) : /*#__PURE__*/React$1.createElement("div", {
     style: {
       flexGrow: 1,
@@ -11684,15 +14124,6 @@ var BR_BBOX = {
   },
   properties: {}
 };
-var SKY_STYLE = {
-  'sky-color': '#199EF3',
-  'sky-horizon-blend': 0.5,
-  'horizon-color': '#d3edfd',
-  'horizon-fog-blend': 0.5,
-  'fog-color': '#0000ff',
-  'fog-ground-blend': 0.5,
-  'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 1, 10, 1, 12, 0]
-};
 var BASEMAPS = {
   dataviz: dataviz,
   satellite: satellite
@@ -12096,7 +14527,7 @@ function GeoReDUSInner(_ref2) {
   // Control map position focus
   //
   useEffect(function () {
-    var mainMap = get(syncedMapsRef.current, 'mapInstances[0].map');
+    var mainMap = get$1(syncedMapsRef.current, 'mapInstances[0].map');
     if (!mainMap) {
       return;
     }
@@ -12161,6 +14592,10 @@ function GeoReDUSInner(_ref2) {
       }
     });
   }, []);
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    commitedViewState = _useState8[0],
+    setCommitedViewState = _useState8[1];
   return /*#__PURE__*/React$1.createElement(Flex, null, /*#__PURE__*/React$1.createElement(LeftPanel, _extends({
     open: leftPanelOpen,
     onSetOpen: setLeftPanelOpen,
@@ -12168,7 +14603,15 @@ function GeoReDUSInner(_ref2) {
     viewConfState: viewConfState,
     viewConfDispatch: viewConfDispatch,
     resolvedViews: resolvedViews,
-    syncedMapsRef: syncedMapsRef
+    resolvedLayout: resolvedLayout
+
+    // props required for export image
+    ,
+    commitedViewState: commitedViewState,
+    municipioId: municipioId,
+    METADATA_API_ENDPOINT: METADATA_API_ENDPOINT,
+    baseMapStyle: BASE_MAP_STYLE[baseMapStyle],
+    topViews: TOP_VIEWS
   }, leftPanelProps)), /*#__PURE__*/React$1.createElement(Flex, {
     style: {
       position: 'fixed',
@@ -12220,6 +14663,7 @@ function GeoReDUSInner(_ref2) {
     //
     ,
     onMoveEnd: function onMoveEnd(e) {
+      setCommitedViewState(e.viewState);
       var _e$viewState2 = e.viewState,
         latitude = _e$viewState2.latitude,
         longitude = _e$viewState2.longitude;
@@ -12315,15 +14759,16 @@ function GeoReDUSInner(_ref2) {
           size: "20px"
         }))), /*#__PURE__*/React$1.createElement(EvenSpacedList, {
           columns: legends.length > 1 ? 2 : 1,
-          gap: "10px"
+          gap: "10px",
+          style: {
+            maxWidth: '300px'
+          }
         }, legends.map(function (legend) {
           return /*#__PURE__*/React$1.createElement(HoverLegend, _extends({}, resolvedLayout.length > 1 ? {
             direction: 'row',
-            maxWidth: '300px',
             size: '1'
           } : {
             direction: 'column',
-            maxWidth: '150px',
             size: '2'
           }, {
             key: legend.id