Home → TileMill →

Point text-name position

Admin Functions

• Remove

jacob

23 Aug, 2011 08:23 PM

Hi guys,

I am currently styling a Point Of Interest layer in TileMill. My current styles look like:

poi {

text-dx: 8; text-face-name:@font_reg; text-fill: #333; / TODO: remove / text-halo-fill:@placenamehalo; text-halo-radius:1; text-line-spacing: 2; text-name:"''"; text-size:10; text-wrap-width:40;

/ Zoom 13 /

[poiType='Park'][zoom>=13] {

text-dx: 0;
text-dy: 8;
point-file: url('images/park.png');
text-fill: @recreation;
text-name: "[name]";

}

/ More styles... / }

Everything is displayed as expected, however I was wondering if there was a carto style to replicate what the smart guys at Google do for their labels.

See: http://maps.google.co.nz/?ll=-37.788938,175.285149&spn=0.005316...

If you look at the labels next to the restaurants you will notice that they do no overlap the roads. The road position will determine the alignment of the label. (At least I think this is what they are doing)

Another thing I am struggling with is the icons sometimes do not show but the label do. I guess this is because the map thinks icon overlaps something and hides it. I would like this behaviour to apply to both the icon and label, if the map wants to hide the icon it should also hide the label.

Any help is appreciated!

1. 2 Posted by jacob on 23 Aug, 2011 08:27 PM

   

   Hi guys,

   I am currently styling a Point Of Interest layer in TileMill. My current styles look like:

   #poi {
     text-dx: 8;
     text-face-name:@font_reg;
     text-fill: #333; /* TODO: remove */
     text-halo-fill:@placenamehalo;
     text-halo-radius:1;
     text-line-spacing: 2;
     text-name:"''";
     text-size:10;
     text-wrap-width:40;
   
     /* Zoom 13 */
   
     [poiType='Park'][zoom>=13] {
       text-dx: 0;
       text-dy: 8;
       point-file: url('images/park.png');
       text-fill: @recreation;
       text-name: "[name]";
     }
   
     /* More styles... */
   }
   

   Everything is displayed as expected, however I was wondering if there was a carto style to replicate what the smart guys at Google do for their labels.

   See: http://maps.google.co.nz/?ll=-37.788938,175.285149&spn=0.005316...

   If you look at the labels next to the restaurants you will notice that they do no overlap the roads. The road position will determine the alignment of the label. (At least I think this is what they are doing)

   Another thing I am struggling with is the icons sometimes do not show but the label do. I guess this is because the map thinks icon overlaps something and hides it. I would like this behaviour to apply to both the icon and label, if the map wants to hide the icon it should also hide the label.

   Any help is appreciated!

   Admin Functions

   • Split
   • Remove

2. 3 Posted by jacob on 23 Aug, 2011 08:30 PM

   

   Hi guys,

   I am currently styling a Point Of Interest layer in TileMill. My current styles look like:

   #poi {
     text-dx: 8;
     text-face-name:@font_reg;
     text-fill: #333; /* TODO: remove */
     text-halo-fill:@placenamehalo;
     text-halo-radius:1;
     text-line-spacing: 2;
     text-name:"''";
     text-size:10;
     text-wrap-width:40;
   
     /* Zoom 13 */
   
     [poiType='Park'][zoom>=13] {
       text-dx: 0;
       text-dy: 8;
       point-file: url('images/park.png');
       text-fill: @recreation;
       text-name: "[name]";
     }
   
     /* More styles... */
   }
   

   Everything is displayed as expected, however I was wondering if there was a carto style to replicate what the smart guys at Google do for their labels.

   See: http://maps.google.co.nz/?ll=-37.788938,175.285149&spn=0.005316...

   If you look at the labels next to the restaurants you will notice that they do no overlap the roads. The road position will determine the alignment of the label. (At least I think this is what they are doing)

   Another thing I am struggling with is the icons sometimes do not show but the label do. I guess this is because the map thinks icon overlaps something and hides it. I would like this behaviour to apply to both the icon and label, if the map wants to hide the icon it should also hide the label.

   Any help is appreciated!

   Admin Functions

   • Split
   • Remove

3. 4 Posted by jacob on 24 Aug, 2011 02:16 AM

   

   I've managed to solve the 2nd issue by using shields as a way to show POI on the maps. However this has presented another issue. Carto doesn't appear to support wrap-width for shield text.

   Anyone managed to wrap the text associated with a shield icon? I'm fairly certain Mapnik supports it: http://trac.mapnik.org/wiki/ShieldSymbolizer

   Admin Functions

   • Split
   • Remove

4. 5 Posted by jacob on 25 Aug, 2011 09:06 PM

   

   As stated before I've moved to using the ShieldSymbolizer for POI rendering, which seems to be much nicer.

   As a follow up to the original question of text placement, it looks like Mapnik will soon support smarter text placement!

   See:
   http://trac.mapnik.org/milestone/GSOC%20Text%20Placement
   http://trac.mapnik.org/browser/branches/textplacement?rev=3199

   So once they do, hopefully Carto, Tilemill will make use of this!

   Admin Functions

   • Split
   • Remove

5. jacob closed this discussion on 25 Aug, 2011 09:06 PM.

Comments are currently closed for this discussion. You can start a new one.