Outils pour utilisateurs

Outils du site


cc-carte-en-ligne

Ceci est une ancienne révision du document !


Tutoriel carte en ligne

Introduction:

Pour le projet Caches-Cachées nous utilisons une carte en ligne pour guider les participants.

La carte en ligne permet de:

  • visualiser toutes les caches du projet,
  • vérifier la disponibilité des caches,
  • télécharger les cartes pour les imprimer ou les consulter hors ligne.

Présentation :

Voici un aperçu général de la page:

La page est composée de deux parties:

  • une partie avec la liste des caches par ville,
    • avec pour chaque ville un bouton pour télécharger une carte,
    • avec pour chaque cache son l’adresse et son éventuelle indisponibilité,
    • les logos des partenaires du projet.
  • une partie avec la carte géographique,
    • avec un marqueur pour chaque caches,
    • chaque ville possède sa propre couleur pour ses marqueurs,
    • les caches indisponibles sont en gris.

Accès:

Tous nos supports de communications permettent d’accéder à notre carte en ligne via un lien et un code QR.

Pour faciliter l’accès à la carte en ligne, nous utilisons un lien de type sous-domaine (cc.fable-lab.com). Ce qui permet d’avoir un lien plus court et donc facile à retenir, à taper et à partager.

cc-carte-en-ligne-lien.jpg

Technique:

Lien:

Si vous optez pour un sous-domaine, il vous faudra l’accès compte technique qui gère le nom de domaine de votre organisation.

Si cela est impossible pour vous ou trop compliqué pouvez simplement utiliser crée une page sur le site de votre organisation et partager utiliser un service de réduction d'URL (comme bit.ly ou tinyurl.com par exemple).

Site:

Pour l’ergonomie, nous avons utilisé la bibliothèque CSS “Bootstrap”.

Pour la carte géographique, nous avons utilisé la bibliothèque JavaScript “Leaflet” et le service de cartographie d’OpenStreetMap.

Pour les marqueur de couleurs, nous avons utilisé la bibliothèque “leaflet-color-markers”.

Vous pouvez modifier et ajouter les marqueurs en fonctions de vos besoins depuis le fichier JavaScript “app.js”. Le fichier comporte des commentaires pour vous aider.

Ressources:

Archive avec les ressources suivantes:

  • page HTML,
  • fichier CSS,
  • fichier JavaScript,
  • logo partenaires.
cc-carte-en-ligne.1630594729.txt.gz · Dernière modification : 2021/09/02 16:58 de yassin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki