Start your integration with our map component now.

Getting started with the map component
Authenticating with the map component
Initiating the map component
Displaying parcel points with the map component
Updating the map component configuration
Create an app linked to your account

Displaying parcel points with the map component


Initiating the map component

To display parcel points, you must use the searchParcelPoints method.

The parcel point search method takes 2 parameters:

  • The address around which to search for the points.
  • the callback method to call when the user chooses a point.
const address = {
    country: 'FR', // iso code of the country pays
    zipCode: '75009',
    city: 'Paris',
    street: '4 boulevard des Capucines' // optional
    (parcelPoint) => console.log('iframe selected parcelPoint', parcelPoint)

If you want to display the map directly and search for parcel points, you must ensure that the map is loaded before starting the search. This can be done using the onMapLoaded property which will trigger the function it took on as soon as the map is loaded.

const boxtalMaps = new BoxtalMaps({
    domToLoadMap: '#parcel-point-map', // the selector corresponds to the element that must receive the map
    accessToken: token, // the token got via the authentication endpoint
    config: {
        parcelPointNetworks: [ // the list of networks to display
                code: 'CHRP_NETWORK', // network code, here the code for Chronopost
                markerTemplate: {
                    color: '#94a1e8' // it is possible to override the color of the marker for each network
        options: {
            primaryColor: '#00FA9A', // color of buttons (and markers if not overriden)
            autoSelectNearestParcelPoint: true // the closest parcel point will be selected by default as soon as the search is carried out
    onMapLoaded: () => {
            country: 'FR',
            zipCode: '75002',
            city: 'Paris'
        }, (parcelPoint) => console.log('iframe selected parcelPoint', parcelPoint));

function searchShipperParcelPoints(params) {
        (parcelPoint) => console.log('selected parcelPoint', parcelPoint)