Developer Tools

Embed Jamaica parcel maps on your website with our easy-to-use embeddable HTML code. Similar to Google Maps, but specifically designed for Jamaican property boundaries.

Custom Markers Configuration

📍 Custom Markers Configuration

Enter a URL to a JSON file or paste JSON data directly.
Leave empty to use default Jamaica center. Format: latitude,longitude (e.g., 18.1096,-77.2975)
Choose the initial zoom level for the map
Desktop: Always visible sidebar. Mobile: Floating button to toggle list.
When enabled, markers will be displayed individually without clustering. Useful for small numbers of markers.

Map Preview

Examples

Restaurant Directory

Show restaurants with menus, contact info, and directions.

Features: Click to call, hours, descriptions
Perfect for: Food delivery, tourism

Hotel Booking

Display hotels with booking links and amenities.

Features: Booking URLs, room types, prices
Perfect for: Travel agencies, booking sites

Business Directory

List local businesses with contact information.

Features: Phone numbers, addresses, categories
Perfect for: Chambers of commerce, directories

🔄 PostMessage Communication

Enable real-time communication between your website and the embedded map. Receive events when users interact with the map and build rich, interactive experiences.

Basic Implementation

// Listen for events from the embedded map
window.addEventListener('message', (event) => {
  // Security check: only accept from CaptureLand
  if (event.origin !== 'https://captureland.org') return;
  
  const { type, data } = event.data;
  
  switch (type) {
    case 'map_click':
      console.log('Map clicked at:', data.coordinates);
      break;
    case 'marker_click':
      console.log('Property clicked:', data.parcelData.id);
      break;
    case 'directions_click':
      console.log('Directions requested for:', data.coordinates);
      break;
  }
});

Available Events

🗺️

map_click

User clicks anywhere on the map

data.coordinates
📍

marker_click

User clicks on property marker

data.parcelData
🔷

polygon_click

User clicks on property boundary

data.coordinates
🛣️

road_click

User clicks on road feature

data.roadName
🎨

map_style_change

User changes map style

data.mapStyle
📍

directions_click

User requests directions

data.coordinates

Advanced Example

Here's a complete example showing how to integrate postMessage events:

📥 Download Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>Interactive Map Example</title>
</head>
<body>
    <div id="map-container">
        <iframe 
            src="https://captureland.org/embed/map?type=id&value=12345&showPopup=true&showBoundaries=true"
            width="100%" 
            height="400" 
            frameborder="0"
            allowfullscreen>
        </iframe>
    </div>
    
    <div id="events-log"></div>
    
    <script>
        const eventsLog = document.getElementById('events-log');
        
        window.addEventListener('message', (event) => {
            if (event.origin !== 'https://captureland.org') return;
            
            const { type, data } = event.data;
            
            // Log the event
            const eventDiv = document.createElement('div');
            eventDiv.innerHTML = `<strong>${type}</strong> at ${new Date().toLocaleTimeString()}<br><pre>${JSON.stringify(data, null, 2)}</pre>`;
            eventsLog.insertBefore(eventDiv, eventsLog.firstChild);
            
            // Handle specific events
            switch (type) {
                case 'map_click':
                    updateCoordinatesDisplay(data.coordinates);
                    break;
                case 'marker_click':
                    showPropertyDetails(data.parcelData);
                    break;
                case 'directions_click':
                    openDirections(data.coordinates);
                    break;
            }
        });
        
        function updateCoordinatesDisplay(coordinates) {
            console.log('Coordinates:', coordinates);
        }
        
        function showPropertyDetails(parcelData) {
            console.log('Property:', parcelData);
        }
        
        function openDirections(coordinates) {
            const [lat, lng] = coordinates;
            window.open(`https://maps.google.com/maps?q=${lat},${lng}`);
        }
    </script>
</body>
</html>

Use Cases

📊 Analytics Tracking

Track user interactions for analytics and insights

trackEvent('property_click', { parcelId, coordinates })

🔍 Property Search

Search for nearby properties when users click on map

searchNearbyProperties(coordinates)

🎯 Custom UI Updates

Update your UI based on map interactions

updatePropertyPanel(parcelData)

🧭 Navigation Integration

Integrate with your navigation system

openInYourNavigationApp(coordinates)

🔒 Security Considerations

Always validate the message origin:

if (event.origin !== 'https://captureland.org') {
  console.warn('Rejected message from untrusted origin:', event.origin);
  return;
}

Validate message structure:

if (!data || typeof data.type !== 'string' || !data.timestamp) {
  console.warn('Invalid message structure:', data);
  return;
}

📍 Custom Markers

Add your own points of interest to the map with rich information, distance calculations, and interactive features.

🎨 Custom SVG Icons

Unique visual markers for different location types

📏 Real-time Distance

Calculated from user's current location

📞 Interactive Actions

Click to call, navigate, or open URLs

💬 Rich Tooltips

Detailed information on hover/click

Basic Implementation

