Initier le composant carte

Chargement du javascript

Utilisation de la version hébergée :

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

Téléchargement à partir npm :

npm install @boxtal/parcel-point-map

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