Home > cartodb > Superimposition of label in CartoDB

Superimposition of label in CartoDB

March 20Hits:1
Advertisement

I'm currently doing a carte with CartoDB where I use CSS in order to show label but my issue is that I have entities which are very close and their label are difficult to read because of their superimposition.

I try some of the CSS properties' of CartoCSS (like text-min-padding or text-placement) but I failed.

Here is my CSS code

/** category visualization */  #doc {    marker-opacity: 0.9;    marker-line-color: #FFF;    marker-line-width: 1;    marker-line-opacity: 1;    marker-placement: point;    marker-type: ellipse;    marker-width: 40;    marker-allow-overlap: true; }  #doc[type="ONG"] {    marker-fill: #A6CEE3; } #doc[type="Think Tanks"] {    marker-fill: #1F78B4; } #doc[type="Politique"] {    marker-fill: #B2DF8A; }  #doc::labels {   text-name: [name];   text-placement: point;   text-face-name: 'DejaVu Sans Book';   text-size: 20;   text-fill: #000;   text-halo-fill: #FFF;   text-halo-radius: 1;   text-dy: 0;   text-allow-overlap: true;   text-placement-type: simple;   text-label-position-tolerance: 0; } 

Thanks a lot. Have a nice day

A.H

Answers

I always find text placement needs a bit of trial and error. I've gotten the following, which I think fits your question,

Superimposition of label in CartoDB

Here is the CSS I used,

#populated_places{
  marker-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 1.5;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 10;
  marker-fill: #5CA2D1;
  marker-allow-overlap: true;
  marker-comp-op: dst-over;
}

#populated_places {
  text-name: [name];
  text-face-name: 'DejaVu Sans Book';
  text-size: 14;
  text-fill: #000;
  text-halo-fill: #FFF;
  text-halo-radius: 1;
  text-dy: -10;
  text-allow-overlap: false;
  text-min-padding: 10;
  text-placement-type: simple;
  text-label-position-tolerance: 10;
}

The key things I did,

  1. got rid of the ::labels namespacing
  2. added text-allow-overlap: false;. This means that you don't want one label to write over another
  3. added text-min-padding: 10;. This adds a buffer around each label that is considered in that overlap calculation
  4. added text-placement-type: simple; and text-label-position-tolerance: 10;, which just let the tiles shift around a bit to avoid overlap before omitting if possible

hope that helps

Related Articles

  • Superimposition of label in CartoDB

    Superimposition of label in CartoDBMarch 20

    I'm currently doing a carte with CartoDB where I use CSS in order to show label but my issue is that I have entities which are very close and their label are difficult to read because of their superimposition. I try some of the CSS properties' of Car

  • Changing Malvinas/Falkands (Argentina, South America) label in CartoDB?November 7

    I'd like to know if there any way to change or hide the label of "Falklands Islands" in south Atlantic Ocean, South America, Argentina, in CartoDB. I know CartoDB works with Open Street View. --------------Solutions------------- If you're referr

  • Adjust labels in CartoDB choropleth legend

    Adjust labels in CartoDB choropleth legendAugust 20

    CartoDB allows the user to change the legend values for the left label and the right label. However, I would like to add values to the three middle color values. Is there a way to do use within the the CSS or SQL options in CartoDB? Alternatively, Ca

  • How can I change the size of the infowindow in CartoDB?

    How can I change the size of the infowindow in CartoDB?January 16

    I'm working with info windows, but I'd like them to be a bit bigger than the defaults in CartoDB. To display pictures and additional information. How can I make it so they are bigger? Is there any way in the GUI to do this? Is there a more advanced w

  • Rotating labels in cartocss with controlling the rotation basepointAugust 1

    I am trying to rotate multiple text labels in cartodb/cartocss. I am offseting each label so that they appear to be stacked using text-dx and text-dy. Using text-horizontal-alignment: left; and text-vertical-alignment: bottom; I can control the align

  • Title label errors in infowindow in CartoDB - help?October 16

    Sometimes, for no discernible reason, the title labels in my CartoDB infowindows start malfunctioning. They show the underscore in the title label, and I am not able to click on the "Change title labels" button (the A with the pencil). Any idea

  • CartoDB: How to generate automatic labels and then move those labels around the mapFebruary 4

    I'm working with CartoDB and hoping to automatically generate labels that can then be moved around the map. I'm able to generate the labels, but it won't let me edit their placement. Thanks! --------------Solutions------------- You would need to open

  • How to create multible labels non-ovelaped in CartoDB?January 27

    I'm trying to make a map poiting the cities I've visited for work, in each city I've visited more than one place. Those places are my labels, bur they are overlaped. If I choose label overlap = false, only one label shows, but I need all of them to a

  • CartoDB – How can I place labels from one layer on top of an overlapping layer?January 23

    I have two overlapping polygon layers and I'd like to display the labels from the bottom layer on top of both layers so they're easily visible. Is there a way to do this with CartoCSS? Some sort of z-index for the labels? --------------Solutions-----

  • CartoDB.js - Accessing table fields in hover functionFebruary 18

    I am new to CartoDB.js and javascript in general, and I am attempting to highlight polygons in response to a mouse hover. My plan of attack attempts to utilize one of the interesting templates designed by Michael Keller. The basic elements of the vis

  • How does one use leaflet layergroups with CartoDB layers?April 9

    I'm trying to use leaflet layergroups with a cartodb layer, ala: http://leafletjs.com/reference.html#layergroup but haven't been able to successfully do it. This is what I have so far: var map = new L.Map('map', { zoomControl: true, center: [41.460,

  • CartoD3 chart not displaying - CartoDB

    CartoD3 chart not displaying - CartoDBAugust 20

    I have tornados table with columns damage,date,month . I used the following code to create a barchart . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=

  • CartoDB Point Clustering?September 13

    I need to create clusters in Cartodb. I reffered to this code https://gist.github.com/andrewxhill/8695353. I am still getting an error. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--Edit

  • CartoDB: cluster circles aren't proportionalFebruary 24

    I'm trying to visualize thousands of records on a map on CartoDB using the cluster feature but circles with 100 or 1000+ records have the same dimensions. I'd like to have more discrimination in circle dimensions, is there a way to set limits for clu

  • CartoDB detecting user location - putting dot on the mapMarch 5

    I have a CartoDB question. Long story-short, we have a project we are piloting in Rio das Pedras, Brazil, a favela near Rio. We have sampling points, working on adding Fulcrum photo uploads and some pretty bad road linework from a university there, b

  • CartoDB: How to I cluster by features? Is it even possible?March 20

    I have a set of points for a number of buildings in NYC. I would like to group those points into clusters per their respective neighborhood (ex: Chelsea, Upper East Side etc.). Each of my points have a designated neighborhood. Is there a way to tweak

  • Deactivating InfoWindow on certain Elements using CartoDB?

    Deactivating InfoWindow on certain Elements using CartoDB?June 1

    In CartoDB: How can I disable/deactivate the InfoWindow on certain Elements? For example if I have a layer with multiple lines, but only want a on-click-Infowindow or on-hover-InfoWindow on line 1 and 3, but not 2? Ditto for Labels. example: show inf

  • CartoDB.js API geojson layer not renderingOctober 27

    I am working with the CartoDB.js API and have taken this example from Azavea. http://sandbox.azavea.com/cartodbvisualization/ There are a few declarations that I do not need, however conceptually my map and this map are to do the same things. No erro

  • CartoDB layer not showing up on over mapbox layer but legend isNovember 28

    Currently, the legend is only displaying but not the layer. NOTE: I am trying to run the web map on a bootstrap modal, hence you will see: $('#webmap-modal').on('shown.bs.modal', function() in the code I am posting. With that being said, here is the

  • Getting text box to stay put in CartoDB?December 15

    I'm trying to label two areas of my map in CartoDB. The base map labels two of them already but there are two other regions that need to be labeled. Every time I put a text box over one of the regions, and then move around on the map, the text box mo

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.489 s.