@redus/georedus-ui 0.10.0 → 0.11.0

package/dist/main.js

@@ -12,15 +12,16 @@ 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 { csvParse } from 'd3-dsv';
 import { strAutoCast } from '@orioro/cast';
 import { fmtLayerAbsoluteId, waves_1, svgImageGenerator, SVG_PATTERNS, makeSyncedMaps, LayeredMap, useMapRegistry, useTilesLoading, HoverTooltip, layeredMapOnClickHandler, DynamicImages, ControlContainer, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
-import { colord } from 'colord';
-import { Heading, Portal, Badge, Tabs, Tooltip, IconButton, Theme, Text, Popover, Dialog } from '@radix-ui/themes';
 import styled, { keyframes } from 'styled-components';
-import { mdiSprout, mdiTree, mdiCurrencyUsd, mdiAccountMultipleOutline, mdiScaleBalance, mdiHelpCircleOutline, mdiDownload, mdiDotsVertical, mdiOpacity, mdiFilterVariant, mdiMap, mdiEarth, mdiHospitalBox, mdiHomeCity, mdiSchool, mdiAccountGroup, mdiContentCopy, mdiLinkVariant, mdiChevronLeft, mdiShareVariantOutline, mdiForumOutline, mdiDragVertical, mdiLayers, mdiClose, mdiHospital } from '@mdi/js';
-import { Icon } from '@mdi/react';
+import { colord } from 'colord';
 import React$1, { useState, useMemo, useCallback, useContext, createContext, useReducer, useEffect, useRef } from 'react';
+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 Icon$1, { Icon } from '@mdi/react';
 import Confetti from 'react-confetti';
 import { nodeIdFromPath } from '@orioro/tree-model';
 import { makeDirNav } from '@orioro/react-dir-nav';
@@ -40,6 +41,7 @@ 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) {
   (null == a || a > r.length) && (a = r.length);
@@ -4958,16 +4960,57 @@ function _censoColorScheme(colorSchemeName) {
   return colorScheme;
 }
 
+//
+// TODO: restructure and move into maplibre util with naturalBreaks
+// Maybe move into separate lib?
+//
+function _quantileBreakpoints(_ref) {
+  var k = _ref.k,
+    values = _ref.values,
+    scalesByK = _ref.scalesByK,
+    _ref$defaultColor = _ref.defaultColor,
+    defaultColor = _ref$defaultColor === void 0 ? '#efefef' : _ref$defaultColor;
+  var scale = scaleQuantile().domain(values) // your data
+  .range(new Array(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 = scalesByK[k];
+  var colorScaleStops = breaks.map(function (breakValue, index) {
+    var color = colorScale[index + 1];
+    return index === 0 ? [
+    // For below 0 values, will use defaultColor
+    defaultColor, 0,
+    // colorScale
+    colorScale[0], breakValue, color] : [breakValue, color];
+  }).flat(1);
+  return colorScaleStops;
+}
 function defaultMetadata(_x, _x2) {
   return _defaultMetadata.apply(this, arguments);
 }
 function _defaultMetadata() {
-  _defaultMetadata = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref, context) {
-    var GLOBAL_CONTEXT, PARSED_SCHEMA, METADATA_API_ENDPOINT, municipioId, variableId, variant, rawDataCacheUrl, rawData, scaleValues, colorScheme;
+  _defaultMetadata = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref2, context) {
+    var GLOBAL_CONTEXT, PARSED_SCHEMA, METADATA_API_ENDPOINT, municipioId, variableId, variant, rawDataCacheUrl, rawData, scaleValues, colorScheme, colorScaleStops;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          GLOBAL_CONTEXT = _ref.GLOBAL_CONTEXT, PARSED_SCHEMA = _ref.PARSED_SCHEMA;
+          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');
@@ -4987,6 +5030,12 @@ function _defaultMetadata() {
           rawData = _context.sent;
           scaleValues = get$1(rawData, "[].".concat(variableId));
           colorScheme = _censoColorScheme(variant.colorScheme);
+          colorScaleStops = variant.classificationMethod === 'quantile(5)' ? _quantileBreakpoints(_objectSpread2({
+            k: 5,
+            values: scaleValues
+          }, colorScheme)) : ['$naturalBreaks', scaleValues, _objectSpread2(_objectSpread2({}, colorScheme), {}, {
+            minK: 5
+          })];
           return _context.abrupt("return", {
             //
             // Review if this is actually needed, as now we are loading
@@ -4998,11 +5047,9 @@ function _defaultMetadata() {
             rawDataCacheUrl: rawDataCacheUrl,
             rawData: rawData,
             colorScheme: colorScheme,
-            colorScaleStops: ['$naturalBreaks', scaleValues, _objectSpread2(_objectSpread2({}, colorScheme), {}, {
-              minK: 5
-            })]
+            colorScaleStops: colorScaleStops
           });
-        case 12:
+        case 13:
         case "end":
           return _context.stop();
       }
@@ -5339,6 +5386,13 @@ function setor_censitario_sources(_ref2) {
     attribution: PARSED_SCHEMA.sourceLabel,
     minzoom: 8,
     //
+    // TODO: review
+    //
+    bounds: resolve.fn(function (_ref3) {
+      var app = _ref3.app;
+      return app.mapBounds;
+    }),
+    //
     // Prevent system from fetching data beyond necessary detail
     //
     maxzoom: BUILDINGS_MIN_ZOOM,
@@ -5362,8 +5416,8 @@ function setor_censitario_layers(opts) {
   // vector source
   //
   var _vectorSourceFillColor = ['$flat', [['step', ['coalesce', ['get', 'value'], -1]], ['$get', 'view.metadata.colorScaleStops']]];
-  var _filter = resolve.fn(function (_ref4) {
-    var app = _ref4.app;
+  var _filter = resolve.fn(function (_ref5) {
+    var app = _ref5.app;
     return ['all',
     //
     // cd_situacao = '9' -> Massas de água,
@@ -5390,16 +5444,33 @@ function setor_censitario_layers(opts) {
     legends: setor_censitario_legends(opts),
     tooltip: {
       title: ['$literal', ['$template', 'Setor censitário ${0}', ['$get', 'feature.properties.id']]],
-      entries: [[['$get', ['$get', 'view.conf.data.variableId'], ['$get', 'view.metadata.labels']], ['$literal', ['$fmt', ['$get', 'feature.properties.value'
+      entries: [[['$get', ['$get', 'view.conf.data.variableId'], ['$get', 'view.metadata.labels']], ['$literal', resolve.fn(function (context) {
+        var variableId = get$1(context, 'view.conf.data.variableId');
+        if (variableId === 'total_pessoas_por_hectare') {
+          try {
+            var value_src = JSON.parse(context.feature.properties.value_src);
+            return value_src['bas.v0001'];
+          } catch (err) {
+            console.error(err);
+            return null;
+          }
+        } else {
+          return ['$fmt', ['$get', 'feature.properties.value'], {
+            number: NUMBER_FMT
+          }];
+        }
+      })
+
+      //
+      // TODO: refactor
+      // THIS IS THE ACTUAL:
+      //
       // [
-      //   '$template',
-      //   'feature.properties.${0}',
-      //   // `::string({ "number": ${JSON.stringify(NUMBER_FMT)} })`,
-      //   ['$get', 'view.conf.data.variableId'],
+      //   '$fmt',
+      //   ['$get', 'feature.properties.value'],
+      //   { number: NUMBER_FMT },
       // ],
-      ], {
-        number: NUMBER_FMT
-      }]]]].concat(_toConsumableArray([
+      ]]].concat(_toConsumableArray([
         // 'v0001',
         // 'v0002',
         // 'v0003',
@@ -5423,7 +5494,6 @@ function setor_censitario_layers(opts) {
       //   ['$get', 'view.conf.data.variableId'],
       // ],
       ]]]])
-      // entries: [CHART_UTIL._variableValueTooltipEntry],
     },
     filter: _filter,
     // maxzoom: 14,
@@ -6463,6 +6533,7 @@ function _util_bacia(_ref) {
     indicator_id: id,
     id: id,
     label: label,
+    sourceLabel: 'ANA',
     path: "Divis\xF5es territoriais / _ / Bacias Hidrogr\xE1ficas",
     metadata: {},
     sources: _defineProperty({}, id, {
@@ -6768,10 +6839,65 @@ function br_divisao_territorial_views(conf) {
         'line-opacity': 0.5
       }
     }
-  }, conf))];
+  }, conf))
+
+  // TEST
+  // br_divisao_territorial({
+  //   path: 'ANA',
+  //   label: 'Trechos de drenagem',
+  //   id: 'ana_malha_br_bho_trechos_de_drenagem_2017.geom',
+  //   line: {
+  //     paint: {
+  //       'line-color': 'magenta',
+  //       'line-width': 2,
+  //       'line-opacity': 0.5,
+  //     },
+  //   },
+  //   ...conf,
+  // }),
+  ];
+}
+
+var _templateObject$6;
+var StyledIframe = styled.iframe(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  border: none;\n  width: 100%;\n  height: 100%;\n"])));
+function DocumentIframe(_ref) {
+  var src = _ref.src;
+  return /*#__PURE__*/React.createElement(AspectRatio, {
+    ratio: 210 / 297
+  }, /*#__PURE__*/React.createElement(StyledIframe, {
+    src: src
+  }));
 }
 
 var CURVATURA_ID = 'curvatura';
+var TRANSPARENT$2 = [0, 0, 0, 0];
+var CURVATURA_CLASSES = [{
+  value: 1,
+  label: 'Muito côncava',
+  color: '#d92bcb'
+}, {
+  value: 2,
+  label: 'Côncava',
+  color: '#b49bcb'
+}, {
+  value: 3,
+  label: 'Retilínea',
+  color: '#dcdcdc'
+}, {
+  value: 4,
+  label: 'Convexa',
+  color: '#f3ce5e'
+}, {
+  value: 5,
+  label: 'Muito convexa',
+  color: '#fd952e'
+}];
+var DEFAULT_CURVATURA_ACTIVE_CLASSSES = CURVATURA_CLASSES.map(function (cl) {
+  return cl.value;
+});
+function _curvaturaActiveClasses(candidate) {
+  return Array.isArray(candidate) && candidate.length > 0 ? candidate : DEFAULT_CURVATURA_ACTIVE_CLASSSES;
+}
 function curvatura(_ref) {
   var RASTER_TILE_SERVER_ENDPOINT = _ref.RASTER_TILE_SERVER_ENDPOINT,
     mosaicJsonUrl = _ref.mosaicJsonUrl;
@@ -6781,49 +6907,42 @@ function curvatura(_ref) {
     collection_id: CURVATURA_ID,
     indicator_id: CURVATURA_ID,
     id: CURVATURA_ID,
+    sourceLabel: 'ANADEM (ANA)',
     label: 'Forma da encosta - Em perfil',
+    shortDescription: 'Refere-se às formas côncava, convexa e retilínea do terreno, analisada em perfil',
     path: "Emerg\xEAncias clim\xE1ticas / / Suscetibilidade a deslizamentos",
+    metodology: /*#__PURE__*/React.createElement(DocumentIframe, {
+      src: "/georedus/metodologia/perfil-de-curvatura.pdf"
+    }),
     confSchema: {
       data: {
-        // temperaturaRange: {
-        //   type: 'range',
-        //   defaultValue: DEFAULT_DECLIVIDADE_RANGE,
-        //   step: 1,
-        //   min: DEFAULT_DECLIVIDADE_RANGE[0],
-        //   max: DEFAULT_DECLIVIDADE_RANGE[1],
-        //   label: resolve.literal(
-        //     resolve.fn((context) => {
-        //       const temperaturaRange = _temperaturaRange(
-        //         context.value?.temperaturaRange,
-        //       )
-        //       const minLabel = `${temperaturaRange[0]}°`
-        //       const maxLabel = `${temperaturaRange[1]}°${temperaturaRange[1] === DEFAULT_DECLIVIDADE_RANGE[1] ? '+' : ''}`
-        //       return `Intervalo de temperatura (${minLabel} - ${maxLabel})`
-        //     }),
-        //   ),
-        //   helperText: 'Intervalo de temperatura apresentado',
-        // },
+        curvaturaActiveClasses: {
+          type: 'checkboxSelect',
+          options: CURVATURA_CLASSES.map(function (curv) {
+            return {
+              label: curv.label,
+              value: curv.value
+            };
+          }),
+          defaultValue: CURVATURA_CLASSES.map(function (curv) {
+            return curv.value;
+          })
+        }
       }
     },
     metadata: {},
     sources: _defineProperty({}, CURVATURA_ID, {
-      minzoom: 7,
+      minzoom: 9,
       maxzoom: 14,
       type: 'raster',
       tiles: [resolve.fn(function (_ref2) {
-        _ref2.view.conf;
-        // const temperaturaRange = _temperaturaRange(
-        //   conf?.data?.temperaturaRange,
-        // )
-
+        var _conf$data;
+        var conf = _ref2.view.conf;
+        var curvaturaActiveClasses = _curvaturaActiveClasses(conf === null || conf === void 0 || (_conf$data = conf.data) === null || _conf$data === void 0 ? void 0 : _conf$data.curvaturaActiveClasses);
         var baseUrl = "".concat(RASTER_TILE_SERVER_ENDPOINT, "/mosaicjson/tiles/WebMercatorQuad/{z}/{x}/{y}").concat(DEVICE_PIXEL_RATIO_SUFFIX);
-        var COLOR_MAP = {
-          1: '#d92bcb',
-          2: '#b49bcb',
-          3: '#dcdcdc',
-          4: '#f3ce5e',
-          5: '#fd952e'
-        };
+        var COLOR_MAP = Object.fromEntries(CURVATURA_CLASSES.map(function (curv) {
+          return [curv.value, curvaturaActiveClasses.includes(curv.value) ? curv.color : TRANSPARENT$2];
+        }));
         return "".concat(baseUrl, "?").concat($urlSearch([{
           url: mosaicJsonUrl,
           colormap: COLOR_MAP
@@ -6831,25 +6950,33 @@ function curvatura(_ref) {
       })]
     }),
     layers: _defineProperty({}, "".concat(CURVATURA_ID), {
-      minzoom: 7,
+      minzoom: 9,
       // zIndex: 10,
       type: 'raster',
       source: CURVATURA_ID,
       paint: {
         'raster-opacity': 0.85
-      }
+      },
+      legends: [{
+        type: 'CategoricalLegend',
+        title: 'Forma da encosta',
+        items: resolve.fn(function (_ref3) {
+          var _conf$data2;
+          var conf = _ref3.view.conf;
+          var curvaturaActiveClasses = _curvaturaActiveClasses(conf === null || conf === void 0 || (_conf$data2 = conf.data) === null || _conf$data2 === void 0 ? void 0 : _conf$data2.curvaturaActiveClasses);
+          return CURVATURA_CLASSES.filter(function (curv) {
+            return curvaturaActiveClasses.includes(curv.value);
+          });
+        })
+      }]
     })
   };
 }
 
 var DECLIVIDADE_ID = 'declividade';
-var DEFAULT_DECLIVIDADE_RANGE = [0, 45];
 var TRANSPARENT$1 = [0, 0, 0, 0];
-function _declividadeRange(candidate) {
-  return Array.isArray(candidate) && candidate.length === 2 && typeof candidate[0] === 'number' && typeof candidate[1] === 'number' ? candidate : DEFAULT_DECLIVIDADE_RANGE;
-}
 var PRECISION$1 = 0.00000001;
-var CLASSES_DECLIVIDADE = [{
+var DECLIVIDADE_CLASSES = [{
   color: '#2B83BA',
   label: '0º',
   range: [0, 0 + PRECISION$1 - PRECISION$1 / 10]
@@ -6889,7 +7016,17 @@ var CLASSES_DECLIVIDADE = [{
   color: '#860003',
   label: 'Acima de 45º',
   range: [45 + PRECISION$1, 999999]
-}];
+}].map(function (cl) {
+  return _objectSpread2(_objectSpread2({}, cl), {}, {
+    value: cl.label
+  });
+});
+var DEFAULT_DECLIVIDADE_ACTIVE_CLASSSES = DECLIVIDADE_CLASSES.map(function (cl) {
+  return cl.value;
+});
+function _declividadeActiveClasses(candidate) {
+  return Array.isArray(candidate) && candidate.length > 0 ? candidate : DEFAULT_DECLIVIDADE_ACTIVE_CLASSSES;
+}
 function declividade(_ref) {
   var RASTER_TILE_SERVER_ENDPOINT = _ref.RASTER_TILE_SERVER_ENDPOINT,
     mosaicJsonUrl = _ref.mosaicJsonUrl;
@@ -6899,53 +7036,50 @@ function declividade(_ref) {
     collection_id: DECLIVIDADE_ID,
     indicator_id: DECLIVIDADE_ID,
     id: DECLIVIDADE_ID,
+    sourceLabel: 'ANADEM (ANA)',
     label: 'Declividade',
+    shortDescription: 'Ângulo de inclinação da superfície do terreno com relação à horizontal',
     path: "Emerg\xEAncias clim\xE1ticas / / Suscetibilidade a deslizamentos",
+    metodology: /*#__PURE__*/React.createElement(DocumentIframe, {
+      src: "/georedus/metodologia/declividade.pdf"
+    }),
     confSchema: {
       data: {
-        declividadeRange: {
-          type: 'range',
-          defaultValue: DEFAULT_DECLIVIDADE_RANGE,
-          step: 1,
-          min: DEFAULT_DECLIVIDADE_RANGE[0],
-          max: DEFAULT_DECLIVIDADE_RANGE[1],
-          label: resolve.literal(resolve.fn(function (context) {
-            var _context$value;
-            var declividadeRange = _declividadeRange((_context$value = context.value) === null || _context$value === void 0 ? void 0 : _context$value.declividadeRange);
-            var minLabel = "".concat(declividadeRange[0], "\xB0");
-            var maxLabel = "".concat(declividadeRange[1], "\xB0").concat(declividadeRange[1] === DEFAULT_DECLIVIDADE_RANGE[1] ? '+' : '');
-            return "Intervalo de declividade (".concat(minLabel, " - ").concat(maxLabel, ")");
-          })),
-          helperText: 'Intervalo de declividade apresentado'
+        declividadeActiveClasses: {
+          type: 'checkboxSelect',
+          options: DECLIVIDADE_CLASSES.map(function (cl) {
+            return {
+              label: cl.label,
+              value: cl.value
+            };
+          }),
+          defaultValue: DECLIVIDADE_CLASSES.map(function (cl) {
+            return cl.value;
+          })
         }
       }
     },
     metadata: {},
     sources: _defineProperty({}, DECLIVIDADE_ID, {
-      minzoom: 7,
+      minzoom: 9,
       maxzoom: 14,
       type: 'raster',
       tiles: [resolve.fn(function (_ref2) {
         var _conf$data;
         var conf = _ref2.view.conf;
-        var declividadeRange = _declividadeRange(conf === null || conf === void 0 || (_conf$data = conf.data) === null || _conf$data === void 0 ? void 0 : _conf$data.declividadeRange);
+        var declividadeActiveClasses = _declividadeActiveClasses(conf === null || conf === void 0 || (_conf$data = conf.data) === null || _conf$data === void 0 ? void 0 : _conf$data.declividadeActiveClasses);
         var baseUrl = "".concat(RASTER_TILE_SERVER_ENDPOINT, "/mosaicjson/tiles/WebMercatorQuad/{z}/{x}/{y}").concat(DEVICE_PIXEL_RATIO_SUFFIX);
-        var COLOR_MAP = CLASSES_DECLIVIDADE.map(function (cl) {
-          return [cl.range, cl.color];
+        var COLOR_MAP = DECLIVIDADE_CLASSES.map(function (cl) {
+          return [cl.range, declividadeActiveClasses.includes(cl.value) ? cl.color : TRANSPARENT$1];
         });
         return "".concat(baseUrl, "?").concat($urlSearch([{
           url: mosaicJsonUrl,
-          colormap: COLOR_MAP.map(function (_ref3) {
-            var _ref4 = _slicedToArray(_ref3, 2),
-              bounds = _ref4[0],
-              color = _ref4[1];
-            return [bounds, bounds[0] >= declividadeRange[0] && bounds[1] <= declividadeRange[1] ? color : TRANSPARENT$1];
-          })
+          colormap: COLOR_MAP
         }]));
       })]
     }),
     layers: _defineProperty({}, "".concat(DECLIVIDADE_ID), {
-      minzoom: 7,
+      minzoom: 9,
       // zIndex: 10,
       type: 'raster',
       source: DECLIVIDADE_ID,
@@ -6955,7 +7089,14 @@ function declividade(_ref) {
       legends: [{
         type: 'CategoricalLegend',
         title: 'Classes de Declividade',
-        items: CLASSES_DECLIVIDADE
+        items: resolve.fn(function (_ref3) {
+          var _conf$data2;
+          var conf = _ref3.view.conf;
+          var declividadeActiveClasses = _declividadeActiveClasses(conf === null || conf === void 0 || (_conf$data2 = conf.data) === null || _conf$data2 === void 0 ? void 0 : _conf$data2.declividadeActiveClasses);
+          return DECLIVIDADE_CLASSES.filter(function (cl) {
+            return declividadeActiveClasses.includes(cl.value);
+          });
+        })
       }]
     })
   };
@@ -6977,8 +7118,8 @@ var COLOR_MAP_BASE = [[[0, 0.1], colord(BASE_COLOR).darken(0.2).toHex()], [[0.10
 function hand_legends() {
   return [{
     type: 'ContinuousColorLegend',
-    title: 'Altura da drenagem mais próxima',
-    unit: 'Metros',
+    title: 'Altura acima da drenagem mais próxima',
+    unit: 'metros',
     numberUnit: 'm',
     colors: resolve.fn(function (_ref) {
       var conf = _ref.view.conf;
@@ -7012,8 +7153,13 @@ function hand(_ref7) {
     collection_id: HAND_ID,
     indicator_id: HAND_ID,
     id: HAND_ID,
-    label: 'Suscetibilidade à inundação',
-    path: "Emerg\xEAncias clim\xE1ticas / / Riscos hidrol\xF3gicos",
+    sourceLabel: 'ANADEM (ANA)',
+    label: 'Altura acima da drenagem mais próxima',
+    shortDescription: 'Áreas suscetíveis à inundação calculadas por meio da distância vertical em relação ao canal de drenagem mais próximo',
+    path: "Emerg\xEAncias clim\xE1ticas / / Suscetibilidade \xE0 inunda\xE7\xE3o",
+    metodology: /*#__PURE__*/React.createElement(DocumentIframe, {
+      src: "/georedus/metodologia/inundacao-hand.pdf"
+    }),
     confSchema: {
       data: {
         handValue: {
@@ -7033,7 +7179,7 @@ function hand(_ref7) {
     metadata: {},
     sources: _defineProperty({}, HAND_ID, {
       type: 'raster',
-      minzoom: 7,
+      minzoom: 9,
       maxzoom: 14,
       tiles: [resolve.fn(function (_ref8) {
         var conf = _ref8.view.conf;
@@ -7052,7 +7198,7 @@ function hand(_ref7) {
       })]
     }),
     layers: _defineProperty({}, "".concat(HAND_ID), {
-      minzoom: 7,
+      minzoom: 9,
       // zIndex: 10,
       type: 'raster',
       source: HAND_ID,
@@ -7174,13 +7320,13 @@ function AsyncImage(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     loaded = _useState2[0],
     setLoaded = _useState2[1];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React$1.createElement("div", {
     style: {
       position: 'relative'
     }
-  }, /*#__PURE__*/React.createElement(AspectRatio, {
+  }, /*#__PURE__*/React$1.createElement(AspectRatio, {
     ratio: 16 / 9
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React$1.createElement("img", {
     src: src,
     onLoad: function onLoad() {
       return setLoaded(true);
@@ -7192,7 +7338,7 @@ function AsyncImage(_ref) {
       display: loaded ? 'block' : 'none',
       maxWidth: '100%'
     }
-  })), !loaded && /*#__PURE__*/React.createElement(LoadingIndicator, {
+  })), !loaded && /*#__PURE__*/React$1.createElement(LoadingIndicator, {
     style: {
       position: 'absolute',
       top: '50%',
@@ -7256,8 +7402,10 @@ function redus_mutirao_cop_2025(conf) {
     collection_id: REDUS_MUTIRAO_COP_2025_ID,
     indicator_id: REDUS_MUTIRAO_COP_2025_ID,
     id: REDUS_MUTIRAO_COP_2025_ID,
+    sourceLabel: 'ReDUS',
+    path: "Emerg\xEAncias Clim\xE1ticas / _ / Mutir\xE3o COP30 - Bel\xE9m",
     label: 'Mutirão ReDUS COP30',
-    path: "Emerg\xEAncias Clim\xE1ticas / _ / COP30",
+    shortDescription: 'Ações concretas de Desenvolvimento Urbano Sustentável mapeadas no Mutirão ReDUS rumo à COP30',
     metadata: {},
     sources: _defineProperty({}, REDUS_MUTIRAO_COP_2025_ID, {
       type: 'vector',
@@ -7311,104 +7459,105 @@ function redus_mutirao_cop_2025(conf) {
               case 0:
                 properties = feature.properties;
                 _context.next = 3;
-                return context.dialogs.view(/*#__PURE__*/React.createElement(Flex, {
+                return context.dialogs.view(/*#__PURE__*/React$1.createElement(Flex, {
                   direction: "column",
                   gap: "4"
-                }, /*#__PURE__*/React.createElement(Flex, {
+                }, /*#__PURE__*/React$1.createElement(Flex, {
                   direction: "column",
                   gap: "2"
-                }, /*#__PURE__*/React.createElement(Heading, {
+                }, /*#__PURE__*/React$1.createElement(Heading, {
                   as: "h1",
                   size: "6"
-                }, properties.name), /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Confetti, {
+                }, properties.name), /*#__PURE__*/React$1.createElement(Portal, null, /*#__PURE__*/React$1.createElement(Confetti, {
                   style: {
                     position: 'fixed',
                     top: 0,
                     left: 0,
-                    zIndex: 9999
+                    zIndex: 9999,
+                    width: '100vw'
                   },
                   recycle: false,
                   numberOfPieces: 700,
                   tweenDuration: 8000
-                })), (properties.eixos_cop_30_text || properties.odus_text) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AutoWrapContainer, null, JSON.parse(properties.eixos_cop_30_text).map(function (eixo, idx) {
-                  return /*#__PURE__*/React.createElement(Badge, {
+                })), (properties.eixos_cop_30_text || properties.odus_text) && /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(AutoWrapContainer, null, JSON.parse(properties.eixos_cop_30_text).map(function (eixo, idx) {
+                  return /*#__PURE__*/React$1.createElement(Badge, {
                     color: "green",
                     key: idx
                   }, _eixoShortLabel(eixo));
                 }), JSON.parse(properties.odus_text).map(function (obj, idx) {
-                  return /*#__PURE__*/React.createElement(Badge, {
+                  return /*#__PURE__*/React$1.createElement(Badge, {
                     key: idx
                   }, obj);
-                }))), /*#__PURE__*/React.createElement(Heading, {
+                }))), /*#__PURE__*/React$1.createElement(Heading, {
                   as: "h3",
                   size: "2",
                   style: {
                     fontWeight: 'normal'
                   }
-                }, "Organiza\xE7\xE3o respons\xE1vel:", ' ', /*#__PURE__*/React.createElement("strong", null, properties.organizacao)), properties.parcerias && /*#__PURE__*/React.createElement(Heading, {
+                }, "Organiza\xE7\xE3o respons\xE1vel:", ' ', /*#__PURE__*/React$1.createElement("strong", null, properties.organizacao)), properties.parcerias && /*#__PURE__*/React$1.createElement(Heading, {
                   as: "h3",
                   size: "2",
                   style: {
                     fontWeight: 'normal'
                   }
-                }, "Em parceria com: ", /*#__PURE__*/React.createElement("strong", null, properties.parcerias)), /*#__PURE__*/React.createElement(Heading, {
+                }, "Em parceria com: ", /*#__PURE__*/React$1.createElement("strong", null, properties.parcerias)), /*#__PURE__*/React$1.createElement(Heading, {
                   as: "h3",
                   size: "2",
                   style: {
                     fontWeight: 'normal'
                   }
-                }, "Cidade:", ' ', /*#__PURE__*/React.createElement("strong", null, properties.cidade, " - ", properties.estado))), properties.cover_image && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("img", {
+                }, "Cidade:", ' ', /*#__PURE__*/React$1.createElement("strong", null, properties.cidade, " - ", properties.estado))), properties.cover_image && /*#__PURE__*/React$1.createElement(Box, null, /*#__PURE__*/React$1.createElement("img", {
                   style: {
                     maxWidth: '100%'
                   },
                   src: properties.cover_image
-                })), properties.descricao_text && /*#__PURE__*/React.createElement(Flex, {
+                })), properties.descricao_text && /*#__PURE__*/React$1.createElement(Flex, {
                   gap: "2"
-                }, /*#__PURE__*/React.createElement(Heading, {
+                }, /*#__PURE__*/React$1.createElement(Heading, {
                   size: "3"
-                }, "Descri\xE7\xE3o:"), /*#__PURE__*/React.createElement(RichTextOutput, {
+                }, "Descri\xE7\xE3o:"), /*#__PURE__*/React$1.createElement(RichTextOutput, {
                   value: JSON.parse(properties.descricao_text)
-                })), properties.impacto_text && /*#__PURE__*/React.createElement(Flex, {
+                })), properties.impacto_text && /*#__PURE__*/React$1.createElement(Flex, {
                   gap: "2"
-                }, /*#__PURE__*/React.createElement(Heading, {
+                }, /*#__PURE__*/React$1.createElement(Heading, {
                   size: "3"
-                }, "Impacto:"), /*#__PURE__*/React.createElement(RichTextOutput, {
+                }, "Impacto:"), /*#__PURE__*/React$1.createElement(RichTextOutput, {
                   value: JSON.parse(properties.impacto_text)
-                })), properties.escala_de_atuacao_text && /*#__PURE__*/React.createElement(Flex, {
+                })), properties.escala_de_atuacao_text && /*#__PURE__*/React$1.createElement(Flex, {
                   gap: "2"
-                }, /*#__PURE__*/React.createElement(Heading, {
+                }, /*#__PURE__*/React$1.createElement(Heading, {
                   size: "3"
-                }, "Escala de atua\xE7\xE3o:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnstyledList, null, JSON.parse(properties.escala_de_atuacao_text).map(function (escala, idx) {
-                  return /*#__PURE__*/React.createElement("li", {
+                }, "Escala de atua\xE7\xE3o:"), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(UnstyledList, null, JSON.parse(properties.escala_de_atuacao_text).map(function (escala, idx) {
+                  return /*#__PURE__*/React$1.createElement("li", {
                     key: idx
                   }, escala);
-                })))), properties.fase_text && /*#__PURE__*/React.createElement(Flex, {
+                })))), properties.fase_text && /*#__PURE__*/React$1.createElement(Flex, {
                   gap: "2"
-                }, /*#__PURE__*/React.createElement(Heading, {
+                }, /*#__PURE__*/React$1.createElement(Heading, {
                   size: "3"
-                }, "Fase:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnstyledList, null, JSON.parse(properties.fase_text).map(function (fase, idx) {
-                  return /*#__PURE__*/React.createElement("li", {
+                }, "Fase:"), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(UnstyledList, null, JSON.parse(properties.fase_text).map(function (fase, idx) {
+                  return /*#__PURE__*/React$1.createElement("li", {
                     key: idx
                   }, fase);
-                })))), /*#__PURE__*/React.createElement(Flex, {
+                })))), /*#__PURE__*/React$1.createElement(Flex, {
                   gap: "2"
-                }, /*#__PURE__*/React.createElement(Heading, {
+                }, /*#__PURE__*/React$1.createElement(Heading, {
                   size: "3"
-                }, "Informa\xE7\xF5es de contato:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnstyledList, null, _ensureUrl(properties.site) && /*#__PURE__*/React.createElement("li", null, "Site:", ' ', /*#__PURE__*/React.createElement("a", {
+                }, "Informa\xE7\xF5es de contato:"), /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(UnstyledList, null, _ensureUrl(properties.site) && /*#__PURE__*/React$1.createElement("li", null, "Site:", ' ', /*#__PURE__*/React$1.createElement("a", {
                   href: _ensureUrl(properties.site),
                   target: "_blank",
                   rel: "noreferrer noopener"
-                }, _ensureUrl(properties.site))), properties.redes_sociais && /*#__PURE__*/React.createElement("li", null, "Redes sociais: ", properties.redes_sociais), properties.email && /*#__PURE__*/React.createElement("li", null, "E-mail:", ' ', /*#__PURE__*/React.createElement("a", {
+                }, _ensureUrl(properties.site))), properties.redes_sociais && /*#__PURE__*/React$1.createElement("li", null, "Redes sociais: ", properties.redes_sociais), properties.email && /*#__PURE__*/React$1.createElement("li", null, "E-mail:", ' ', /*#__PURE__*/React$1.createElement("a", {
                   href: "mailto:".concat(properties.email)
-                }, properties.email))))), properties.other_attachments_text && /*#__PURE__*/React.createElement(Flex, {
+                }, properties.email))))), properties.other_attachments_text && /*#__PURE__*/React$1.createElement(Flex, {
                   gap: "2"
-                }, /*#__PURE__*/React.createElement(Heading, {
+                }, /*#__PURE__*/React$1.createElement(Heading, {
                   size: "3"
-                }, "Mais informa\xE7\xF5es:"), /*#__PURE__*/React.createElement(EvenSpacedList, {
+                }, "Mais informa\xE7\xF5es:"), /*#__PURE__*/React$1.createElement(EvenSpacedList, {
                   columns: 2,
                   gap: "3"
                 }, JSON.parse(properties.other_attachments_text).map(function (fase, idx) {
-                  return /*#__PURE__*/React.createElement(FileOutput, {
+                  return /*#__PURE__*/React$1.createElement(FileOutput, {
                     value: fase,
                     key: idx
                   });
@@ -7432,11 +7581,11 @@ function redus_mutirao_cop_2025(conf) {
             var _feature$properties;
             return item.value === (feature === null || feature === void 0 || (_feature$properties = feature.properties) === null || _feature$properties === void 0 ? void 0 : _feature$properties.eixos_cop_30_primeiro);
           }) || null;
-          return /*#__PURE__*/React.createElement("div", {
+          return /*#__PURE__*/React$1.createElement("div", {
             style: {
               display: 'inline-flex'
             }
-          }, eixo && /*#__PURE__*/React.createElement(Icon, {
+          }, eixo && /*#__PURE__*/React$1.createElement(Icon, {
             path: eixo.iconPath,
             size: "18px",
             style: {
@@ -7454,7 +7603,7 @@ function redus_mutirao_cop_2025(conf) {
           return (_feature$properties3 = feature.properties) !== null && _feature$properties3 !== void 0 && _feature$properties3.parcerias ? ['Parcerias', (_feature$properties4 = feature.properties) === null || _feature$properties4 === void 0 ? void 0 : _feature$properties4.parcerias] : null;
         })), resolve.literal(resolve.fn(function (_ref4) {
           var feature = _ref4.feature;
-          return feature.properties.cover_image ? [null, /*#__PURE__*/React.createElement(AsyncImage, {
+          return feature.properties.cover_image ? [null, /*#__PURE__*/React$1.createElement(AsyncImage, {
             style: {
               maxWidth: '100%'
             },
@@ -7469,7 +7618,7 @@ function redus_mutirao_cop_2025(conf) {
         items: LEGEND_ITEMS.map(function (item) {
           return _objectSpread2(_objectSpread2({}, item), {}, {
             box: {
-              children: item.iconPath && /*#__PURE__*/React.createElement(Icon, {
+              children: item.iconPath && /*#__PURE__*/React$1.createElement(Icon, {
                 path: item.iconPath,
                 size: "14px",
                 color: "white"
@@ -7508,7 +7657,7 @@ function temperatura_legends() {
   return [{
     type: 'ContinuousColorLegend',
     title: 'Temperatura máxima de superfície (ºC)',
-    unit: 'Valor médio em º Celsiu da temperatur máxima no período de 2021 - 2025',
+    unit: 'Valor médio em º Celsius da temperatura máxima no período de 2021 - 2025',
     numberUnit: 'º',
     colors: resolve.fn(function (_ref) {
       var _conf$data;
@@ -7540,65 +7689,64 @@ function temperatura_superficie(_ref7) {
   var RASTER_TILE_SERVER_ENDPOINT = _ref7.RASTER_TILE_SERVER_ENDPOINT,
     mosaicJsonUrl = _ref7.mosaicJsonUrl;
   var DEVICE_PIXEL_RATIO_SUFFIX = typeof window !== 'undefined' && window.devicePixelRatio > 1 ? '@2x' : '';
-  return {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     viewType: VIEW_TYPE_SURFACE_CHOROPLETH,
     collection_id: TEMPERATURA_SUPERFICIE_ID,
     indicator_id: TEMPERATURA_SUPERFICIE_ID,
     id: TEMPERATURA_SUPERFICIE_ID,
-    label: 'Temperatura máxima de superfície (ºC)',
-    year: '2021 - 2025',
-    path: "Emerg\xEAncias clim\xE1ticas / / Extremos de temperatura",
-    confSchema: {
-      data: {
-        temperaturaRange: {
-          type: 'range',
-          defaultValue: DEFAULT_TEMPERATURA_RANGE,
-          step: 1,
-          min: DEFAULT_TEMPERATURA_RANGE[0],
-          max: DEFAULT_TEMPERATURA_RANGE[1],
-          label: resolve.literal(resolve.fn(function (context) {
-            var _context$value;
-            var temperaturaRange = _temperaturaRange((_context$value = context.value) === null || _context$value === void 0 ? void 0 : _context$value.temperaturaRange);
-            var minLabel = "".concat(temperaturaRange[0], "\xB0");
-            var maxLabel = "".concat(temperaturaRange[1], "\xB0").concat(temperaturaRange[1] === DEFAULT_TEMPERATURA_RANGE[1] ? '+' : '');
-            return "Intervalo de temperatura (".concat(minLabel, " - ").concat(maxLabel, ")");
-          })),
-          helperText: 'Intervalo de temperatura apresentado'
-        }
+    sourceLabel: 'Landsat-8 e Landsat-9',
+    shortDescription: 'Refere-se à',
+    metodology: /*#__PURE__*/React.createElement(DocumentIframe, {
+      src: "/georedus/metodologia/maximas-de-temperatura.pdf"
+    }),
+    label: 'Temperatura máxima de superfície (ºC)'
+  }, "shortDescription", 'Valores máximos anuais de temperatura de superfície do período de 2021 a 2025'), "year", '2021 - 2025'), "path", "Emerg\xEAncias clim\xE1ticas / / Extremos de temperatura"), "confSchema", {
+    data: {
+      temperaturaRange: {
+        type: 'range',
+        defaultValue: DEFAULT_TEMPERATURA_RANGE,
+        step: 1,
+        min: DEFAULT_TEMPERATURA_RANGE[0],
+        max: DEFAULT_TEMPERATURA_RANGE[1],
+        label: resolve.literal(resolve.fn(function (context) {
+          var _context$value;
+          var temperaturaRange = _temperaturaRange((_context$value = context.value) === null || _context$value === void 0 ? void 0 : _context$value.temperaturaRange);
+          var minLabel = "".concat(temperaturaRange[0], "\xB0");
+          var maxLabel = "".concat(temperaturaRange[1], "\xB0").concat(temperaturaRange[1] === DEFAULT_TEMPERATURA_RANGE[1] ? '+' : '');
+          return "Intervalo de temperatura (".concat(minLabel, " - ").concat(maxLabel, ")");
+        })),
+        helperText: 'Intervalo de temperatura apresentado'
       }
+    }
+  }), "metadata", {}), "sources", _defineProperty({}, TEMPERATURA_SUPERFICIE_ID, {
+    minzoom: 9,
+    maxzoom: 14,
+    type: 'raster',
+    tiles: [resolve.fn(function (_ref8) {
+      var _conf$data3;
+      var conf = _ref8.view.conf;
+      var temperaturaRange = _temperaturaRange(conf === null || conf === void 0 || (_conf$data3 = conf.data) === null || _conf$data3 === void 0 ? void 0 : _conf$data3.temperaturaRange);
+      var baseUrl = "".concat(RASTER_TILE_SERVER_ENDPOINT, "/mosaicjson/tiles/WebMercatorQuad/{z}/{x}/{y}").concat(DEVICE_PIXEL_RATIO_SUFFIX);
+      return "".concat(baseUrl, "?").concat($urlSearch([{
+        url: mosaicJsonUrl,
+        colormap: COLOR_MAP.map(function (_ref9) {
+          var _ref10 = _slicedToArray(_ref9, 2),
+            bounds = _ref10[0],
+            color = _ref10[1];
+          return [bounds, bounds[0] >= temperaturaRange[0] && bounds[1] <= temperaturaRange[1] ? color : TRANSPARENT];
+        })
+      }]));
+    })]
+  })), "layers", _defineProperty({}, "".concat(TEMPERATURA_SUPERFICIE_ID), {
+    minzoom: 9,
+    // zIndex: 10,
+    type: 'raster',
+    source: TEMPERATURA_SUPERFICIE_ID,
+    paint: {
+      'raster-opacity': 0.85
     },
-    metadata: {},
-    sources: _defineProperty({}, TEMPERATURA_SUPERFICIE_ID, {
-      minzoom: 7,
-      maxzoom: 14,
-      type: 'raster',
-      tiles: [resolve.fn(function (_ref8) {
-        var _conf$data3;
-        var conf = _ref8.view.conf;
-        var temperaturaRange = _temperaturaRange(conf === null || conf === void 0 || (_conf$data3 = conf.data) === null || _conf$data3 === void 0 ? void 0 : _conf$data3.temperaturaRange);
-        var baseUrl = "".concat(RASTER_TILE_SERVER_ENDPOINT, "/mosaicjson/tiles/WebMercatorQuad/{z}/{x}/{y}").concat(DEVICE_PIXEL_RATIO_SUFFIX);
-        return "".concat(baseUrl, "?").concat($urlSearch([{
-          url: mosaicJsonUrl,
-          colormap: COLOR_MAP.map(function (_ref9) {
-            var _ref10 = _slicedToArray(_ref9, 2),
-              bounds = _ref10[0],
-              color = _ref10[1];
-            return [bounds, bounds[0] >= temperaturaRange[0] && bounds[1] <= temperaturaRange[1] ? color : TRANSPARENT];
-          })
-        }]));
-      })]
-    }),
-    layers: _defineProperty({}, "".concat(TEMPERATURA_SUPERFICIE_ID), {
-      minzoom: 7,
-      // zIndex: 10,
-      type: 'raster',
-      source: TEMPERATURA_SUPERFICIE_ID,
-      paint: {
-        'raster-opacity': 0.85
-      },
-      legends: temperatura_legends()
-    })
-  };
+    legends: temperatura_legends()
+  }));
 }
 
 var index = /*#__PURE__*/Object.freeze({
@@ -7749,7 +7897,7 @@ function ViewConfTabs(_ref) {
     variant: "ghost",
     size: "1",
     onClick: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var markdown;
+      var contents, metodologyBody;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -7772,7 +7920,7 @@ function ViewConfTabs(_ref) {
                       return res.text();
                     }) : viewSpec.metodology);
                   case 8:
-                    return _context.abrupt("return", null);
+                    return _context.abrupt("return", viewSpec.metodology);
                   case 9:
                   case "end":
                     return _context.stop();
@@ -7780,19 +7928,16 @@ function ViewConfTabs(_ref) {
               }, _callee);
             })));
           case 2:
-            markdown = _context2.sent;
-            if (!(typeof markdown === 'string')) {
-              _context2.next = 6;
-              break;
-            }
+            contents = _context2.sent;
+            metodologyBody = typeof contents === 'string' ? /*#__PURE__*/React$1.createElement(Markdown, {
+              children: contents.trim()
+            }) : contents;
             _context2.next = 6;
             return dialogs.view({
               maxHeight: '90vh',
               children: /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(Heading, {
                 as: "h1"
-              }, viewSpec.label, " - Notas metodol\xF3gicas"), /*#__PURE__*/React$1.createElement(Markdown, {
-                children: markdown.trim()
-              }))
+              }, viewSpec.label, " - Notas metodol\xF3gicas"), metodologyBody)
             });
           case 6:
           case "end":
@@ -7978,7 +8123,23 @@ function ViewControl(_ref8) {
       textTransform: 'uppercase'
     },
     size: "1"
-  }, viewSpec.sourceLabel)), /*#__PURE__*/React$1.createElement(SwitchInput, {
+  }, viewSpec.sourceLabel), viewSpec.shortDescription && /*#__PURE__*/React$1.createElement(Flex, {
+    direction: "row",
+    gap: "2"
+  }, /*#__PURE__*/React$1.createElement(Icon$1, {
+    style: {
+      flexShrink: 0,
+      color: 'var(--gray-9)'
+    },
+    path: mdiBookOpenVariant,
+    size: "20px"
+  }), /*#__PURE__*/React$1.createElement(Text, {
+    color: "gray",
+    style: {
+      color: 'var(--gray-9)'
+    },
+    size: "1"
+  }, viewSpec.shortDescription))), /*#__PURE__*/React$1.createElement(SwitchInput, {
     radius: "full",
     value: active,
     onSetValue: function onSetValue() {
@@ -8674,12 +8835,15 @@ var ViewLayoutSortable = makeSortableMultiList({
         viewSpecs = _useContext.viewSpecs,
         viewConfState = _useContext.viewConfState,
         viewConfDispatch = _useContext.viewConfDispatch;
+      var viewSpec = viewSpecs === null || viewSpecs === void 0 ? void 0 : viewSpecs.find(function (spec) {
+        return spec.id === item.id;
+      });
 
       // const boxShadow = isDragOverlay
       //   ? 'rgba(0, 0, 0, 0.35) 0px 5px 15px;'
       //   : 'none'
 
-      return /*#__PURE__*/React$1.createElement(Flex, {
+      return viewSpec && /*#__PURE__*/React$1.createElement(Flex, {
         direction: "row",
         alignItems: "center",
         gap: "0",
@@ -8713,9 +8877,7 @@ var ViewLayoutSortable = makeSortableMultiList({
           height: CONTROL_HEIGHT
         },
         path: true,
-        viewSpec: viewSpecs.find(function (spec) {
-          return spec.id === item.id;
-        }),
+        viewSpec: omit(viewSpec, ['shortDescription']),
         viewConf: viewConfState.byId[item.id],
         viewConfState: viewConfState,
         configurable: false,
@@ -8966,6 +9128,23 @@ function _coordinatesFromDeviceLocation() {
 function resolveInitialMunicipioId(_x) {
   return _resolveInitialMunicipioId.apply(this, arguments);
 }
+
+/**
+ * Returns a bbox covering the 3×3 grid of tiles around the tile that contains
+ * (lng, lat) at the given zoom. Useful for limiting map bounds or prefetching.
+ *
+ * TILE LAYOUT (center tile is x,y):
+ *
+ *      +---------+---------+---------+
+ *      | x-1,y-1 |  x,y-1  | x+1,y-1 |
+ *      +---------+---------+---------+
+ *      | x-1,y   |  x,y    | x+1,y   |
+ *      +---------+---------+---------+
+ *      | x-1,y+1 |  x,y+1  | x+1,y+1 |
+ *      +---------+---------+---------+
+ *
+ * Returns: [minLng, minLat, maxLng, maxLat]
+ */
 function _resolveInitialMunicipioId() {
   _resolveInitialMunicipioId = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref) {
     var METADATA_API_ENDPOINT, coordinates, defaultCoordinates;
@@ -9021,6 +9200,30 @@ function _resolveInitialMunicipioId() {
   }));
   return _resolveInitialMunicipioId.apply(this, arguments);
 }
+function getSurroundingTilesBbox(lng, lat, zoom) {
+  // Tile under center point
+  var _pointToTile = pointToTile(lng, lat, zoom),
+    _pointToTile2 = _slicedToArray(_pointToTile, 2),
+    x = _pointToTile2[0],
+    y = _pointToTile2[1];
+  var minLng = Infinity;
+  var minLat = Infinity;
+  var maxLng = -Infinity;
+  var maxLat = -Infinity;
+
+  // 3×3 block of tiles around the center tile
+  for (var dx = -1; dx <= 1; dx++) {
+    for (var dy = -1; dy <= 1; dy++) {
+      var tile = [x + dx, y + dy, zoom];
+      var bbox = tileToBBOX(tile);
+      minLng = Math.min(minLng, bbox[0]);
+      minLat = Math.min(minLat, bbox[1]);
+      maxLng = Math.max(maxLng, bbox[2]);
+      maxLat = Math.max(maxLat, bbox[3]);
+    }
+  }
+  return [minLng, minLat, maxLng, maxLat];
+}
 
 // TODO generalize for allow input types and output types
 function parseGeoFileMetadata(_x) {
@@ -10897,16 +11100,26 @@ function _flyToMunicipio2() {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
           _context4.next = 2;
-          return fetch("".concat(METADATA_API_ENDPOINT, "/ibge_malha_br_municipio?select=bbox&id=eq.").concat(municipioId)).then(function (res) {
+          return fetch("".concat(METADATA_API_ENDPOINT, "/ibge_malha_br_municipio_2024?select=area_urbana_bbox_geom&id=eq.").concat(municipioId)).then(function (res) {
             return res.json();
           });
         case 2:
           _yield$fetch$then = _context4.sent;
           _yield$fetch$then2 = _slicedToArray(_yield$fetch$then, 1);
           mun = _yield$fetch$then2[0];
-          if (mun && mun.bbox) {
-            fitGeometry(map, mun.bbox, options);
+          if (mun && mun.area_urbana_bbox_geom) {
+            fitGeometry(map, mun.area_urbana_bbox_geom, options);
           }
+
+          // const [mun] = await fetch(
+          //   `${METADATA_API_ENDPOINT}/ibge_malha_br_municipio?select=bbox&id=eq.${municipioId}`,
+          // ).then((res) => res.json())
+
+          // if (mun && mun.bbox) {
+          //   console.log('mun.bbox', mun.bbox)
+
+          //   fitGeometry(map, mun.bbox, options)
+          // }
         case 6:
         case "end":
           return _context4.stop();
@@ -10963,6 +11176,19 @@ var FULL_MAP_STYLE = {
   dataviz: BASEMAPS.dataviz.fullMapStyle(),
   satellite: BASEMAPS.satellite.fullMapStyle()
 };
+function _bboxContains(a, b) {
+  var _a = _slicedToArray(a, 4),
+    aMinLng = _a[0],
+    aMinLat = _a[1],
+    aMaxLng = _a[2],
+    aMaxLat = _a[3];
+  var _b = _slicedToArray(b, 4),
+    bMinLng = _b[0],
+    bMinLat = _b[1],
+    bMaxLng = _b[2],
+    bMaxLat = _b[3];
+  return bMinLng >= aMinLng && bMinLat >= aMinLat && bMaxLng <= aMaxLng && bMaxLat <= aMaxLat;
+}
 
 //
 // TODO: review, this is clearly not a structured way
@@ -11069,6 +11295,10 @@ function GeoReDUSInner(_ref2) {
   var syncedMapsRef = useRef(null);
   var mapRegistry = useMapRegistry();
   var tilesLoading = useTilesLoading(mapRegistry.maps);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mapBounds = _useState6[0],
+    setMapBounds = _useState6[1];
   var _useLocalState = useLocalState(globalState.municipioId, function (nextMunicipioId) {
       return onSetGlobalState(_objectSpread2(_objectSpread2({}, globalState), {}, {
         municipioId: nextMunicipioId
@@ -11146,9 +11376,10 @@ function GeoReDUSInner(_ref2) {
       // in order for views not recompute on every zoom change
       //
       zoomLevel: zoomLevel,
-      regional: regional
+      regional: regional,
+      mapBounds: mapBounds
     };
-  }, [municipioId, baseMapStyle, zoomLevel, regional]);
+  }, [municipioId, baseMapStyle, zoomLevel, regional, mapBounds]);
   var _useViews = useViews({
       viewSpecs: viewSpecsQuery.data,
       viewConfState: viewConfState,
@@ -11430,6 +11661,24 @@ function GeoReDUSInner(_ref2) {
       var zoom = (_e$viewState = e.viewState) === null || _e$viewState === void 0 ? void 0 : _e$viewState.zoom;
       var nextZoomLevel = zoom > 8 ? 'intramun' : zoom > 5 ? 'intrauf' : zoom > 3 ? 'intrabr' : null;
       setZoomLevel(nextZoomLevel);
+    }
+    //
+    // TODO: review mapBounds calculation
+    //
+    ,
+    onMoveEnd: function onMoveEnd(e) {
+      var _e$viewState2 = e.viewState,
+        latitude = _e$viewState2.latitude,
+        longitude = _e$viewState2.longitude;
+      var bounds = e.target.getBounds();
+      var minLng = bounds.getWest();
+      var maxLng = bounds.getEast();
+      var minLat = bounds.getSouth();
+      var maxLat = bounds.getNorth();
+      var viewBounds = [minLng, minLat, maxLng, maxLat];
+      if (!mapBounds || !_bboxContains(mapBounds, viewBounds)) {
+        setMapBounds(getSurroundingTilesBbox(longitude, latitude, 7));
+      }
     },
     onDrag: function onDrag() {
       if (resolvedLayout.length > 1 && leftPanelOpen) {
@@ -11443,6 +11692,10 @@ function GeoReDUSInner(_ref2) {
     ref: syncedMapsRef,
     onLoad: function onLoad(evt) {
       _refocus(evt.target);
+
+      // For debugging:
+      // evt.target.showTileBoundaries = true
+
       mapRegistry.onLoad(evt);
     },
     onRemove: function onRemove(evt) {
@@ -11582,4 +11835,4 @@ function GeoReDUS(props) {
   }, /*#__PURE__*/React$1.createElement(DialogsProvider, null, /*#__PURE__*/React$1.createElement(GeoReDUSInner, props))));
 }
 
-export { GeoReDUS, index as UNSTABLE_VIEW_SPEC, VTX_PROTOCOL, memoFetchData, vtx, vtxSetup, vtxUrl };
+export { GeoReDUS, index as UNSTABLE_VIEW_SPEC, VTX_PROTOCOL, _bboxContains, memoFetchData, vtx, vtxSetup, vtxUrl };