Afficher les points relais avec le composant carte

Pour afficher les points relais, vous devez utiliser la méthode searchParcelPoints.

La méthode de recherche de points relais prend 2 paramètres :

• l’adresse autour de laquelle chercher les points ;
• la méthode callback à appeler lorsque l’utilisateur choisit un point.

const address = {
    country: 'FR', // iso code du pays
    zipCode: '75009',
    city: 'Paris',
    street: '4 boulevard des Capucines' // optionnel
};
boxtalMaps.searchParcelPoints(
    address,
    (parcelPoint) => console.log('iframe selected parcelPoint', parcelPoint)
);

Si l’on souhaite directement afficher la carte et chercher des points relais, il faut s’assurer que la carte est chargée avant de lancer la recherche. Cela peut se faire en utilisant la propriété onMapLoaded qui déclenchera la fonction qu’elle a pris en valeur dès que la carte sera chargée.

const boxtalMaps = new BoxtalMaps({
    domToLoadMap: '#parcel-point-map', // le sélecteur correspond à l'élément qui doit accueillir la carte
    accessToken: token, // le token via le endpoint d'authentification
    config: {
        parcelPointNetworks: [ // la liste de réseaux à afficher
            {
                code: 'CHRP_NETWORK', // code du réseau, ici le code pour Chronopost
                markerTemplate: {
                    color: '#94a1e8' // il est possible de surcharger la couleur du marker pour chaque réseau
                },
            }
        ],
        options: {
            primaryColor: '#00FA9A', // couleur des boutons (et des markers si pas surchargée)
            autoSelectNearestParcelPoint: true // le plus relais le plus proche sera sélectionné par défaut dès la recherche effectuée
        },
    },
    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)
    );
}