@tpzdsp/next-toolkit 1.12.1 → 1.13.0

package/README.md

@@ -139,7 +139,7 @@ interface MyComponentProps extends BaseProps {
 
 ```bash
 # Install OpenLayers dependencies
-npm install ol ol-geocoder ol-mapbox-style proj4
+npm install ol ol-mapbox-style proj4
 ```
 
 ```typescript
@@ -152,14 +152,14 @@ import '@your-org/nextjs-library/styles/ol';
 Some components require additional peer dependencies that are marked as optional:
 
 - **Select components**: Require `react-select`
-- **Map components**: Require OpenLayers packages (`ol`, `ol-geocoder`, etc.)
+- **Map components**: Require OpenLayers packages (`ol`, `ol-mapbox-style`, etc.)
 
 ```bash
 # For Select components
 npm install react-select
 
 # For Map components  
-npm install ol ol-geocoder ol-mapbox-style proj4 @turf/turf geojson
+npm install ol ol-mapbox-style proj4 @turf/turf geojson
 ```
 
 ```typescript
@@ -451,7 +451,7 @@ npm install react-select
 
 # Error: Cannot resolve module 'ol/ol.css' 
 # Solution: Install OpenLayers dependencies
-npm install ol ol-geocoder ol-mapbox-style proj4
+npm install ol ol-mapbox-style proj4
 
 # Or import components selectively to avoid these dependencies:
 import { Button, Card } from '@your-org/nextjs-library'; // ✅ No extra deps needed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpzdsp/next-toolkit",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "A reusable React component library for Next.js applications",
   "engines": {
     "node": ">= 24.12.0",
@@ -171,7 +171,6 @@
     "jsonwebtoken": "^9.0.3",
     "next": "^16.1.4",
     "ol": "^10.6.1",
-    "ol-geocoder": "^4.3.3",
     "ol-mapbox-style": "^13.0.1",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
@@ -213,7 +212,6 @@
     "geojson": "^0.5.0",
     "next": "^16.1.4",
     "ol": "^10.6.1",
-    "ol-geocoder": "^4.3.3",
     "ol-mapbox-style": "^13.0.1",
     "proj4": "^2.19.10",
     "react": "^19.2.1",
@@ -256,9 +254,6 @@
     "ol": {
       "optional": true
     },
-    "ol-geocoder": {
-      "optional": true
-    },
     "ol-mapbox-style": {
       "optional": true
     },

package/src/assets/styles/ol.css

@@ -1,42 +1,93 @@
 @import 'ol/ol.css';
-@import 'ol-geocoder/dist/ol-geocoder.min.css';
 
-/* Universal OpenLayers control focus style */
+/**
+ * OpenLayers Control Styles
+ * 
+ * This file contains styles for OpenLayers map controls (zoom, layer switcher, fullscreen).
+ * 
+ * Design System:
+ * - All control buttons extend the `.ol-btn` base class
+ * - Control panels should be implemented as React components with Tailwind CSS
+ * - Use CSS custom properties (--focus-color, etc.) for consistent theming
+ * 
+ * To add a new control:
+ * 1. Add the `ol-btn` class to your button element
+ * 2. Override only the properties you need (e.g., font-size, icon)
+ * 3. Position the control container with absolute positioning
+ */
+
+:root {
+  --focus-color: #ffdd00;
+  --focus-outline-color: #ffbf47;
+  --control-bg: #fff;
+  --control-border: #505a5f;
+  --control-text: #0b0c0c;
+  --control-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+/* Base button class for all OpenLayers controls */
+.ol-btn,
+.ol-btn:hover,
+.ol-btn:active,
+.ol-btn:focus,
+.ol-btn:focus-visible {
+  width: 40px !important;
+  height: 40px !important;
+  border: none !important;
+  outline: none !important;
+}
+
+.ol-btn {
+  background: var(--control-bg);
+  color: var(--control-text);
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+  box-shadow: var(--control-shadow);
+  cursor: pointer;
+  transition:
+    box-shadow 0.2s,
+    background 0.2s;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ensure SVG icons in buttons are consistently sized and centered */
+.ol-btn svg {
+  width: 20px !important;
+  height: 20px !important;
+  flex-shrink: 0;
+  display: block;
+  margin: 0 auto;
+}
+
+.ol-btn:hover,
+.ol-btn:active {
+  background: var(--focus-color) !important;
+}
+
+.ol-btn:focus,
+.ol-btn:focus-visible {
+  outline: 3px solid var(--focus-outline-color) !important;
+  background: var(--focus-color) !important;
+  z-index: 2;
+}
+
+/* Universal OpenLayers control focus style for non-button elements */
 #map:focus,
 .ol-viewport:focus,
 .ol-control:focus,
-.ol-control button:focus,
-.ol-control button:focus-visible,
 .ol-attribution:focus,
-.ol-attribution button:focus,
-.ol-zoom:focus,
-.ol-zoom button:focus,
-.ol-layer-switcher-toggle:focus,
-.ol-layer-switcher-close:focus,
-.ol-layer-switcher-panel button:focus,
 .ol-attribution ul li a:focus,
-.ol-attribution ul li a:focus-visible,
-.ol-geocoder ul.gcd-txt-result > li > a:focus,
-.ol-geocoder ul.gcd-txt-result > li > a:focus-visible {
-  outline: 3px solid #ffbf47 !important;
-  border-color: #ffbf47 !important;
+.ol-attribution ul li a:focus-visible {
+  outline: 3px solid var(--focus-outline-color) !important;
+  border-color: var(--focus-outline-color) !important;
   z-index: 2;
 }
 
-.ol-geocoder #gcd-input-search:focus,
-.ol-geocoder .gcd-txt-search:focus,
-.ol-geocoder .gcd-txt-search:focus-visible {
-  background-color: #ffbf47 !important;
-  z-index: 2;
-}
-
-.ol-geocoder .gcd-txt-input:focus,
-.ol-geocoder .gcd-txt-input:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px #ffbf47,
-    inset 0 0 6px #ffbf47;
-}
-
 /* Zoom control container */
 .ol-zoom {
   top: 1.5rem;
@@ -47,61 +98,26 @@
   z-index: 10;
 }
 
-/* Zoom buttons */
+/* Apply base button styling to zoom buttons */
 .ol-zoom button,
-.ol-control button {
-  width: 40px;
-  height: 40px;
-  background: #fff;
-  color: #0b0c0c;
-  font-size: 2rem;
-  font-weight: bold;
-  line-height: 1;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s,
-    background 0.2s;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .ol-zoom button:hover,
-.ol-control button:hover {
-  background: #f3f2f1;
-  border-color: #1d70b8;
-  outline: unset;
-}
-
-/* Layer switcher styles */
-.ol-layer-switcher {
-  top: 0px;
-  right: 1rem;
-}
-
-.ol-layer-switcher-toggle {
-  position: absolute;
-  top: 110px;
-  right: 0px;
+.ol-zoom button:active,
+.ol-zoom button:focus,
+.ol-zoom button:focus-visible {
+  width: 40px !important;
+  height: 40px !important;
+  border: none !important;
+  outline: none !important;
 }
 
-.ol-layer-switcher-toggle button {
-  width: 40px;
-  height: 40px;
-  background: #fff;
-  border: 2px solid #505a5f;
-  color: #0b0c0c;
-  font-size: 1.5rem;
+.ol-zoom button {
+  background: var(--control-bg) !important;
+  color: var(--control-text) !important;
   font-weight: bold;
   line-height: 1;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--control-shadow);
   cursor: pointer;
   transition:
-    border-color 0.2s,
     box-shadow 0.2s,
     background 0.2s;
   margin: 0;
@@ -109,124 +125,79 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 0 !important; /* Hide the default +/- text */
+  position: relative;
 }
 
-.ol-layer-switcher-panel {
-  position: absolute;
-  top: 110px;
-  right: -100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 1rem 1rem;
-  min-width: 220px;
-  background: #fff;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  gap: 0.5rem;
-  transition: right 0.3s ease-in-out;
-}
-
-.ol-layer-switcher-panel.open {
-  right: 3rem;
-}
-
-/* Header for the close button, aligns it to the top-right */
-.ol-layer-switcher-header {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-}
-
-/* Small, circular close button */
-.ol-layer-switcher-close {
-  font-size: 1.25rem;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  background: none;
-  border: none;
-  color: #505a5f;
-  cursor: pointer;
-  border-radius: 50%;
-  transition: background 0.2s;
-}
-
-.ol-layer-switcher-close:hover,
-.ol-layer-switcher-close:focus {
-  background: #e1e1e1;
-}
-
-/* Content area for basemap buttons */
-.ol-layer-switcher-content {
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-}
-
-.ol-layer-switcher-content button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #ccc;
-  background-color: #fff;
-  min-width: 135px;
-  min-height: 135px;
-  cursor: pointer;
-  color: #000;
-}
-
-.ol-layer-switcher-content button:hover {
-  background-color: #ddd;
+.ol-zoom button:hover,
+.ol-zoom button:active {
+  background: var(--focus-color) !important;
 }
 
-.ol-layer-switcher-content button.active {
-  background-color: #007bff;
-  color: white;
-  border-color: #0056b3;
-  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
-  transform: scale(1.05);
-  transition: all 0.2s ease;
+.ol-zoom button:focus,
+.ol-zoom button:focus-visible {
+  outline: 3px solid var(--focus-outline-color) !important;
+  background: var(--focus-color) !important;
+  z-index: 2;
 }
 
-.ol-layer-switcher-content button.active img {
-  filter: brightness(1.2);
+/* Override default zoom button text with SVG icons */
+.ol-zoom-in::before,
+.ol-zoom-out::before {
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  font-size: 0; /* Ensure no text shows */
 }
 
-.ol-layer-switcher-content button:not(.active) img {
-  filter: grayscale(1);
+.ol-zoom-in::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 5v14m-7-7h14" stroke="%230b0c0c" stroke-width="2" stroke-linecap="round"/></svg>');
 }
 
-.ol-layer-switcher-content button img {
-  max-width: 80px;
-  height: auto;
-  border: 2px solid #000;
+.ol-zoom-out::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M5 12h14" stroke="%230b0c0c" stroke-width="2" stroke-linecap="round"/></svg>');
 }
 
-.ol-layer-switcher-content button div {
-  font-size: 14px;
-  padding-top: 0.5rem;
+/* Layer switcher control */
+.ol-layer-switcher {
+  position: absolute;
+  top: 110px;
+  right: 1rem;
+  z-index: 9999;
 }
 
-/* Geocoder tweaks */
-
-#gcd-container,
-.ol-geocoder .gcd-txt-control {
-  height: unset !important;
+/* Full screen control */
+.ol-fullscreen {
+  position: absolute;
+  top: 155px;
+  right: 1rem;
 }
 
-.ol-geocoder .gcd-txt-glass,
-.ol-geocoder ul.gcd-txt-result {
-  top: unset !important;
+/* Full screen mode for map container */
+.map-fullscreen {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999 !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
-.ol-geocoder ul.gcd-txt-result > li:nth-child(odd),
-.ol-geocoder ul.gcd-txt-result > li:nth-child(even) {
-  background-color: #fff;
-  background-color: #fff;
+/* Ensure map fills container in full screen mode */
+.map-fullscreen .ol-viewport {
+  width: 100% !important;
+  height: 100% !important;
 }
 
-.ol-geocoder ul.gcd-txt-result > li > a:hover {
-  background-color: #f3f2f1;
+/* Hide other UI elements when in full screen (optional) */
+.map-fullscreen ~ * {
+  display: none;
 }