Displaying parcel points with 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
};
boxtalMaps.searchParcelPoints(
    address,
    (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 BoxtalParcelPointMap({
    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: () => {
        this.searchShipperParcelPoints({
            country: 'FR',
            zipCode: '75002',
            city: 'Paris'
        }, (parcelPoint) => console.log('iframe selected parcelPoint', parcelPoint));
    }
});

function searchShipperParcelPoints(params) {
    boxtalMaps.searchParcelPoints(
        params,
        (parcelPoint) => console.log('selected parcelPoint', parcelPoint)
    );
}