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

Initiating the map component

Loading javascript

Add the following js to the page (header section for example).

<script src="https://maps.boxtal.com/app/v3/assets/js/boxtal-maps.js"></script>

Preparing the DOM

Insert an element in the DOM that will be able to host the map's iframe.

For example :

<div id="parcel-point-map"></div>

The component is responsive and the display adapts to the size dedicated to the DOM element that hosts it:

  • If the element is large enough, the list of parcel points is displayed to the right of the map.
  • If the element is not wide enough, but high enough, the list of parcel points is displayed below the map.
  • If the element is neither wide enough nor high enough, the list is not displayed and everything is done in the map.

Map initialization

In a js script (after loading the DOM), we initialize the map:

const boxtalMaps = new BoxtalMaps({
    domToLoadMap: '#parcel-point-map', // the selector corresponds to the element which must receive the map
    accessToken: token, // the token got via the authentication endpoint
    config: {
        locale: 'fr', // language used in UI, optional, possible values include fr or en
        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 nearest parcel point will be selected by default as soon as the search is performed
        },
    }
});

The list of networks supported by the component is as follows:

  • SOGP_NETWORK (Relais Colis).
  • MONR_NETWORK (Mondial Relay).
  • CHRP_NETWORK (Chronopost).
  • COPR_NETWORK (Colis Privé).
  • UPSE_NETWORK (UPS).
  • DHLE_NETWORK (DHL).