Tutoriel carte en ligne

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.

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.

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.

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 utiliser un service de réduction d'URL (comme bit.ly ou tinyurl.com par exemple).

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.

Dans le fichier map.js comporte le programme qui affiche les marqueurs sur la carte.

Vous pouvez ajouter ou modifier un marqueur en remplacant les informations suivantes:

• LAT par la latitude,
• LONG par la longitude,
• ADDRESS par l'adresse en toute lettre,
• COLOR_ICON par un des couleurs suivantes (redIcon, greenIcon, grayIcon, blueIcon, violetIcon)

L.marker([LAT, LONG], {icon: COLOR_ICON})
.addTo(map)
.bindPopup(“ADDRESS”);

Archive avec les ressources suivantes:

• page HTML,
• fichier CSS,
• fichier JavaScript,
• logo partenaires.

MIT License

Copyright © 2020 Fable-Lab

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.