[Résolu] Intégrer Open Street Map (Cluster+Info Bulles Personnalisé) (Créer un compte)

  • WordPress :4.9.9
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2207143
    Yoann
    Participant
    Padawan WordPress
    50 contributions

    Bonjour,

    Ma configuration WP actuelle :

    • – Version de WordPress : 4.9.8
    • – Version de PHP/MySQL : 7.2.7 / 5.5.55
    • – Thème utilisé : Industrial Child Theme
    • – Thème URI : http://themeforest.net/user/Anps/portfolio
    • – Extensions en place : Anps Theme plugin (1.3.2), Better Font Awesome (1.7.1), Contact Form 7 (5.0.3), Duplicate Page (2.7), Envato Market (2.0.1), Header and Footer Scripts (2.1.0), ImageMapper (1.2.6), Insert PHP Code Snippet (1.2.5), Logo Carousel Slider (2.0), Photo Gallery (1.4.17), PNG to JPG (3.0), Popup anything on click (1.2.2), Really Simple SSL (3.0.5), Redirection (3.4), Regions for WP Job Manager (1.15.1), reSmush.it Image Optimizer (0.1.16), Slider Revolution (5.4.6.4), SSL Insecure Content Fixer (2.7.0), TC Custom JavaScript (1.1.1), Timeline and History Slider (1.2.5), UpdraftPlus – Backup/Restore (1.14.13), WP-Optimize (2.2.4), WPBakery Page Builder (5.4.7), WP Colorbox (1.1.2), WP Fastest Cache (0.8.8.4), WP Job Manager (1.31.3), WP Job Manager – Job Type Colors (1.0.1), WP Migrate DB Pro (1.8.1), WP Migrate DB Pro Media Files (1.4.9), Yoast SEO (8.0)
    • – Adresse du site : https://www.savoy-international.com
    • – Nom de l’hébergeur : Apache

    Problème(s) rencontré(s) :

    Bonjour,

    J’ai réussi à mettre en place une carte Open Street Map avec Leaflet dans un fichier html. Mais je n’arrive pas l’implémenter sur mon wordpress.
    Il fonctionne pourtant parfaitement dans index.html mais dès que je le passe sur le site, rien ne s’affiche ( https://www.savoy-international.com/7027-2/ )

    J’ai essayé d’utiliser le plugin Scripts n Styles mais sans résultat…
    Le fichier html est en copie si vous voulez le tester ou si vous souhaitez le réutiliser,
    Merci d’avance.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2207155
    lorenzolamas
    Participant
    Maître WordPress
    3229 contributions

    Tu as fait comment pour intégrer ça sur ton site WP?

    Tu as juste tout copié-collé dans une page?

    #2207169
    Yoann
    Participant
    Padawan WordPress
    50 contributions

    J’ai d’abord essayé de tout copier coller dans un bloc html mais sans succès, ensuite j’ai utilisé un plugin pour insérer mon js et css plus proprement : Scripts n Styles
    J’ai cependant un doute sur l’importation des scripts/style, j’ai donc essayé de les placer dans le header grâce à un autre plugin mais toujours rien…
    Le plus embêtant est que je n’ai aucun message d’erreur quand j’inspecte la page…

    #2207178
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Bonjour.

    Comme me l’a soufflé mon collègue @Joss47, il y a une extension qui fait le boulot plus simplement https://wordpress.org/plugins/osm/

    🙂

    • Cette réponse a été modifiée le il y a 5 années et 12 mois par PhiLyon.
    #2207180
    Joss47
    Modérateur
    Maître WordPress
    5260 contributions

    Bonjour,

    Oui @philyon, mais elle ne fait pas d’infos bulles (plusieurs du moins).
    On peut créer des custom cartes via Google Maps (sans payer d’ailleurs) on en parle ici > https://wpfr.net/support/sujet/google-maps-3/

    Enfin, je ne sais pas vraiment le but de la manoeuvre, mais sait on jamais si ça peut vous aiguiller…

    #2207185
    Yoann
    Participant
    Padawan WordPress
    50 contributions

    Bonjour,

    Dommage que cette extension ne puisse afficher plusieurs infos bulles, je souhaite faire une map regroupant toutes les entreprises de ma société.
    Elle doit répondre au critère suivant :
    – Un style de map custom
    – Des Marker Cluster
    – Des info-bulles personnalisables

    J’ai d’abord tenté avec Google Map, mais lors de la personnalisation de l’info-bulles, je me suis retrouvé bloqué.
    En effet, je souhaite afficher une image (différente pour chaque info-bulle) en haut de ma div, sans marge, mais je n’ai pas la main sur la div et pour couronner le tout, elle n’a ni class ni ID…

    J’ai donc opté pour OSM mais je n’arrive pas l’incorporer à wordpress…

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2207206
    lorenzolamas
    Participant
    Maître WordPress
    3229 contributions

    essaye HeroMap (plugin gratuit) ça te permet de faire tout cela.

    La version payante permet un peu plus d’options.

    #2207276
    Flobogo
    Modérateur
    Maître WordPress
    20330 contributions

    Bonjour,


    @lorenzolamas
    : attention, Hero Maps n’existe plus sur wordpress.org, il n’y a donc plus de version gratuite.
    En plus, cette extension (comme toutes les extensions Google maps) nécessite une clé API, devenue (quasi) impossible à configurer, sauf si vous acceptez de donner votre n° de carte bancaire à Google. Très peu pour moi …


    @yoann
    : j’ai testé l’extension OSM sur site WordPress.
    Elle fonctionne très bien pour « géotagguer » des articles et les grouper sur une carte. (d’ailleurs, vous pouvez voir le résultat en action sur ce site, à la rubrique Agenda)
    Par contre, en insérant plusieurs points (ou repères / marqueurs) sur une carte, pas de fonction cluster, et pas d’image dans les infos-bulles. Je n’ai obtenu que des infos-bulles au format texte, si j’essaie d’insérer une image, ma carte ne s’affiche plus ! (et en plus, les marqueurs sont impossibles à modifier)
    Bref, une extension beaucoup moins réussie qu’on ne pourrait croire !

    Mais comme je l’ai expliqué dans un autre topic (voir lien indiqué par @joss47), on peut créer des cartes gratuites sur Google My Maps, avec autant de points qu’on veut, avec icônes personnalisables, et images (bon, il y a une petite marge sur 3 côtés, sur laquelle on ne peut pas intervenir)
    Le seul inconvénient, c’est qu’il n’y a pas la fonction cluster.

    #2207305
    Yoann
    Participant
    Padawan WordPress
    50 contributions

    Bonjour,

    Merci pour les conseils, mais Google My Maps n’est pas adapté, j’ ai déjà un Google Map (en html) sur mon site qui marche mais c’est niveau graphisme où il laisse à désirer.. C’est pourquoi j’étais partie sur OSM (et ma carte fonctionne ! Mais pas sur wordpress à l’inverse de GM…)


    @Flobogo
    : OSM à la fonction cluster, en tout cas sur le lien Agenda, il y en a. Dommage pour l’image, les pointeurs ne sont pas dérangeant mais ce qu’ils affichent un peu plus…

    N’y aurait-il pas une solution pour insérer du code proprement à WordPress ? Vu que mon code fonctionne dans un .html logiquement c’est que wordpress n’arrive pas à lire mon fichier, non ?

    #2207539
    Yoann
    Participant
    Padawan WordPress
    50 contributions

    Rebonjour,

    Finalement j’ai trouvé une solution qui relève du bidouillage mais qui fonctionne.

    Vu que mon code HTML/CSS/JS  marche, j’ai hébergé ma map sur un serveur et utilisé un <iframe> pour l’afficher sur mon site.
    Le résultat est bon, le seul détails qui m’embête un peu c’est que les images utilisé pour charger la map sont transmise en HTTP alors que mon site est en HTTPS, cela ne présente pas une faille de sécurité ?

    #2207973
    Flobogo
    Modérateur
    Maître WordPress
    20330 contributions

    OSM à la fonction cluster, en tout cas sur le lien Agenda, il y en a.

    Oui, parce que c’est la fonction « groupement d’articles » (ici, groupement d’évènements) sur une seule carte unique qui est utilisée.
    Mon site présente le patrimoine historique/touristique de Bourgogne : avec OSM, je peux créer une carte unique regroupant toutes mes pages, mais si une page présente plusieurs lieux touristiques (ce qui est souvent le cas pour les villes), c’est impossible. Et impossible de créer une autre carte avec fonction cluster pour des points qui ne sont pas reliés à des articles/pages (les différents lieux touristiques de la ville d’Autun, par exemple)

    C’est pourquoi je me suis tournée vers la solution Goole My Maps, qui s’intègre aussi par <iframe>, comme votre carte en HTML.

    les images utilisé pour charger la map sont transmise en HTTP alors que mon site est en HTTPS, cela ne présente pas une faille de sécurité ?

    Ce n’est pas à proprement parler une faille de sécurité, mais ça ne sera pas bien vu par Google. Il vous suffit d’héberger vos images sur votre site dans la bibliothèque, et de récupérer leurs liens pour les insérer dans le HTML de votre carte.

    #2208008
    Yoann
    Participant
    Padawan WordPress
    50 contributions

    Ce n’est pas à proprement parler une faille de sécurité, mais ça ne sera pas bien vu par Google. Il vous suffit d’héberger vos images sur votre site dans la bibliothèque, et de récupérer leurs liens pour les insérer dans le HTML de votre carte.

    Je me suis mal exprimé, cette partie est déjà faite, ce sont les images servant à générer la carte OSM qui sont en HTTP (cf .png)

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2208210
    Flobogo
    Modérateur
    Maître WordPress
    20330 contributions

    Ah oui, c’est c– 😒   Si vous voulez continuer à vous en servir, essayez d’ajouter une extension qui gère le contenu mixte.

13 sujets de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.