Enable Leaflet zooming

### ✅ Enable Zooming in Leaflet
Here's how you can enable zooming features:

const map = L.map('map', {
  center: [51.505, 10.09], // Example coordinates (Germany center)
  zoom: 6,
  zoomControl: true,       // Show zoom controls (+/-)
  scrollWheelZoom: true,   // Enable mouse scroll zoom
  doubleClickZoom: true,   // Enable double-click zoom
  touchZoom: true,         // Enable pinch zoom on mobile
  dragging: true           // Enable map dragging
});

// Add tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

### ✅ Common Issues to Check
– **Container ID**: Make sure your “ exists and has height (`e.g. height: 500px;` in CSS).
– **Leaflet CSS & JS**: Make sure Leaflet is properly included:

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

### ✅ Optional: Enable Zoom with Scroll on Embedded Map
If you're embedding a map and it doesn't zoom on scroll, you may need to manually enable `scrollWheelZoom`:

map.scrollWheelZoom.enable();

Let me know if you're using a WordPress plugin or a custom JS setup and I’ll adjust it accordingly.

—

### ✅ 1. Enable Zoom via Shortcode
If you’re adding the map using a **shortcode**, use the `scrollWheelZoom` attribute like this:

[leaflet-map zoomcontrol scrollwheelzoom draggable]

You can also specify zoom level and center:

[leaflet-map lat=51.505 lng=10.09 zoom=6 scrollwheelzoom zoomcontrol]

—

### ✅ 2. Enable Zoom in Gutenberg Block (if using)
If you're using the **Leaflet Map block** in Gutenberg:

– Click on the map block
– In the **block settings sidebar**, look for:
– **Scroll wheel zoom** → Enable this
– **Zoom control** → Enable this
– Optionally set the zoom level

—

### ✅ 3. Enable Zoom in Plugin Settings (Global)
– Go to **WP Admin → Settings → Leaflet Map**
– Look for global defaults like:
– Scroll wheel zoom
– Touch zoom
– Dragging
– Zoom control
– Ensure these are **enabled**

—

### ✅ 4. Custom Marker or Popup Maps
If you’re using `[leaflet-marker]`, zoom settings are inherited from `[leaflet-map]`:

[leaflet-map lat=51.505 lng=10.09 zoom=6 scrollwheelzoom]
[leaflet-marker lat=51.505 lng=10.09]Germany Center[/leaflet-marker]

—

Let me know how you’re embedding the map (shortcode, block, widget, etc.) and I can tailor the fix if needed.

—

### ✅ **Fix via Shortcode (Recommended Fix)**

If you're using a shortcode like this:

[leaflet-map]

Update it to this:

[leaflet-map lat=51.1657 lng=10.4515 zoom=6 scrollwheelzoom zoomcontrol draggable]

🔹 This:
– Centers the map over **Germany**
– Sets the **initial zoom** to a reasonable level
– Enables:
– Zoom with mouse scroll
– Zoom control buttons
– Map dragging

—

### ✅ Example with Marker

[leaflet-map lat=51.1657 lng=10.4515 zoom=6 scrollwheelzoom zoomcontrol draggable]
[leaflet-marker lat=51.1657 lng=10.4515]Germany Center[/leaflet-marker]

—

### ✅ If Using Gutenberg Block

If you're using the **Leaflet Map block** in the editor:
1. Click on the **map block**.
2. In the right sidebar:
– Set **Zoom level** to 6 or 7.
– Enable:
– ✅ “Scroll wheel zoom”
– ✅ “Zoom control”
– ✅ “Draggable”
– ✅ “Touch zoom” (optional)

—

If you share your current shortcode or block settings, I’ll adjust it perfectly for you.

[leaflet-marker iconUrl="/app/uploads/marker-icon.png" popupopen lat=54.104132 lng=10.831285]NeustadtRettiner Weg 69 – 75,23730 Neustadt Routenplaner
[/leaflet-marker]

[leaflet-marker iconUrl="/app/uploads/marker-icon.png" popupopen lat=53.893126 lng=11.533826]WismarRüggower Weg 19,23970 Wismar Routenplaner[/leaflet-marker]

[leaflet-marker iconUrl="/app/uploads/marker-icon.png"
popupopen lat=54.283951 lng=10.878605]OldenburgNeustädter Straße 12,23758 Oldenburg23730 Neustadt Routenplaner[/leaflet-marker]

1. **No `zoom` level** is set → default is very far out.
2. `zoomcontrol`, `scrollwheelzoom`, and `draggable` are already good.
3. You might want the map to **auto-fit all markers**.

—

### ✅ Solution 1: Add a Manual Zoom Level (Quick Fix)

Just add a zoom level (e.g., `zoom=7` or `zoom=8`) like this:

[leaflet-map zoom=7 zoomcontrol scrollwheelzoom draggable height=599px lat=53.8 lng=10.9]

Update the shortcode as:

[leaflet-map zoom=7 zoomcontrol scrollwheelzoom draggable height=599px lat=53.8 lng=10.9]

[leaflet-marker iconUrl="/app/uploads/marker-icon.png" popupopen lat=54.104132 lng=10.831285]<b>Neustadt</b><br>Rettiner Weg 69 - 75,<br>23730 Neustadt <br> <a href="https://www.google.com/maps/dir//Rettiner+Weg+69-75,+23730+Neustadt" target="_blank">Routenplaner</a>[/leaflet-marker]

[leaflet-marker iconUrl="/app/uploads/marker-icon.png" popupopen lat=53.893126 lng=11.533826]<b>Wismar</b><br>Rüggower Weg 19,<br>23970 Wismar <br> <a href="https://www.google.com/maps/dir//Rüggower+Weg+19,+23970+Wismar" target="_blank">Routenplaner</a>[/leaflet-marker]

[leaflet-marker iconUrl="/app/uploads/marker-icon.png" popupopen lat=54.283951 lng=10.878605]<b>Oldenburg</b><br>Neustädter Straße 12,<br>23758 Oldenburg<br><a href="https://www.google.com/maps/dir//Neustädter+Straße+12,+23758+Oldenburg" target="_blank">Routenplaner</a>[/leaflet-marker]

—

### ✅ Optional: Auto-Fit to All Markers

If your plugin version supports `[leaflet-fitbounds]`, you can use:

[leaflet-map zoomcontrol scrollwheelzoom draggable height=599px fitbounds]

Then remove `lat`/`lng` and `zoom` – it will automatically fit the map to show all three markers.

—

Let me know if you prefer auto-fit or want to center around a specific location!