@redus/georedus-ui 0.1.7 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @orioro/template-react
 
+## 0.2.0
+
+### Minor Changes
+
+- implement 3D maps
+
+### Patch Changes
+
+- Updated dependencies
+  - @orioro/react-maplibre-util@0.2.0
+
 ## 0.1.7
 
 ### Patch Changes

package/dist/main.js

@@ -17,7 +17,7 @@ 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, MapWindow, fitGeometry } from '@orioro/react-maplibre-util';
+import { makeSyncedMaps, LayeredMap, HoverTooltip, ControlContainer, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
 import { Legend } from '@orioro/react-chart-util';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useQuery, useQueries } from '@tanstack/react-query';
@@ -25,7 +25,7 @@ import { makeResolve, $$literal, withExpressionResolvers, expressions, ALL_EXPR,
 import queryString from 'query-string';
 import { wrap } from 'comlink';
 import { get } from '@orioro/get';
-import { GeolocateControl, NavigationControl, ScaleControl, AttributionControl } from 'react-map-gl/maplibre';
+import { AttributionControl, GeolocateControl, FullscreenControl, NavigationControl, ScaleControl } 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 { saveAs } from 'file-saver';
@@ -1628,10 +1628,9 @@ var GeoReDUSWorker = worker ? wrap(worker) : null;
 var $naturalBreaks = function $naturalBreaks(_a) {
   var values = _a[0],
     opt = _a[1];
-  console.log('will run $naturalBreaks in worker');
   var breaks = GeoReDUSWorker.scaleNaturalBreaks(__assign({
     values: values
-  }, isPlainObject(opt) ? pick(opt, ['scalesByK', 'k', 'minK', 'maxK']) : {}));
+  }, isPlainObject(opt) ? pick(opt, ['scalesByK', 'k', 'minK', 'maxK', 'defaultColor']) : {}));
   return breaks;
 };
 // export const $test = ()
@@ -1849,7 +1848,7 @@ var BASE_MAP_LAYERS = [
     "fill-antialias": false,
     "fill-color": "hsl(96, 44%, 79%)",
     // "fill-color": "red",
-    "fill-opacity": 1
+    "fill-opacity": 0.6
     // "fill-opacity": {
     //   "stops": [
     //     [8, 0.2],
@@ -5048,6 +5047,8 @@ function variableIdValidator(schema) {
 
 var DEFAULT_BUFFER_SIZE = 200;
 var INSUFFICIENT_DATA_COLOR = 'red';
+var BUILDINGS_MIN_ZOOM = 14;
+var BUILDINGS_3D_MIN_ZOOM = 16;
 
 //
 //
@@ -5165,6 +5166,12 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
     title: ['$literal', ['$coalesce', ['$get', 'feature.properties.name'], ['$get', 'feature.properties.nome'], ['$get', 'feature.properties.label'], ['$get', 'feature.properties.title'], ['$get', 'feature.properties.id'], ['$get', ['$get', '0', ['$keys', ['$get', 'feature.properties']]], ['$get', 'feature.properties']]]],
     entries: ['$literal', ['$entries', ['$get', 'feature.properties']]]
   };
+
+  //
+  // Fill color expression for data loaded from
+  // vector source
+  //
+  var _vectorSourceFillColor = ['$flat', [['step', ['coalesce', ['get', ['$get', 'view.conf.data.variableId']], -1]], ['$get', 'view.metadata.colorScaleStops']]];
   var sourceLabel = "CENSO ".concat(year);
   return {
     // debug: true,
@@ -5371,7 +5378,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
         minK: 5
       })]
     }]],
