@redus/georedus-ui 0.3.2 → 0.5.0

package/dist/main.js

@@ -11,29 +11,29 @@ import { __makeTemplateObject, __assign, __spreadArray, __awaiter, __generator }
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
-import { isPlainObject, pick, omit, set, get, uniqBy, groupBy, uniq } from 'lodash';
+import { isPlainObject, get, pick, omit, set, uniqBy, groupBy, uniq } from 'lodash';
 import { useDebounce } from 'react-use';
 import { createDialogSystem, DIALOGS } from '@orioro/react-dialogs';
 import { CsvImportDialog } from '@orioro/react-csv';
 import Highlighter from 'react-highlight-words';
 import { makeSortableMultiList } from '@orioro/react-sortable';
-import { makeSyncedMaps, LayeredMap, HoverTooltip, ControlContainer, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
+import { fmtLayerAbsoluteId, makeSyncedMaps, LayeredMap, HoverTooltip, ControlContainer, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
 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 } from 'react-map-gl/maplibre';
+import { AttributionControl, GeolocateControl, FullscreenControl, NavigationControl, ScaleControl, useMap } from 'react-map-gl/maplibre';
 import { slugify, dataJoin } from '@orioro/util';
-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 } from 'd3-scale-chromatic';
 import { makeResolve, $$literal, withExpressionResolvers, expressions, ALL_EXPR, fetchExpr, resolve, resolveAsync } from '@orioro/resolve';
+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 } from 'd3-scale-chromatic';
 import { saveAs } from 'file-saver';
 import initGdalJs from 'gdal3.js';
 import queryString from 'query-string';
 import { wrap } from 'comlink';
+import { get as get$1 } from '@orioro/get';
 import { validate } from '@orioro/validate';
 import { buffer } from '@turf/turf';
 import { csvParse } from 'd3-dsv';
 import { strAutoCast } from '@orioro/cast';
-import { get as get$1 } from '@orioro/get';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -71,6 +71,54 @@ function _asyncToGenerator(n) {
     });
   };
 }
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+      t && (r = t);
+      var n = 0,
+        F = function () {};
+      return {
+        s: F,
+        n: function () {
+          return n >= r.length ? {
+            done: true
+          } : {
+            done: false,
+            value: r[n++]
+          };
+        },
+        e: function (r) {
+          throw r;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o,
+    a = true,
+    u = false;
+  return {
+    s: function () {
+      t = t.call(r);
+    },
+    n: function () {
+      var r = t.next();
+      return a = r.done, r;
+    },
+    e: function (r) {
+      u = true, o = r;
+    },
+    f: function () {
+      try {
+        a || null == t.return || t.return();
+      } finally {
+        if (u) throw o;
+      }
+    }
+  };
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -749,7 +797,7 @@ function ViewConfTabs(_ref) {
   }, "Visualiza\xE7\xE3o habilitada"));
 }
 
