How it works

When you initialize the map, you can provide a callback function. This function will be automatically called when the user clicks "Confirm Location" and their location is validated against your delivery zones. The callback receives a data object containing the coordinates, address information, and applicable zones.

The simplest way to set up a callback is to pass it when creating your map:

window.Dimappa.createMap('#map-container', {
  apiKey: 'your-api-key-here',
callback: function(locationData) {
console.log('Location confirmed:', locationData);
// Your code here to handle the location data
  },
});

You can also define your callback as a separate function for better organization:

function handleLocationConfirmed(locationData) {
// Process the location data
const { lat, lng, address, zones } = locationData;
// Update your form, calculate shipping, etc.
console.log('Latitude:', lat);
console.log('Longitude:', lng);
console.log('Address:', address);
console.log('Zones:', zones);
}

window.Dimappa.createMap('#map-container', {
apiKey: 'your-api-key-here',
callback: handleLocationConfirmed,
});

Callback Data Structure

Your callback function receives a single parameter with the following structure:

{
  lat: number,              // Latitude coordinate
  lng: number,              // Longitude coordinate
  address: {                // Address information
city?: string,          // City name
address?: string,       // Street address
state?: string,         // State/Province
zipcode?: string,       // ZIP/Postal code
country?: string        // Country name
  },
  zones: [                  // Array of applicable delivery zones
    {
id: string,          // Zone ID
name: string,         // Zone name
rate: number | null   // Zone rate (if set)
    }
]
}

Example Use Cases:

Populating checkout fields

callback: function(locationData) {
document.getElementById('latitude').value = locationData.lat;
document.getElementById('longitude').value = locationData.lng;
document.getElementById('address').value = locationData.address.address || '';
document.getElementById('city').value = locationData.address.city || '';
document.getElementById('zipcode').value = locationData.address.zipcode || '';
}

Display Zone Rate information on your site.

callback: function(locationData) {
if (locationData.zones && locationData.zones.length > 0) {
const shippingCost = locationData.zones[0].rate || 0;
updateShippingCost(shippingCost);
  }
}

Important Notes

The callback is only called when a user successfully confirms a location that is within your configured delivery zones.
If the location is outside all zones, the callback will not be called.
Some address fields may be `undefined` if they're not available—always check for their presence before using them.
All examples above are displayed in Javascript but can be adapted for other languages as well.

Setup your Callback function