Dépendance de gestion de Google Maps / Store Locator Adeliom
$ yarn add agence-adeliom/adeliom-map-jsimport AdeliomMap from "adeliom-map-js/src/js/AdeliomMap";
document.addEventListener('DOMContentLoaded', () => {
const paramsArray = {...};
const adeliomMap = new AdeliomMap(paramsArray);
});[js-map] : container de la map
[js-map-list] : container de la liste d'éléments
[js-map-list-id] : élément de liste généré statiquement (fournir la propriété listEltId au marker associé)
apiKey (string) : clé API de la map
mapSelector (string) : sélecteur CSS du container de la map
mapListSelector (string) : sélecteur CSS du container de la lise des points
mapCustomZoomMinusSelector : sélecteur CSS d'un élément allant servir de bouton zoom -
mapCustomZoomPlusSelector sélecteur CSS d'un élément allant servir de bouton zoom +
placesSelector (string) : sélecteur CSS de l'input utilisé pour l'autocomplete
placesOptions (object) : objet d'options pour l'autocomplete
placesMapOptions (object) : objet d'options pour l'association champ autocomplete / map
checkMapSize (bool) : vérifie si la map a bien une hauteur/largeur
mapDefaultCenter ({lat: x, lng: y}) : centre par défaut de la map
mapAutoCenter (bool) : indique si la map doit centrer automatiquement sur l'ensemble des coordonnées
mapAutoZoom (bool) : zoom automatique de la map lors du centrage automatique afin de rendre tous les marqueurs visibles
mapDefaultZoom (int) : zoom par défaut de la map
mapProvider (string) : fournisseur de la map (seulement google pour le moment)
mapShowPlaces (bool) : afficher ou non les marqueurs de lieux (peut être surchargé par mapCustomStyles)
mapType (string) : indique le type de carte souhaité (roadmap, satellite, hybrid, terrain)
mapCustomStyles (array) : tableau de styles personnalisés à appliquer à la map
markerIconCentered (bool) : indique si l'icône du marqueur doit être centrée (utile si ronde)
clusterIconCentered (bool) : indique si l'icône du cluster doit être centrée (utile si ronde)
mapEnableZoomButtons (bool) : afficher ou non les boutons de zoom
mapEnableStreetView (bool) : afficher ou non le bouton StreetView
mapEnableFullscreenButton (bool) : afficher ou non le bouton plein écran
mapEnableTypeButtons (bool) : afficher ou non les boutons de type de map
mapDisplayScale (bool) : afficher ou non une échelle graduée au bas de la map
mapMarkers (array) : tableau des markers à afficher
mapDisplayMarkers (bool) : la map doit-elle afficher les marqueurs
mapCenterMarkerOnClick (bool) : centre la map sur le marqueur au clic
mapZoomMarkerOnClick (int|bool) : zoom la map au clic sur un marqueur
mapAnimation (string) : type d'animation de transition entre positions dans la map (smooth / default)
mapAllowMultipleMarkersSelected (bool) : si plusieurs marqueurs peuvent être sélectionnés en simultané
mapMarkerIconUrl (string) : URL vers l'icône du marker
mapMarkerHoveredIconUrl (string) : URL vers l'icône survolée du marker
mapMarkerSelectedIconUrl (string) : URL vers l'icône sélectionnée du marker
mapMarkerIconSize (int) : Taille des icônes de marqueurs
mapHideMarkerOnClickOutside (bool) : Indique si les marqueurs doivent se fermer au click sur la carte (en dehors du
marqueur)
mapPolylines (array) : tableau de polylines à afficher
mapPolylines: [
{
closeShape: false,
strokeColor: '#dd00ff',
strokeWeight: 4,
strokeOpacity: .5,
coordinates: [
{lat: 48.5911443, lng: 7.7411831},
{lat: 48.6148307, lng: 7.7137141},
],
},
{
closeShape: true,
strokeColor: '#ff0000',
strokeWeight: 4,
strokeOpacity: 1,
coordinates: [
{lat: 48.5807382, lng: 7.7382374},
{lat: 48.5855077, lng: 7.743516},
{lat: 48.5868846, lng: 7.743516},
{lat: 48.583705, lng: 7.7561331},
{lat: 48.5800426, lng: 7.7514982},
{lat: 48.5798013, lng: 7.7434945},
],
}
]mapUseClusters (bool) : indique si la map doit générer des clusters lorsque les points sont suffisamment
rapprochés
mapClusterParams (object[]) : Tableau d'objets contenant des paramètres de clusters
mapClusterParams: [
// Avec icône PNG
{
icon: "/dist/img/cluster.png", // Icône du cluster (optionnel)
hoverIcon: "/dist/img/cluster-hovered.png", // Icône du cluster au survol (optionnel)
size: 40, // Taille de l'icône (optionnel)
from: 0, // Nombre de points regroupés à partir duquel ces paramètres sont utilisés
},
// Sans icône PNG
{
size: 56, // Taille de l'icône (optionnel)
from: 3, // Nombre de points regroupés à partir duquel ces paramètres sont utilisés
defaultIconColor: "#FF0000", // Couleur de l'icône par défaut du cluster (optionnel)
defaultIconHoverColor: "#FF00FF", // Couleur de l'icône par défaut du cluster au survol (optionnel)
}
]mapInfoWindowTemplate (string) : template HTML de l'infobulle d'un marqueur
mapDisplayInfoWindows (bool) : la map doit-elle afficher les infobulles
mapInfoWindowReplaceWithMarkerData (bool) : permet de remplacer les données du template par des données du marqueur (
si le marqueur contient une propriété title, mettre des balises {{ title }} dans le template)
mapListEltTemplate (string) : template HTML d'un élément de la liste des points
mapListReplaceWithMarkerData (bool) : permet de remplacer les données du template par des données du marqueur (si le
marqueur contient une propriété title, mettre des balises {{ title }} dans le template)
mapAskForConsent (bool) : indique si la map doit demander le consentement de l'utilisateur
mapConsentDefaultValue (bool) : valeur par défaut pour le consentement (permet d'initialiser directement la map si
consentement déjà donné)
mapConsentButtonMessage (string) : message affiché dans le bouton de consentement
mapConsentButtonClass (string) : permet de renseigner des classes au bouton de consentement
mapConsentScreenClass (string) : permet de renseigner des classes à l'écran de consentement de la map
mapUsePiwik (bool) : indique si la map doit utiliser Piwik pour le consentement
mapPiwikConsentKey (string) : indique la clé de consentement à utiliser pour afficher ou non la map (par défaut
à analytics)
piwikButtonSelectors (object) : permet de configurer les sélecteurs des boutons de
Piwik (acceptAll, rejectAll, saveChoices)
mapDefaultCenter: {
lat: 48.614782,
lng: 7.714012
},
mapMarkers: [
{
title: 'Agence Adeliom',
description: 'Agence Digitale',
coordinates: {
lat: 48.614782,
lng: 7.714012,
},
icon: 'https://...', // override l'icon par défaut
iconSize: 32,
iconCentered: false,
selectedIcon: 'https://...', // override l'icon selected par défaut
infoWindowTemplate: '<div class="map-infowindow-elt">Test template</div>',
listEltTemplate: 'Test 2',
},
{
title: 'Cathédrale de Strasbourg',
description: 'Lieu touristique',
coordinates: {
lat: 48.581825,
lng: 7.75093,
}
},
// Les faux clusters permettent de regrouper virtuellement des points indissociables les uns des autres
{
title: 'Faux cluster',
description: 'Description du faux cluster',
iconSize: 32,
isFakeCluster: true,
fakeClusterMarkers: [
{
title: 'Lyon',
description: 'Ville de Lyon',
coordinates: {
lat: 45.764043,
lng: 4.835659,
}
},
{
title: 'Dijon',
description: 'Ville de Dijon',
coordinates: {
lat: 47.322047,
lng: 5.04148,
}
},
{
title: 'Montpellier',
description: 'Ville de Montpellier',
coordinates: {
lat: 43.610769,
lng: 3.876716,
}
}
]
}
],
Il est possible d'utiliser l'objet AdeliomMapEvents afin de récupérer les différents événements disponibles.
// Instanciation de l'AdeliomMap
const adeliomMap = new AdeliomMap({});
// Catch d'un événement et exécution de code
adeliomMap.on('eventName', (data) => {
console.log(data);
});mapHasAutoCentered : indique que la carte a été centrée automatiquement
mapLoaded : indique que la carte est complètement chargée
mapReset : indique que la carte a été réinitialisée
mapCleared : indique que la carte a été vidée
mapTypeChanged : indique que le type de carte a été changé
mapCustomMinusZoom : indique que le zoom a été diminué via le bouton custom
mapCustomPlusZoom : indique que le zoom a été augmenté via le bouton custom
mapCustomZoom : indique que le zoom a été modifié via un bouton custom
mapHasBeenDragged : indique que la map a été déplacée via un drag & drop
markerCreated : Retourne l'instance d'un marqueur Google Maps lorsqu'il vient d'être créé.
markerDataCreated : Retourne les données d'un marqueur lorsqu'il vient d'être intégralement créé (marqueur, infobulle
et élément de liste).
markerClicked : Retourne les données d'un marqueur lorsque l'on clique dessus.
markerGeolocationClicked : Indique que le marqueur de position GPS a été cliqué.
markerGeolocationRemoved : Indique que le marqueur de position GPS a été supprimé.
allMarkerUnselected : Indique que tous les marqueurs ont été désélectionnés.
infoWindowCreated : Retourne les données d'un marqueur lorsqu'une infobulle a été créée.
listEltCreated : Retourne les données d'un marqueur lorsqu'un élément de liste vient d'être créé.
listEltClicked : Retourne les données d'un marqueur lorsque l'on clique sur un élément de liste.
consentButtonClicked : Est émit lorsque le bouton de consentement de la map est cliqué.
mapConsentNotGiven : Est émit lorsque le consentement de la map n'a pas été donné (même au chargement).
mapConsentGiven : Est émit lorsque le consentement de la map a été donné (même au chargement).
acceptAllClicked : Est émit lorsque le bouton "Tout accepter" de Piwik est cliqué
rejectAllClicked : Est émit lorsque le bouton "Tout refuser" de Piwik est cliqué
saveChoicesClicked : Est émit lorsque le bouton "Enregistrer les choix" de Piwik est cliqué
clustersEnabled : Est émit lorsque les clusters ont été activés (à l'init et à l'activation manuelle)
clustersDisabled : Est émit lorsque les clusters ont été désactivés
selectedPlaceHasBeenCentered : Est émit lorsque le lieu choisit via le champ autocomplete est centré sur la map
selectedPlaceHasBeenFound : Est émit lorsque les données du lieu choisit via le champ autocomplete sont récupérées
fieldHasBeenFocused : Est émit lorsque le champ autocomplete est focus
fieldHasBeenBlurred : Est émit lorsque le champ autocomplete n'est plus focus
geolocationSuccess : Est émit lorsque le navigateur a bien renvoyé des coordonnées GPS
geolocationError : Est emit lorsque le navigateur n'a pas pu renvoyer des coordonnées GPS
geolocationCentered : Est émit lorsque la carte a été centrée sur les coordonnées de l'utilisateur
_setConsent (bool) : Permet d'indiquer dynamiquement l'état de consentement de l'utilisateur
_addMarkers (array|object) : Permet d'ajouter dynamiquement des marqueurs à la map
_addPolylines (array|object) : Permet d'ajouter dynamiquement des polylines à la map
_removeMarkers (array|object) : Permet de supprimer dynamiquement des marqueurs à la map
_getAllCurrentMarkersRawData (void) : Permet de récupérer l'ensemble des données brutes de marker sur la map
_disableClusters (void) : Permet de désactiver l'affichage en clusters s'il est activé
_enableClusters (void) : Permet d'activer l'affichage en clusters s'il n'est pas activé
_geolocateOnMap (number|bool) : Permet de centrer la carte sur la position GPS de l'utilisateur (avec ou sans marqueur)
_removeGeolocationMarker (void) : Permet de supprimer le marqueur de position GPS (s'il existe sur la carte)
_clearMap (void) : Permet de supprimer tous les marqueurs de la carte
_resetMap (void) : Permet de réinitialiser la map avec ses marqueurs / clusters
_setZoom (number) : Permet de régler le niveau de zoom de la map
_setCenter ({lat,lng}) : Permet de régler le centre de la map
_setMapType (string) : Permet de régler dynamiquement le type de carte (roadmap, satellite, hybrid, terrain)
_zoomPlus (void) : Enclenche un zoom positif sur la carte
_zoomMinus (void) : Enclenche un zoom négatif sur la carte
_unselectAllMarkers (void) : Dé-sélectionne l'ensemble des marqueurs ouverts (et ferme les infoWindows)
_setStyle (object) : Permet de régler dynamiquement le style de la map
_fitAllMarkers (void) : Permet de faire tenir l'ensemble des marqueurs dans la map