-var _excluded$3 = ["textSearch", "content", "maxLines"];
+var _excluded$4 = ["textSearch", "content", "maxLines"];
 var _templateObject$3, _templateObject2$2;
 var Container = styled(Box)(_templateObject$3 || (_templateObject$3 = _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) {
@@ -777,7 +825,7 @@ function HeadingWithTooltipAndEllipsis(_ref7) {
     content = _ref7.content,
     _ref7$maxLines = _ref7.maxLines,
     maxLines = _ref7$maxLines === void 0 ? 2 : _ref7$maxLines,
-    props = _objectWithoutProperties(_ref7, _excluded$3);
+    props = _objectWithoutProperties(_ref7, _excluded$4);
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content
   }, /*#__PURE__*/React.createElement(Heading, _extends({
@@ -816,7 +864,7 @@ function ViewControl(_ref8) {
   var toggleView = useCallback(function () {
     return active ? deactivateView() : setView();
   }, [active, deactivateView, setView]);
-  return /*#__PURE__*/React.createElement(Collapsible.Root, {
+  return viewSpec && /*#__PURE__*/React.createElement(Collapsible.Root, {
     open: configurable === true && active
   }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Summary, {
     type: "button",
@@ -886,7 +934,7 @@ function ViewControl(_ref8) {
 
 var VIEW_TYPE_SURFACE_CHOROPLETH = 'surface_choropleth';
 
-var _excluded$2 = ["viewSpecs", "viewConfState", "resolvedViews", "onSetView", "onDeactivateView", "style"];
+var _excluded$3 = ["viewSpecs", "viewConfState", "resolvedViews", "onSetView", "onDeactivateView", "style"];
 var _templateObject$2, _templateObject2$1;
 var STATIC_NODE_ICONS = {
   'populacao-e-domicilios': /*#__PURE__*/React.createElement(Icon, {
@@ -953,7 +1001,8 @@ function Item(_ref) {
         //
         viewConfState.layout.findIndex(function (list) {
           return list.items.every(function (item) {
-            return viewSpecsById[item.id].viewType !== VIEW_TYPE_SURFACE_CHOROPLETH;
+            var _viewSpecsById$item$i;
+            return ((_viewSpecsById$item$i = viewSpecsById[item.id]) === null || _viewSpecsById$item$i === void 0 ? void 0 : _viewSpecsById$item$i.viewType) !== VIEW_TYPE_SURFACE_CHOROPLETH;
           });
         }) : 0;
       }
@@ -976,7 +1025,9 @@ function _countActiveViews(_ref2) {
   // Add final forward slash to ensure node id is understood as a dir
   var nodeDirPath = "".concat(nodeId, "/");
   return Object.keys(viewConfState.byId).filter(function (activeItemId) {
-    var activeItemPath = nodeIdFromPath(viewSpecsById[activeItemId].path + ' / ' + viewSpecsById[activeItemId].label);
+    var viewSpec = viewSpecsById[activeItemId];
+    if (!viewSpec) return false;
+    var activeItemPath = nodeIdFromPath(viewSpec.path + ' / ' + viewSpec.label);
     return activeItemPath.startsWith(nodeDirPath);
   }).length;
 }
@@ -1025,7 +1076,7 @@ function ViewMenu(_ref4) {
     onSetView = _ref4.onSetView,
     onDeactivateView = _ref4.onDeactivateView,
     style = _ref4.style,
-    props = _objectWithoutProperties(_ref4, _excluded$2);
+    props = _objectWithoutProperties(_ref4, _excluded$3);
   var viewSpecsById = useMemo(function () {
     return Object.fromEntries(viewSpecs.map(function (spec) {
       return [spec.id, spec];
@@ -1392,7 +1443,9 @@ function LeftPanel(_ref) {
       flexGrow: 1,
       position: 'relative'
     }
-  }, /*#__PURE__*/React.createElement(LoadingOverlay, null)), /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React.createElement(LoadingOverlay, {
+    message: null
+  })), /*#__PURE__*/React.createElement(Flex, {
     p: "2",
     style: {
       backgroundColor: 'white'
@@ -1569,12 +1622,12 @@ function ViewLayoutControl(_ref4) {
   }));
 }
 
-var _excluded$1 = ["viewSpecs", "viewConfState", "viewConfDispatch"];
+var _excluded$2 = ["viewSpecs", "viewConfState", "viewConfDispatch"];
 function ViewLayoutPopover(_ref) {
   var viewSpecs = _ref.viewSpecs,
     viewConfState = _ref.viewConfState,
     viewConfDispatch = _ref.viewConfDispatch,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   var activeViewCount = useMemo(function () {
     return Object.keys(viewConfState.byId).length;
   }, [viewConfState.byId]);
@@ -1611,7 +1664,7 @@ function ViewLayoutPopover(_ref) {
   }))))));
 }
 
-var BASE_MAP_LAYERS = [
+var VEGETATION_AND_WATER_OVERLAY_LAYERS = [
 // {
 //   "id": "Background",
 //   "type": "background",
@@ -3997,6 +4050,13 @@ var COLOR_SCHEMES = __assign(__assign(__assign(__assign(__assign({}, _objMap(D3_
     scheme = _a[1];
   return ["-".concat(id), _reverseByKScheme(scheme)];
 }));
+function colorScheme(path) {
+  var scheme = get(COLOR_SCHEMES, path);
+  if (!scheme) {
+    throw new Error("Could not find scheme at ".concat(path));
+  }
+  return scheme;
+}
 
 //
 // Formats the filter to be a compatible searchParams for fetching
@@ -4459,12 +4519,167 @@ function zoomSensitiveLinearSizes(_a) {
   return ['step', ['zoom'], defaultSize, zoomBreakpoint, largerSize];
 }
 
-var _excluded = ["version"];
+function influenceAreaConf(_a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.defaultBufferSize,
+    defaultBufferSize = _c === void 0 ? 200 : _c,
+    _d = _b.maxBufferSize,
+    maxBufferSize = _d === void 0 ? 2000 : _d,
+    _e = _b.minBufferSize,
+    minBufferSize = _e === void 0 ? 0 : _e,
+    _f = _b.bufferSizeStep,
+    bufferSizeStep = _f === void 0 ? 50 : _f;
+  return {
+    showInfluenceArea: {
+      type: 'booleanCheckbox',
+      label: 'Área de influência',
+      description: 'Visualizar área de influência',
+      defaultValue: true
+    },
+    influenceAreaRadius: {
+      type: 'slider',
+      inactive: resolve.literal(resolve.fn(function (context) {
+        var _a;
+        return !((_a = context.value) === null || _a === void 0 ? void 0 : _a.showInfluenceArea);
+      })),
+      label: resolve.literal(resolve.fn(function (context) {
+        var _a;
+        return "Raio de influ\xEAncia (".concat(((_a = context.value) === null || _a === void 0 ? void 0 : _a.influenceAreaRadius) || defaultBufferSize, "m)");
+      })),
+      helperText: 'Configure um raio de influência do equipamento',
+      min: minBufferSize,
+      max: maxBufferSize,
+      step: bufferSizeStep,
+      defaultValue: defaultBufferSize
+    },
+    dissolveOverlappingGeometries: {
+      inactive: resolve.literal(resolve.fn(function (context) {
+        var _a;
+        return !((_a = context.value) === null || _a === void 0 ? void 0 : _a.showInfluenceArea);
+      })),
+      type: 'booleanCheckbox',
+      label: 'Dissolver geometrias',
+      description: 'Unir geometrias sobrepostas',
+      defaultValue: false
+    }
+  };
+}
+function _defaultGetGeoJson(context) {
+  return {
+    type: 'FeatureCollection',
+    features: context.rawData.map(function (entry) {
+      return {
+        type: 'Feature',
+        geometry: entry.geom,
+        properties: omit(entry, ['geom'])
+      };
+    })
+  };
+}
+function influenceAreaMetadata(_a) {
+  var _this = this;
+  var _b = {} ,
+    _c = _b.getGeoJson,
+    getGeoJson = _c === void 0 ? _defaultGetGeoJson : _c,
+    _d = _b.getConf,
+    getConf = _d === void 0 ? function (context) {
+      return get$1(context, 'view.conf.data') || {};
+    } : _d;
+  return {
+    influenceArea: resolveAsync.fn(function (context) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var _a, influenceAreaRadius, showInfluenceArea, dissolveOverlappingGeometries, geoJson, influenceArea;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              return [4 /*yield*/, getConf(context)];
+            case 1:
+              _a = _b.sent(), influenceAreaRadius = _a.influenceAreaRadius, showInfluenceArea = _a.showInfluenceArea, dissolveOverlappingGeometries = _a.dissolveOverlappingGeometries;
+              return [4 /*yield*/, getGeoJson(context)];
+            case 2:
+              geoJson = _b.sent();
+              if (!(showInfluenceArea && typeof influenceAreaRadius === 'number' && influenceAreaRadius > 0 && Array.isArray(geoJson === null || geoJson === void 0 ? void 0 : geoJson.features) && geoJson.features.length > 0)) return [3 /*break*/, 6];
+              _b.label = 3;
+            case 3:
+              _b.trys.push([3, 5,, 6]);
+              return [4 /*yield*/, GeoReDUSWorker.buffer(geoJson, influenceAreaRadius, {
+                units: 'meters',
+                dissolve: dissolveOverlappingGeometries
+              })];
+            case 4:
+              influenceArea = _b.sent();
+              return [2 /*return*/, influenceArea];
+            case 5:
+              _b.sent();
+              return [2 /*return*/, null];
+            case 6:
+              return [2 /*return*/, null];
+          }
+        });
+      });
+    })
+  };
+}
+function influenceAreaSources(_a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.dataPath,
+    dataPath = _c === void 0 ? 'view.metadata.influenceArea' : _c;
+  return {
+    influenceArea: ['$if', [['$empty', ['$get', dataPath]]], null, {
+      type: 'geojson',
+      data: ['$get', dataPath]
+    }
+    // resolve.fn((context) => {
+    //   return {
+    //     type: 'geojson',
+    //     data: get(context, dataPath),
+    //   }
+    // }),
+    ]
+  };
+}
+function influenceAreaLayers(_a) {
+  var _b = _a === void 0 ? {} : _a,
+    _c = _b.dataPath,
+    dataPath = _c === void 0 ? 'view.metadata.influenceArea' : _c,
+    _d = _b.zIndex,
+    zIndex = _d === void 0 ? ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 1 : _d,
+    _e = _b.fillPaint,
+    fillPaint = _e === void 0 ? {} : _e,
+    _f = _b.boundaryPaint,
+    boundaryPaint = _f === void 0 ? {} : _f;
+  return {
+    influenceArea_fill: {
+      zIndex: zIndex,
+      hidden: ['$empty', ['$get', dataPath]],
+      source: 'influenceArea',
+      type: 'fill',
+      paint: __assign({
+        'fill-color': 'red',
+        'fill-opacity': 0.3
+      }, fillPaint)
+    },
+    influenceArea_boundaries: {
+      zIndex: zIndex,
+      hidden: ['$empty', ['$get', dataPath]],
+      source: 'influenceArea',
+      type: 'line',
+      paint: __assign({
+        'line-color': 'red',
+        'line-opacity': 0.8,
+        'line-width': 2,
+        'line-dasharray': [2, 2]
+      }, boundaryPaint)
+    }
+  };
+}
+
+var _excluded$1 = ["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);
+    override = _objectWithoutProperties(_ref, _excluded$1);
   var VECTOR_TILE_SERVER_ENDPOINT = context.VECTOR_TILE_SERVER_ENDPOINT;
   return _objectSpread2({
     type: 'vector',
@@ -4481,18 +4696,6 @@ function vectorLayer(sourceId, override) {
 }
 var BASE_MAP_LAYERS_Z_INDEX_BASE = 100;
 var ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE = 1000;
-var BASE_MAP_LAYERS_OBJ = BASE_MAP_LAYERS.reduce(function (acc, layer, index) {
-  return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, slugify(layer.id, '_'), [
-  //
-  // Important! use $literal expression
-  // to avoid unnecessary computing on resolution
-  //
-  '$literal', _objectSpread2(_objectSpread2({}, layer), {}, {
-    interactive: false,
-    zIndex: BASE_MAP_LAYERS_Z_INDEX_BASE + index,
-    source: 'planet'
-  })]));
-}, {});
 function globalResources(context) {
   var MUNICIPIO_MALHA_TABLE_ID = 'ibge_malha_br_municipio';
   return {
@@ -4509,7 +4712,7 @@ function globalResources(context) {
     },
     layers: _objectSpread2({
       municipio: {
-        zIndex: BASE_MAP_LAYERS_Z_INDEX_BASE + BASE_MAP_LAYERS.length + 9,
+        zIndex: BASE_MAP_LAYERS_Z_INDEX_BASE + VEGETATION_AND_WATER_OVERLAY_LAYERS.length + 9,
         absoluteId: MUNICIPIO_MALHA_TABLE_ID,
         absoluteSourceId: MUNICIPIO_MALHA_TABLE_ID,
         'source-layer': "".concat(MUNICIPIO_MALHA_TABLE_ID, ".geom"),
@@ -4524,7 +4727,21 @@ function globalResources(context) {
           // 'line-dasharray': [2, 4], // Dash pattern
         }
       }
-    }, BASE_MAP_LAYERS_OBJ)
+    }, VEGETATION_AND_WATER_OVERLAY_LAYERS.reduce(function (acc, layer, index) {
+      return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, slugify(layer.id, '_'), resolve.fn(function (context) {
+        var _context$app;
+        //
+        // It is important to return as literal in
+        // order to avoid unnecessary resolution attempts
+        //
+        return resolve.literal(_objectSpread2(_objectSpread2({}, layer), {}, {
+          hidden: ((_context$app = context.app) === null || _context$app === void 0 ? void 0 : _context$app.baseMapStyle) === 'satellite',
+          interactive: false,
+          zIndex: BASE_MAP_LAYERS_Z_INDEX_BASE + index,
+          source: 'planet'
+        }));
+      })));
+    }, {}))
   };
 }
 
@@ -4543,7 +4760,7 @@ function unflat(obj) {
 }
 
 var INSUFFICIENT_DATA_COLOR$1 = '#cccccc';
-function numerical_choropleth$1(base, _ref) {
+function numerical_choropleth(base, _ref) {
   var collection_id = _ref.collection_id,
     variable_id = _ref.variable_id,
     indicator_label = _ref.indicator_label,
@@ -4713,12 +4930,11 @@ function boolean_categorical$1(base, config) {
 }
 
 var BY_TYPE$1 = {
-  numerical_choropleth: numerical_choropleth$1,
+  numerical_choropleth: numerical_choropleth,
   numerical_size: numerical_size$1,
   boolean_categorical: boolean_categorical$1,
   categorical: categorical$1
 };
-var DEFAULT_BUFFER_SIZE$1 = 200;
 function cem_escolas_2022(config, allViewSpecs, context) {
   var collection_id = config.collection_id,
     variable_id = config.variable_id,
@@ -4770,7 +4986,7 @@ function cem_escolas_2022(config, allViewSpecs, context) {
     metodology: metodology,
     keywords: [indicator_path, $sourceLabel, 'educação', keywords].filter(Boolean),
     confSchema: {
-      data: {
+      data: _objectSpread2({
         variantId: {
           label: 'Rede de ensino:',
           type: 'treeSelect',
@@ -4790,40 +5006,10 @@ function cem_escolas_2022(config, allViewSpecs, context) {
           type: 'booleanCheckbox',
           description: 'Tamanho proporcional à quantidade de matrículas',
           defaultValue: true
-        } : null,
-        showInfluenceArea: {
-          type: 'booleanCheckbox',
-          label: 'Área de influência',
-          description: 'Visualizar área de influência',
-          defaultValue: true
-        },
-        influenceAreaRadius: {
-          type: 'slider',
-          inactive: resolve.literal(resolve.fn(function (context) {
-            var _context$value;
-            return !((_context$value = context.value) !== null && _context$value !== void 0 && _context$value.showInfluenceArea);
-          })),
-          label: resolve.literal(resolve.fn(function (context) {
-            var _context$value2;
-            return "Raio de influ\xEAncia (".concat(((_context$value2 = context.value) === null || _context$value2 === void 0 ? void 0 : _context$value2.influenceAreaRadius) || DEFAULT_BUFFER_SIZE$1, "m)");
-          })),
-          helperText: 'Raio de influência da escola',
-          min: 0,
-          max: 2000,
-          step: 50,
-          defaultValue: DEFAULT_BUFFER_SIZE$1
-        },
-        dissolveOverlappingGeometries: {
-          inactive: resolve.literal(resolve.fn(function (context) {
-            var _context$value3;
-            return !((_context$value3 = context.value) !== null && _context$value3 !== void 0 && _context$value3.showInfluenceArea);
-          })),
-          type: 'booleanCheckbox',
-          label: 'Dissolver geometrias',
-          description: 'Unir geometrias sobrepostas',
-          defaultValue: false
-        }
-      }
+        } : null
+      }, influenceAreaConf({
+        defaultBufferSize: 200
+      }))
     },
     metadata: {
       _value: ['$let', {
@@ -4835,7 +5021,7 @@ function cem_escolas_2022(config, allViewSpecs, context) {
             id_municipio: _id_municipio_apiFilterExpr
           }, _fetchMetadataApiFilterExpResolver]
         }]
-      }, {
+      }, _objectSpread2({
         variableValues: ['$get', ['$template', 'rawData[].${0}', VARIABLE_ID]],
         sizingValues: sizing_variable_id ? ['$if', ['$get', 'view.conf.data.showSize'], ['$filter', ['$get', ['$template', '[].${0}', sizing_variable_id], ['$fetch', {
           href: METADATA_API_ENDPOINT,
@@ -4844,90 +5030,31 @@ function cem_escolas_2022(config, allViewSpecs, context) {
             select: sizing_variable_id,
             id_municipio: _id_municipio_apiFilterExpr
           }, _fetchMetadataApiFilterExpResolver]
-        }]], ['$and', ['$not', ['$empty', ['$iterator', 'item']]], ['$gt', ['$iterator', 'item'], 0]]], null] : null,
-        influenceArea: resolveAsync.fn(/*#__PURE__*/function () {
-          var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(context) {
-            var _ref2, influenceAreaRadius, showInfluenceArea, dissolveOverlappingGeometries, influenceArea;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _ref2 = get(context, 'view.conf.data') || {}, influenceAreaRadius = _ref2.influenceAreaRadius, showInfluenceArea = _ref2.showInfluenceArea, dissolveOverlappingGeometries = _ref2.dissolveOverlappingGeometries;
-                  if (!(showInfluenceArea && typeof influenceAreaRadius === 'number' && influenceAreaRadius > 0 && context.rawData)) {
-                    _context.next = 12;
-                    break;
-                  }
-                  _context.prev = 2;
-                  _context.next = 5;
-                  return GeoReDUSWorker.buffer({
-                    type: 'FeatureCollection',
-                    features: context.rawData.map(function (entry) {
-                      return {
-                        type: 'Feature',
-                        geometry: entry.geom,
-                        properties: omit(entry, ['geom'])
-                      };
-                    })
-                  }, influenceAreaRadius, {
-                    units: 'meters',
-                    dissolve: dissolveOverlappingGeometries
-                  });
-                case 5:
-                  influenceArea = _context.sent;
-                  return _context.abrupt("return", influenceArea);
-                case 9:
-                  _context.prev = 9;
-                  _context.t0 = _context["catch"](2);
-                  return _context.abrupt("return", null);
-                case 12:
-                  return _context.abrupt("return", null);
-                case 13:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee, null, [[2, 9]]);
-          }));
-          return function (_x) {
-            return _ref.apply(this, arguments);
-          };
-        }())
-      }]
+        }]], ['$and', ['$not', ['$empty', ['$iterator', 'item']]], ['$gt', ['$iterator', 'item'], 0]]], null] : null
+      }, influenceAreaMetadata())]
     },
