Créer des cartes pour partager les cafés que j'ai visités

Cet article est une débauche. Vous pouvez m’aider à l'améliorer.

2022-06-30 jamesg : Creating maps to share the coffee shops I have visited

(Traduit avec deepl - à relire)

Les cartes étaient un sujet dominant lors de la rencontre en ligne Homebrew Website Club London / Europe d'hier. Je ne m'y connais pas en cartes, j'ai donc assisté à une grande partie de la discussion et écouté les autres partager leurs idées. Au cours de la réunion, nous avons discuté de tout, de l'utilisation des cartes sur son site Web personnel aux inexactitudes de certains chemins de campagne au Royaume-Uni sur les cartes ouvertes.

Lors de l'appel du Homebrew Website Club, j'ai appris l'existence de Leaflet. Leaflet est un outil JavaScript qui fonctionne avec OpenStreetMap pour vous permettre de créer une carte avec des tracés personnalisés. OpenStreetMap est une carte open source à laquelle tout le monde peut contribuer. Elle dispose d'un vaste ensemble de données. Par exemple, OpenStreetMap documente l'emplacement des entreprises. Il s'agit d'une utilisation clé pour moi, car je voulais être en mesure de cartographier les cafés.

En découvrant Leaflet, j'ai trouvé la réponse à l'une des questions que je me posais depuis longtemps : comment créer une couche OpenStreetMap personnalisée avec mes propres points de données ? Après la réunion, j'ai parcouru la documentation et j'ai commencé à travailler sur une carte des cafés que j'ai visités.

Cette carte des cafés a trois objectifs :

Me permettre de voir et de réfléchir à tous les cafés que j'ai visités et appréciés. Me permettre de partager facilement des recommandations avec d'autres personnes, qu'elles pourront conserver pour plus tard. Me permettre d'améliorer ma connaissance des cartes. J'ai commencé par expérimenter Leaflet. Pour commencer, il faut :

Importer la bibliothèque JavaScript du projet. Mettre en place une règle CSS personnalisée pour afficher la carte. Initialiser une carte avec un ensemble de coordonnées de départ et un niveau de zoom. J'ai trouvé ce modèle de démarrage utile lorsque j'ai créé ma première carte. Je vous recommande de consulter cette page et de l'essayer par vous-même. Vous devrez copier le code dans le fichier "leaflet-providers.js" à la racine du dépôt du projet pour que le code fonctionne. Sinon, vous recevrez une erreur. Je vous recommande également de lire le guide officiel de démarrage rapide de Leaflet. J'ai trouvé la documentation officielle facile à comprendre et immédiatement exploitable pour créer ma première carte et mes premiers points de données.

J'ai commencé par créer une carte et par ajouter un point de données. J'ai ensuite dressé une liste des cafés que j'ai visités au Royaume-Uni. Chaque café a quatre valeurs :

Latitude Longitude Nom du café Ville dans laquelle se trouve le café J'ai écrit tous ces points de données dans un fichier CSV où je peux recueillir tous les emplacements des cafés. J'utilise la valeur "coffee shop name" comme étiquette personnalisée en haut de la carte. La valeur "city" me permet de n'afficher sur la carte que les cafés d'une certaine ville. Pour collecter ces données, j'ai passé beaucoup de temps sur OpenStreetMap. J'ai utilisé leur fonction de recherche pour trouver chaque café que j'avais visité dans les villes où je m'étais rendu en 2021 et 2022. Cela m'a demandé quelques essais et erreurs. Certains cafés n'étaient pas répertoriés (et je vais donc devoir trouver comment les ajouter). Certains cafés comportant le mot "et" ne s'inscrivaient pas à moins que j'utilise le signe "+".

Pendant que je construisais le fichier CSV, j'ai écrit un script Python pour convertir le fichier CSV en données KML. Je voulais en effet fournir une source de données standard et téléchargeable pour chacune de mes cartes. Cela serait utile si quelqu'un voulait étendre une carte que j'ai déjà construite. De plus, les fichiers KML peuvent être importés dans des outils cartographiques comme Google Maps, ce qui permet à quelqu'un de prendre la carte de mon site Web et de l'importer dans un outil cartographique qu'il utilise déjà.

Après avoir écrit le script de conversion KML, j'ai ajouté une intégration avec mon générateur de site statique. Cette intégration me permet de prendre des données sur chaque ville et de les reporter sur une carte. Mon générateur prend un dictionnaire des villes et des cafés et ajoute le dictionnaire à une variable globale qui peut être lue sur n'importe quelle page. Je manipule ensuite ces données dans mes modèles de site afin de pouvoir afficher des cartes pour chaque ville. J'ai également créé une carte globale "Royaume-Uni" qui rassemble les données sur tous les cafés des autres cartes.

Jusqu'à présent, j'ai créé des guides pour Manchester, York, Édimbourg (et les régions environnantes que j'ai visitées), Glasgow et Londres. Ces cartes sont toutes répertoriées sur ma page web "Coffee Shop Maps".

Les cartes ne sont pas "complètes". Si je visite un nouveau café dans une ville et que je pense qu'il mérite d'être recommandé, je l'ajouterai à la carte. Certains cafés ne figurent pas sur la carte parce qu'ils ne sont pas encore dans OpenStreetMap. Je veux contribuer à OpenStreetMap pour pouvoir ajouter les cafés à mes cartes personnalisées. De plus, je ne me souviens pas du nom de certains cafés que j'ai visités. Je considère les cartes comme organiques et susceptibles d'être modifiées au fil du temps.

Si vous vous trouvez dans l'une des villes susmentionnées, jetez un coup d'œil à mes cartes de recommandation de cafés ! Chaque carte est accompagnée du nom et de l'emplacement du café. Un code QR pratique figure également sur chaque page afin que vous puissiez facilement ouvrir la carte sur un appareil mobile si vous consultez le site sur un ordinateur de bureau.