Suite

Ajuster le thème de couleur du fond de carte CartoDB « Matière noire » ?


Je voulais savoir - mais je n'ai pas trouvé la solution ailleurs - s'il est possible d'ajuster le thème de couleur du fond de carte CartoDB "Dark Matter".

Je voudrais seulement changer les couleurs de l'eau et des zones rurales car sur certains écrans d'ordinateur, on ne peut malheureusement pas voir les différences entre l'eau et la terre. J'aimerais changer la couleur noire de la terre en gris foncé et la couleur de l'eau en une nuance de gris légèrement plus vive afin d'accentuer un peu plus le contraste.

Est-ce possible? Ou dois-je m'en tenir au thème de couleur qui a été choisi par vos cartographes ?


Non, il n'y a aucune possibilité de personnaliser les fonds de carte Positron ou Dark Matter.

Ces fonds de carte sont proposés par l'équipe CartoDB et servis tels quels. Il n'y a pas d'options disponibles pour les utilisateurs afin de les modifier directement.

Le projet à partir duquel nos fonds de carte ont été créés est open source, ce qui signifie que vous pouvez y accéder ici, et même ajouter quelques problèmes si vous avez des suggestions !

Ce que vous pouvez faire est d'ajouter une couche de données avec la géométrie de l'océan et de la placer sous vos données. Vous pourrez styliser cette couche de données comme vous le souhaitez en utilisant CartoCSS. En suivant cette approche et en utilisant les couches Natural Earth Data, j'ai créé cette carte.


La première chose à comprendre est que vous utilisez un service Tile. Cela signifie que vous demandez des tuiles d'images existantes et déjà générées à partir d'un serveur distant. Vous ne pouvez pas modifier l'attrait des images demandées, jusqu'à ce qu'elles soient stockées sur votre serveur local, et vous les modifiez avec un processeur d'images (ou les régénérez à partir de données vectorielles avec un nouveau schéma de couleurs).

Heureusement, les navigateurs modernes prennent en charge une propriété CSS appeléefiltre. Les filtres peuvent être appliqués pour n'importe quel élément avec une syntaxe CSS de base. Vous pouvez récupérer la classe d'image côté client (dans l'exemple ci-dessous, j'ai utilisé Leaflet, donc le nom de la classe d'image estdépliant-tuile) et lui appliquer un filtre.

Considérations de base :

  • Seuls les navigateurs modernes prennent en charge le CSSfiltreclasser. Assurez-vous d'avoir un navigateur approprié. Pour vérifier la compatibilité, vous pouvez utiliser ce site Web.
  • Lefiltreclasse est dans un état expérimental. Pour les navigateurs avec moteurs blink ou webkit (comme Chrome, Safari ou Opera), vous devez utiliser le-webkitpréfixe. Pour les navigateurs avec moteur gecko (comme Firefox), aucun préfixe n'est nécessaire. Actuellement, les navigateurs IE ne prennent pas en charge lefiltreclasser.
  • Apprenez à utiliser lefiltreclasse, si vous ne le savez pas encore. Il y a une excellente source du réseau de développeurs Mozilla ici.
  • Cette méthode ne peut être appliquée que sur des cartes avec une seule couche de tuiles. Si vous avez plusieurs couches de tuiles, assurez-vous de savoir comment ajouter une classe personnalisée à la couche, les filtres doivent être appliqués.

J'ai créé un exemple de base avec une luminosité triplée et un contraste doublé. Vous pouvez modifier ces valeurs de manière appropriée pour affiner le résultat en fonction de vos besoins spécifiques.