0

I am using Tilemill and the openstreetmap-carto style. The latest versions of each. I was curious to why these Center-lines are showing up in my highways and roads, and I am unable to get rid of them. It is making my basemaps look cluttered and sloppy. I can't completely eliminate the layers because they contain the road names and symbols. I narrowed it down to be in the #roads-text-ref and the #roads-text-name layers. I posted the CSS for that section below. The road centerlines I have mentioned are in the picture. I am at a loss as to how I might edit these sections to get rid of these.

example

     #roads-text-ref {
         [highway = 'motorway'][zoom >= 13] {
          shield-name: "[refs]";
          shield-size: 10;
          shield-fill: #fff;
          shield-placement: line;
          shield-file: url("symbols/shields/motorway_[width]x[height].svg");
          shield-spacing: 750;
          shield-min-distance: 30;
          shield-face-name: @bold-fonts;
          shield-clip: false;
  }
  [highway = 'trunk'][zoom >= 13] {
    shield-name: "[refs]";
    shield-size: 10;
    shield-fill: #fff;
    shield-placement: line;
    shield-file: url("symbols/shields/trunk_[width]x[height].svg");
    shield-spacing: 750;
    shield-min-distance: 30;
    shield-face-name: @bold-fonts;
    shield-clip: false;
  }

  [highway = 'primary'][zoom >= 13] {
    shield-name: "[refs]";
    shield-size: 10;
    shield-fill: #fff;
    shield-placement: line;
    shield-file: url("symbols/shields/primary_[width]x[height].svg");
    shield-spacing: 750;
    shield-min-distance: 30;
    shield-face-name: @bold-fonts;
    shield-clip: false;
  }

  [highway = 'secondary'][zoom >= 13] {
    shield-name: "[refs]";
    shield-size: 10;
    shield-fill: #fff;
    shield-placement: line;
    shield-file: url("symbols/shields/secondary_[width]x[height].svg");
    shield-spacing: 750;
    shield-min-distance: 30;
    shield-face-name: @bold-fonts;
    shield-clip: false;
  }

  [highway = 'tertiary'][zoom >= 13] {
    shield-name: "[refs]";
    shield-size: 10;
    shield-fill: #fff;
    shield-placement: line;
    shield-file: url("symbols/shields/tertiary_[width]x[height].svg");
    shield-spacing: 750;
    shield-min-distance: 30;
    shield-face-name: @bold-fonts;
    shield-clip: false;
  }

  [highway = 'unclassified'],
  [highway = 'residential'] {
    [zoom >= 15] {
      text-name: "[refs]";
      text-size: 10;
      text-fill: #000;
      text-face-name: @bold-fonts;
      text-min-distance: 18;
      text-halo-radius: 1;
      text-halo-fill: rgba(255,255,255,0.6);
      text-spacing: 750;
      text-clip: false;
    }
  }

  [highway = 'runway'],
  [highway = 'taxiway'] {
    [zoom >= 15] {
      text-name: "[refs]";
      text-size: 10;
      text-fill: #333;
      text-spacing: 750;
      text-clip: false;
      text-placement: line;
      text-min-distance: 18;
      text-face-name: @book-fonts;
      text-halo-radius: 1;
      text-halo-fill: rgba(255,255,255,0.6);
    }
  }
}

