1st October 2025 — Interactive Area Maps

build 297

This release introduces a comprehensive Interactive Area Maps feature that allows you to display geographical boundaries for walking groups on interactive maps. Users can explore group regions, view tooltips on hover, and click through to group websites or walks. The map below is a live map, not a screenshot.

Summary

• Interactive polygon maps showing geographical areas for each walking group
• Multiple map providers: OpenStreetMap and Ordnance Survey maps with various styles
• Customisable appearance: Configurable colors, opacity, zoom levels, and map positioning
• Real-time editing: Live preview of all map settings with instant visual feedback
• Responsive tooltips and popups: Hover to see group names, click polygons to visit group websites or view walks
• Flexible filtering: Display all groups or select specific groups to show on the map
• Multiple maps per page: Add as many area maps as needed with independent configurations
• No need for groups or areas to manually load data - everything is sourced from an internal GeoJSON database delivered as part of every NGX-Ramblers system. See Notes On Data Source for more information.

Configuration Guide

Before Area Maps can be created on your site, some configuration is required in order to map your area groups to districts and allocate polygon colours. This might sound complex, but the vast majority of this is done automatically and should only take a few minutes of tweaking.

Step 1: Configure Area Groups

• Navigate to: Admin → System Settings → Area Map Data tab

Area Groups Configuration

• When you first visit this page you will be prompted that no data exists and the screen will look like the screenshot below:

• In order to initiate the process, click Fetch Groups from Ramblers.
• This process queries the Ramblers API for group data for your area, and combines it with districts intelligently matched from the internal GeoJSON database. When Complete, the screen should appear similar to the screenshot below:

• The matching may not be perfect and might require some final adjustment/reallocation. So, for each walking group in your area, you need to:
  • Select Districts: Choose one or more geographical districts that represent the group's walking area
    • Use the dropdown to select from available districts
    • Multiple districts can be assigned to a single group by repeating the selection in the same field.
  • Assign Colours: Pick a colour for each group's polygon on the map
    • Each group gets a distinct colour to make regions easily identifiable
    • Colours are displayed as clickable colour pickers
  • Mark Non-Geographic Groups (optional):
    • Check the "Non-Geographic" checkbox for groups that don't cover a specific geographical area
    • Non-geographic groups won't appear on area maps

Step 2: Update Geographic Data

• Navigate to: Admin → System Settings → Area Map Data tab → Geographic Data section
• Even though the Area Groups Configuration is populated you will still see the following message that the Geographic data needs some setup:

• Once your groups are configured:
  • Update Data: Click Update Geographic Data to:
    • Fetch the latest boundary data from the internal GeoJSON database built into NGX-Ramblers.
    • Generate GeoJSON files combining districts into group regions
    • Process and store the geographic boundaries
  • Version Tracking: The current GeoJSON version is displayed (e.g. area-map/areas-2025-10-01-10-22-40.geojson)
  • Reset Option: Use Clear Geographic Data if you need to remove all map data and start fresh
  • Verify Status: Look for the green success message: "Area Map Active: Your area map is configured and ready to use." as shown in the screenshot below:

Adding Area Maps to Your Website Pages

Once you've followed the System Config steps above (it's a once only process), you can then add Area Maps on any page on your website with full control over appearance:

• Navigate to the page you want to add a group area map to.
• Enter Site Edit → Add Row → Select Row Type → Area Map
• You are then presented with a configuration screen similar to the following screenshot:

• Map Provider: Choose between:

  • OpenStreetMap: Free, community-maintained maps
  • OS Maps: Official Ordnance Survey mapping (requires API Key)
  • OS Map Style (when OS Maps selected):
    • OS Road, OS Outdoor, OS Light (this is a good choice for area maps)

• Zoom Level (slider: 5-18)

  • Adjust initial zoom level

• Map Height (slider: 300-900px)

  • Control the vertical size of the map

• Groups to Display

  • Leave empty to show all groups
  • Or select specific groups to display only certain areas

• Vertical (Latitude slider)

  • Move the map center up or down
  • Drag to reposition

• Horizontal (Longitude slider)

  • Move the map center left or right
  • Drag to reposition

• Normal Opacity (slider: 0.1-1.0)

  • Controls normal transparency of polygons (when not hovered over with mouse)
  • Lower values = more transparent

• Hover Opacity (slider: 0.1-1.0)

  • Controls transparency when hovering over polygons
  • Typically lower than normal so that you can more easily see the place names in that polygon when you hover

• Text Opacity (slider: 0.1-1.0)

  • Controls transparency of group name labels
  • Adjust for best readability

• Reset to Defaults: Restore all settings to default values

Live Preview

The Live Preview section shows your map exactly as it will appear on the published page:

• All changes update instantly
• Drag the map to adjust positioning (updates Vertical/Horizontal sliders)
• Zoom in/out (updates Zoom Level slider)
• Test tooltips and popups
• All slider changes reflect immediately on the preview

What You'll See

Once configured, your area map displays:

• Coloured Polygons: Each group's region shown in its configured colour
• Group Labels: Names positioned at the centre of each area
• Interactive Elements:
  • Tooltips: Hover over any polygon to see the group name in a floating tooltip
  • Popups: Click a polygon to see buttons for "visit group" and "view walks"
  • Keyboard Support: Press esc to close popups

Visual Features

• Semi-transparent polygons allow you to see the underlying map
• Labels with semi-transparent dark backgrounds for readability
• Smooth hover effects with increased opacity
• Zoom and pan controls for navigation

View Your Area Map

• After clicking Save page changes, exit site edit. Your page should look like below (which is actually a live map, not an image):

Exploring the Map

You can interact directly with the map above — try it! 🚀

1. Zoom: Use +/- buttons or mouse wheel to zoom in and out
2. Pan: Click and drag to move around the map
3. View Group Info: - Hover over any coloured area to see the group name - Wait 800ms for a popup with action buttons
4. Take Action: - Click "visit group" to go to the group's website - Click "view walks" to see upcoming walks for that group
5. Close Popups: Click the × button or press ESC key