insérer une carte Open Street Map sur warc

Bonsoir tout le monde,

Etant a la recherche d'une alternative à GoogleMaps, j'ai essayé deux méthodes :
La méthode nouvelle-techno.fr,
et la méthode tontonduweb.com.

Malheureusement, le résultat est le même avec les deux solutions :

Si le code est placé sur une seule mise en page, pas de soucis, c'est parfait :


Par contre, si je place le code sur les différentes mise en page, la carte disparaît sur 3 des 4 mises en page :


Si vous avez une idée,

Bonjour
Ah oui étonnant de ne pas voir la carte sur les autres formats, l'élément est peut-être masqué sur les autres formats ?
Sans l'adresse de la page de la carte il est difficile d'avoir une idée.

Je trouve aussi cela surprenant.

La page est visible ici.

Effectivement je n'ai pas la carte et elle ne parait pas non plus dans le code source.
Peux-tu modifier ta page en faisant en sorte qu'elle paraisse comme sur ta première image et tu me fais signe quand c'est fait que je retourne voir ce qu'il y a dans le code source.

Actuellement, la carte apparait uniquement sue la mise en page XS.

Tu préfères l'avoir sur la mise en page LG ?

Pas de problème j'ai pu voir la carte en diminuant ma fenêtre.
J'ai beau éplucher le code source je ne saisis pas ou est le problème de plus il est très dificile de cerner les différents codes placés pour la carte.
Mais ce que je ne comprends pas, tu dis :

Par contre, si je place le code sur les différentes mise en page

Là je ne comprends car tu n'as besoin d'ajouter le code pour chaque mise en page, quand on mets le code sur le format LG il est placé automatiquement sur les autres format.

Je pense avoir trouvé dans le code source, la box dans laquelle est le code de la carte est masquée en SM, MD et LG donc visible uniquement en XS
Et comme la box est masquée son contenu l'est aussi.

Ellade

Ellade a écrit:Là je ne comprends car tu n'as besoin d'ajouter le code pour chaque mise en page, quand on mets le code sur le format LG il est placé automatiquement sur les autres format.

Ben si, sinon le design des diverses mise en page est compromis.

Ellade a écrit:Je pense avoir trouvé dans le code source, la box dans laquelle est le code de la carte est masquée en SM, MD et LG donc visible uniquement en XS
Et comme la box est masquée son contenu l'est aussi.

C'est le but de la manoeuvre, une box différente par mise en page, cachée aux autres mises en page. Maintenant, cette solution n'est peut être pas la bonne.
Mais c'est celle que j'ai utilisée pour insérer la carte Google Maps sur mes pages. Si tu clique sur une autre langue, la carte Google Maps s'affiche sans soucis.

J'ai réinstallé la carte version nouvelle-techno.fr, qui permet de facilement retrouver les diverses box dans le code source de la page.

Nightmare a écrit:Ellade

Ellade a écrit:Là je ne comprends car tu n'as besoin d'ajouter le code pour chaque mise en page, quand on mets le code sur le format LG il est placé automatiquement sur les autres format.

Ben si, sinon le design des diverses mise en page est compromis.

Non pas forcément chaque format peut s'ajuster indépendemment sans que ça bouge les autres formats.

Nightmare a écrit:

Ellade a écrit:Je pense avoir trouvé dans le code source, la box dans laquelle est le code de la carte est masquée en SM, MD et LG donc visible uniquement en XS
Et comme la box est masquée son contenu l'est aussi.

C'est le but de la manoeuvre, une box différente par mise en page, cachée aux autres mises en page. Maintenant, cette solution n'est peut être pas la bonne.

Effectivement le masquage n'est à utiliser systématiquement et surtout pour la carte qui s'ajuste automatiquement, il serait plus judicieux de laisser la même box de la carte pour tous les format de plus la carte fonctionne avec un "id" qui doit être uninique sur une page et cet "id est multiplié et le navigateur ne peut plus afficher corectement, ce doit surement être la cause

Nightmare a écrit:
J'ai réinstallé la carte version nouvelle-techno.fr, qui permet de facilement retrouver les diverses box dans le code source de la page.

Oui mais alors là c'est pire car tu as recopié le code complet avec des balises doctype, head, body etc ... qui ne doivent surtout pas se trouver dans le code que tu inserres, elle sont là juste comme repère pour que l'on sache où placer les codes.

Pour en finir, c'est bien à cause des masquages concernant la box de la carte.

Un petit exemple de carte (tuto de tonton) sans masquage du tout et tu verras en diminuant la largeur de la fenêtre de ton navigateur qu'elle s'adapte très bien à tous les formats d'écran sans masquage c'est ici

Ellade, un grand merci.

En effet, le problème était dû au masquage des cartes.

On va dire que j'abuse mais, avec le plugin de Tonton,
est-il possible d'ajouter une infobulle au marker dans le fichier style.js ?

Oui c'est possible mais il faudra modifier le fichier JS qui est sur le serveur

Regarde de nouveau ici et dis-moi si ça t'irait comme ça, bien sûr tu mettras le texte à ta guise.

Ce serait parfait.

Que dois-je ajouter dans le fichier style.js ?

Dans le fichier style.js tu as la ligne 25 qui est surlignée



Tu ajoutes comme dans l'image à la suite de ce qui est en jaune, ce qui en en violet (le code ci-dessous) en laissant bien un espace entre ce qui est en jaune et en violet
Tu as repéré le texte de la bulle, tu le modifies à ta façon

Code:

.bindPopup("<b>Nom Prénom</b><br>Adresse<br>blablabla")

NICKEL.

Tu assure grave, Ellade.
Un grand merci.

Merci
C'était avec plaisir
Bonne continuation