4

I am trying to create a map where I have added a layer with place names. There are thousands of those in the database, and I am looking for a way to show only the most important ones on the lower zoom levels.

The CartoDB introduction has a good example of the problem with my map (notice that there are so many dots that the map can't be used for anything but seeing where people have given names to geographic features or where they live) http://docs.cartodb.com/tutorials/create_map_cartodbjs.html

In my database there is a column for place types, and I have added a min_zoom and a max_zoom column which I would like to use for filtering. The more you zoom in, the more place names are shown - based on the min and max zoom levels defined in the database.

Ideally I would be able to get zoom level as a variable to send to the database query.

Bernt Andreas Drange
  • 143
  • 3

2 Answers2

2

As an example I used the populated places data from Natural Earth cultural datasets, I imported it from CartoDB's common data section. The dataset has a column similar to yours but in this case called rank_max I used that column in combination with the zoom and applied some filters using the following CartoCSS:

/* This will apply to all markers */
#ne_10m_populated_places_simple_4{
  marker-fill-opacity: 1;
  marker-width: 0;
  marker-line-width: 0;
  marker-fill: #000000;
  marker-allow-overlap: true;
}
#ne_10m_populated_places_simple_4::labels {
  text-name: "";
  text-face-name: "DejaVu Sans Book";
  text-size: 10;
  text-label-position-tolerance: 0;
  text-fill: #000;
  text-halo-fill: #FFF;
  text-halo-radius: 1;
  text-dy: -4;
  text-allow-overlap: true;
  text-placement: point;
  text-placement-type: dummy;
}

/* This will ONLY apply if rank_max>12 condition is true */
[rank_max>12] {
  #ne_10m_populated_places_simple_4{
    marker-width: 10;
    marker-fill: #FF6600;
  }
  #ne_10m_populated_places_simple_4::labels {
    text-name: [name];
    text-size: 14;
    text-dy: -8;
  }
}

/* This will apply for zoom higher or equal to 4 but ONLY when rank_max is 11 or 12 */
[zoom>=4][rank_max>10][rank_max<=12]{
  #ne_10m_populated_places_simple_4{
    marker-width: 6;
    marker-fill: #FFA300;
  }
  #ne_10m_populated_places_simple_4::labels {
    text-name: [name];
    text-size: 12;
    text-dy: -6;
  }
}

/* This will apply for zoom higher or equal to 8 but ONLY for rank_max bellow 11 */
[zoom>=8][rank_max>4][rank_max<=10] {
  #ne_10m_populated_places_simple_4{
    marker-width: 4;
    marker-fill: #229A00;
  }
  #ne_10m_populated_places_simple_4::labels {
    text-name: [name];
    text-size: 10;
    text-dy: -4;
  }
}

You can see a live demo in the following bl.ock.org: http://bl.ocks.org/rochoa/779532bf9e5360645332 (source code)

Although it's not exactly what you need I guess it can help you to start playing with your data.

Raul Ochoa
  • 73
  • 2
  • Thank you for your answer! Very helpful. The documentation referenced in the other question was somewhat easier to understand, so I chose to accept that one. It came first, too :)

    It was this syntax used in the other place that helped me grasp things:

    [mmio>=10][zoom>6], [mmio>=8][zoom>7], [mmio>=6][zoom>8], [mmio>=4][zoom>9]

    Where it was very important to have the , in there for the OR to work.

     – Bernt Andreas Drange Dec 12 '14 at 12:44
1

I think you can achieve this with CartoCSS zoom selector. Here you have an example

juanignaciosl
  • 296
  • 1
  • 5