-    sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty(_defineProperty({}, VECTOR_SOURCE_ID, tableVectorSource(context, collection_id, {
+    sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty({}, VECTOR_SOURCE_ID, tableVectorSource(context, collection_id, {
       attribution: $sourceLabel,
       promoteId: 'id_escola',
       version: 2,
       minzoom: 8,
       maxzoom: 20
-    })), "influenceArea", ['$if', [['$empty', ['$get', 'view.metadata.influenceArea']]], null, resolve.fn(function (context) {
-      return {
-        type: 'geojson',
-        data: context.view.metadata.influenceArea
-      };
-    })])),
-    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), {}, {
-      influenceArea_fill: {
-        zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 1,
-        hidden: ['$empty', ['$get', 'view.metadata.influenceArea']],
-        source: 'influenceArea',
-        type: 'fill',
-        paint: {
-          'fill-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
-          'fill-opacity': 0.3
-        }
+    })), influenceAreaSources({
+      dataPath: 'view.metadata.influenceArea'
+    })),
+    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), influenceAreaLayers({
+      dataPath: 'view.metadata.influenceArea',
+      fillPaint: {
+        'fill-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
+        'fill-opacity': 0.3
       },
-      influenceArea_boundaries: {
-        zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 1,
-        hidden: ['$empty', ['$get', 'view.metadata.influenceArea']],
-        source: 'influenceArea',
-        type: 'line',
-        paint: {
-          'line-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
-          'line-opacity': 0.8,
-          'line-width': 2,
-          'line-dasharray': [2, 2]
-        }
+      boundaryPaint: {
+        'line-color': get(COLOR_SCHEMES, 'schemeSet1.colors[1]'),
+        'line-opacity': 0.8,
+        'line-width': 2,
+        'line-dasharray': [2, 2]
       }
-    }),
+    })),
     download: downloadResolver({
       fileNameBase: ['$template', '${0}_${1}_georedus_edu', [VARIABLE_ID, ['$get', 'municipioId']]],
       mainVariableId: VARIABLE_ID,
@@ -4943,13 +5070,13 @@ function cem_escolas_2022(config, allViewSpecs, context) {
       }),
       fetchData: resolve.fn(function (context) {
         return /*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref3) {
+          var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
             var variableIds;
-            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-              while (1) switch (_context2.prev = _context2.next) {
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
                 case 0:
-                  variableIds = _ref3.variableIds, _ref3.options;
-                  _context2.next = 3;
+                  variableIds = _ref.variableIds, _ref.options;
+                  _context.next = 3;
                   return resolveExprAsync(['$fetch', {
                     href: METADATA_API_ENDPOINT,
                     pathname: collection_id,
@@ -4959,15 +5086,15 @@ function cem_escolas_2022(config, allViewSpecs, context) {
                     }, _fetchMetadataApiFilterExpResolver]
                   }], context);
                 case 3:
-                  return _context2.abrupt("return", _context2.sent);
+                  return _context.abrupt("return", _context.sent);
                 case 4:
                 case "end":
-                  return _context2.stop();
+                  return _context.stop();
               }
-            }, _callee2);
+            }, _callee);
           }));
-          return function (_x2) {
-            return _ref4.apply(this, arguments);
+          return function (_x) {
+            return _ref2.apply(this, arguments);
           };
         }();
       })
@@ -5006,16 +5133,16 @@ function cem_escolas_2022(config, allViewSpecs, context) {
         in_fund_af: 'Fundamental II',
         in_med: 'Ensino Médio'
       };
-      return Object.entries(ETAPAS).filter(function (_ref5) {
+      return Object.entries(ETAPAS).filter(function (_ref3) {
         var _context$feature, _context$feature2;
-        var _ref6 = _slicedToArray(_ref5, 2),
-          key = _ref6[0];
-          _ref6[1];
+        var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0];
+          _ref4[1];
         return (context === null || context === void 0 || (_context$feature = context.feature) === null || _context$feature === void 0 ? void 0 : _context$feature.properties) && (context === null || context === void 0 || (_context$feature2 = context.feature) === null || _context$feature2 === void 0 ? void 0 : _context$feature2.properties[key]);
-      }).map(function (_ref7) {
-        var _ref8 = _slicedToArray(_ref7, 2);
-          _ref8[0];
-          var label = _ref8[1];
+      }).map(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2);
+          _ref6[0];
+          var label = _ref6[1];
         return label;
       }).join(', ');
     })]], ['Rede de ensino', ['$literal', ['$get', 'feature.properties.tp_dependencia']]]].filter(Boolean)
@@ -5183,6 +5310,17 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       number: NUMBER_FMT || ['pt-BR', {}],
       below: 'Sem dados',
       above: ['$if', ['$empty', ['$get', 'view.metadata.colorScaleStops']], null, 'Acima de ${0}']
+    },
+    //
+    // TODO: review! Clearly not structured manner.
+    // Currently used @ GeoReDUS/GeoReDUS.jsx
+    //
+    __filterFeaturesForStep: function __filterFeaturesForStep(stepInfo, features) {
+      return features.filter(function (feature) {
+        var _feature$properties;
+        var value = (_feature$properties = feature.properties) === null || _feature$properties === void 0 ? void 0 : _feature$properties[variable_id];
+        return typeof value === 'number' && value >= stepInfo.min && (value <= stepInfo.max || stepInfo.max === null);
+      });
     }
 
     // format: {
@@ -5540,7 +5678,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
         }
       }]]]]
     })),
-    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
       customGeoJSON_Areas_fill: {
         hidden: ['$empty', ['$get', 'view.conf.data.customSpatialAggregationUnit']],
         source: 'customGeoJSON_Areas',
@@ -5615,26 +5753,17 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       type: 'fill',
       // maxzoom: 14,
       paint: {
-        // 'fill-color': [
-        //   '$flat',
-        //   [
-        //     [
-        //       'step',
-        //       [
-        //         'coalesce',
-        //         ['get', ['$get', 'view.conf.data.variableId']],
-        //         -1,
-        //       ],
-        //     ],
-        //     ['$get', 'view.metadata.colorScaleStops'],
-        //   ],
-        // ],
         'fill-color': _vectorSourceFillColor,
-        // 'fill-opacity': ['$get', 'view.conf.style.layerOpacity'],
-        'fill-opacity': ['step', ['zoom'], ['$get', 'view.conf.style.layerOpacity'],
-        // default: zoom < 14 → opacity = 1
-        BUILDINGS_MIN_ZOOM, 0.1 // zoom ≥ 14 → opacity = 0
-        ],
+        'fill-opacity': ['step', ['zoom'],
+        //
+        // At lower zooms, opacities should be high
+        //
+        ['case', ['boolean', ['feature-state', 'hover'], false], 1, ['$get', 'view.conf.style.layerOpacity']], BUILDINGS_MIN_ZOOM,
+        //
+        // At higher zooms, opacity should be low,
+        // so that buildings show up
+        //
+        ['case', ['boolean', ['feature-state', 'hover'], false], 0.2, 0.1]],
         'fill-outline-color': 'transparent'
       }
     }), "".concat(VECTOR_SOURCE_ID, "_boundary_lines"), {
@@ -5645,16 +5774,36 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       interactive: true,
       // minzoom: BUILDINGS_MIN_ZOOM,
       paint: {
-        'line-color': _vectorSourceFillColor,
+        // 'line-color': _vectorSourceFillColor,
+        'line-color': _color_scheme.scalesByK[3][2],
         'line-width': ['step', ['zoom'],
         // default: zoom < 14 → thin lines
-        ['case', ['boolean', ['feature-state', 'hover'], false], 4, 0], BUILDINGS_MIN_ZOOM,
+        ['case', ['boolean', ['feature-state', 'hover'], false], 2, 0], BUILDINGS_MIN_ZOOM,
         // zoom ≥ 14 → larger lines
-        ['case', ['boolean', ['feature-state', 'hover'], false], 5, 1]],
-        'line-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, ['$get', 'view.conf.style.layerOpacity']],
-        'line-dasharray': [2, 2]
+        ['case', ['boolean', ['feature-state', 'hover'], false], 4, 0]],
+        'line-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, ['$get', 'view.conf.style.layerOpacity']]
       }
-    }), "".concat(VECTOR_SOURCE_ID, "_buildings"), {
+    }), "".concat(VECTOR_SOURCE_ID, "_buildings_fill"), {
+      hidden: ['$not', ['$empty', ['$get', 'view.metadata.customGeoJSON.AREAS']]],
+      interactive: false,
+      source: "".concat(VECTOR_SOURCE_ID, "_buildings"),
+      'source-layer': 'dvt',
+      type: 'fill',
+      minzoom: BUILDINGS_MIN_ZOOM,
+      paint: {
+        //
+        // If indicator is about populacao-e-domicilios,
+        // do not color paint buildings whose subtype
+        // is known and is not residential.
+        //
+        // Otherwise, apply color to all buildings
+        //
+        'fill-color': indicator_path !== null && indicator_path !== void 0 && indicator_path.startsWith('População e domicílios') ? ['case', ['in', ['get', 'subtype'], ['literal', ['agricultural', 'civic', 'commercial', 'education', 'entertainment', 'industrial', 'medical', 'military', 'outbuilding', 'religious',
+        // 'residential',
+        'service', 'transportation']]], '#EFEFEF', _vectorSourceFillColor] : _vectorSourceFillColor,
+        'fill-opacity': 1
+      }
+    }), "".concat(VECTOR_SOURCE_ID, "_buildings_fill_extrusion"), {
       hidden: ['$not', ['$empty', ['$get', 'view.metadata.customGeoJSON.AREAS']]],
       interactive: false,
       // tooltip: {
@@ -5737,69 +5886,6 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
   };
 }
 
-function numerical_choropleth(base, _ref) {
-  var collection_id = _ref.collection_id,
-    indicator_id = _ref.indicator_id,
-    indicator_label = _ref.indicator_label,
-    _ref$color_scheme = _ref.color_scheme,
-    color_scheme = _ref$color_scheme === void 0 ? 'schemeRdYlBu' : _ref$color_scheme,
-    measure_unit = _ref.measure_unit,
-    $circleRadius = _ref.$circleRadius,
-    $tooltip = _ref.$tooltip,
-    $legends = _ref.$legends;
-  var VARIABLE_ID = indicator_id;
-  var TABLE_ID = collection_id;
-  var VECTOR_SOURCE_ID = "".concat(TABLE_ID, ".geom");
-
-  // const viewId = `${collection_id}.${VARIABLE_ID}`
-
-  var _color_scheme = COLOR_SCHEMES[color_scheme];
-  return _objectSpread2(_objectSpread2({}, base), {}, {
-    metadata: ['$let', base.metadata, {
-      variableValues: ['$get', 'variableValues'],
-      sizingValues: ['$get', 'sizingValues'],
-      colorScaleStops: ['$naturalBreaks', ['$get', 'variableValues'], ['$merge', _color_scheme, {
-        minK: 5
-      }]]
-    }],
-    layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty({}, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
-      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE,
-      type: 'circle',
-      legends: [{
-        type: 'SequentialColorLegend',
-        title: indicator_label,
-        unit: measure_unit,
-        steps: ['$get', 'view.metadata.colorScaleStops']
-      }].concat(_toConsumableArray($legends)),
-      interactive: true,
-      tooltip: $tooltip,
-      // tooltip: {
-      //   title: ['$literal', ['$get', 'feature.properties.no_entidade']],
-      //   entries: [
-      //     [
-      //       indicator_label,
-      //       [
-      //         '$literal',
-      //         [
-      //           '$get',
-      //           `feature.properties.${VARIABLE_ID}::string({ "number": ["pt-BR"] })`,
-      //         ],
-      //       ],
-      //     ],
-      //   ],
-      // },
-      filter: ['all', ['==', ['get', 'id_municipio'], ['$get', 'municipioId']], ['==', ['typeof', ['get', VARIABLE_ID]], 'number']],
-      paint: {
-        'circle-opacity': 1,
-        'circle-radius': $circleRadius,
-        'circle-stroke-width': 1,
-        'circle-stroke-color': '#efefef',
-        'circle-color': ['$flat', [['step', ['get', VARIABLE_ID]], ['$get', 'view.metadata.colorScaleStops']]]
-      }
-    })))
-  });
-}
-
 function numerical_size(base, _ref) {
   var collection_id = _ref.collection_id,
     variable_id = _ref.variable_id,
@@ -5816,7 +5902,7 @@ function numerical_size(base, _ref) {
   var SIZE_MIN = 6;
   return _objectSpread2(_objectSpread2({}, base), {}, {
     layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty({}, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
-      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE,
+      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 2,
       type: 'circle',
       legends: [{
         type: 'ProportionalSymbolLegend',
@@ -5833,26 +5919,17 @@ function numerical_size(base, _ref) {
       interactive: true,
       tooltip: $tooltip,
       filter: $layerFilter,
-      // filter: [
-      //   'all',
-      //   [
-      //     '==',
-      //     ['get', 'id_municipio_gestor'],
-      //     ['$substr', ['$get', 'municipioId'], 0, 6],
-      //   ],
-      //   ...(Array.isArray(filter) ? filter : []),
-      // ],
       paint: {
         'circle-opacity': 1,
         'circle-stroke-width': 1,
         'circle-stroke-color': '#000000',
-        // 'circle-radius': 10,
-        'circle-radius': ['interpolate', ['linear'], ['get', VARIABLE_ID],
-        // Replace "density" with your property name
-        ['$min', ['$get', 'view.metadata.variableValues']], SIZE_MIN,
-        // When qt_mat_fund_ai is 0, radius is 6
-        ['$max', ['$get', 'view.metadata.variableValues']], SIZE_MAX // When qt_mat_fund_ai is 100, radius is 20
-        ],
+        'circle-radius': ['$if', ['$gt', ['$get', 'length', ['$get', 'view.metadata.variableValues']], 1], zoomSensitiveLinearSizes({
+          variable: ['get', VARIABLE_ID],
+          minValue: ['$min', ['$get', 'view.metadata.variableValues']],
+          maxValue: ['$max', ['$get', 'view.metadata.variableValues']],
+          minSize: SIZE_MIN,
+          maxSize: SIZE_MAX
+        }), 10],
         'circle-color': get(COLOR_SCHEMES, color_scheme) || color_scheme
       }
     })))
@@ -5878,13 +5955,23 @@ function categorical(base, _ref) {
       color: get(COLOR_SCHEMES, category.color) || category.color
     });
   }) : null;
+  var $circleColor = categories ? ['match', ['to-string', ['get', VARIABLE_ID]]].concat(_toConsumableArray(categories.flatMap(function (category) {
+    return [category.value, category.color];
+  })), [DEFAULT_NULL_COLOR]) : DEFAULT_NULL_COLOR;
   return _objectSpread2(_objectSpread2({}, base), {}, {
-    //
-    // No need for metadata
-    //
-    // metadata: ,
-    layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty({}, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
-      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE,
+    layers: _objectSpread2(_objectSpread2({}, base.layers), {}, _defineProperty({
+      influenceArea_fill: _objectSpread2(_objectSpread2({}, base.layers.influenceArea_fill), {}, {
+        paint: _objectSpread2(_objectSpread2({}, base.layers.influenceArea_fill.paint), {}, {
+          'fill-color': $circleColor
+        })
+      }),
+      influenceArea_boundaries: _objectSpread2(_objectSpread2({}, base.layers.influenceArea_boundaries), {}, {
+        paint: _objectSpread2(_objectSpread2({}, base.layers.influenceArea_boundaries.paint), {}, {
+          'line-color': $circleColor
+        })
+      })
+    }, "".concat(VECTOR_SOURCE_ID, "_circle"), vectorLayer(VECTOR_SOURCE_ID, {
+      zIndex: ABOVE_BASE_MAP_LAYERS_Z_INDEX_BASE + 2,
       type: 'circle',
       legends: [categories ? {
         type: 'ColorLegend',
@@ -5919,9 +6006,7 @@ function categorical(base, _ref) {
         'circle-radius': 10,
         'circle-stroke-width': 1,
         'circle-stroke-color': '#000000'
-      }, "circle-radius", $circleRadius), 'circle-color', categories ? ['match', ['to-string', ['get', VARIABLE_ID]]].concat(_toConsumableArray(categories.flatMap(function (category) {
-        return [category.value, category.color];
-      })), [DEFAULT_NULL_COLOR]) : DEFAULT_NULL_COLOR)
+      }, "circle-radius", $circleRadius), 'circle-color', $circleColor)
     })))
   });
 }
@@ -5944,7 +6029,7 @@ function boolean_categorical(base, config) {
 }
 
 var BY_TYPE = {
-  numerical_choropleth: numerical_choropleth,
+  // numerical_choropleth,
   numerical_size: numerical_size,
   boolean_categorical: boolean_categorical,
   categorical: categorical
@@ -5958,6 +6043,7 @@ function cem_saude_2024(viewSpec, allViewSpecs, context) {
     indicator_label = viewSpec.indicator_label,
     indicator_type = viewSpec.indicator_type,
     sizing_variable_id = viewSpec.sizing_variable_id,
+    tipo_estabelecimento = viewSpec.tipo_estabelecimento,
     _viewSpec$number_form = viewSpec.number_format,
     number_format = _viewSpec$number_form === void 0 ? ['pt-BR', {}] : _viewSpec$number_form,
     keywords = viewSpec.keywords;
@@ -5998,49 +6084,55 @@ function cem_saude_2024(viewSpec, allViewSpecs, context) {
     metodology: metodology,
     keywords: [indicator_path, $sourceLabel, 'saúde', 'hospital', 'UBS', keywords].filter(Boolean),
     confSchema: {
-      data: {
-        // variantId: {
-        //   label: 'Rede de ensino:',
-        //   type: 'treeSelect',
-        //   options: variants.map((variant) => ({
-        //     path: variant.variant_path,
-        //     label: variant.variant_label || variant.indicator_id,
-        //     value: variant.indicator_id,
-        //   })),
-        //   placeholder: 'Selecione uma rede',
-        //   clearable: false,
-        //   defaultValue: indicator_id,
-        // },
-      }
+      data: _objectSpread2({}, influenceAreaConf({
+        defaultBufferSize: tipo_estabelecimento === 'HOSPITAL' ? 2000 : 500,
+        maxBufferSize: 5000
+      }))
     },
     metadata: {
-      variableValues: ['$get', ['$template', '[].${0}', VARIABLE_ID], ['$fetch', {
-        href: METADATA_API_ENDPOINT,
-        pathname: collection_id,
-        searchParams: ['$merge', {
-          select: VARIABLE_ID,
-          id_municipio_gestor: _id_municipio_gestor_apiFilterExp
-        }, _fetchMetadataApiFilterExpResolver]
-      }]],
-      sizingValues: sizing_variable_id ? ['$filter', ['$get', ['$template', '[].${0}', sizing_variable_id
-      // ['$get', 'view.conf.data.sizingVariable'],
-      ], ['$fetch', {
-        href: METADATA_API_ENDPOINT,
-        pathname: collection_id,
-        searchParams: ['$merge', {
-          select: sizing_variable_id,
-          // select: ['$get', 'view.conf.data.sizingVariable'],
-          id_municipio_gestor: _id_municipio_gestor_apiFilterExp
-        }, _fetchMetadataApiFilterExpResolver]
-      }]], ['$and', ['$not', ['$empty', ['$iterator', 'item']]], ['$gt', ['$iterator', 'item'], 0]]] : null
+      _value: ['$let', {
+        rawData: ['$fetch', {
+          href: METADATA_API_ENDPOINT,
+          pathname: collection_id,
+          searchParams: ['$merge', {
+            select: [VARIABLE_ID, 'geom'].join(','),
+            id_municipio_gestor: _id_municipio_gestor_apiFilterExp
+          }, _fetchMetadataApiFilterExpResolver]
+        }]
+      }, _objectSpread2(_objectSpread2({
+        variableValues: ['$get', ['$template', 'rawData[].${0}', VARIABLE_ID]]
+      }, influenceAreaMetadata()), {}, {
+        sizingValues: sizing_variable_id ? ['$filter', ['$get', ['$template', '[].${0}', sizing_variable_id
+        // ['$get', 'view.conf.data.sizingVariable'],
+        ], ['$fetch', {
+          href: METADATA_API_ENDPOINT,
+          pathname: collection_id,
+          searchParams: ['$merge', {
+            select: sizing_variable_id,
+            // select: ['$get', 'view.conf.data.sizingVariable'],
+            id_municipio_gestor: _id_municipio_gestor_apiFilterExp
+          }, _fetchMetadataApiFilterExpResolver]
+        }]], ['$and', ['$not', ['$empty', ['$iterator', 'item']]], ['$gt', ['$iterator', 'item'], 0]]] : null
+      })]
     },
     sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty({}, VECTOR_SOURCE_ID, tableVectorSource(context, collection_id, {
       attribution: $sourceLabel,
       promoteId: 'id_cnes',
       minzoom: 8,
       maxzoom: 20
-    }))),
-    layers: _objectSpread2({}, globalRes.layers),
+    })), influenceAreaSources()),
+    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), influenceAreaLayers({
+      fillPaint: {
+        'fill-color': colorScheme('schemeSet1.colors[2]'),
+        'fill-opacity': 0.3
+      },
+      boundaryPaint: {
+        'line-color': colorScheme('schemeSet1.colors[2]'),
+        'line-opacity': 0.8,
+        'line-width': 2,
+        'line-dasharray': [2, 2]
+      }
+    })),
     download: downloadResolver({
       fileNameBase: ['$template', '${0}_${1}_georedus_saude', [VARIABLE_ID, ['$get', 'municipioId']]],
       mainVariableId: VARIABLE_ID,
@@ -6108,14 +6200,23 @@ function cem_saude_2024(viewSpec, allViewSpecs, context) {
   //     ]
   //   : SIZE_DEFAULT
 
-  var $circleRadius = sizing_variable_id ? ['$if', ['$and',
-  // ['$get', 'view.conf.data.showSize'],
-  ['$gt', ['$get', 'length', ['$get', 'view.metadata.sizingValues']], 1]], ['interpolate', ['linear'], ['get', sizing_variable_id],
-  // Replace "density" with your property name
-  ['$min', ['$get', 'view.metadata.sizingValues']], SIZE_MIN,
-  // When qt_mat_fund_ai is 0, radius is 6
-  ['$max', ['$get', 'view.metadata.sizingValues']], SIZE_MAX // When qt_mat_fund_ai is 100, radius is 20
-  ], SIZE_DEFAULT] : SIZE_DEFAULT;
+  var $circleRadius = sizing_variable_id ? ['$if', ['$gt', ['$get', 'length', ['$get', 'view.metadata.sizingValues']], 1], zoomSensitiveLinearSizes({
+    variable: ['get', sizing_variable_id],
+    minValue: ['$min', ['$get', 'view.metadata.sizingValues']],
+    maxValue: ['$max', ['$get', 'view.metadata.sizingValues']],
+    minSize: SIZE_MIN,
+    maxSize: SIZE_MAX
+  }),
+  // [
+  //   'interpolate',
+  //   ['linear'],
+  //   ['get', sizing_variable_id], // Replace "density" with your property name
+  //   ['$min', ['$get', 'view.metadata.sizingValues']],
+  //   SIZE_MIN, // When qt_mat_fund_ai is 0, radius is 6
+  //   ['$max', ['$get', 'view.metadata.sizingValues']],
+  //   SIZE_MAX, // When qt_mat_fund_ai is 100, radius is 20
+  // ],
+  SIZE_DEFAULT] : SIZE_DEFAULT;
   var $tooltip = {
     title: ['$literal', ['$get', 'feature.properties.str_nome_fantasia']],
     entries: [['ID CNES', ['$literal', ['$get', 'feature.properties.id_cnes']]], [indicator_label, ['$literal', ['$coalesce', ['$get', "feature.properties.".concat(VARIABLE_ID, "::string({\n                number: ").concat(JSON.stringify(number_format), ",\n                boolean: {\n                  true: 'Sim',\n                  false: 'N\xE3o'\n                }\n              })")], 'Sem dados']]
@@ -6322,12 +6423,17 @@ var resolveControls = _stageResolver('controls', function (controls, _a) {
   }
   var view = _a.view,
     viewSpec = _a.viewSpec;
-  console.log('resolve controls', controls);
-  var layerLegends = view.layers ? get$1(Object.values(view.layers).filter(function (layer) {
-    return !layer.hidden && layer.visibility !== 'none';
-  }), '[].legends[]').filter(Boolean).map(function (legend, index) {
-    return __assign(__assign({}, legend), {
-      id: "".concat(viewSpec.id, "_").concat(index)
+  var layerLegends = view.layers ? Object.entries(view.layers).flatMap(function (_a) {
+    var layerRelativeId = _a[0],
+      layer = _a[1];
+    return layer.hidden || layer.visibility === 'none' ? [] : (layer.legends || []).map(function (legend, index) {
+      return __assign(__assign({}, legend), {
+        //
+        // TODO: review if there is a better approach
+        //
+        layerId: fmtLayerAbsoluteId(view.id, layerRelativeId),
+        id: "".concat(viewSpec.id, "_").concat(index)
+      });
     });
   }) : [];
   return __assign(__assign({}, controls || {}), {
@@ -6712,7 +6818,7 @@ function useViewStageQueries(_a) {
       var stageDependencies = enabled && typeof ((_a = viewSpec[stageKey]) === null || _a === void 0 ? void 0 : _a._dependencies) === 'function' ? viewSpec[stageKey]._dependencies(__assign(__assign({}, viewResolutionContextBase), {
         view: partialView
       })) || 'STABLE_DEPENDENCY' : 'STABLE_DEPENDENCY';
-      var queryKey = ['ViewStage', viewId, stageKey, viewConf, viewResolutionContextBase.app.municipioId, stageDependencies];
+      var queryKey = ['ViewStage', viewId, stageKey, viewConf, viewResolutionContextBase.app, stageDependencies];
       return __assign(__assign({}, ((_b = viewSpec[stageKey]) === null || _b === void 0 ? void 0 : _b._query) ? pick((_c = viewSpec[stageKey]) === null || _c === void 0 ? void 0 : _c._query, ['gcTime']) : {}), {
         gcTime: 0,
         enabled: enabled,
@@ -6939,6 +7045,36 @@ function useViews(viewResolutionContextBase) {
   };
 }
 
+function useMapStyle(input, modifier) {
+  var _this = this;
+  var styleQuery = useQuery({
+    queryKey: ['MapStyle', input],
+    queryFn: function queryFn() {
+      return __awaiter(_this, void 0, void 0, function () {
+        var res, baseStyle;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (_typeof(input) === 'object') return [2 /*return*/, input];
+              return [4 /*yield*/, fetch(input)];
+            case 1:
+              res = _a.sent();
+              if (!res.ok) throw new Error("Failed to fetch style: ".concat(res.status));
+              return [4 /*yield*/, res.json()];
+            case 2:
+              baseStyle = _a.sent();
+              return [2 /*return*/, typeof modifier === 'function' ? modifier(baseStyle) : baseStyle];
+          }
+        });
+      });
+    },
+    staleTime: Infinity,
+    enabled: !!input
+  });
+  return styleQuery.data || null;
+}
+
+var _excluded = ["layerId", "__filterFeaturesForStep"];
 var _templateObject, _templateObject2, _templateObject3;
 
 //
