I have created some custom icons that I'm using to represent points on my map. For the case in point, I'm using a skyscraper icon to indicate construction projects underway. It looks cool at certain scales, but when I zoom out farther to get the big picture, my icons just overlap into a blobby mess and all meaning is lost. So, is there a way to limit the scaling at a certain point so that when I zoom out farther than, say, a 15 zoom, my icons will no longer scale any larger?


You should be able to just set marker width in the CartoCSS according to the zoom level - no need to use javascript to change the layer on the fly.

See https://nyc.cartodb.com/viz/87644af8-9e11-11e3-a723-0ed66c7bc7f3/map for example. As you zoom in and out the icon size changes.

The CartoCSS for it is:

#nyc_crime_map {
   marker-width: 2;
   marker-opacity: 0.9;
   marker-allow-overlap: true;
   marker-placement: point;
   marker-type: ellipse;
   marker-line-width: 0;
   marker-line-color: #FFF;
   marker-line-opacity: 1;
#nyc_crime_map [zoom > 11] {
   marker-width: 3;
#nyc_crime_map [zoom > 12] {
   marker-width: 5;
#nyc_crime_map [zoom > 13] {
   marker-width: 7;
   marker-line-width: 0.5;
#nyc_crime_map [zoom > 15] {
   marker-width: 9;
   marker-line-width: 0.5;
#nyc_crime_map [zoom > 17] {
   marker-width: 12;
   marker-line-width: 1;

#nyc_crime_map[cr="GRAND LARCENY"] {
   marker-fill: #A6CEE3;
#nyc_crime_map[cr="ROBBERY"] {
   marker-fill: #1F78B4;
#nyc_crime_map[cr="FELONY ASSAULT"] {
   marker-fill: #B2DF8A;
#nyc_crime_map[cr="BURGLARY"] {
   marker-fill: #33A02C;
#nyc_crime_map[cr="GRAND LARCENY OF MOTOR VEHICLE"] {
   marker-fill: #FB9A99;
#nyc_crime_map[cr="RAPE"] {
   marker-fill: #E31A1C;
#nyc_crime_map[cr="MURDER"] {
   marker-fill: #FDBF6F;

This one scales slowly, you don't need to adjust as much on the zoom levels. And you could change from the icon to just a colored marker if you want.

The size that you set is in pixel, so to give the appearance of it 'not scaling' you have to lower the maker-width at various steps.

| improve this answer | |

If you're using Google Maps, you could use a map event listener on the "zoom_changed" event that would change the CartoCSS style.

  function(layer) {
    sql: 'SELECT * FROM ne_10m_populated_places_simple',
    cartocss: '#layer { marker-width: 5; }'

var sublayer = layer.getSubLayer(0);

google.maps.event.addListener(map, 'zoom_changed', function() {
  var zoom_level map.getZoom();
  if (zoom_level > 15){
    sublayer.set({'cartocss': '#layer {marker-width: 3 }' }) 
  else { 
    sublayer.set({'cartocss': '#layer {marker-width: 8 }' }) 

Here's more information that may help you get started if you needed something a bit more advanced, or information on creating the Google Map.

Google Maps Event Listeners API Reference

CartoDB.js API Reference

CartoCSS Reference

| improve this answer | |

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.