antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-12 23:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(source): zoom control (#221)

Browse Source 
* 3.0.82

* version number

* 3.0.84

* 3.0.85

* 3.0.86

* optional zoom control
This commit is contained in:
Anton Tranelis 2025-05-22 12:06:30 +02:00 committed by GitHub
parent 67e8dfe7c1
commit 06252fb0b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Components/Map/UtopiaMap.tsx
View File

@ -51,6 +51,7 @@ function UtopiaMap({
showFilterControl = false,
showGratitudeControl = false,
showLayerControl = true,
showZoomControl = false,
showThemeControl = false,
defaultTheme,
donationWidget,
@ -73,6 +74,8 @@ function UtopiaMap({
showLayerControl?: boolean
/** show the layer control widget (default true) */
showGratitudeControl?: boolean
/** show zoom control widget (default false) */
showZoomControl?: boolean
/** show a widget to switch the theme */
showThemeControl?: boolean
/** the defaut theme */
@ -86,7 +89,7 @@ function UtopiaMap({
style={{ height, width }}
center={new LatLng(center[0], center[1])}
zoom={zoom}
zoomControl={false}
zoomControl={showZoomControl}
maxZoom={19}
>
<UtopiaMapInner

41
src/assets/css/leaflet.css
View File

@ -1,4 +1,4 @@
.leaflet-control-attribution {
.leaflet-control-attribution {
display: none;
}
@ -57,3 +57,42 @@
color: var(--color-base-content);
opacity: 50%;
}
.leaflet-top {
top: 6em
}
.leaflet-left {
left: 0.5em
}
.leaflet-control-zoom {
border-radius: var(--radius-box);
color: var(--color-base-content);
background-color: var(--color-base-100);
width: calc(var(--tw-spacing) * 10);
border: 2px solid var(--color-base-300) !important;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}
.leaflet-control-zoom-in {
border-top-left-radius: var(--radius-box) !important;
border-top-right-radius: var(--radius-box) !important;
color: var(--color-base-content) !important;
background-color: var(--color-base-100) !important;
width: calc(var(--tw-spacing) * 9) !important;
border-bottom: 1px solid var(--color-base-300) !important;
height: calc(var(--tw-spacing) * 9) !important;
line-height: 40px !important;
}
.leaflet-control-zoom-out {
border-bottom-left-radius: var(--radius-box) !important;
border-bottom-right-radius: var(--radius-box) !important;
color: var(--color-base-content) !important;
background-color: var(--color-base-100) !important;
width: calc(var(--tw-spacing) * 9) !important;
height: calc(var(--tw-spacing) * 9) !important;
line-height: 40px !important;
}

1
src/types/UtopiaMapProps.d.ts vendored
View File

@ -13,6 +13,7 @@ export interface UtopiaMapProps {
showLayerControl?: boolean
showGratitudeControl?: boolean
showThemeControl?: boolean
showZoomControl?: boolean
infoText?: string
donationWidget?: boolean
defaultTheme?: string