Skip to content

Instantly share code, notes, and snippets.

@fmassot
Created April 12, 2012 17:20
Show Gist options
  • Save fmassot/2369292 to your computer and use it in GitHub Desktop.
Save fmassot/2369292 to your computer and use it in GitHub Desktop.
MSS files for france house price map
/* ---- PALETTE ---- */
@city: #000;
@department: #eeeeee;
@region: #eeeeee;
@outline: #000;
/* ---- ZONE BORDERS ---- */
#adminzones::city_border[is_city=true]{
line-width: 0;
[zoom=9]{
line-width: 0.05;
line-color: @city;
line-join: round;
line-cap: round;
}
[zoom=10]{
line-width: 0.2;
line-color: @city;
line-join: round;
line-cap: round;
}
[zoom=11]{
line-width: 0.3;
line-color: @city;
line-join: round;
line-cap: round;
}
}
#adminzones::department[is_department=true]{
line-color: @department;
line-join: round;
line-cap: round;
[zoom<7]{
line-width: 0;
}
[zoom=7]{
line-width: 1.5;
}
[zoom=8]{
line-width: 2;
}
[zoom=9]{
line-width: 3;
}
[zoom>9]{
line-width: 4;
}
}
#adminzones::region[is_region=true]{
line-color: @region;
line-join: round;
line-cap: round;
line-opacity:1;
[zoom<7]{
line-width: 1.5;
}
[zoom=7]{
line-width: 3;
}
[zoom=8]{
line-width: 4;
}
[zoom=9]{
line-width: 5;
}
[zoom=10]{
line-width: 6;
}
}
#adminzones::country[is_country=true]{
line-color: @department;
line-join: round;
line-cap: round;
line-opacity:1;
[zoom<7]{
line-width: 2;
}
[zoom=7]{
line-width: 3;
}
[zoom=8]{
line-width: 4;
}
[zoom=9]{
line-width: 5;
}
[zoom=10]{
line-width: 6.5;
}
[zoom=11]{
line-width: 10;
}
}
/* ---- ZONE GRIDS FOR INTERACTION---- */
#adminzones::region_grid[is_department=true][zoom<7]{
polygon-opacity: 0;
}
#adminzones::department_grid[is_department=true][zoom>6][zoom<10]{
polygon-opacity: 0;
}
#adminzones::city_grid[is_city=true][zoom>9]{
polygon-opacity: 0;
}
#adminzones::city_arr_grid[is_city_arr=true][zoom>9]{
polygon-opacity: 0;
}
#adminzones::city[is_city=true][zoom>3]{
polygon-opacity:0.8;
line-opacity:0.2;
line-width:0;
[average_price_m2>0][average_price_m2<=761.275476828] { polygon-fill: #006837; line-color: #006837; line-width:1; }
[average_price_m2>761.275476828][average_price_m2<=1087.00614225] { polygon-fill: #1A9850; line-color: #1A9850; line-width:1; }
[average_price_m2>1087.00614225][average_price_m2<=1222.5984164] { polygon-fill: #66BD63; line-color: #66BD63; line-width:1; }
[average_price_m2>1222.5984164][average_price_m2<=1321.75374035] { polygon-fill: #A6D96A; line-color: #A6D96A; line-width:1; }
[average_price_m2>1321.75374035][average_price_m2<=1423.24897988] { polygon-fill: #D9EF8B; line-color: #D9EF8B; line-width:1; }
[average_price_m2>1423.24897988][average_price_m2<=1526.60500049] { polygon-fill: #FFFFBF; line-color: #FFFFBF; line-width:1; }
[average_price_m2>1526.60500049][average_price_m2<=1663.24815052] { polygon-fill: #FEE08B; line-color: #FEE08B; line-width:1; }
[average_price_m2>1663.24815052][average_price_m2<=1820.03985823] { polygon-fill: #FDAE61; line-color: #FDAE61; line-width:1; }
[average_price_m2>1820.03985823][average_price_m2<=2074.93451751] { polygon-fill: #F46D43; line-color: #F46D43; line-width:1; }
[average_price_m2>2074.93451751][average_price_m2<=3040.07930604] { polygon-fill: #D73027; line-color: #D73027; line-width:1; }
[average_price_m2>3040.07930604][average_price_m2<=50000] { polygon-fill: #A50026; line-color: #A50026; line-width:1; }}
}
@font_reg: "Ubuntu Regular","Arial Regular","DejaVu Sans Book";
/* ---- MAIN CITIES ---- */
#stats::a_city[is_city=true][population>150000] {
[zoom>5]{
text-face-name:@font_reg;
text-name:"[name]";
text-fill:#444;
text-halo-fill:rgba(255,255,255,0.8);
text-halo-radius:1.5;
text-transform:uppercase;
[zoom>5]{
text-size:10;
text-wrap-width: 40;
}
[zoom=7]{
text-size:11;
text-wrap-width: 40;
}
[zoom=8]{
text-size:12;
text-wrap-width: 40;
}
[zoom=9]{
text-size:13;
text-wrap-width: 40;
}
[zoom>9]{
text-size:14;
text-wrap-width: 40;
}
}
}
#stats::b_city[is_city=true][population<150000][population>100000]{
[zoom>7]{
text-face-name:@font_reg;
text-name:"[name]";
text-fill:#444;
text-halo-fill:rgba(255,255,255,0.8);
text-halo-radius:1.5;
text-transform:uppercase;
[zoom>7]{
text-size:10;
text-wrap-width: 10;
}
[zoom=9]{
text-size:11;
text-wrap-width: 10;
}
[zoom>9]{
text-size:12;
text-wrap-width: 40;
}
}
}
#stats::c_city[is_city=true][population>30000][population<120000] {
[zoom>9]{
text-face-name:@font_reg;
text-name:"[name]";
text-fill:#444;
text-halo-fill:rgba(255,255,255,0.8);
text-halo-radius:1.5;
text-transform:uppercase;
[zoom=10]{
text-size:9;
text-wrap-width: 10;
}
[zoom=11]{
text-size:10;
text-wrap-width: 10;
}
}
}
@springmeyer
Copy link

I noticed in the france_quantile_scale.mss you are setting the line color to the same as the fill. This is a good method for making sure you get very pure colors all the way to the edges of polygon borders - and to avoid AA artifacts. And I think it looks good. But you may also be interested in not using a line at all and setting the polygon-gamma to something like .5 or .6. Any value for gamma under 1 reduces the level of AA and therefore reduces the artifacts.

@fmassot
Copy link
Author

fmassot commented May 9, 2012

Yeah, exactly, I was not aware of this parameter when I wrote this gist. Now I use 0.6 for gamma : )
Thx!

@springmeyer
Copy link

right on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment