2

enter image description hereI am interested to use the pin icon (see attached image) in my cartodb map (cluster type).

Can someone tell me how do I change the color of the pin to reflect categorical data? I tried to click img fill but it the button is not active when I select the pin icon as my marker type.

  • @ramiroaznar do you know the solution? – Geomap Jun 30 '16 at 12:41
1

You can make a cluster map clicking on cluster map in the Wizard, and then adding at the beginning of your CartoCSS code marker-file (in my case I have used this url) as Jorge said. Secondly, add in every bucket a style (in my case, because the marker is a circle I have to change the marker-line-color property). You will end up with a CartoCSS code like this one:

/** cluster + custom marker visualization */

#populated_places{
  marker-width: 12;
  marker-fill: #FD8D3C;
  marker-line-width: 1.5;
  marker-fill-opacity: 1;
  marker-line-opacity: 1;
  marker-line-color: #fff;
  marker-allow-overlap: true;
  marker-file: url(https://upload.wikimedia.org/wikipedia/commons/4/43/Blue_circle_for_diabetes.svg);

  [src = 'bucketC'] {
    marker-line-width: 5;
    marker-width: 24;
    marker-line-color: #d1eeea;
  } 

  [src = 'bucketB'] {
    marker-line-width: 5;
    marker-width: 44;
    marker-line-color: #68abb8;
  } 

  [src = 'bucketA'] {
    marker-line-width: 5;
    marker-width: 64;
    marker-line-color: #2a5674;
  } 
}

#populated_places::labels { 
  text-size: 0; 
  text-fill: #fff; 
  text-opacity: 0.8;
  text-name: [points_count]; 
  text-face-name: 'DejaVu Sans Book'; 
  text-halo-fill: #FFF; 
  text-halo-radius: 0; 

  [src = 'bucketC'] {
    text-size: 10;
    text-halo-radius: 0.5;
  }

  [src = 'bucketB'] {
    text-size: 15;
    text-halo-radius: 0.5;
  }

  [src = 'bucketA'] {
    text-size: 20;
    text-halo-radius: 0.5;
  }

  text-allow-overlap: true;

  [zoom>11]{ text-size: 16; }
  [points_count = 1]{ text-size: 0; }
}

And here you have the resulting map.

  • Does this work if I am using a category map? – Geomap Jul 1 '16 at 3:52
  • Your marker effect seems interesting. I will explore it when I have the time. Thank you ramino. – Geomap Jul 1 '16 at 6:08
  • Do you know how to change the marker line width? This is the URL sengyapglobalmomentum.cartodb.com/viz/… I am using. I cannot seem to increase the marker line width despite changing it to 20. – Geomap Jul 1 '16 at 6:26
  • First, about mixing cluster and categorical maps. Cluster maps work aggregating data points, it does not aggregate markers depending on (categorical) values. In my map, I use the word category just to color the different clusters. BUT what you can do is creating a new dataset for each category. Then represent each layer as clusters. Secondly, what you are looking for is the marker-line-width property. Here you have all the CartoCSS properties. – ramiroaznar Jul 1 '16 at 7:32
  • I am using marker-line-width but there is no line despite me setting the width as 20. The color is set as black, and the marker line opacity is set as 1, so I should be able to see the marker line. However, it is not showing up on my map. Any ideas why @ramino? Thank you for your help. – Geomap Jul 1 '16 at 9:32
0

Set first the color and then select an image if you want to use just the wizard, but at the end, the CartoCSS code will lo /** simple visualization */

#test_3{
    marker-file: url(http://com.cartodb.users-assets.production.s3.amazonaws.com/simpleicon/flag31.svg);
    marker-fill-opacity: 0.9;
    marker-placement: point;
    marker-width: 10;
    marker-fill: #B81609;
}

So you see, you have the marker file but also the fill properties to set image and color respectively.

  • Does this work if I am using a category map? – Geomap Jul 1 '16 at 3:51
  • Do you know how to change the marker line width? This is the URL sengyapglobalmomentum.cartodb.com/viz/… I am using. I cannot seem to increase the marker line width despite changing it to 20. – Geomap Jul 1 '16 at 6:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.