NAPC Demo  

Essayez gratuitement NAPContent sur notre site demo !

Devenez membre

 et bénéficiez de toutes nos solutions!

Devenez membre

Découvrez les sites

qui utilisent NAPContent !

Voir
plus

Map

Le champ Map permet de générer des Google Map avancé avec vos propres marqueurs et coordonnées. Il est possible sur un même item de créer plusieurs zones et plusieurs marqueurs.

La layout Champ liste permet quant à elle d'afficher tous les marqueurs et les zones appartenant à une liste d'items.

fieldmap edit01

Paramètres du plugin

Clé API : Saisir la clé de l'API GoogleMap pour utiliser le plugin. Plus d'informations pour générer une clé : https://developers.google.com/maps/documentation/javascript/get-api-key?hl=Fr

Catégories : Définit la liste des catégories pour regrouper vos marqueurs et vos zones. Les catégories peuvent être distinguées bien sûr par leur nom mais aussi par une couleur (uniquement pour les zones ) et par une image (uniquement pour les marqueurs) Respecter le format suivant : 
id::nom::couleur::image
Utiliser un saut de ligne pour chaque nouvelle valeur de catégorie. Utiliser le format hexa pour les couleurs : #000000. L'image du marqueur doit être une URL complète et au format PNG (limite de taille 64x64) : http://www.website.com/image.png. Les 2 premiers paramètres (id et nom) sont obligatoires

Affichage de Item, Liste, Module  et Liste Admin

Affiche une Google Map avec l'ensemble des marqueurs de l'item. S'il n'y a eu aucun marqueur ou zone de saisi, la map ne s'affichera pas. 

Au clic sur la zone ou le marqueur le titre et la description saisie apparaitrait via une infobulle. 

L'affichage de la carte sera automatiquement zoomé et centré en fonction des marqueurs et des zones saisies.

fieldmap display01

Largeur : Largeur de la carte qui peut être exprimée en % où en px.

Hauteur : Hauteur de la carte qui peut être exprimée en % où en px.

Afficher les filtres : Les filtres permettent d'afficher ou de masquer des marqueurs sur la carte selon les catégories configurées. Ils s'affichent par défaut sur la droite de carte. Cette option permet d'utiliser ou non cette fonction.

Scroll avec la souris : Permet d'activer ou de désactiver le scroll de la souris sur la Google Map

Style de la carte : Permet d'insérer un code Json qui permet de styliser votre Google Map. Créer votre propre style ici : https://mapstyle.withgoogle.com/ ou bien essayer un style déjà existant https://snazzymaps.com/ 

Affichage Champ Liste

Cet affichage vous permet de visualiser l'ensemble des marqueurs et zones sur une seule Google Map dans une vue liste. Les paramètres sont identiques à la vue par défaut, il y a cependant deux options supplémentaires.

Limiter à la liste courante : Définit si l'ensemble des marqueurs et zones à afficher sur la GoogleMap est limitée à la liste d'items courante (inclut tous les items sans tenir compte de la pagination) ou bien si l'affichage se fait en incluant l'ensemble des marqueurs et zones saisies via le champ.

Lien vers l'item : Ajoute un lien lire la suite après la description, dans l'infobulle de la zone ou du marqueur, qui permet d'accéder à l'item sur lequel l'information a été saisie. 

Affichage du Formulaire

Affiche une Google Map sur laquelle vous pouvez placer facilement vos marqueurs et dessiner vos zones.

fieldmap edit02

Ajouter un marqueur 

La zone "Chercher une adresse", vous permet de saisir rapidement une adresse afin de la géolocaliser. Une marqueur jaune apparait sur la carte. Ensuite vous avez la possibilité de glisser déposer le marqueur afin d'ajuster sa position. Vous verrez ensuite les coordonnées GPS apparaitre dans la zone nommée "Marqueur". Si le marqueur est correct, cliquez sur le bouton "Valider" située à droite de la zone "Marqueur", le marqueur changera d'icône et deviendra rouge. Votre marqueur est maintenant enregistré. Une nouvelle section s'ajoute en dessous de la carte, vous permettant de nommer votre marqueur, d'ajouter une description (possibilité de saisir du code html) et enfin de les classer dans une des catégories qui a été paramétrée.

Ajouter une zone 

Cliquez sur une des options de dessin qui se situe en bas à gauche de la Google Map (ligne, forme, cercle ou rectangle). Dessinez et placez ensuite la zone à votre convenance. Vous pouvez dessinez plusieurs zones à la fois avant d'enregistrer. Les zones peuvent être modifiées tant que vous ne les avez pas enregistrées. Pour supprimer une zone qui vient d'être créée et en cours d'édition, vous pouvez cliquer sur le bouton "X" qui se situe à côtés du libellé "Zone". Pour enregistrer la ou les zones qui viennent d'être dessinée, cliquez sur le bouton "Valider" qui se situe à côtés du libellé Zone. Les zones changeront alors de couleur. Vos zones sont maintenant enregistrées. Une nouvelle section s'ajoute en dessous de la carte, vous permettant de nommer vos zones, d'ajouter une description (possibilité de saisir du code html) et enfin de le classer dans une des catégories qui a été paramétrée.

Modifier les marqueurs et les zones existantes

Vous pouvez à tout moment modifier le titre, la description et la catégorie en cliquant sur le titre de la section qui se situe en dessous de la carte qui permet d'afficher/masquer ensuite les zones d'éditions. Vous pouvez également ensuite déplacer un marqueur ou bien modifier les zones sur la carte, en cliquant sur l'icône verte d'édition qui se situe sur la même ligne que le titre de la section que vous souhaitez éditer. Une fois que les modifications ont été faites cliquez sur ce même bouton afin de les enregistrer. 

Autres fonctions

Vous pouvez afficher / marquer les éléments sur la carte en cliquant sur le bouton gris "+" qui se situe au niveau du titre de la section.

Vous pouvez centrer la carte sur une des sections saisies en cliquant sur le bouton jaune avec un drapeau. 

Vous pouvez supprimer la totalité d'une section en cliquant sur le bouton rouge avec une corbeille. 

Les paramètres

Choisir une layout : Voir la gestion des layouts de formulaire

Utiliser la géolocalisation : Ne fonctionne que si votre site utilise le protocole HTTPS, permet de centrer la Google Map en fonction de votre position actuel.

Adresse par défaut : Saisir l'adresse par défaut pour centrer la Google Map lors de la saisi (si la géolocalisation n'est pas activée)

Zoom : Définit le niveau de zoom par défaut. Valeur pouvant aller de 0 à 19.

Utiliser Google Translator : Voir l'utilisation de Google Translator

Affichage du Filtre

Le filtre se fera en fonction de la liste des catégories paramétrées. (attention il n'y a pas d'interaction entre le filtre de la vue liste et les filtres de la Google Map que l'on peut afficher)

Valeur par défaut : Permet de sélectionner par défaut un filtre sur certaines valeurs. Saisir les différentes valeurs séparées par une virgule. 

Format du filtre : Voir l'utilisation des layouts de filtre

 

Voir aussi
×
Ce site utilise des cookies pour vous offrir le meilleur service. En continuant, vous acceptez de recevoir les cookies sur ce site.