How to Use Map View

This guide covers how to effectively use the map view to visualize leads and work with territories.

This guide covers how to effectively use the map view to visualize leads and work with territories.

Map Technology

Sellfaster uses MapLibre GL with OpenFreemap tiles to display leads geographically. The map provides:

  • Interactive pan and zoom
  • Lead markers with state indicators
  • Zone overlays
  • Clustering for large datasets

Accessing Map View

Campaign Map

  1. Navigate to a campaign
  2. Go to /home/[team]/projects/[campaign]/map
  3. View all campaign leads on the map

Personal Leads Map

  1. Navigate to /home
  2. Find the map view for your personal leads across all campaigns

Basic Navigation

Panning

Move around the map:

ActionHow
Mouse dragClick and drag to pan
TouchSwipe on mobile

Zooming

Adjust the view:

ActionHow
Scroll wheelScroll up/down to zoom
Zoom buttonsClick +/- controls
Double-clickDouble-click to zoom in
PinchPinch gesture on mobile

Understanding Markers

Marker Colors

Markers are color-coded based on interaction state:

ColorState
Red (#ef4444)Closed - lead has keep_open: false
Yellow (#eab308)Appointment Pending - has follow_up: true
Green (#22c55e)Open - has keep_open: true
Gray (#6b7280)No Interaction recorded

Apartment Building Markers

Buildings with multiple units display differently:

  • Donut chart visualization showing unit distribution
  • Segments show: Sold, Closed, Follow-up, Other units
  • Unit count displayed in center
  • Click to see full unit breakdown

Marker Clustering

When zoomed out or viewing many leads:

  • Nearby markers cluster together
  • Cluster shows total count
  • Click cluster to zoom in (zoom +2 levels)
  • Cluster colors indicate density:
    • Blue: < 10 points
    • Yellow: 10-100 points
    • Pink: > 100 points
  • Clustering enables automatically when 50+ leads visible
  • Clusters appear at zoom levels < 15

Interacting with Leads

Viewing Lead Info

Click a marker to see a popup with:

  • Street lead
  • Campaign name
  • Zone name (with "Auto-assigned" badge if applicable)
  • Unit breakdown for buildings
  • Interaction state badge
  • "View Details" button

Hover Behavior

  • Hovering on markers shows tooltip
  • Hovering on zone boundaries highlights them
  • Zone opacity increases to 0.5 on hover

Click "View Details" to go to the full lead page at: /home/[account]/projects/[campaign]/addresses/[lead]

Filtering the Map

Filter Panel

The campaign map includes a filter panel with tabs:

  1. Zone Filter - Show/hide specific zones
  2. Interaction Filter - Filter by interaction state
  3. Sales Filter - Filter by product and sale state

Available Filters

FilterDescription
ZoneCheckbox selection of multiple zones
Interaction StateFilter by configured states
ProductFilter sales by product
Sale StateFilter by sale state
Date RangeStart and end date pickers

Visibility Toggles

Toggle display of:

  • Zones (show/hide zone overlays)
  • Interactions (filter interaction markers)
  • Sales (filter sale markers)

Lead Source

Switch between:

  • Campaign leads only
  • All account leads

Working with Zones

Viewing Zones

Zones display as colored polygon overlays:

  • Each zone has a distinct fill color
  • Zone boundaries show on hover with increased opacity
  • Zone outlines are 2px (3px on hover)

Zone Information

Click a zone to see:

  • Zone name
  • Zone color
  • Lead count within zone

Zone Display

Zones are rendered as GeoJSON features supporting:

  • Polygon shapes
  • MultiPolygon shapes

Viewport-Based Loading

The map uses intelligent loading for performance:

  • Leads load based on visible map bounds
  • 500ms debounce prevents excessive loading
  • Data merges as you pan (doesn't reload everything)
  • Activity indicators show leads with interactions/sales

Map Legend

The legend shows:

  • Marker color meanings (Closed, Appointment, Open, No Interaction)
  • Apartment building indicator
  • Can be toggled on/off

Map Statistics

The map displays:

  • Total leads shown
  • Clusters shown (when clustering enabled)
  • Total data points

Tips for Effective Map Use

Visual Planning

  1. Color scanning - Quickly identify states by color
  2. Cluster awareness - Zoom into dense areas for detail
  3. Zone organization - Work within assigned zones
  4. Filter usage - Show only relevant leads

Performance

For better performance:

  1. Use filters to reduce visible leads
  2. Zoom into your working area
  3. Filter by zone to limit data
  4. Clustering helps with large datasets

Daily Workflow

  1. Morning review - View your territory
  2. Identify targets - Find leads by state/color
  3. Work by area - Focus on one zone at a time
  4. Track progress - Watch colors change as you work

Troubleshooting

Leads Not Showing

If markers don't appear:

  1. Check active filters
  2. Zoom out to see all markers
  3. Verify leads have coordinates (latitude/longitude)
  4. Refresh the page

Map Not Loading

If map won't load:

  1. Check internet connection
  2. Clear browser cache
  3. The map has retry logic (up to 10 attempts)
  4. Try a different browser

Wrong Location

If leads are misplaced:

  1. Check the original lead entry
  2. Lead may need geocoding correction
  3. Verify coordinates are accurate

Slow Performance

If map is slow:

  1. Apply filters to reduce visible leads
  2. Zoom into a smaller area
  3. Clustering should enable automatically
  4. Close other browser tabs

Technical Details

Map Configuration

  • Tile provider: OpenFreemap (Liberty style)
  • Library: MapLibre GL via react-map-gl
  • Data format: GeoJSON for zones and clustering
  • Clustering threshold: 50+ leads
  • Cluster zoom threshold: < zoom level 15

Viewport Loading

  • Debounce: 500ms on viewport changes
  • Data merging: Preserves existing data when panning
  • Cleanup: Proper unmount handling