chore(deps): update to maplibre 4.5.2 (#399)

* chore(deps): bump maplibre-gl from 2.4.0 to 3.6.2 in /ui Bumps [maplibre-gl](https://github.com/maplibre/maplibre-gl-js) from 2.4.0 to 3.6.2. - [Release notes](https://github.com/maplibre/maplibre-gl-js/releases) - [Changelog](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md) - [Commits](maplibre/maplibre-gl-js@v2.4.0...v3.6.2) --- updated-dependencies: - dependency-name: maplibre-gl dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * chore(map): upgrade to maplibre-gl 4.5.2 --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
f-eld-ch · Aug 21, 2024 · 05b5f8c · 05b5f8c
1 parent 76c6eaf
commit 05b5f8c
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 124 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -23,7 +23,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash": "^4.17.21",
     "mapbox-gl-style-switcher": "^1.0.11",
-    "maplibre-gl": "^2.4.0",
+    "maplibre-gl": "4.5.2",
     "react": "^18.3.1",
     "react-autocomplete-hint": "^2.0.0",
     "react-color": "^2.19.3",
@@ -70,7 +70,6 @@
     "@types/hat": "^0.0.4",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
-    "@types/mapbox-gl": "^2.7.21",
     "@types/mapbox__mapbox-gl-draw": "~1.4.6",
     "@types/node": "^20.16.1",
     "@types/react": "^18.3.4",

diff --git a/ui/src/App.scss b/ui/src/App.scss
@@ -13,8 +13,7 @@ $grey-lighter: hsl(221, 14%, 86%);
 $grey-lightest: hsl(221, 14%, 93%);
 
 // Override global Sass variables from the /utilities folder
-@use "bulma/sass/utilities" with (
-  $family-primary: '"B612",sans-serif',
+@use "bulma/sass/utilities" with ($family-primary: '"B612",sans-serif',
   $family-monospace: '"B612 Mono", monospace',
   $primary: $orange,
   $warning: $yellow,
@@ -32,8 +31,7 @@ $grey-lightest: hsl(221, 14%, 93%);
   $grey: $grey,
   $grey-light: $grey-light,
   $grey-lighter: $grey-lighter,
-  $grey-lightest: $grey-lightest
-);
+  $grey-lightest: $grey-lightest);
 
 // Import the components we need
 @forward "bulma/sass/base";
@@ -43,20 +41,12 @@ $grey-lightest: hsl(221, 14%, 93%);
 @forward "bulma/sass/components/breadcrumb";
 @forward "bulma/sass/components/card";
 @forward "bulma/sass/components/dropdown";
-@use "bulma/sass/components/message" with (
-  $message-body-padding: 1em 1.5em 0em 1em
-);
-@use "bulma/sass/components/modal" with (
-  $modal-content-width: 80rem
-);
-@use "bulma/sass/components/navbar" with (
-  $navbar-height: $navbar-height
-);
+@use "bulma/sass/components/message" with ($message-body-padding: 1em 1.5em 0em 1em);
+@use "bulma/sass/components/modal" with ($modal-content-width: 80rem);
+@use "bulma/sass/components/navbar" with ($navbar-height: $navbar-height);
 @forward "bulma/sass/components/tabs";
 
-@use "bulma/sass/form" with (
-  $input-shadow: none
-);
+@use "bulma/sass/form" with ($input-shadow: none);
 
 // Import the bulma elements we need
 @forward "bulma/sass/elements/box";
@@ -69,9 +59,7 @@ $grey-lightest: hsl(221, 14%, 93%);
 @forward "bulma/sass/elements/tag";
 @forward "bulma/sass/elements/title";
 
-@use "bulma/sass/layout/footer" with (
-  $footer-padding: 2rem 1.5rem 2rem
-);
+@use "bulma/sass/layout/footer" with ($footer-padding: 2rem 1.5rem 2rem);
 @forward "bulma/sass/layout/hero";
 @forward "bulma/sass/layout/section";
 @forward "bulma/sass/layout/level";
@@ -84,6 +72,8 @@ $grey-lightest: hsl(221, 14%, 93%);
 @import url("assets/b612-mono/b612-mono.css");
 @import url("assets/b612/b612.css");
 
+@import "maplibre-gl/dist/maplibre-gl";
+
 // Other customizations
 section {
   &.is-fullheight-with-navbar {
@@ -123,8 +113,7 @@ section {
   }
 
   .tbody {
-    tr {
-    }
+    tr {}
   }
 }
 
@@ -142,10 +131,23 @@ section {
   border-color: $red;
 }
 
-.mapboxgl-map {
+.maplibregl-map {
   min-height: 79vh;
 }
 
+.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
+  float: right;
+  margin: 0 10px px 30px 0;
+}
+
+.mapboxgl-ctrl-group {
+  @extend .maplibregl-ctrl-group !optional;
+}
+
+.mapboxgl-ctrl {
+  @extend .maplibregl-ctrl !optional;
+}
+
 @media screen {
   .is-print {
     display: none !important;
@@ -218,4 +220,4 @@ section {
       font-size: 11px;
     }
   }
-}
+}
diff --git a/ui/src/views/map/Map.tsx b/ui/src/views/map/Map.tsx
@@ -1,6 +1,5 @@
 
 import './control-panel.css';
-import 'maplibre-gl/dist/maplibre-gl.css';
 import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
 import { AddFeatureToLayer, DeleteFeature, GetLayers, ModifyFeature } from './graphql';
 import { AddFeatureVars, DeleteFeatureVars, GetLayersData, GetLayersVars, Layer, ModifyFeatureVars } from 'types/layer';
@@ -10,7 +9,7 @@ import { CleanFeature, FilterActiveFeatures, LayerToFeatureCollection } from './
 import { displayStyle, drawStyle } from './style';
 import { Feature, Geometry, GeoJsonProperties, FeatureCollection } from "geojson";
 import { first } from 'lodash';
-import { FullscreenControl, Map, MapProvider, MapRef, NavigationControl, ScaleControl, Source, useMap, Layer as MapLayer } from 'react-map-gl/maplibre';
+import { FullscreenControl, Map, MapProvider, MapRef, NavigationControl, ScaleControl, Source, useMap, Layer as MapLayer, AttributionControl } from 'react-map-gl/maplibre';
 import { LayerContext, LayersProvider } from './LayerContext';
 import { StyleController, selectedStyle } from './controls/StyleController';
 import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
@@ -64,26 +63,29 @@ function MapView() {
     return (
         <>
             <h3 className="title is-size-3 is-capitalized">Lage</h3>
-            <div className='mapbox container-flex'>
+            <div className='maplibre container-flex'>
                 <MapProvider>
                     <Map
                         ref={mapRef}
                         mapLib={maplibregl}
                         onLoad={onMapLoad}
-                        attributionControl={true}
+                        attributionControl={false}
                         minZoom={8}
                         maxZoom={19}
                         {...viewState}
                         onMove={e => setViewState(e.viewState)}
                         mapStyle={mapStyle.uri}
+                        touchPitch={true}
+                        touchZoomRotate={true}
+                        scrollZoom={true}
                     >
 
+                        <AttributionControl position='bottom-left' compact={true} />
                         {/* All Map Controls */}
                         <FullscreenControl position={'top-left'} />
                         <NavigationControl position={'top-left'} visualizePitch={true} />
-                        <StyleController />
                         <ScaleControl unit={"metric"} position={'bottom-left'} />
-                        <ExportControl />
+                        <ExportControl position="bottom-left" />
                         {/* Layersprovider and Draw */}
                         <Layers />
                     </Map>
@@ -99,7 +101,10 @@ function Layers() {
     return (
         <LayersProvider >
             <LayerFetcher />
-            <LayerControl />
+            <div className="maplibregl-ctrl-bottom-right" >
+                <LayerControl />
+                <StyleController />
+            </div>
 
             {/* Active Layer */}
             <ActiveLayer />

diff --git a/ui/src/views/map/controls/BabsIconController.scss b/ui/src/views/map/controls/BabsIconController.scss
@@ -1,4 +1,3 @@
-.mapboxgl-ctrl-group,
 .maplibregl-ctrl-group {
     button {
         width: 35px;

diff --git a/ui/src/views/map/controls/BabsIconController.tsx b/ui/src/views/map/controls/BabsIconController.tsx
@@ -73,7 +73,7 @@ function IconController(props: BabsIconControllerProps) {
     }
 
     return (
-        <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={iconControllerStyle}>
+        <div className="maplibregl-ctrl-top-right" style={iconControllerStyle}>
             {Object.keys(IconGroups).map((group) => <IconGroupMenu key={group} name={group} iconGroup={IconGroups[group]} onUpdate={onUpdate} feature={selectedFeature} />)}
             <div className="maplibregl-ctrl maplibregl-ctrl-group" style={{ display: "flex", flexFlow: "column wrap", flexGrow: 2, flexShrink: 4, flexBasis: 0, justifyContent: 'flex-end', alignSelf: 'baseline', marginTop: "5px" }}>
                 <button type="button" className='maplibregl-ctrl-icon' title={rotationLock ? "Fixierte Signatur lösen" : "Signatur fixieren"} onClick={() => { onRotateClick(!rotationLock) }}>
@@ -171,7 +171,7 @@ function LineController(props: BabsIconControllerProps) {
 
 
     return (
-        <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={iconControllerStyle}>
+        <div className="maplibregl-ctrl-top-right" style={iconControllerStyle}>
             <div className="maplibregl-ctrl maplibregl-ctrl-group" style={iconControllerFlexboxStyleColumn}>
                 {Object.values(LineTypes).map((t) =>
                     (<button key={t.name} title={t.description} onClick={() => onClickIcon(t)} ><img src={t.icon.src} alt={icon.name} /></button>)
@@ -211,7 +211,7 @@ function ZoneController(props: BabsIconControllerProps) {
 
 
     return (
-        <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={iconControllerStyle}>
+        <div className="maplibregl-ctrl-top-right" style={iconControllerStyle}>
             <div className="maplibregl-ctrl maplibregl-ctrl-group" style={iconControllerFlexboxStyleColumn}>
                 {Object.values(ZoneTypes).map((t) =>
                     (<button key={t.name} title={t.description} onClick={() => onClickIcon(t)} ><img src={t.icon.src} alt={icon.name} /></button>)
@@ -393,8 +393,8 @@ function FeatureDetailControlPanel(props: BabsIconControllerProps) {
 
     if (!active) {
         return (
-            <div className="maplibregl-ctrl-top-right mapboxgl-ctrl-top-right" style={{ marginRight: "45px" }}>
-                <div className='mapboxgl-ctrl mapboxgl-ctrl-group' >
+            <div className="maplibregl-ctrl-top-right" style={{ marginRight: "45px" }}>
+                <div className='maplibregl-ctrl maplibregl-ctrl-group' >
                     <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faHeading} size="lg" /></button>
                 </div>
             </div >

diff --git a/ui/src/views/map/controls/ExportControl.tsx b/ui/src/views/map/controls/ExportControl.tsx
@@ -50,8 +50,5 @@ function ExportControl(props: ExportControlProps): null {
 
     return null;
 }
-ExportControl.defaultProps = {
-    position: 'bottom-left'
-};
 
 export default ExportControl;
diff --git a/ui/src/views/map/controls/LayerControl.tsx b/ui/src/views/map/controls/LayerControl.tsx
@@ -30,13 +30,11 @@ function LayerPanel() {
     }, [dispatch]);
 
     return (
-        <div className="maplibregl-ctrl-bottom-right mapboxgl-ctrl-bottom-right" style={{ paddingBottom: "65px" }}>
-            <div className='mapboxgl-ctrl mapboxgl-ctrl-group' >
-                <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faLayerGroup} size="lg" /></button>
-                <div className={switcherClass}>
-                    {state.layers.map((l) => { return <button type="button" className={classNames({ "button": true, "active": state.activeLayer === l.id })} key={l.id} onClick={() => onClick(l)}>{l.name}</button> })}
-                </div >
-            </div>
+        <div className='maplibregl-ctrl maplibregl-ctrl-group' >
+            <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faLayerGroup} size="lg" /></button>
+            < div className={switcherClass} >
+                {state.layers.map((l) => { return <button type="button" className={classNames({ "button": true, "active": state.activeLayer === l.id })} key={l.id} onClick={() => onClick(l)}>{l.name}</button> })}
+            </div >
         </div >
     );
 }

diff --git a/ui/src/views/map/controls/StyleController.scss b/ui/src/views/map/controls/StyleController.scss
@@ -10,6 +10,7 @@
     height: auto;
     block-size: fit-content;
     width: fit-content;
+    margin-right: 50px;
 
     button.active {
         font-weight: bold;

diff --git a/ui/src/views/map/controls/StyleController.tsx b/ui/src/views/map/controls/StyleController.tsx
@@ -50,14 +50,12 @@ function StyleController() {
     }, [setActive]);
 
     return (
-        <div className="maplibregl-ctrl-bottom-right mapboxgl-ctrl-bottom-right" style={{ paddingBottom: "15px" }}>
-            <div className='mapboxgl-ctrl mapboxgl-ctrl-group' >
-                <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faMap} size="lg" /></button>
-                <div className={switcherClass}>
-                    {MapStyles.map((s) => { return <button type="button" className={classNames({ "button": true, "active": style.name === s.name })} key={s.name} onClick={() => onClick(s)}>{s.name}</button> })}
-                </div >
-            </div>
-        </div >
+        <div className='maplibregl-ctrl maplibregl-ctrl-group' >
+            <button type="button" className={btnClass} onClick={() => setActive(!active)}><FontAwesomeIcon icon={faMap} size="lg" /></button>
+            <div className={switcherClass}>
+                {MapStyles.map((s) => { return <button type="button" className={classNames({ "button": true, "active": style.name === s.name })} key={s.name} onClick={() => onClick(s)}>{s.name}</button> })}
+            </div >
+        </div>
     );
 }