Commencez votre intégration avec notre composant carte sans plus attendre.
Démarrer avec le composant carte
S'authentifier avec le composant carte
Initier le composant carte
Afficher les points relais avec le composant carte
Mettre à jour la configuration du composant carte
Créer une application rattachée à votre compte
Afficher les points relais avec le composant carte
Prérequis
Initier 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)
);
}