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.

Map Configuration

Map Preview

Enter a parcel ID or coordinates to see the map preview

Examples

By Parcel ID

Embed a map using a specific parcel ID from our database.

ID: 12345
Shows: Property boundaries, address, road

By Coordinates

Embed a map using latitude and longitude coordinates.

Coords: 18.1096, -77.2975
Shows: Nearest parcel, location details

By Plus Code

Embed a map using Google's Open Location Code format.

Plus Code: F3MP+PP Montego Bay
Shows: Decoded location, parcel details

🔄 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

  • type: "id", "coordinates", or "pluscode" - How to identify the parcel
  • value: The parcel ID, coordinates (lat,lng format), or Plus Code
  • height: Map height (e.g., "400px", "100%")
  • width: Map width (e.g., "100%", "600px")
  • showPopup: "true" or "false" - Show clickable popups
  • showBoundaries: "true" or "false" - Show parcel boundaries
  • showRoad: "true" or "false" - Show road polylines
  • showAddressInfo: "true" or "false" - Show address information box
  • 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

Features

  • Interactive zoom and pan controls
  • Property boundary visualization
  • Clickable popups with property details
  • Multiple map styles (standard, satellite, hybrid)
  • Responsive design
  • No API key required
  • PostMessage communication for real-time events

Use Cases

  • Real estate websites
  • Property management systems
  • Government portals
  • Land surveying applications
  • Educational resources
  • Interactive property search and analytics