@@ -6985,16 +7121,18 @@ function _flyToMunicipio2() {
   return _flyToMunicipio2.apply(this, arguments);
 }
 var REDUS_DATAVIZ_STYLE = 'https://api.maptiler.com/maps/0195f947-fb77-7256-83d6-47a54db345a3/style.json';
+var REDUS_SATELLITE_STYLE = 'https://api.maptiler.com/maps/0196a042-ce24-74d5-8c4a-aacddb89c9ca/style.json';
 // const REDUS_DATAVIZ_STYLE =
 //   'https://api.maptiler.com/maps/streets-v2/style.json'
 // const MAP_STYLE_URL = `https://api.maptiler.com/maps/dataviz/style.json?key=${process.env.NEXT_PUBLIC_MAP_TILER_API_KEY}`
 var DATAVIZ_MAP_STYLE_URL = "".concat(REDUS_DATAVIZ_STYLE, "?key=").concat(process.env.NEXT_PUBLIC_MAP_TILER_API_KEY);
-var SATELLITE_MAP_STYLE_URL = "https://api.maptiler.com/maps/satellite/style.json?key=".concat(process.env.NEXT_PUBLIC_MAP_TILER_API_KEY);
+var SATELLITE_MAP_STYLE_URL = "".concat(REDUS_SATELLITE_STYLE, "?key=").concat(process.env.NEXT_PUBLIC_MAP_TILER_API_KEY);
 //
 // For elevation rendering
 //
 var DEM_SOURCE_URL = "https://api.maptiler.com/tiles/terrain-rgb-v2/{z}/{x}/{y}.webp?key=".concat(process.env.NEXT_PUBLIC_MAP_TILER_API_KEY);
 var DEM_SOURCE_ENCODING = 'mapbox';