-    sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty({
+    sources: _objectSpread2(_objectSpread2({}, globalRes.sources), {}, _defineProperty(_defineProperty({
       //
       // Points in custom GeoJson
       //
@@ -5430,6 +5437,7 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       attribution: sourceLabel,
       minzoom: 6,
       maxzoom: 20,
+      promoteId: 'cd_setor',
       tiles: [['$join', ["".concat(VECTOR_TILE_SERVER_ENDPOINT, "/dynamic_vector_tiles/{z}/{x}/{y}?"), ['$urlSearch', {
         view: ['$get', ['$template', '${0}.collection_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId],
         select: ['cd_setor'],
@@ -5441,8 +5449,33 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
           cd_mun: [['$get', 'municipioId']]
         }
       }]]]]
+    }), "".concat(VECTOR_SOURCE_ID, "_buildings"), {
+      type: 'vector',
+      attribution: sourceLabel,
+      minzoom: 6,
+      maxzoom: 20,
+      tiles: [['$join', ["".concat(VECTOR_TILE_SERVER_ENDPOINT, "/dynamic_vector_tiles/{z}/{x}/{y}?"), ['$urlSearch', {
+        view: 'overture_br_buildings',
+        // view: [
+        //   '$get',
+        //   [
+        //     '$template',
+        //     '${0}.collection_id',
+        //     ['$get', 'view.conf.data.variableId'],
+        //   ],
+        //   variantsByVariableId,
+        // ],
+        select: ['height', 'subtype'],
+        join_view: ['$get', ['$template', '${0}.source_table_id', ['$get', 'view.conf.data.variableId']], variantsByVariableId],
+        join_source_column: "setor_".concat(year, "_id"),
+        join_target_column: 'cd_setor',
+        join_select: [['$get', 'view.conf.data.variableId']],
+        where: {
+          municipio_id: [['$get', 'municipioId']]
+        }
+      }]]]]
     })),
-    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), {}, _defineProperty(_defineProperty({
+    layers: _objectSpread2(_objectSpread2({}, globalRes.layers), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
       customGeoJSON_Areas_fill: {
         hidden: ['$empty', ['$get', 'view.conf.data.customSpatialAggregationUnit']],
         source: 'customGeoJSON_Areas',
@@ -5506,31 +5539,88 @@ function cem_censo_2010_2022(viewSpec, allViewSpecs, context) {
       }
     }, "".concat(VECTOR_SOURCE_ID, "_fill"), {
       hidden: ['$not', ['$empty', ['$get', 'view.metadata.customGeoJSON.AREAS']]],
-      // interactive: [
-      //   '$empty',
-      //   ['$get', 'view.conf.data.customSpatialAggregationUnit'],
-      // ],
+      interactive: true,
       legends: _legends,
       tooltip: {
-        // title: [
-        //   '$literal',
-        //   [
-        //     '$template',
-        //     'Setor ${0}',
-        //     ['$get', 'feature.properties.cd_setor'],
-        //   ],
-        // ],
+        title: null,
         entries: [_variableValueTooltipEntry]
       },
       source: VECTOR_SOURCE_ID,
       'source-layer': 'dynamic_vector_tile',
       type: 'fill',
-      // filter: ['==', ['get', 'cd_mun'], ['$get', 'municipioId']],
+      // maxzoom: 14,
       paint: {
-        'fill-color': ['$flat', [['step', ['coalesce', ['get', ['$get', 'view.conf.data.variableId']], -1]], ['$get', 'view.metadata.colorScaleStops']]],
-        'fill-opacity': ['$get', 'view.conf.style.layerOpacity'],
+        // '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-outline-color': 'transparent'
       }
+    }), "".concat(VECTOR_SOURCE_ID, "_boundary_lines"), {
+      hidden: ['$not', ['$empty', ['$get', 'view.metadata.customGeoJSON.AREAS']]],
+      source: VECTOR_SOURCE_ID,
+      'source-layer': 'dynamic_vector_tile',
+      type: 'line',
+      interactive: true,
+      // minzoom: BUILDINGS_MIN_ZOOM,
+      paint: {
+        'line-color': _vectorSourceFillColor,
+        'line-width': ['step', ['zoom'],
+        // default: zoom < 14 → thin lines
+        ['case', ['boolean', ['feature-state', 'hover'], false], 4, 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]
+      }
+    }), "".concat(VECTOR_SOURCE_ID, "_buildings"), {
+      hidden: ['$not', ['$empty', ['$get', 'view.metadata.customGeoJSON.AREAS']]],
+      interactive: false,
+      // tooltip: {
+      //   title: ['$literal', ['$get', 'feature.properties.primary_name']],
+      //   entries: [],
+      //   // entries: [
+      //   //   _variableValueTooltipEntry,
+      //   //   // ['subtype', ['$literal', ['$get', 'feature.properties.subtype']]],
+      //   // ],
+      // },
+      source: "".concat(VECTOR_SOURCE_ID, "_buildings"),
+      'source-layer': 'dynamic_vector_tile',
+      type: 'fill-extrusion',
+      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-extrusion-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-extrusion-opacity': 0.8,
+        // 'fill-extrusion-opacity': ['$get', 'view.conf.style.layerOpacity'],
+        // 'fill-extrusion-outline-color': 'transparent',
+        'fill-extrusion-height': ['step', ['zoom'], 0, BUILDINGS_3D_MIN_ZOOM, ['coalesce', ['get', 'height'], 0]]
+        // ['get', 'height'], // Adjust as needed
+      }
     }), "customGeoJSON_Points_heatmap", {
       hidden: ['$or', ['$empty', ['$get', 'view.conf.data.customSpatialAggregationUnit']], ['$not', ['$eq', ['$get', 'view.conf.data.pointsDisplayMode'], 'heatmap']]],
       source: 'customGeoJSON_Points',
@@ -6492,9 +6582,16 @@ function _flyToMunicipio2() {
   return _flyToMunicipio2.apply(this, arguments);
 }
 var REDUS_DATAVIZ_STYLE = 'https://api.maptiler.com/maps/0195f947-fb77-7256-83d6-47a54db345a3/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);
+//
+// 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 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"])));
 
 //
@@ -6544,6 +6641,15 @@ var BR_BBOX = {
   },
   properties: {}
 };
+var SKY_STYLE = {
+  'sky-color': '#199EF3',
+  'sky-horizon-blend': 0.5,
+  'horizon-color': '#d3edfd',
+  'horizon-fog-blend': 0.5,
+  'fog-color': '#0000ff',
+  'fog-ground-blend': 0.5,
+  'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 1, 10, 1, 12, 0]
+};
 function GeoReDUSInner(_ref) {
   var globalState = _ref.state,
     onSetGlobalState = _ref.onSetState,
@@ -6925,6 +7031,7 @@ function GeoReDUSInner(_ref) {
     value: municipioId,
     onSetValue: setMunicipioId
   }))), /*#__PURE__*/React.createElement(SyncedMaps, {
+    maxPitch: 80,
     onDrag: function onDrag() {
       if (resolvedLayout.length > 1 && leftPanelOpen) {
         //
@@ -6962,6 +7069,7 @@ function GeoReDUSInner(_ref) {
     },
     setPrefetchZoomDelta: 0,
     mapStyle: baseMapStyle === 'satellite' ? SATELLITE_MAP_STYLE_URL : DATAVIZ_MAP_STYLE_URL,
+    sky: SKY_STYLE,
     tooltip: getTooltip,
     maps: resolvedLayout.map(function (_ref6, index) {
       var id = _ref6.id,
@@ -6976,36 +7084,20 @@ function GeoReDUSInner(_ref) {
         // canvasContextAttributes: {
         //   preserveDrawingBuffer: true,
         // },
-        children: /*#__PURE__*/React.createElement(React.Fragment, null, index === resolvedLayout.length - 1 && /*#__PURE__*/React.createElement(MapStyleToggleCtrl, {
-          style: {
-            position: 'absolute',
-            zIndex: 1000,
-            top: 176,
-            right: 12
-          },
-          type: "button",
-          onClick: function onClick() {
-            return setBaseMapStyle(baseMapStyle === 'dataviz' ? 'satellite' : 'dataviz');
-          }
-        }, /*#__PURE__*/React.createElement(MapWindow, {
+        children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AttributionControl, {
+          position: "bottom-right",
+          compact: false
+        }), /*#__PURE__*/React.createElement(ControlContainer, {
           style: {
-            pointerEvents: 'none',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            height: '100%',
-            width: '100%'
+            width: 'auto',
+            height: 'auto',
+            boxShadow: 'none',
+            opacity: legends.length > 0 ? 1 : 0
           },
-          mapStyle: baseMapStyle === 'satellite' ? DATAVIZ_MAP_STYLE_URL : SATELLITE_MAP_STYLE_URL
-        })), legends.length > 0 && /*#__PURE__*/React.createElement(LegendContainer, {
+          position: "bottom-right"
+        }, legends.length > 0 && /*#__PURE__*/React.createElement(LegendContainer, {
           direction: "row",
           gap: "3",
-          style: {
-            position: 'absolute',
-            bottom: '20px',
-            right: '10px',
-            zIndex: 20
-          },
           p: resolvedLayout.length > 1 ? '3' : '4'
         }, resolvedLayout.length > 1 && /*#__PURE__*/React.createElement(Tooltip, {
           content: "Fechar visualiza\xE7\xE3o"
@@ -7036,16 +7128,44 @@ function GeoReDUSInner(_ref) {
           }, {
             key: legend.id
           }, legend));
-        }))), index === resolvedLayout.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GeolocateControl, {
+        })))), index === resolvedLayout.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GeolocateControl, {
+          position: "top-right"
+        }), /*#__PURE__*/React.createElement(FullscreenControl, {
           position: "top-right"
         }), /*#__PURE__*/React.createElement(NavigationControl, {
           position: "top-right"
         }), /*#__PURE__*/React.createElement(ScaleControl, {
-          position: "top-right"
-        }), /*#__PURE__*/React.createElement(AttributionControl, {
-          position: "bottom-right",
-          compact: false
-        })) : null)
+          position: "bottom-right"
+        }), /*#__PURE__*/React.createElement(ControlContainer, {
+          style: {
+            width: 100,
+            height: 100,
+            boxShadow: 'none'
+          }
+        }, /*#__PURE__*/React.createElement(MapStyleToggleCtrl, {
+          style: {
+            position: 'relative',
+            width: 100,
+            height: 100
+          },
+          type: "button",
+          onClick: function onClick() {
+            return setBaseMapStyle(baseMapStyle === 'dataviz' ? 'satellite' : 'dataviz');
+          }
+        }, /*#__PURE__*/React.createElement(MapWindow, {
+          style: {
+            pointerEvents: 'none',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            height: '100%',
+            width: '100%'
+          },
+          mapStyle: baseMapStyle === 'satellite' ? DATAVIZ_MAP_STYLE_URL : SATELLITE_MAP_STYLE_URL
+        })))) : null, /*#__PURE__*/React.createElement(TerrainControl, {
+          demSourceUrl: DEM_SOURCE_URL,
+          demSourceEncoding: DEM_SOURCE_ENCODING
+        }))
       };
     })
   }, isLoading && /*#__PURE__*/React.createElement(LoadingIndicator, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redus/georedus-ui",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/main.js",
@@ -43,7 +43,7 @@
     "@orioro/react-csv": "^0.0.2",
     "@orioro/react-dialogs": "^0.0.2",
     "@orioro/react-dir-nav": "^0.1.0",
-    "@orioro/react-maplibre-util": "^0.1.0",
+    "@orioro/react-maplibre-util": "^0.2.0",
     "@orioro/react-sortable": "^0.0.2",
     "@orioro/react-ui-core": "^0.0.6",
     "@orioro/resolve": "^0.1.2",