<iframe 
  src="https://captureland.org/embed/map?showCustomMarkers=true&customMarkers=https://example.com/markers.json"
  width="100%" 
  height="400" 
  frameborder="0"
  allowfullscreen>
</iframe>

JSON Format

{
  "markers": [
    {
      "id": "restaurant-1",
      "name": "Jamaican Delights Restaurant",
      "phone": "+1 (876) 555-0123",
      "address": "123 Montego Bay Drive, Montego Bay, Jamaica",
      "description": "Authentic Jamaican cuisine featuring jerk chicken and ackee and saltfish.",
      "coordinates": [18.4712, -77.9188],
      "hours": "Mon-Sat 11 AM - 10 PM, Sun 12 PM - 9 PM",
      "callbackAction": "call",
      "color": "#e74c3c",
      "size": "medium",
      "icon": "<svg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z' fill='#e74c3c' stroke='white' stroke-width='1'/><circle cx='12' cy='9' r='2.5' fill='white'/></svg>"
    }
  ]
}

Field Descriptions

FieldTypeRequiredDescription
idstringYesUnique identifier for the marker
namestringYesDisplay name of the location
phonestringNoPhone number for contact
addressstringYesFull address of the location
descriptionstringNoDetailed description
coordinates[number, number]Yes[latitude, longitude]
hoursstringNoOperating hours (human-readable)
callbackUrlstringNoURL to open when clicked
callbackActionstringNoAction to perform ("call", "navigate")
colorstringNoMarker color (hex code)
sizestringNoMarker size ("small", "medium", "large")
iconstringNoCustom SVG icon

URL Parameters

showCustomMarkers=true          // Enable custom markers
customMarkers=URL_OR_JSON        // JSON data or URL
showMarkerDistances=true         // Show distance from user location

Example Use Cases

🏨 Hotel Booking

Show nearby hotels with booking links

callbackUrl: "https://booking.com/hotel-123"

🍽️ Restaurant Directory

Display restaurants with menus and reservations

callbackAction: "call"

🏥 Healthcare Services

Show hospitals, clinics, and pharmacies

hours: "24/7 Emergency Care"

🏦 Business Directory

List local businesses with contact info

callbackAction: "navigate"

Complete Example

📥 Download Example JSON

<!DOCTYPE html>
<html>
<head>
    <title>Custom Markers Example</title>
</head>
<body>
    <div id="map-container">
        <iframe 
            src="https://captureland.org/embed/map?showCustomMarkers=true&customMarkers=https://example.com/markers.json&showMarkerDistances=true"
            width="100%" 
            height="400" 
            frameborder="0"
            allowfullscreen>
        </iframe>
    </div>
    
    <script>
        window.addEventListener('message', (event) => {
            if (event.origin !== 'https://captureland.org') return;
            
            const { type, data } = event.data;
            
            if (type === 'custom_marker_click') {
                console.log('Custom marker clicked:', data.markerData.name);
                // Handle custom marker interaction
            }
        });
    </script>
</body>
</html>

💡 Tips & Best Practices

  • Coordinate Format: Use [latitude, longitude] format consistently
  • Validation: Ensure coordinates are valid (lat: -90 to 90, lng: -180 to 180)
  • Performance: Limit to 50-100 markers for optimal performance
  • Icons: Use inline SVG for reliability, avoid external URLs
  • Colors: Choose colors that contrast well with the map
  • Actions: Use appropriate callback actions for better UX

Documentation

Parameters

  • height: Map height (e.g., "400px", "100%")
  • width: Map width (e.g., "100%", "600px")
  • mapStyle: "standard", "satellite", or "hybrid"
  • showCustomMarkers: "true" or "false" - Enable custom markers
  • customMarkers: JSON data or URL - Custom markers data
  • showMarkerDistances: "true" or "false" - Show distance from user location
  • showMarkerList: "true" or "false" - Show marker list drawer
  • customMarkersCenter: "lat,lng" - Map center coordinates
  • customMarkersZoom: number - Initial zoom level (8-15)

Features

  • Interactive zoom and pan controls
  • Custom SVG markers with rich information
  • Clickable popups with location details
  • Multiple map styles (standard, satellite, hybrid)
  • Responsive design
  • No API key required
  • PostMessage communication for real-time events
  • Distance calculations from user location
  • Marker list with search and filtering
  • Smart marker clustering with phantom number prevention

Clustering Behavior

  • Default: Markers are clustered when they are close together
  • Disable Clustering: Use the "Disable marker clustering" option for small numbers of markers (2-5) to prevent phantom numbers
  • Performance: Clustering is automatically optimized for large numbers of markers
  • Zoom Levels: Clustering is disabled at zoom level 18+ for detailed view

Use Cases

  • Restaurant and food delivery directories
  • Hotel and accommodation booking sites
  • Business directories and chambers of commerce
  • Tourism and travel websites
  • Healthcare and service provider listings
  • Interactive location-based services