Affichage de logo dans la popup

Utiliser uMap & Framacarte: créer / diffuser des cartes en
#1

Bonjour, je débute avec l’utilisation d’uMap, donc ma question va peut-être donner lieu à une évidence, mais elle m’échappe.

Voici où j’en suis : http://www.collection-appareils.fr/carte_interactive/html/carte_interactive_bis.php
Chaque popup donne le nom d’un constructeur et un lien vers les appareils fabriqués par celui-ci. Dans mon fichier .csv de mes données, j’ai une url qui conduit à un logo de chaque constructeur, mais je ne comprend pas la syntaxe qui me permettrait de l’afficher dans la popup.
Pour l"instant le gabarit du contenu de la popup est le suivant :

{Marque}

{Ville}

Lien vers les appareils : {url}

Le champ contenant le chemin du logo s’appelle chemin_logo. Quelle est la syntaxe a ajouter dans le gabarit de la popup pour afficher le logo directement dans la popup ?

J’espère avoir été clair. Merci de votre aide.

#2

Bonjour Sylvain et bienvenue,
j’ai l’impression que ce post pourrait t’aider ? Si je le comprends bien, il s’agirait de mettre l’url de tes logos entre 2 paires d’accolades imbriquées

#3

BOnjour vdct. Merci.
Cela semble ok, mais si je suis les recommandations,

{Marque}

{Ville}
{{chemin_logo}}
Lien vers les appareils : {url}

je n’obtiens pas un affichage du logo, mais

Capture d’écran 2022-01-04 165023

#4

J’ai fait un test en remplacant chemin_logo par son contenu (adresse de l’image) et dans ce cas, cela fonctionne, donc le problème n’est pas l’image elle-même. Je ne comprends pas.

#5

J’ai réussi sans trouver d’explication logique à cette réussite. Grâce à une vidéo, j’ai vu qu’on pouvaait mettre les doubles accolades directement dans le fichier .csv. J’ai rebaptisé la colonne correspondante en url.
J’ai maintenant comme gabarit

{Marque}

{Ville}
{url}
{lien}

et ça fonctionne.

#6

de mémoire, c’est parce qu’il faut 3 accolades, 2 pour l’image, 1 pour l’appel dynamique de la valeur.

c’est ce que tu fais en mettant les 2 dans le csv, que tu appelles ensuite avec 1 paire d’accolades

#7

Effectivement, 2 accolades dans le fichier csv.
Au passage, je te signale un problème d’encodage sur ton fichier csv.
Passe-le en UTF-8, cela devrait résoudre ton problème.

#8

Cela ressemble bien à cela. C’est dommage que ce ne soit pas plus clairement expliqué dans la bulle d’information (i).

Comment fait-on pour passer le csv en utf-8 ? (je sais que c’est pas le sujet de ce forum) mais tant qu’on y est

#9

j’ai trouvé, je vais faire ça

#10

Ceci peut servir :

https://wiki.cartocite.fr/doku.php?id=umap:tutoriel_umap

mais tu le savais.

#11

Bonjour Jac. Merci. Il est bien fait ce tuto. J’"ai ajouté pas mal de données à ma dernière carte. ça marche impeccable (avec la solution à deux accolades dans le fichier csv), par contre je me suis encore fichu dedans avec l’UTF8. Je corrigerai au prochain import.

merci à tous pour votre aide efficace

#12

Concernant l’import, tu peux aussi faire avec des données dynamiques.

J’ai détaillé cela puisque je l’utilise sur une activité que je fais faire avec mes élèves de secondes :

https://portail.lyc-la-martiniere-diderot.ac-lyon.fr/srv20/co/Creation_Balade_Photos.html

C’est la partie Manipulation 6.

#13

C’est ce que j’avais fait avec google maps, mais je me suis aperçu que l’enrichissement des données alimentant le fichier de données est à un rythme lent et que je peux très facilement me satisfaire de deux mises à jour par an. Je vais regarder le temps nécessaire à la mise en place d’une création dynamique et peser le pour et le contre. Les infos sont les adresses de constructeurs de matériel photo, donc la plupart ont disparu depuis des décennies. C’est parfois une longue quête pour les retrouver et la rapidité de mise à jour n’est pas essentielle. J’ai un fichier de constructeur au moins du double de celui utilisé par la carte, mais sans les adresses je ne peux pas tout utiliser. Il y a quelques adresses sur Lyon.

#14

C’est sympa comme idée de projet avec des élèves de faire cela.

#15

BOnjour, finalement, j’y suis venu. J’ai écrit un script php pour créer le fichier .csv. C’est impeccable.

Par contre, j’ai une carto pour la version française de mon site et une autre pour la version anglaise. Elles se présentent pareilles, mais une envoie vers des pages en français, l’autre vers des pages en anglais. Au moment d’ajouter le code iframe dans la page d’affichage français et dans celle d’affichage anglais, je m’aperçois que j’ai créé deux calques dans la même carte : un pour le français et l’autre pour l’anglais.
J’ai l’impression que le code iframe ne prend en compte que la carte, mais ne précise pas lequel des deux calques est à prendre en compte. est-ce qu’il y a un moyen d’être précis ou bien faut-il passer par deux cartes distinctes ?

Merci

Bon après-midi

#16

Pour info,

J’avais couvert le truc aussi dans le tutoriel en pdf joint à l’article Données issues de tableaux et cartographie en ligne, GeoCamps de juin 2016

Si vous souhaitez afficher des images
uMap permet d’afficher un certain nombre d’objets multimédias dans les fenêtres d’informations liées aux objets cartographiés. Mais uMap ne les héberge pas. Elles doivent donc se trouver « quelque part sur
Internet » et vous devez lui en fournir l’adresse (URL).
Prévoyez donc un ou plusieurs champs (colonnes…) contenant les URL des images que vous voulez afficher : logo, icone, photo…

Attention : pour que votre image s’affiche bien sur uMap, du fait du langage utilisée dans le gabarit, votre cellule de tableau doit contenir l’adresse entouré par deux (fois deux) accolades.

C’est à dire, par exemple :
NOM,LOGO,SITE_WEB
Zoomacom,{{http://www.zoomacom.org/wp-
content/uploads/sites/34/2015/07/logo_zoomacom_400.png}},http://www.zoomacom.org

Et le Gabarit du contenu pour la popup" doit être de la forme : {LOGO}
(on aurait cru qu’une simple URL et un gabarit {{{LOGO}}} auraient fait le boulot, mais non: ça ne marche pas. parce que les 3 accolades sont utilisées pour autre chose (ci-dessous). Notez qu’en pratique ça signifie que votre base de données contient une information spécifiquement dédiée à une utilisation pour uMap.)

Et même plus que des images
uMap permet aussi d’afficher un certain nombre d’objets hébergés par des services tiers (vidéos, sons, présentations…) contenus dans des iFrames (cadres en ligne) dont le code est fourni par ces services.
Dans ce cas là, il faudra aussi coller ce code correctement dans votre base de donnée et rédiger le gabarit sous la forme {{{CODE_IFRAME}}}, ou même avec une hauteur imposée (en pixels): {{{CODE_IFRAME|hauteur}}}

1 Like
#17

Bonjour Eddie. Merci. Pour les accolades, c’est effectivement clair dans ton message, mais pas vraiment dans l’aide contextuelle d’umap. Dommage que je n’ai pas eu l’info plus tôt, cela aurait évité des tâtonnements. Le principal est que cela fonctionne. J’ai inclus l’ajout des accolades dans mon générateur de fichier csv depuis ma base MySQL et tout roule.

#18

Très bien le tuto dans le pdf.