+var GLYPHS_URL = "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=".concat(process.env.NEXT_PUBLIC_MAP_TILER_API_KEY);
 var MapStyleToggleCtrl = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100px;\n  width: 100px;\n\n  padding: 0;\n  border: none;\n  background-color: #efefef;\n  border-radius: 0;\n  box-shadow:\n    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,\n    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n\n  cursor: pointer;\n\n  &::after {\n    z-index: 2;\n    content: 'Trocar camada base';\n    color: transparent;\n    font-weight: bold;\n    display: flex;\n    padding: 8px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    background: rgba(0, 0, 0, 0);\n    transition: background 0.1s ease-in-out;\n  }\n\n  &:hover {\n    &::after {\n      background: rgba(0, 0, 0, 0.5);\n      color: white;\n    }\n  }\n\n  @media (max-width: 500px) {\n    height: 50px;\n    width: 50px;\n    &::after {\n      font-size: 0.6rem;\n    }\n  }\n"])));
 
 //
@@ -7029,11 +7167,77 @@ var SKY_STYLE = {
   'fog-ground-blend': 0.5,
   'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 1, 10, 1, 12, 0]
 };
-function GeoReDUSInner(_ref) {
-  var globalState = _ref.state,
-    onSetGlobalState = _ref.onSetState,
-    api = _ref.api,
-    viewSpecs = _ref.viewSpecs;
+
+//
+// TODO: review, this is clearly not a structured way
+// of doing this
+//
+function HoverLegend(_ref) {
+  var layerId = _ref.layerId,
+    __filterFeaturesForStep = _ref.__filterFeaturesForStep,
+    legendProps = _objectWithoutProperties(_ref, _excluded);
+  var mapRef = useMap();
+  var SEQUENTIAL_COLOR_LEGEND_PROPS = useMemo(function () {
+    var onMouseEnterStep = function onMouseEnterStep(stepInfo) {
+      var _mapRef$current;
+      var map = (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.getMap();
+      if (!map) {
+        return;
+      }
+      var targetFeatures = __filterFeaturesForStep(stepInfo, map.queryRenderedFeatures(undefined, {
+        layers: [layerId]
+      }));
+      var _iterator = _createForOfIteratorHelper(targetFeatures),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var feature = _step.value;
+          map.setFeatureState(feature, {
+            hover: true
+          });
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+    var onMouseLeaveStep = function onMouseLeaveStep() {
+      var _mapRef$current2;
+      var map = (_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.getMap();
+      if (!map) {
+        return;
+      }
+      var layerRenderedFeatures = map.queryRenderedFeatures(undefined, {
+        layers: [layerId]
+      });
+      var _iterator2 = _createForOfIteratorHelper(layerRenderedFeatures),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var feature = _step2.value;
+          map.setFeatureState(feature, {
+            hover: false
+          });
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+    return {
+      onMouseEnterStep: onMouseEnterStep,
+      onMouseLeaveStep: onMouseLeaveStep
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Legend, _extends({}, legendProps, legendProps.type === 'SequentialColorLegend' ? SEQUENTIAL_COLOR_LEGEND_PROPS : {}));
+}
+function GeoReDUSInner(_ref2) {
+  var globalState = _ref2.state,
+    onSetGlobalState = _ref2.onSetState,
+    api = _ref2.api,
+    viewSpecs = _ref2.viewSpecs;
   var METADATA_API_ENDPOINT = api.METADATA_API_ENDPOINT,
     VECTOR_TILE_SERVER_ENDPOINT = api.VECTOR_TILE_SERVER_ENDPOINT;
 
@@ -7158,7 +7362,7 @@ function GeoReDUSInner(_ref) {
     // Otherwise, return the first list, in order to ensure at least
     // empty map rendering
     //
-    [viewConfState.layout[0]]).map(function (list) {
+    [viewConfState.layout[0]]).map(function (list, index) {
       var views = list.items.map(function (item) {
         return resolvedViewsById[item.id];
       }).filter(Boolean);
@@ -7240,7 +7444,7 @@ function GeoReDUSInner(_ref) {
         METADATA_API_ENDPOINT: METADATA_API_ENDPOINT,
         coordinates: null
       }).then(/*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolvedMunicipioId) {
+        var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolvedMunicipioId) {
           var selectedMunicipioId;
           return _regeneratorRuntime().wrap(function _callee3$(_context3) {
             while (1) switch (_context3.prev = _context3.next) {
@@ -7282,7 +7486,7 @@ function GeoReDUSInner(_ref) {
           }, _callee3);
         }));
         return function (_x5) {
-          return _ref3.apply(this, arguments);
+          return _ref4.apply(this, arguments);
         };
       }());
     }
@@ -7320,8 +7524,8 @@ function GeoReDUSInner(_ref) {
     //
     // Remove features with no associated view
     //
-    .filter(function (_ref4) {
-      var mapView = _ref4.mapView;
+    .filter(function (_ref5) {
+      var mapView = _ref5.mapView;
       return Boolean(mapView);
     });
     if (interactiveFeatures.length > 0) {
@@ -7344,6 +7548,12 @@ function GeoReDUSInner(_ref) {
       return null;
     }
   }, []);
+  var mapStyle = useMapStyle(baseMapStyle === 'satellite' ? SATELLITE_MAP_STYLE_URL : DATAVIZ_MAP_STYLE_URL, function (styleBase) {
+    return _objectSpread2(_objectSpread2({}, styleBase), {}, {
+      glyphs: GLYPHS_URL,
+      sprite: 'https://api.maptiler.com/maps/dataviz/sprite'
+    });
+  });
   return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(LeftPanel, {
     open: leftPanelOpen,
     onSetOpen: setLeftPanelOpen,
@@ -7374,7 +7584,7 @@ function GeoReDUSInner(_ref) {
     schema: MUNICIPIO_ID_SELECTOR_SCHEMA,
     value: municipioId,
     onSetValue: setMunicipioId
-  }))), /*#__PURE__*/React.createElement(SyncedMaps, {
+  }))), mapStyle && /*#__PURE__*/React.createElement(SyncedMaps, {
     maxPitch: 80,
     onDrag: function onDrag() {
       if (resolvedLayout.length > 1 && leftPanelOpen) {
@@ -7387,7 +7597,7 @@ function GeoReDUSInner(_ref) {
     },
     ref: syncedMapsRef,
     onLoad: (/*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(event) {
+      var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(event) {
         return _regeneratorRuntime().wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
@@ -7399,7 +7609,7 @@ function GeoReDUSInner(_ref) {
         }, _callee4);
       }));
       return function (_x6) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }()),
     attributionControl: false,
@@ -7412,13 +7622,13 @@ function GeoReDUSInner(_ref) {
       right: 0
     },
     setPrefetchZoomDelta: 0,
-    mapStyle: baseMapStyle === 'satellite' ? SATELLITE_MAP_STYLE_URL : DATAVIZ_MAP_STYLE_URL,
+    mapStyle: mapStyle,
     sky: SKY_STYLE,
     tooltip: getTooltip,
-    maps: resolvedLayout.map(function (_ref6, index) {
-      var id = _ref6.id,
-        views = _ref6.views,
-        legends = _ref6.legends;
+    maps: resolvedLayout.map(function (_ref7, index) {
+      var id = _ref7.id,
+        views = _ref7.views,
+        legends = _ref7.legends;
       return {
         id: id,
         views: views,
@@ -7461,7 +7671,7 @@ function GeoReDUSInner(_ref) {
           columns: legends.length > 1 ? 2 : 1,
           gap: "10px"
         }, legends.map(function (legend) {
-          return /*#__PURE__*/React.createElement(Legend, _extends({}, resolvedLayout.length > 1 ? {
+          return /*#__PURE__*/React.createElement(HoverLegend, _extends({}, resolvedLayout.length > 1 ? {
             direction: 'row',
             maxWidth: '300px',
             size: '1'