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

Initier le composant carte

Chargement du javascript

Ajouter le js suivant dans la page (section header par exemple).

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

Préparation du DOM

Insérer un élément dans le DOM qui sera en mesure d’accueillir l’iframe de la carte.

Par exemple :

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

Le composant est responsive et l’affichage s’adapte à la taille dédiée à l'élément du DOM qui l’accueille :

  • si l'élément est suffisamment large, la liste des points relais s’affiche à droite de la carte ;
  • si l'élément n’est pas assez large, mais assez haut, la liste des points relais s’affiche en-dessus de la carte ;
  • si l'élément n’est ni suffisamment large, ni suffisamment haut, la liste ne s’affiche pas et tout se fait dans la carte.

Initialisation de la carte

Dans un script js (après chargement du DOM), on initialise la carte :

const boxtalMaps = new BoxtalMaps({
    domToLoadMap: '#parcel-point-map', // le sélecteur correspond à l'élément qui doit accueillir la carte
    accessToken: token, // le token récupéré via le endpoint d'authentification
    config: {
        locale: 'fr', // langue de l'interface, optionnel, valeurs possibles fr ou en
        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
        },
    }
});

La liste des réseaux pris en charge par le composant est la suivante :

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