Initiating the map component

Loading script

Using hosted version:

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

Downloading from npm:

npm install @boxtal/parcel-point-map

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).