> For the complete documentation index, see [llms.txt](https://docs.woohoo.dance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.woohoo.dance/ajax-filters/woohoo-map/map-customization.md).

# Map Customization

#### Map Settings

**Content → Map Settings**

* **Map Type:** roadmap, satellite, hybrid, terrain
* **Initial View:** Fit markers, fit with padding, or manual center
* **Zoom Level:** 1-20 (default: 12)
* **Controls:** Toggle zoom, fullscreen, map type controls

***

#### Map Styling

**Design → Map Styling** - Choose from 3 styling methods:

**1. Preset Styles**

Built-in Google Maps themes:

* Silver, Dark, Night, Retro, Minimal, Aubergine

**2. Snazzy Maps**

Import custom JSON styles:

1. Browse [Snazzy Maps](https://snazzymaps.com/)
2. Copy JSON style code
3. Paste into **Custom JSON** field

**3. Builder Colors**

Simple color controls:

* **Land Color:** Landscape fill
* **Water Color:** Water bodies fill
* **Road Color:** Road fill
* **Label Color:** Label text color
* **Hide Labels:** Toggle to hide all labels

***

#### Markers

**Design → Markers**

**Global Markers**

Applied to all markers:

* **Custom Marker:** Upload image (32x32px recommended)
* **Active Marker:** Highlighted state image
* **Marker Size:** Width and height
* **Default Pin Color:** Google-style pin color (when no custom marker)

**Per-Location Markers (Manual mode)**

Override global markers per location in **Content → Locations → Location Items**

**Tip:** Use PNG with transparency for custom markers (or SVG)

***

#### Clustering

**Content → Clustering** - Group nearby markers at lower zoom levels

* **Enable Clustering:** On/Off
* **Cluster Radius:** Distance threshold (default: 60px)
* **Max Zoom:** Stop clustering at zoom level (default: 15)
* **Min Points:** Minimum markers to form cluster (default: 2)

**Design → Cluster Styling**

* **Cluster Style:** Classic or Ripple
* **Size Thresholds:** Small, medium, large marker counts
* **Colors:** Per-size cluster colors
* **Text:** Color and size

***

#### Infobox (Popup)

**Design → Infobox** - Customize marker popups

* **Width & Max Width:** Popup dimensions
* **Background Color:** Popup background
* **Padding:** Inner spacing
* **Borders:** Radius, width, color
* **Shadows:** Popup shadow

**Typography Controls:**

* **Title:** Heading typography
* **Subtitle:** Subheading typography
* **Content:** Body text typography

**Image:**

* **Width & Height:** Image dimensions
* **Aspect Ratio:** Image ratio
* **Border:** Image border radius and color

**Close Button:**

* **Size:** Button dimensions
* **Background:** Normal and hover colors
* **Border Radius:** Button roundness
* **Icon Color:** Normal and hover icon colors