Carte des 1 km de confinement, l’envers du décor

Nous y sommes, second confinement et celui-ci a pour but de limiter la propagation du virus et le moyen pour y parvenir est de limiter nos allées et venues pour limiter nos contacts.

La règle des déplacements à moins de 1 km de notre domicile est donc de retour pour les balades (seuls ou avec nos amis à 4 pattes) ou l’activité sportive.

Premier point, il s’agit d’1 km de rayon (à vol d’oiseau donc), pas de 1 km de route ou de marche… donc 3.14 km² d’espace.

Pour se rendre compte de ce que représente ce kilomètre, j’ai donc créé une petite carte dynamique qui affiche ce genre d’infos d’un simple clic ou après la saisie d’une adresse :

Image for post
Image for post
https://osm.cquest.org/1km/

En plus du cercle de 1 km, la carte montre aussi les commerces à proximité qui peuvent légalement ouvrir : alimentaire, quelques services comme les blanchisseries, les garagistes, etc.

L’affichage de ces point d’intérêts a deux buts :

  • mieux se rendre compte de ce qui est à proximité pour limiter nos déplacements
  • les aider !

Les données proviennent d’OpenStreetMap, qui peut indiquer pour certains commerces une adresse de site web (pour d’éventuelles commandes en “click and collect”, l’adresse email ou le numéro de téléphone).

Ces données ne sont pas toujours présentes, et un lien permet d’accéder à l’éditeur en ligne d’OpenStreetMap pour les compléter.

Les commerces ne pouvant recevoir du public mais assurant des livraisons ou du “à emporter” et du click-and-collect, sont aussi présents (si les informations ont été ajoutées dans OpenStreetMap).

Comment fonctionne cette carte ?

Donc oui, c’est pas très sexy comme UI, mais fonctionnel même sur mobile, une chance !

Le front

Pas de framework, pas de nodejs, de npm, un simple fichier HTML, une CSS, un morceau de javascript pour lier le tout.

Du coup, la carte chargée est très légère (mis à part les tuiles d’image du fond de carte), total: 3 hits et moins de 60Ko !

Ce contenu est servi directement par nginx… en HTTP/2.0 ;)

L’API d’autocomplétion d’adresses

Ici c’est une instance déployée par mes soins (chez moi), qui contient non seulement les adresses, mais aussi des points d’intérêts (vous pouvez chercher “Musée du Louvre”).

L’API pour récupérer les commerces

Les données proviennent d’une base postgresql contenant les données OpenStreetMap au schéma osm2pgsql que j’utilise par ailleurs pour produire des fonds de carte. Elle a l’avantage de contenir tous les tags décrivant un POI (Point Of Interest) et pas seulement ceux utilisés pour produire le fond de carte, ce qui permet d’avoir tous les détails utiles pour chaque commerce.

J’exporte donc régulièrement les données que j’importe dans une base postgresql qui ne contient que les commerces sélectionnés comme pouvant légalement ouvrir, et uniquement sur l’emprise de la France métropolitaine, ce qui fait plus de 440 000 POI.

Pour simplifier au maximum les traitements, j’ai tout mis au format geojson, directement importé dans un unique champ, d’une unique table postgresql.

Pour permettre la recherche géographique, un index calculé est ajouté, sans même créer de colonne géographique. Simple et efficace ;)

CREATE INDEX ON covid_poi USING GIST (ST_GeomFromGeojson(j->’geometry’));

L’API est servie par un petit script python de quelques dizaines de lignes, utilisant falcon et gunicorn pour fournir le web service et psycopg2 pour se connecter à la base postgresql qui génère directement la réponse geojson.

Image for post
Image for post
Code python complet de l’API

Zéro traçage !

Tout est servi par mes soins, à part le fond de carte qui provient des serveurs d’OpenStreetMap France que j’administre par ailleurs.

Aucun appel à un CDN ou autre contenu externe, de toute façon cela économiserai quoi sur mes 60 Ko de contenu ?

Tout est auto-hébergé sur ma petite infra perso “Computel”, une baie avec 2 serveurs, 2 fibres (Free + OVH) pour un peu de redondance.

Il ne me reste plus qu’à mettre ça au propre et publier le code, comme d’habitude !

Written by

40 ans d'informatique + 33 de base de données + 25 d'internet + 11 de cartographie = #OpenStreetMap + #opendata + #logiciel_libre

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store