Open knutole opened 9 years ago
Saving some styles for easy reference.
// CartoCSS reference guide: // https://bit.ly/1z5OvXT // Cheat Sheet: // ------------ // Polygons: // polygon-fill: red; // polygon-opacity: 0.5; // // Lines: // line-color: blue; // line-width: 2; // line-opacity: 0.9; // // Text: // text-name: [field_name]; // text-size: 12; // // Filters: // [zoom>=12] { // // CSS for zoom 12 and higher // } // [field_name="Field Name"] { // // CSS for this field only // } //// lighten and darken colors //lighten(#ace, 10%); //darken(#ace, 10%); //// saturate and desaturate //saturate(#550000, 10%); //desaturate(#00ff00, 10%); //// increase or decrease the opacity of a color //fadein(#fafafa, 10%); //fadeout(#fefefe, 14%); //// spin rotates a color around the color wheel by degr //spin(#ff00ff, 10); //// mix generates a color in between two other colors. //mix(#fff, #000, 50%); // // zoom (works!) [zoom<13] { //marker-width: [coherence] * 1; marker-width: 0.5px; // marker style // marker-fill: #00ffb4; marker-allow-overlap: true; marker-clip: false; // marker-comp-op: screen; marker-opacity: 0.1; // [vel<-20] { //marker-width: [vel] * (-1/80); //} } // zoom (works!) [zoom=13] { //marker-width: [coherence] * 1; marker-width: 1px; // [vel<-20] { //marker-width: [vel] * (-1/40); // } } [zoom=14] { // marker-width: [coherence] * 7; marker-width: 2px; // [vel<-40] { //marker-width: [vel] * (-1/40); // } } // zoom (works!) [zoom=15] { // marker-width: [coherence] * 7; marker-width: 4px; //[vel<-40] { //marker-width: [vel] * (-1/35); //} } // zoom (works!) [zoom=16] { marker-width: 6px; [vel<-20] { marker-width: [vel] * (-1/20); } } // zoom (works!) [zoom=17] { marker-width: 8px; //[vel<-40] { // marker-width: [vel] * (-1/3); //} } // marker width //@marker-width: [coherence] * 20; //[vel<-40] { // marker-width: [vel] * (-1/8); // //} // ################################################# // scale calcs per [var] // todo: insert max, min from meta // -- // scale by velocity @scale_column_vel : [vel]; @scale_max_vel : -50; // height_max @scale_min_vel : -200; // height_min // calc steps velocity, n steps @delta_vel : (@scale_max_vel - @scale_min_vel)/10; @step_1_vel : @scale_min_vel; @step_2_vel : @scale_min_vel + @delta_vel; @step_3_vel : @scale_min_vel + (@delta_vel * 2); @step_4_vel : @scale_min_vel + (@delta_vel * 3); @step_5_vel : @scale_min_vel + (@delta_vel * 4); @step_6_vel : @scale_min_vel + (@delta_vel * 5); @step_7_vel : @scale_min_vel + (@delta_vel * 6); @step_8_vel : @scale_min_vel + (@delta_vel * 7); @step_9_vel : @scale_min_vel + (@delta_vel * 8); @step_10_vel : @scale_min_vel + (@delta_vel * 9); // #################################################### // scale by height @scale_column_height : [height]; @scale_max_height : 1615; // height_max @scale_min_height : 600; // height_min // calc steps velocity @delta_height : (@scale_max_height - @scale_min_height)/10; @step_1_height : @scale_min_height; @step_2_height : @scale_min_height + @delta_height; @step_3_height : @scale_min_height + (@delta_height * 2); @step_4_height : @scale_min_height + (@delta_height * 3); @step_5_height : @scale_min_height + (@delta_height * 4); @step_6_height : @scale_min_height + (@delta_height * 5); @step_7_height : @scale_min_height + (@delta_height * 6); @step_8_height : @scale_min_height + (@delta_height * 7); @step_9_height : @scale_min_height + (@delta_height * 8); @step_10_height : @scale_min_height + (@delta_height * 9); // color scale @color_1_vel : #2f00ff; @color_2_vel : #003dff; @color_3_vel : #009eff; @color_4_vel : #00ffdf; @color_5_vel : #00ffa9; @color_6_vel : #a5ff00; @color_7_vel : #ffd700; @color_8_vel : #ff8100; @color_9_vel : #ff3600; @color_10_vel : #ff0000; // color block per [var] // spin //@spin_color_height: #ff0000; //@color_1_height : spin(@spin_color_height, 10); //@color_2_height : spin(@spin_color_height, 20); //@color_3_height : spin(@spin_color_height, 30); //@color_4_height : spin(@spin_color_height, 40); //@color_5_height : spin(@spin_color_height, 50); //@color_6_height : spin(@spin_color_height, 60); //@color_7_height : spin(@spin_color_height, 70); //@color_8_height : spin(@spin_color_height, 80); //@color_9_height : spin(@spin_color_height, 90); //@color_10_height : spin(@spin_color_height, 100); // spin //@spin_color_vel: #fb00ff; //@color_1_vel : spin(@spin_color_vel, 10); //@color_2_vel : spin(@spin_color_vel, 20); //@color_3_vel : spin(@spin_color_vel, 30); //@color_4_vel : spin(@spin_color_vel, 40); //@color_5_vel : spin(@spin_color_vel, 50); //@color_6_vel : spin(@spin_color_vel, 60); //@color_7_vel : spin(@spin_color_vel, 70); //@color_8_vel : spin(@spin_color_vel, 80); //@color_9_vel : spin(@spin_color_vel, 90); //@color_10_vel : spin(@spin_color_vel, 100); //desaturate //@ds_color_vel : #ff002b; //@color_1_vel : desaturate(@ds_color_vel, 0%); //@color_2_vel : desaturate(@ds_color_vel, 10%); //@color_3_vel : desaturate(@ds_color_vel, 20%); //@color_4_vel : desaturate(@ds_color_vel, 30%); //@color_5_vel : desaturate(@ds_color_vel, 40%); //@color_6_vel : desaturate(@ds_color_vel, 50%); //@color_7_vel : desaturate(@ds_color_vel, 60%); //@color_8_vel : desaturate(@ds_color_vel, 70%); //@color_9_vel : desaturate(@ds_color_vel, 80%); //@color_10_vel : desaturate(@ds_color_vel, 90%); //desaturate @ds_color_height : #ffac00; @color_1_height : desaturate(@ds_color_height, 0%); @color_2_height : desaturate(@ds_color_height, 10%); @color_3_height : desaturate(@ds_color_height, 20%); @color_4_height : desaturate(@ds_color_height, 30%); @color_5_height : desaturate(@ds_color_height, 40%); @color_6_height : desaturate(@ds_color_height, 50%); @color_7_height : desaturate(@ds_color_height, 60%); @color_8_height : desaturate(@ds_color_height, 70%); @color_9_height : desaturate(@ds_color_height, 80%); @color_10_height : desaturate(@ds_color_height, 90%); // desat //@ds_color : #ff4100; //@color_1 : desaturate(@ds_color, 100%); //@color_2 : desaturate(@ds_color, 90%); //@color_3 : desaturate(@ds_color, 80%); //@color_4 : desaturate(@ds_color, 70%); //@color_5 : desaturate(@ds_color, 60%); //@color_6 : desaturate(@ds_color, 50%); //@color_7 : desaturate(@ds_color, 40%); //@color_8 : desaturate(@ds_color, 30%); //@color_9 : desaturate(@ds_color, 20%); //@color_10 : desaturate(@ds_color, 10%); // fade in //@f_color: #ffac00; //@color_1 : fadein(@f_color, 0%); //@color_2 : fadein(@f_color, 10%); //@color_3 : fadein(@f_color, 20%); //@color_4 : fadein(@f_color, 30%); //@color_5 : fadein(@f_color, 40%); //@color_6 : fadein(@f_color, 50%); //@color_7 : fadein(@f_color, 60%); //@color_8 : fadein(@f_color, 70%); //@color_9 : fadein(@f_color, 80%); //@color_10 : fadein(@f_color, 90%); #layer { // marker style marker-fill: #00ffb4; marker-allow-overlap: true; marker-clip: false; marker-comp-op: screen; marker-opacity: 0.5; // #################################### // SCALE TEMPLATE, per [var] // .. // color [@scale_column_vel < @step_2_vel] { marker-fill: @color_1_vel; } [@scale_column_vel > @step_2_vel][@scale_column_vel < @step_3_vel] { marker-fill: @color_2_vel; } [@scale_column_vel > @step_3_vel][@scale_column_vel < @step_4_vel] { marker-fill: @color_3_vel; } [@scale_column_vel > @step_4_vel][@scale_column_vel < @step_5_vel] { marker-fill: @color_4_vel; } [@scale_column_vel > @step_5_vel][@scale_column_vel < @step_6_vel] { marker-fill: @color_5_vel; } [@scale_column_vel > @step_6_vel][@scale_column_vel < @step_7_vel] { marker-fill: @color_6_vel } [@scale_column_vel > @step_7_vel][@scale_column_vel < @step_8_vel] { marker-fill: @color_7_vel; } [@scale_column_vel > @step_8_vel][@scale_column_vel < @step_9_vel] { marker-fill: @color_8_vel; } [@scale_column_vel > @step_9_vel][@scale_column_vel < @step_10_vel] { marker-fill: @color_9_vel; } [@scale_column_vel > @step_10_vel] { marker-fill: @color_10_vel; } // ############################################################ // #################################### // SCALE TEMPLATE, per [var] // .. // color [@scale_column_height < @step_2_height] { marker-fill: @color_1_height; } [@scale_column_height > @step_2_height][@scale_column_height < @step_3_height] { marker-fill: @color_2_height; } [@scale_column_height > @step_3_height][@scale_column_height < @step_4_height] { marker-fill: @color_3_height; } [@scale_column_height > @step_4_height][@scale_column_height < @step_5_height] { marker-fill: @color_4_height; } [@scale_column_height > @step_5_height][@scale_column_height < @step_6_height] { marker-fill: @color_5_height; } [@scale_column_height > @step_6_height][@scale_column_height < @step_7_height] { marker-fill: @color_6_height } [@scale_column_height > @step_7_height][@scale_column_height < @step_8_height] { marker-fill: @color_7_height; } [@scale_column_height > @step_8_height][@scale_column_height < @step_9_height] { marker-fill: @color_8_height; } [@scale_column_height > @step_9_height][@scale_column_height < @step_10_height] { marker-fill: @color_9_height; } [@scale_column_height > @step_10_height] { marker-fill: @color_10_height; } // ############################################################ // snowcaps [height>1000] { marker-fill: snow; } // velocity //[vel<-50] { // marker-fill: #d1ff04; // marker-width: ([vel] * (-1))/20; // //} }
// CartoCSS reference guide: // https://bit.ly/1z5OvXT // Cheat Sheet: // ------------ // Polygons: // polygon-fill: red; // polygon-opacity: 0.5; // // Lines: // line-color: blue; // line-width: 2; // line-opacity: 0.9; // // Text: // text-name: [field_name]; // text-size: 12; // // Filters: // [zoom>=12] { // // CSS for zoom 12 and higher // } // [field_name="Field Name"] { // // CSS for this field only // } //// lighten and darken colors //lighten(#ace, 10%); //darken(#ace, 10%); //// saturate and desaturate //saturate(#550000, 10%); //desaturate(#00ff00, 10%); //// increase or decrease the opacity of a color //fadein(#fafafa, 10%); //fadeout(#fefefe, 14%); //// spin rotates a color around the color wheel by degr //spin(#ff00ff, 10); //// mix generates a color in between two other colors. //mix(#fff, #000, 50%); // // zoom (works!) [zoom<13] { //marker-width: [coherence] * 1; marker-width: 0.5px; // marker style // marker-fill: #00ffb4; //marker-allow-overlap: true; marker-clip: false; // marker-comp-op: screen; marker-opacity: 0.4; [vel<-20] { marker-width: [vel] * (-1/50); } } // zoom (works!) [zoom=13] { //marker-width: [coherence] * 1; marker-width: 1px; [vel<-40] { marker-width: [vel] * (-1/20); } } [zoom=14] { // marker-width: [coherence] * 7; marker-width: 2px; // [vel<-40] { //marker-width: [vel] * (-1/40); // } } // zoom (works!) [zoom=15] { // marker-width: [coherence] * 7; marker-width: 4px; //[vel<-40] { //marker-width: [vel] * (-1/35); //} } // zoom (works!) [zoom=16] { marker-width: 6px; [vel<-20] { marker-width: [vel] * (-1/20); } } // zoom (works!) [zoom=17] { marker-width: 8px; //[vel<-40] { // marker-width: [vel] * (-1/3); //} } // marker width //@marker-width: [coherence] * 20; //[vel<-40] { // marker-width: [vel] * (-1/8); // //} // ################################################# // scale calcs per [var] // todo: insert max, min from meta // -- // scale by velocity @scale_column_vel : [vel]; @scale_max_vel : 0; // height_max @scale_min_vel : -200; // height_min // calc steps velocity, n steps @delta_vel : (@scale_max_vel - @scale_min_vel)/10; @step_1_vel : @scale_min_vel; @step_2_vel : @scale_min_vel + @delta_vel; @step_3_vel : @scale_min_vel + (@delta_vel * 2); @step_4_vel : @scale_min_vel + (@delta_vel * 3); @step_5_vel : @scale_min_vel + (@delta_vel * 4); @step_6_vel : @scale_min_vel + (@delta_vel * 5); @step_7_vel : @scale_min_vel + (@delta_vel * 6); @step_8_vel : @scale_min_vel + (@delta_vel * 7); @step_9_vel : @scale_min_vel + (@delta_vel * 8); @step_10_vel : @scale_min_vel + (@delta_vel * 9); // #################################################### // scale by height @scale_column_height : [height]; @scale_max_height : 1615; // height_max @scale_min_height : 600; // height_min // calc steps velocity @delta_height : (@scale_max_height - @scale_min_height)/10; @step_1_height : @scale_min_height; @step_2_height : @scale_min_height + @delta_height; @step_3_height : @scale_min_height + (@delta_height * 2); @step_4_height : @scale_min_height + (@delta_height * 3); @step_5_height : @scale_min_height + (@delta_height * 4); @step_6_height : @scale_min_height + (@delta_height * 5); @step_7_height : @scale_min_height + (@delta_height * 6); @step_8_height : @scale_min_height + (@delta_height * 7); @step_9_height : @scale_min_height + (@delta_height * 8); @step_10_height : @scale_min_height + (@delta_height * 9); //// color scale //@color_1_vel : #2f00ff; //@color_2_vel : #003dff; //@color_3_vel : #009eff; //@color_4_vel : #00ffdf; //@color_5_vel : #00ffa9; //@color_6_vel : #a5ff00; //@color_7_vel : #ffd700; //@color_8_vel : #ff8100; //@color_9_vel : #ff3600; //@color_10_vel : #ff0000; // color block per [var] // spin //@spin_color_height: #ff0000; //@color_1_height : spin(@spin_color_height, 10); //@color_2_height : spin(@spin_color_height, 20); //@color_3_height : spin(@spin_color_height, 30); //@color_4_height : spin(@spin_color_height, 40); //@color_5_height : spin(@spin_color_height, 50); //@color_6_height : spin(@spin_color_height, 60); //@color_7_height : spin(@spin_color_height, 70); //@color_8_height : spin(@spin_color_height, 80); //@color_9_height : spin(@spin_color_height, 90); //@color_10_height : spin(@spin_color_height, 100); // spin @spin_color_vel: #00ff1d; @color_1_vel : spin(@spin_color_vel, 10); @color_2_vel : spin(@spin_color_vel, 20); @color_3_vel : spin(@spin_color_vel, 30); @color_4_vel : spin(@spin_color_vel, 40); @color_5_vel : spin(@spin_color_vel, 50); @color_6_vel : spin(@spin_color_vel, 60); @color_7_vel : spin(@spin_color_vel, 70); @color_8_vel : spin(@spin_color_vel, 80); @color_9_vel : spin(@spin_color_vel, 90); @color_10_vel : spin(@spin_color_vel, 360); //desaturate //@ds_color_vel : #ff002b; //@color_1_vel : desaturate(@ds_color_vel, 0%); //@color_2_vel : desaturate(@ds_color_vel, 10%); //@color_3_vel : desaturate(@ds_color_vel, 20%); //@color_4_vel : desaturate(@ds_color_vel, 30%); //@color_5_vel : desaturate(@ds_color_vel, 40%); //@color_6_vel : desaturate(@ds_color_vel, 50%); //@color_7_vel : desaturate(@ds_color_vel, 60%); //@color_8_vel : desaturate(@ds_color_vel, 70%); //@color_9_vel : desaturate(@ds_color_vel, 80%); //@color_10_vel : desaturate(@ds_color_vel, 90%); //desaturate @ds_color_height : #0012ff; @color_1_height : desaturate(@ds_color_height, 0%); @color_2_height : desaturate(@ds_color_height, 10%); @color_3_height : desaturate(@ds_color_height, 20%); @color_4_height : desaturate(@ds_color_height, 30%); @color_5_height : desaturate(@ds_color_height, 40%); @color_6_height : desaturate(@ds_color_height, 50%); @color_7_height : desaturate(@ds_color_height, 60%); @color_8_height : desaturate(@ds_color_height, 70%); @color_9_height : desaturate(@ds_color_height, 80%); @color_10_height : desaturate(@ds_color_height, 90%); // desat //@ds_color : #ff4100; //@color_1 : desaturate(@ds_color, 100%); //@color_2 : desaturate(@ds_color, 90%); //@color_3 : desaturate(@ds_color, 80%); //@color_4 : desaturate(@ds_color, 70%); //@color_5 : desaturate(@ds_color, 60%); //@color_6 : desaturate(@ds_color, 50%); //@color_7 : desaturate(@ds_color, 40%); //@color_8 : desaturate(@ds_color, 30%); //@color_9 : desaturate(@ds_color, 20%); //@color_10 : desaturate(@ds_color, 10%); // fade in //@f_color: #ffac00; //@color_1 : fadein(@f_color, 0%); //@color_2 : fadein(@f_color, 10%); //@color_3 : fadein(@f_color, 20%); //@color_4 : fadein(@f_color, 30%); //@color_5 : fadein(@f_color, 40%); //@color_6 : fadein(@f_color, 50%); //@color_7 : fadein(@f_color, 60%); //@color_8 : fadein(@f_color, 70%); //@color_9 : fadein(@f_color, 80%); //@color_10 : fadein(@f_color, 90%); #layer { // marker style marker-fill: #00ffb4; marker-allow-overlap: true; marker-clip: false; marker-comp-op: screen; marker-opacity: 0.9; marker-width: 3px; // ################################## // SCALE TEMPLATE, per [var] // .. // color [@scale_column_vel < @step_2_vel] { marker-fill: @color_1_vel; } [@scale_column_vel > @step_2_vel][@scale_column_vel < @step_3_vel] { marker-fill: @color_2_vel; } [@scale_column_vel > @step_3_vel][@scale_column_vel < @step_4_vel] { marker-fill: @color_3_vel; } [@scale_column_vel > @step_4_vel][@scale_column_vel < @step_5_vel] { marker-fill: @color_4_vel; } [@scale_column_vel > @step_5_vel][@scale_column_vel < @step_6_vel] { marker-fill: @color_5_vel; } [@scale_column_vel > @step_6_vel][@scale_column_vel < @step_7_vel] { marker-fill: @color_6_vel } [@scale_column_vel > @step_7_vel][@scale_column_vel < @step_8_vel] { marker-fill: @color_7_vel; } [@scale_column_vel > @step_8_vel][@scale_column_vel < @step_9_vel] { marker-fill: @color_8_vel; } [@scale_column_vel > @step_9_vel][@scale_column_vel < @step_10_vel] { marker-fill: @color_9_vel; } [@scale_column_vel > @step_10_vel] { marker-fill: @color_10_vel; } // ############################################################ // #################################### // SCALE TEMPLATE, per [var] // .. // color [@scale_column_height < @step_2_height] { marker-fill: @color_1_height; } [@scale_column_height > @step_2_height][@scale_column_height < @step_3_height] { marker-fill: @color_2_height; } [@scale_column_height > @step_3_height][@scale_column_height < @step_4_height] { marker-fill: @color_3_height; } [@scale_column_height > @step_4_height][@scale_column_height < @step_5_height] { marker-fill: @color_4_height; } [@scale_column_height > @step_5_height][@scale_column_height < @step_6_height] { marker-fill: @color_5_height; } [@scale_column_height > @step_6_height][@scale_column_height < @step_7_height] { marker-fill: @color_6_height } [@scale_column_height > @step_7_height][@scale_column_height < @step_8_height] { marker-fill: @color_7_height; } [@scale_column_height > @step_8_height][@scale_column_height < @step_9_height] { marker-fill: @color_8_height; } [@scale_column_height > @step_9_height][@scale_column_height < @step_10_height] { marker-fill: @color_9_height; } [@scale_column_height > @step_10_height] { marker-fill: @color_10_height; } // ############################################################ // snowcaps [height<200] { marker-fill: snow; } // velocity //[vel<-50] { // marker-fill: #d1ff04; // marker-width: ([vel] * (-1))/20; // //} }
// CartoCSS reference guide: // https://bit.ly/1z5OvXT // Cheat Sheet: // ------------ // Polygons: // polygon-fill: red; // polygon-opacity: 0.5; // // Lines: // line-color: blue; // line-width: 2; // line-opacity: 0.9; // // Text: // text-name: [field_name]; // text-size: 12; // // Filters: // [zoom>=12] { // // CSS for zoom 12 and higher // } // [field_name="Field Name"] { // // CSS for this field only // } //// lighten and darken colors //lighten(#ace, 10%); //darken(#ace, 10%); //// saturate and desaturate //saturate(#550000, 10%); //desaturate(#00ff00, 10%); //// increase or decrease the opacity of a color //fadein(#fafafa, 10%); //fadeout(#fefefe, 14%); //// spin rotates a color around the color wheel by degr //spin(#ff00ff, 10); //// mix generates a color in between two other colors. //mix(#fff, #000, 50%); // // zoom (works!) [zoom<13] { //marker-width: [coherence] * 1; marker-width: 0.5px; // marker style // marker-fill: #00ffb4; marker-allow-overlap: true; marker-clip: false; // marker-comp-op: screen; marker-opacity: 0.1; // [vel<-20] { //marker-width: [vel] * (-1/80); //} } // zoom (works!) [zoom=13] { //marker-width: [coherence] * 1; marker-width: 1px; // [vel<-20] { //marker-width: [vel] * (-1/40); // } } [zoom=14] { // marker-width: [coherence] * 7; marker-width: 2px; // [vel<-40] { //marker-width: [vel] * (-1/40); // } } // zoom (works!) [zoom=15] { // marker-width: [coherence] * 7; marker-width: 4px; //[vel<-40] { //marker-width: [vel] * (-1/35); //} } // zoom (works!) [zoom=16] { marker-width: 6px; [vel<-20] { marker-width: [vel] * (-1/20); } } // zoom (works!) [zoom=17] { marker-width: 8px; //[vel<-40] { // marker-width: [vel] * (-1/3); //} } // marker width //@marker-width: [coherence] * 20; //[vel<-40] { // marker-width: [vel] * (-1/8); // //} // ################################################# // scale calcs per [var] // todo: insert max, min from meta // -- // scale by velocity @scale_column_vel : [vel]; @scale_max_vel : -50; // height_max @scale_min_vel : -200; // height_min // calc steps velocity, n steps @delta_vel : (@scale_max_vel - @scale_min_vel)/10; @step_1_vel : @scale_min_vel; @step_2_vel : @scale_min_vel + @delta_vel; @step_3_vel : @scale_min_vel + (@delta_vel * 2); @step_4_vel : @scale_min_vel + (@delta_vel * 3); @step_5_vel : @scale_min_vel + (@delta_vel * 4); @step_6_vel : @scale_min_vel + (@delta_vel * 5); @step_7_vel : @scale_min_vel + (@delta_vel * 6); @step_8_vel : @scale_min_vel + (@delta_vel * 7); @step_9_vel : @scale_min_vel + (@delta_vel * 8); @step_10_vel : @scale_min_vel + (@delta_vel * 9); // #################################################### // scale by height @scale_column_height : [height]; @scale_max_height : 1615; // height_max @scale_min_height : 600; // height_min // calc steps velocity @delta_height : (@scale_max_height - @scale_min_height)/10; @step_1_height : @scale_min_height; @step_2_height : @scale_min_height + @delta_height; @step_3_height : @scale_min_height + (@delta_height * 2); @step_4_height : @scale_min_height + (@delta_height * 3); @step_5_height : @scale_min_height + (@delta_height * 4); @step_6_height : @scale_min_height + (@delta_height * 5); @step_7_height : @scale_min_height + (@delta_height * 6); @step_8_height : @scale_min_height + (@delta_height * 7); @step_9_height : @scale_min_height + (@delta_height * 8); @step_10_height : @scale_min_height + (@delta_height * 9); // color scale @color_1_vel : #2f00ff; @color_2_vel : #003dff; @color_3_vel : #009eff; @color_4_vel : #00ffdf; @color_5_vel : #00ffa9; @color_6_vel : #a5ff00; @color_7_vel : #ffd700; @color_8_vel : #ff8100; @color_9_vel : #ff3600; @color_10_vel : #ff0000; // color block per [var] // spin //@spin_color_height: #ff0000; //@color_1_height : spin(@spin_color_height, 10); //@color_2_height : spin(@spin_color_height, 20); //@color_3_height : spin(@spin_color_height, 30); //@color_4_height : spin(@spin_color_height, 40); //@color_5_height : spin(@spin_color_height, 50); //@color_6_height : spin(@spin_color_height, 60); //@color_7_height : spin(@spin_color_height, 70); //@color_8_height : spin(@spin_color_height, 80); //@color_9_height : spin(@spin_color_height, 90); //@color_10_height : spin(@spin_color_height, 100); // spin //@spin_color_vel: #fb00ff; //@color_1_vel : spin(@spin_color_vel, 10); //@color_2_vel : spin(@spin_color_vel, 20); //@color_3_vel : spin(@spin_color_vel, 30); //@color_4_vel : spin(@spin_color_vel, 40); //@color_5_vel : spin(@spin_color_vel, 50); //@color_6_vel : spin(@spin_color_vel, 60); //@color_7_vel : spin(@spin_color_vel, 70); //@color_8_vel : spin(@spin_color_vel, 80); //@color_9_vel : spin(@spin_color_vel, 90); //@color_10_vel : spin(@spin_color_vel, 100); //desaturate //@ds_color_vel : #ff002b; //@color_1_vel : desaturate(@ds_color_vel, 0%); //@color_2_vel : desaturate(@ds_color_vel, 10%); //@color_3_vel : desaturate(@ds_color_vel, 20%); //@color_4_vel : desaturate(@ds_color_vel, 30%); //@color_5_vel : desaturate(@ds_color_vel, 40%); //@color_6_vel : desaturate(@ds_color_vel, 50%); //@color_7_vel : desaturate(@ds_color_vel, 60%); //@color_8_vel : desaturate(@ds_color_vel, 70%); //@color_9_vel : desaturate(@ds_color_vel, 80%); //@color_10_vel : desaturate(@ds_color_vel, 90%); //desaturate @ds_color_height : #ffac00; @color_1_height : desaturate(@ds_color_height, 0%); @color_2_height : desaturate(@ds_color_height, 10%); @color_3_height : desaturate(@ds_color_height, 20%); @color_4_height : desaturate(@ds_color_height, 30%); @color_5_height : desaturate(@ds_color_height, 40%); @color_6_height : desaturate(@ds_color_height, 50%); @color_7_height : desaturate(@ds_color_height, 60%); @color_8_height : desaturate(@ds_color_height, 70%); @color_9_height : desaturate(@ds_color_height, 80%); @color_10_height : desaturate(@ds_color_height, 90%); // desat //@ds_color : #ff4100; //@color_1 : desaturate(@ds_color, 100%); //@color_2 : desaturate(@ds_color, 90%); //@color_3 : desaturate(@ds_color, 80%); //@color_4 : desaturate(@ds_color, 70%); //@color_5 : desaturate(@ds_color, 60%); //@color_6 : desaturate(@ds_color, 50%); //@color_7 : desaturate(@ds_color, 40%); //@color_8 : desaturate(@ds_color, 30%); //@color_9 : desaturate(@ds_color, 20%); //@color_10 : desaturate(@ds_color, 10%); // fade in //@f_color: #ffac00; //@color_1 : fadein(@f_color, 0%); //@color_2 : fadein(@f_color, 10%); //@color_3 : fadein(@f_color, 20%); //@color_4 : fadein(@f_color, 30%); //@color_5 : fadein(@f_color, 40%); //@color_6 : fadein(@f_color, 50%); //@color_7 : fadein(@f_color, 60%); //@color_8 : fadein(@f_color, 70%); //@color_9 : fadein(@f_color, 80%); //@color_10 : fadein(@f_color, 90%); #layer { // snowcaps [height<1200] { marker-fill: snow; } // marker style marker-fill: #00ffb4; marker-allow-overlap: true; marker-clip: false; marker-comp-op: screen; marker-opacity: 0.5; // #################################### // SCALE TEMPLATE, per [var] // .. // color [@scale_column_vel < @step_2_vel] { marker-fill: @color_1_vel; } [@scale_column_vel > @step_2_vel][@scale_column_vel < @step_3_vel] { marker-fill: @color_2_vel; } [@scale_column_vel > @step_3_vel][@scale_column_vel < @step_4_vel] { marker-fill: @color_3_vel; } [@scale_column_vel > @step_4_vel][@scale_column_vel < @step_5_vel] { marker-fill: @color_4_vel; } [@scale_column_vel > @step_5_vel][@scale_column_vel < @step_6_vel] { marker-fill: @color_5_vel; } [@scale_column_vel > @step_6_vel][@scale_column_vel < @step_7_vel] { marker-fill: @color_6_vel } [@scale_column_vel > @step_7_vel][@scale_column_vel < @step_8_vel] { marker-fill: @color_7_vel; } [@scale_column_vel > @step_8_vel][@scale_column_vel < @step_9_vel] { marker-fill: @color_8_vel; } [@scale_column_vel > @step_9_vel][@scale_column_vel < @step_10_vel] { marker-fill: @color_9_vel; } [@scale_column_vel > @step_10_vel] { marker-fill: @color_10_vel; } // ############################################################ // #################################### // SCALE TEMPLATE, per [var] // .. // color [@scale_column_height < @step_2_height] { marker-fill: @color_1_height; } [@scale_column_height > @step_2_height][@scale_column_height < @step_3_height] { marker-fill: @color_2_height; } [@scale_column_height > @step_3_height][@scale_column_height < @step_4_height] { marker-fill: @color_3_height; } [@scale_column_height > @step_4_height][@scale_column_height < @step_5_height] { marker-fill: @color_4_height; } [@scale_column_height > @step_5_height][@scale_column_height < @step_6_height] { marker-fill: @color_5_height; } [@scale_column_height > @step_6_height][@scale_column_height < @step_7_height] { marker-fill: @color_6_height } [@scale_column_height > @step_7_height][@scale_column_height < @step_8_height] { marker-fill: @color_7_height; } [@scale_column_height > @step_8_height][@scale_column_height < @step_9_height] { marker-fill: @color_8_height; } [@scale_column_height > @step_9_height][@scale_column_height < @step_10_height] { marker-fill: @color_9_height; } [@scale_column_height > @step_10_height] { marker-fill: @color_10_height; } // ############################################################ // velocity //[vel<-50] { // marker-fill: #d1ff04; // marker-width: ([vel] * (-1))/20; // //} }
Saving some styles for easy reference.
Snow caps
Blue snow
Brown mountains