98,2 k clics issus de la recherche Google depuis juillet 2025, en partant de zéro
Présentation
Placez deux villes sur la même carte, glissez l’une sur l’autre et voyez tout de suite la différence. Les pages de comparaison ajoutent la population et la densité ; un lien rouvre les mêmes villes pour la personne à qui vous l’envoyez. Gratuit, dans le navigateur, et jusqu’à dix villes avec un compte.
Le défi
Les statistiques sur les villes sont faciles à trouver, mais difficiles à se représenter. Un nombre d’habitants ou de kilomètres carrés ne dit pas quelle taille une ville a par rapport à une autre, surtout d’un pays ou d’un continent à l’autre.
Wikipédia et les tableurs alignent des faits en lignes, pas sur une carte qui aide à raisonner.
Les captures de cartes n’ont pas toutes la même échelle, et ces comparaisons induisent en erreur.
Un nombre ne dit rien de la forme : deux villes de même superficie peuvent ne pas se ressembler du tout sur le terrain.
L’approche
CompareCitySizes superpose les villes à l’échelle réelle sur une seule carte. Vous en choisissez deux, glissez l’une sur l’autre et voyez tout de suite la différence ; les pages de comparaison ajoutent la population et la densité à côté de la superficie. Un lien rouvre les mêmes villes pour la personne à qui vous l’envoyez.
Une seule échelle pour toutes les villes comparées
La superficie sur la carte, la population et la densité sur les pages de comparaison
Des liens à coller dans un article, une présentation ou un plan de cours
Aucun compte nécessaire pour explorer et partager
98,2 kclics issus de la recherche Google depuis juillet 2025, en partant de zéro
Comment ça marche
01
Cherchez une ville
Tapez un nom et choisissez le bon lieu parmi les suggestions. La carte se centre dessus.
02
Ajoutez des villes à comparer
La ville suivante se pose sur la première, à la même échelle. Glissez l’une ou l’autre pour les aligner.
03
Lisez le panneau de statistiques
La superficie de chaque ville s’affiche dans la barre latérale ; la superposition dit le reste. Faites pivoter une forme si besoin.
04
Partagez le lien
Copiez le lien dans un article, un cours ou une discussion. Qui l’ouvre retrouve les mêmes villes.
Écrans
Rome superposée à Berlin à la même échelle : 1 287 km² contre 891 km², avec la commande de rotation ouverte.Superficie, population et densité côte à côte sur une page de comparaison : ici, Rome face à Berlin.Share copie un lien qui rouvre les mêmes villes pour quiconque le suit.
Ce que fait le produit
Superpositions à l’échelle réelle
Les villes s’affichent à l’échelle géographique sur le même fond de carte : « plus grand à l’écran » veut dire plus grand en réalité, et non une capture recadrée à un autre niveau de zoom.
Faites pivoter une ville
Tournez une forme par pas de 15° ou avec un curseur pour l’aligner sur une côte ou un fleuve, comme la ville à laquelle vous la comparez. La superposition n’en est que plus juste.
Jusqu’à dix villes à la fois
Deux sans compte, dix avec : capitales, aires métropolitaines ou villes comparables sur une seule carte.
Liens à partager
Le bouton de partage copie un lien qui rouvre les mêmes villes pour qui le suit, dans un article, un cours ou une discussion de groupe.
Des pages de comparaison chiffrées
Chaque paire a sa propre page, avec superficie, population et densité côte à côte : le tableau qu’il vous faut quand la forme ne suffit pas.
Rien à installer
Fonctionne dans n’importe quel navigateur, y compris sur téléphone. Sans licence SIG, sans téléchargement, sans inscription pour commencer.
Qui l’utilise, et pour quoi faire
Les curieux, en pleine discussion
Trancher le « laquelle est la plus grande ? »
La plupart des visiteurs arrivent après avoir cherché exactement ça, mettent New York, Tokyo ou Londres sur la carte et se mettent à glisser. Le glisser-déposer, c’est le produit : 260 000 déplacements par 13 000 personnes en un été, soit une vingtaine chacune.
Enseignants et élèves
La géographie en classe
Les enseignants le trouvent seuls : un portail éducatif public a envoyé l’équivalent d’une classe de visites en trois jours, et des plateformes de cours et des liens Teams reviennent sans cesse parmi les sources de trafic. Deux villes, une carte, aucun compte : ça marche au vidéoprojecteur comme sur le téléphone des élèves.
Celles et ceux qui veulent le chiffre
Des classements qui donnent la réponse
Les pages PIB, population, densité et plus grandes villes répondent à la question sur la page même : plus de mille visites par mois viennent pour le tableau, pas pour la carte. Un quart des lecteurs du classement des plus grandes villes passe ensuite à la carte.
Journalistes et vulgarisateurs
Pour les sujets qui ont besoin d’échelle
Ce n’est pas encore d’où viennent la plupart des visiteurs, mais c’est pour cela que l’outil a été conçu : une superposition à l’échelle réelle montre ce qu’un tableau ne peut pas montrer, et un lien partagé rouvre les mêmes villes depuis l’article.
Conçu pour être trouvé
Les gens cherchent exactement ce que le site propose : « city size comparison » est la première requête, et la carte figure dans le top 3 sur ce terme. Les pages de classement par PIB, population et plus grandes villes attirent leur propre trafic de recherche. En un an, les clics issus de la recherche ont été multipliés par cinq, d’environ 2 200 à 11 000 par mois.
En coulisses, chaque paire de villes a sa propre page, avec titre, description, URL canonique et données structurées : 373 pages au total. Elles se classent déjà entre la troisième et la sixième position ; la demande reste faible paire par paire, c’est donc un investissement en avance sur les requêtes.
98,2 k
clics issus de la recherche Google depuis juillet 2025, en partant de zéro
1,3 M
impressions dans la recherche depuis juillet 2025
81 %
des visites viennent de la recherche naturelle ; le reste est surtout du trafic direct
11 k
visites par mois en moyenne, de mars à août 2026, depuis plus de 160 pays
Google Search Console : clics (bleu) et impressions (violet) depuis juillet 2025.
L’interface derrière le produit
Faire tourner un produit représente l’essentiel du travail. Nous avons donc construit, à côté de la carte, l’interface d’administration qu’il lui fallait : une boîte de support devenue un vrai client e-mail, un éditeur pour les contours des villes et le cache qui garde les recherches rapides.
Retours et support
Tous les messages des utilisateurs au même endroit, sans abonnement à un helpdesk
Les signalements de bugs révèlent ce que les tests ne voient pas ; les demandes de fonctionnalités disent quoi construire ensuite. Plutôt que d’ajouter un helpdesk, nous avons intégré le support à l’interface d’administration du produit.
Utilisateur
Remplit le formulaire de contact (General Feedback · Bug Report · Feature Request) ou écrit simplement à support@comparecitysizes.com.
Système
Chaque message devient un ticket, classé et conservé avec tout son historique d’e-mails. Les e-mails directs sont reçus par AWS et regroupés automatiquement en fil de discussion, même quand l’utilisateur répond depuis son téléphone.
Responsable
Ouvre l’onglet Feedback de l’administration, filtre par open / bug / feature, lit toute la conversation et répond depuis l’interface. La réponse part de support@ et reste attachée au ticket.
Résultat
Pas de mot de passe Gmail partagé, pas de licence Zendesk, pas de message perdu dans une boîte personnelle. Une seule source de vérité, gérée depuis un navigateur.
La boîte Feedback de l’administration : une conversation de signalement de bug en fil de discussion.
Des retours typés, pas un bloc de texte libre
Les catégories bug, fonctionnalité et retour demandent chacune d’emblée les bonnes informations : les étapes pour reproduire un bug, le « pourquoi » d’une demande de fonctionnalité.
De vrais fils d’e-mails
Les en-têtes standard Message-ID / In-Reply-To et une adresse de secours avec suffixe (support+ticket@) gardent chaque réponse rattachée au bon ticket, quel que soit le logiciel de messagerie de l’utilisateur.
Devenu un vrai client e-mail
La même chaîne gère désormais toutes les adresses @comparecitysizes.com dans un onglet Email façon Gmail : boîtes détectées automatiquement, volet de lecture en fils de discussion, rédaction depuis n’importe quelle adresse du domaine, modèles et envoi aux utilisateurs inscrits.
Éditeur de contours
Un contour est faux ? Corrigez-le sur la carte
Chaque comparaison repose sur le contour tracé par la carte, et ces contours viennent d’OpenStreetMap, qui renvoie parfois une région pour une ville, ou un aéroport pour une métropole.
Chaque contour peut donc s’ouvrir dans un éditeur sur la carte : tracez un polygone point par point ou à main levée, déplacez ses sommets, fusionnez-en plusieurs en une seule forme, annulez et rétablissez, ou collez du GeoJSON. Enregistrez, et tous les visiteurs voient désormais le contour corrigé.
Le Boundary Editor : le contour d’un arrondissement ouvert en modification, avec les outils de tracé, de main levée, d’annulation et de suppression.
Dessiner ou décalquer
Des polygones point par point pour la précision, le tracé à main levée pour la vitesse ; plusieurs polygones se combinent en un MultiPolygon pour les villes avec des îles ou des exclaves.
La correction prime sur la source
Un contour modifié est enregistré comme une surcharge : une mise à jour ultérieure depuis OpenStreetMap ne remet donc jamais discrètement la mauvaise forme.
Une boucle fermée avec le support
Un bug « contour erroné » se corrige dans l’interface même où il est arrivé : ouvrez le ticket, ouvrez la ville, redessinez, répondez.
Les métadonnées suivent
La superficie, la population, les coordonnées et une note accompagnent la forme : la page de comparaison se met à jour avec elle.
Cache
Récupérer un contour une fois, le servir pour toujours
Les contours des villes viennent de Nominatim, le géocodeur d’OpenStreetMap : lent, limité en nombre de requêtes, et pas fait pour être appelé chaque fois que quelqu’un tape « Tokyo ». Chaque contour est donc enregistré dans la base de données du site à sa première utilisation, puis servi depuis celle-ci ; les recherches suivantes ne quittent jamais le serveur.
Aujourd’hui, ce cache contient 20 948 contours de villes, chacun avec sa source. C’est la table même que modifie l’éditeur de contours : une surcharge n’est qu’une entrée du cache corrigée par un humain.
Boundary Overrides dans l’administration : 20 948 contours en cache, avec la source de chacun (ville ou zone administrative Nominatim), certains marqués comme approximatifs.
Technologies
Front-end
React
Vite
Zustand
Ant Design
Carte et géodonnées
Mapbox GL JS
Mapbox GL Draw
GeoJSON
OpenStreetMap via Nominatim
Back-end
Node.js
Express
PostgreSQL
Google Cloud Run
E-mail et hébergement
AWS SES
S3
SNS
Lambda
CloudFront
Recherche et mesure d’audience
Données structurées Schema.org
Sitemaps XML
Google Tag Manager
GA4
Search Console
Ce que nous avons fait
Design produit
Application web
Carte interactive
SEO programmatique
Données géospatiales
Visualisation de données
Authentification
Partage
Données structurées
Contenus et classements
Mesure d’audience
Déploiement
Questions fréquentes
Les contours des villes sont-ils précis ?
Ce sont les limites administratives cartographiées dans OpenStreetMap, et quelques-unes sont signalées comme approximatives dans l’application. Elles conviennent à la comparaison et à l’enseignement, pas à un usage juridique, topographique, statistique ou d’urbanisme.
Puis-je comparer plus de deux villes ?
Oui, jusqu’à dix sur une même carte une fois connecté avec Google, Facebook ou votre e-mail. Le lien partagé rouvre toute la sélection.
Faut-il un compte ?
Non. Comparer deux villes et partager le lien fonctionne sans compte ; un compte porte la limite à dix.
Essayez CompareCitySizes.com
Ouvrez le produit, ou parlons d’un projet similaire pour votre équipe.