#roads-text-name {
  [highway = 'motorway'],
  [highway = 'trunk'],
  [highway = 'primary'] {
    [zoom >= 13] {
      text-name: "[name]";
      text-size: 8;
      text-fill: black;
      text-spacing: 300;
      text-clip: false;
      text-placement: line;
      text-face-name: @book-fonts;
      [tunnel = 'no'] {
        text-halo-radius: 1;
        [highway = 'motorway'] { text-halo-fill: @motorway-fill; }
        [highway = 'trunk'] { text-halo-fill: @trunk-fill; }
        [highway = 'primary'] { text-halo-fill: @primary-fill; }
      }
    }
    [zoom >= 14] {
      text-size: 9;
    }
    [zoom >= 15] {
      text-size: 10;
    }
    [zoom >= 17] {
      text-size: 11;
    }
  }
  [highway = 'secondary'] {
    [zoom >= 13] {
      text-name: "[name]";
      text-size: 8;
      text-fill: black;
      text-spacing: 300;
      text-clip: false;
      text-placement: line;
      text-face-name: @book-fonts;
      text-halo-radius: 1;
      text-halo-fill: @secondary-fill;
    }
    [zoom >= 14] {
      text-size: 9;
    }
    [zoom >= 15] {
      text-size: 10;
    }
    [zoom >= 17] {
      text-size: 11;
    }
  }
  [highway = 'tertiary'],
  [highway = 'tertiary_link'] {
    [zoom >= 14] {
      text-name: "[name]";
      text-size: 9;
      text-fill: black;
      text-spacing: 300;
      text-clip: false;
      text-placement: line;
      text-face-name: @book-fonts;
      text-halo-radius: 1;
      text-halo-fill: @tertiary-fill;
    }
    [zoom >= 17] {
      text-size: 11;
    }
  }
  [highway = 'construction'] {
    [int_construction_minor = 'no'][zoom >= 13],
    [int_construction_minor = 'yes'][zoom >= 14] {
      text-name: "[name]";
      text-size: 9;
      text-fill: black;
      text-spacing: 300;
      text-clip: false;
      text-placement: line;
      text-halo-radius: 1;
      text-halo-fill: rgba(255,255,255,0.6);
      text-face-name: @book-fonts;
      [zoom >= 17] {
        text-size: 11;
      }
    }
  }
  [highway = 'residential'],
  [highway = 'unclassified'],
  [highway = 'road'] {
    [zoom >= 15] {
      text-name: "[name]";
      text-size: 8;
      text-fill: black;
      text-spacing: 300;
      text-clip: false;
      text-placement: line;
      text-halo-radius: 1;
      text-halo-fill: @residential-fill;
      text-face-name: @book-fonts;
    }
    [zoom >= 16] {
      text-size: 9;
    }
    [zoom >= 17] {
      text-size: 11;
      text-spacing: 400;
    }
  }

  [highway = 'raceway'],
  [highway = 'service'] {
    [zoom >= 16] {
      text-name: "[name]";
      text-size: 9;
      text-fill: black;
      text-spacing: 300;
      text-clip: false;
      text-placement: line;
      text-halo-radius: 1;
      [highway = 'raceway'] { text-halo-fill: @raceway-fill; }
      [highway = 'service'] { text-halo-fill: @service-fill; }
      text-face-name: @book-fonts;
    }
    [zoom >= 17] {
      text-size: 11;
    }
  }

  [highway = 'living_street'],
  [highway = 'pedestrian'] {
    [zoom >= 15] {
      text-name: "[name]";
      text-size: 8;
      text-fill: black;
      text-spacing: 300;
      text-clip: false;
      text-placement: line;
      text-halo-radius: 1;
      [highway = 'living_street'] { text-halo-fill: @living-street-fill; }
      [highway = 'pedestrian'] { text-halo-fill: @pedestrian-fill; }
      text-face-name: @book-fonts;
    }
    [zoom >= 16] {
      text-size: 9;
    }
    [zoom >= 17] {
      text-size: 11;
    }
  }
}
  • have you considered Mapbox Studio it replaces CartoCSS and allows more control of the Road Labels – MDHald Jan 13 '16 at 20:16
  • I did try Mapbox Studio, from what I saw there is not templates such as openstreetmap-carto created yet. I also want to run the mbtiles from my own server and not upload to the MabBox Cloud. – GravitaZ Jan 13 '16 at 20:18
  • Fair enough - In this case I will be of zero help - I do not know CartoCSS very well myself. – MDHald Jan 13 '16 at 20:21
  • Do these lines appear also when you save a picture with the export function? – sabas Jan 14 '16 at 10:57
  • I actually thought that might be the case and exported the mbtiles anyway just to test it out. It still had the lines in them. Would a picture be different? – GravitaZ Jan 14 '16 at 13:54
1

I was able to fix it well enough for my needs by just manually overriding the styles on the "style.mss" document. It looks way more acceptable now.

 #roads-text-name {
[zoom >= 13]{
line-color:#FFFFFF;
 }
 }  
 #roads-text-ref {
[zoom >= 13]{
line-color:#FFFFFF;
  }
}

enter image description here

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.