Overlays (KML, polygons, polylines…)

Overlays add geographic context on top of your markers: official KML layers, custom polygons and lines, ground images, map holes, heatmaps, and optional OpenStreetMap styling layers.

Most overlays are configured per map under Progress Map settings. Drawing shapes in admin uses Terra Draw.

KML / KMZ layers

Display industry-standard KML/KMZ files (territories, transit, boundaries).

Typical capabilities:

  • Add one or more KML/KMZ URLs or files
  • Show a layers list on the map so visitors toggle visibility
  • Hide all KML layers on first load
  • Optionally connect a KML layer to a post so its visibility follows that post’s visibility on the map

Host KML files on HTTPS-accessible URLs. Huge KML files can slow initial map load — simplify geometry when possible.

Polygons

Draw filled shapes for districts, delivery zones, campuses, etc.

Workflow summary:

  1. Enable draw polygon option for the map.
  2. Add polygon entries (label, unique ID).
  3. Define paths via post IDs, coordinate lists, or draw in admin with Terra Draw.
  4. Set style (fill, stroke, opacity, z-index, geodesic).
  5. Optionally make the polygon clickable (URL, description / infowindow, viewport change on click, hover style).
  6. Optionally bind visibility to a related post.

See Terra Draw for drawing and reversing coordinates.

Polylines

Lines for paths, trails, or schematic routes.

  • Draw or paste coordinates
  • Clickable polylines with optional redirection / info
  • Post-linked visibility
  • Dedicated routes options where available for route-style displays

For turn-by-turn UX for visitors, also consider the Directions module and the [cspm_route_map] shortcode.

Ground overlays

Render an image georeferenced on the map (floor plans, historical maps, festival layouts).

  1. Provide the image.
  2. Set bounds (often by drawing a rectangle with Terra Draw).
  3. Optionally link visibility to a post.

Keep images optimized; very large PNGs hurt mobile performance.

Map holes

Create a masked map with “holes” cut out — useful for highlighting allowed regions while dimming the rest.

  • Add hole geometries
  • Style the fill outside holes

Draw holes carefully and verify coordinates like polygons.

Heatmap layer

Visualize density of your locations.

  • Enable heatmap
  • Tune radius, opacity, and other parameters
  • Customize the color gradient

Excellent companion to search maps so the map communicates “where things are” before filters return pins. Also available among Map settings layer toggles.

OpenStreetMap

Ultimate can present an OpenStreetMap-oriented layer option for teams that want OSM cartography in supported configurations. Use when it matches your product/legal preferences; otherwise stick to standard Google base maps and custom JSON styles.

Design tips

  1. Don’t stack every overlay type on one map — visitors drown in chrome.
  2. Give polygons clear labels and modest opacity so markers stay readable.
  3. Prefer KML for data maintained outside WordPress; prefer polygons for editor-managed zones.
  4. After editing overlays, purge caches and test zoomed-in and zoomed-out.

Next steps

Top