diff --git a/data/Makefile b/data/Makefile index 17b14d6..7112b74 100644 --- a/data/Makefile +++ b/data/Makefile @@ -55,3 +55,30 @@ cartodb_generalizations: $(error VIEW_SCHEMA is undefined) endif node generalizations_sql.js $(VIEW_SCHEMA) $(DATABASE_URL) + + +basemap_light_only_labels: + node make_named_map.js mapconfig_light_only_labels light_only_labels > /tmp/basemap.json + curl -X DELETE -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named/light_only_labels\?api_key=$(CARTODB_API_KEY) + curl -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named\?api_key=$(CARTODB_API_KEY) + rm -rf /tmp/basempap.json + +basemap_dark_only_labels: + node make_named_map.js mapconfig_dark_only_labels dark_only_labels > /tmp/basemap.json + curl -X DELETE -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named/dark_only_labels\?api_key=$(CARTODB_API_KEY) + curl -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named\?api_key=$(CARTODB_API_KEY) + rm -rf /tmp/basempap.json + +basemap_light_all: + node make_named_map.js mapconfig_light staging_light > /tmp/basemap.json + curl -X DELETE -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named/staging_light\?api_key=$(CARTODB_API_KEY) + curl -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named\?api_key=$(CARTODB_API_KEY) + rm -rf /tmp/basempap.json + open "tools/test_basemap.html" + +basemap_dark_all: + node make_named_map.js mapconfig_dark staging_dark > /tmp/basemap.json + curl -X DELETE -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named/staging_dark\?api_key=$(CARTODB_API_KEY) + curl -H 'content-type: application/json' -d @/tmp/basemap.json https://basemaps.cartodb.com/api/v1/map/named\?api_key=$(CARTODB_API_KEY) + rm -rf /tmp/basempap.json + open "tools/test_basemap.html" diff --git a/data/make_named_map.js b/data/make_named_map.js index 31ab206..f747505 100644 --- a/data/make_named_map.js +++ b/data/make_named_map.js @@ -1,13 +1,14 @@ var util = require('./util.js'); -function make(name) { +function make(name, named_map_name) { + named_map_name = named_map_name || name; var json = util.node()[name]; return JSON.stringify({ - "name": name , + "name": named_map_name, "auth":"open", "version": "0.0.1", 'layergroup': json }) } -console.log(make(process.argv[2])); +console.log(make(process.argv[2], process.argv[3])); diff --git a/data/util.js b/data/util.js index 321df9e..2b20a82 100644 --- a/data/util.js +++ b/data/util.js @@ -11,6 +11,7 @@ var node = function() { var fs = require("fs"); var md5 = require('MD5'); + var _ = require('underscore'); var PROJECT = JSON.parse(fs.readFileSync("project.json")); var IMAGES_HOST = 'http://libs.cartocdn.com.s3.amazonaws.com/stamen-base/'; @@ -20,6 +21,7 @@ var node = function() { var mapconfig_light_nolabels = {'layers':[]}; var mapconfig_dark_nolabels = {'layers':[]}; var mapconfig_light_only_labels = {'layers':[]}; + var mapconfig_dark_only_labels = {'layers':[]}; // change the host for the images function replaceImages(cartocss) { @@ -45,7 +47,10 @@ var node = function() { new_layer.name = l.name; new_layer.options.sql = l.options.sql; new_layer.options.cartocss = fs.readFileSync(l.options.cartocss_file).toString(); - mapconfig_light.layers.push(new_layer); + if (l.name != "global_variables_labels") { + //console.log(l.name); + mapconfig_light.layers.push(new_layer); + } }); PROJECT.layers.forEach(function(l) { @@ -58,7 +63,9 @@ var node = function() { } else { new_layer.options.cartocss = replaceImages(fs.readFileSync(l.options.cartocss_file).toString()) } - mapconfig_dark.layers.push(new_layer); + if (l.name != "global_variables_labels") { + mapconfig_dark.layers.push(new_layer); + } }); PROJECT.layers.forEach(function(l) { @@ -85,6 +92,7 @@ var node = function() { mapconfig_dark_nolabels.layers.push(new_layer); }); + PROJECT.layers.forEach(function(l) { new_layer = {'type':'cartodb','options':{'cartocss_version':'2.1.1'}}; new_layer.name = l.name; @@ -92,18 +100,33 @@ var node = function() { if (l.name == "global_variables") { new_layer.options.cartocss = replaceImages(fs.readFileSync("styles/global_variables_only_labels.mss").toString()); mapconfig_light_only_labels.layers.push(new_layer); - } else if (!l.toggle[2]) { + } else if (l.toggle[3]) { new_layer.options.cartocss = replaceImages(fs.readFileSync(l.options.cartocss_file).toString()); mapconfig_light_only_labels.layers.push(new_layer); } }); + PROJECT.layers.forEach(function(l) { + new_layer = {'type':'cartodb','options':{'cartocss_version':'2.1.1'}}; + new_layer.name = l.name; + new_layer.options.sql = l.options.sql; + if (l.name == "global_variables_labels") { + new_layer.options.cartocss = replaceImages(fs.readFileSync("styles/global_variables_dark_only_labels.mss").toString()); + mapconfig_dark_only_labels.layers.push(new_layer); + } else if (l.toggle[3]) { + new_layer.options.cartocss = replaceImages(fs.readFileSync(l.options.cartocss_file).toString()); + mapconfig_dark_only_labels.layers.push(new_layer); + } + }); + + return { 'mapconfig_light': mapconfig_light, 'mapconfig_dark': mapconfig_dark, 'mapconfig_light_nolabels': mapconfig_light_nolabels, 'mapconfig_dark_nolabels': mapconfig_dark_nolabels, - 'mapconfig_light_only_labels': mapconfig_light_only_labels + 'mapconfig_light_only_labels': mapconfig_light_only_labels, + 'mapconfig_dark_only_labels': mapconfig_dark_only_labels }; } diff --git a/styles/admin1_labels.mss b/styles/admin1_labels.mss index 2442b0b..05f21eb 100644 --- a/styles/admin1_labels.mss +++ b/styles/admin1_labels.mss @@ -1,17 +1,21 @@ // zooms 3-7 -#admin1_labels { - [zoom=5][scalerank<3], - [zoom=6][scalerank<4], - [zoom=7][scalerank<99] - { +#admin1_labels[zoom>=5][zoom<=7]{ + text-name: "[name]"; + text-halo-fill: @admin1_labels_halo; + text-face-name: "Azo Sans Regular","DejaVu Sans Bold","unifont Medium"; + text-transform: uppercase; - text-size: 12; - text-name: "[name]"; - text-halo-radius: 1.4px; + [zoom=5][scalerank<3], + [zoom=6][scalerank<4]{ + text-size: @admin1_labels_size; + text-halo-radius: @admin1_labels_halo_radius; text-fill: @admin1_labels; - text-halo-fill: @admin1_labels_halo; - text-face-name: "Azo Sans Regular","DejaVu Sans Bold","unifont Medium"; - text-transform: uppercase; + } + + [zoom=7][scalerank<99]{ + text-size: @admin1_lowzoom_labels_size; + text-halo-radius: @admin1_lowzoom_labels_halo_radius; + text-fill: @admin1_lowzoom_labels; } } diff --git a/styles/continent_labels.mss b/styles/continent_labels.mss index 281dcde..7aa330b 100644 --- a/styles/continent_labels.mss +++ b/styles/continent_labels.mss @@ -2,10 +2,10 @@ #continent_labels { text-size: 12; - text-name: "[name]"; + text-name: "[name]"; text-halo-radius: 1.6px; text-halo-fill: @label_foreground_halo_fill; - text-fill: @label_foreground_fill; + text-fill: @continent_labels; text-face-name: "Azo Sans Regular"; text-transform: uppercase; diff --git a/styles/country_city_labels.mss b/styles/country_city_labels.mss index d89f7c2..a065d95 100644 --- a/styles/country_city_labels.mss +++ b/styles/country_city_labels.mss @@ -5,11 +5,11 @@ [zoom=5][scalerank<=5], [zoom=6][scalerank<=6], [zoom=7][scalerank<=7] { - shield-name: "[name]"; + shield-name: "[name]"; shield-fill: @label_foreground_fill; shield-halo-fill: @labels_lowzoom_shield_halo_fill; shield-face-name: "Azo Sans Regular","DejaVu Sans Bold","unifont Medium"; - shield-halo-radius: 1.4px; + shield-halo-radius: @labels_lowzoom_shield_halo_radius; shield-text-transform: uppercase; shield-min-distance: 5; [zoom=5] { @@ -30,7 +30,7 @@ [cartodb_id =~ '.*(1|3|5|7|9)$'] { shield-placements: "W,12"; } - shield-text-dx: 5; + shield-text-dx: 6; shield-text-dy: 0; shield-unlock-image: true; shield-wrap-width: 100; @@ -83,7 +83,7 @@ text-wrap-width: 100; text-wrap-before: true; text-character-spacing: 1.2; - text-halo-radius: 1.4px; + text-halo-radius: @labels_highzoom_halo_radius; text-halo-fill: @labels_highzoom_halo_fill; text-fill: @labels_highzoom_text_fill; @@ -93,7 +93,7 @@ [zoom=8][scalerank<=6], [zoom=9][scalerank<=7], [zoom=10][scalerank<=7] { - text-size: 12; + text-size: @labels_highzoom_class1_text_size; text-fill: @labels_highzoom_class1_text_fill; text-line-spacing: -2; } @@ -108,7 +108,7 @@ [zoom=9][scalerank<=5], [zoom=10][scalerank<=5] { text-size: 16; - text-fill: @labels_highzoom_class2_text_fill; + text-fill: @labels_highzoom_class2_text_fill; } [zoom=11][scalerank<=5], [zoom=12][scalerank<=5] @@ -118,7 +118,7 @@ } // class 0 (default) - text-size: 10; + text-size: @labels_highzoom_class1_text_size_default; // At this zoom cities disappear, and it's only neighborhoods [zoom>=13] { @@ -128,51 +128,50 @@ } } -#country_city_labels[country_city="country"] -{ +#country_city_labels[country_city="country"]{ [zoom=3][scalerank<2][pop_est >= 2000000], [zoom=4][scalerank<3][pop_est >= 2000000], [zoom=5][scalerank<4] { text-size: 15; text-line-spacing: -3; - text-wrap-width: 100; - text-wrap-before: true; text-ratio: 0.5; - text-name: "[name]"; + text-name: "[name]"; [name="Falkland Islands"] { text-name: [name] + "\n(Malvinas)"; } - text-halo-radius: 1.4; + + text-halo-radius: @label_foreground_halo_radius; text-halo-fill: @label_foreground_halo_fill; text-face-name: "Azo Sans Regular","DejaVu Sans Bold","unifont Medium"; text-min-distance: 10; text-transform: uppercase; [zoom=3] { - text-size: 10; - text-fill: lighten(@label_foreground_fill,10%); - text-halo-radius: 1.8; + text-size: @countries_class2_label_size; + text-fill: @countries_class2_text_fill; + text-halo-radius: @countries_class2_text_halo_radius; [pop_est>20000000] { - text-fill: lighten(@label_foreground_fill,5%); text-size: 14; + text-fill: @countries_class1_text_fill; + text-halo-radius: @label_foreground_halo_radius; + text-halo-fill: @label_foreground_halo_fill; } } [zoom=4],[zoom=5] { text-size: 12; text-line-spacing: -3; - text-fill: @label_background_fill; + text-fill: @countries_highzoom_class1_text_fill; text-halo-fill: @label_background_halo_fill; - text-halo-radius: 2; + text-halo-radius: @label_foreground_halo_radius; text-face-name: "Azo Sans Regular","DejaVu Sans Bold","unifont Medium"; [pop_est>20000000] { text-size: 16; text-line-spacing: -4; - text-fill: darken(@label_background_fill, 5%); text-wrap-width: 200; } } diff --git a/styles/global_variables.mss b/styles/global_variables.mss index 7a37fc4..4f70672 100644 --- a/styles/global_variables.mss +++ b/styles/global_variables.mss @@ -41,9 +41,6 @@ Map { @admin1_lowzoom: lighten(#6d6e71, 40%); @admin1_highzoom: lighten(#c79297, 15%); -@admin1_labels: #ccc; -@admin1_labels_halo: white; - //osm roads @rail_line: #dddddd; @rail_dashline: #fafafa; @@ -87,21 +84,57 @@ Map { // labels @label_foreground_fill: #8494a1; @label_foreground_halo_fill: rgba(236,236,234,0.7); +@label_foreground_halo_radius: 1.4px; + @label_background_fill: #b6b6b6; @label_background_halo_fill: rgba(255,255,255,0.7); -@labels_lowzoom_shield_fill: lighten(@label_foreground_fill, 7%); + +@labels_lowzoom_shield_fill: lighten(@label_foreground_fill, 7%); @labels_lowzoom_shield_halo_fill: lighten(@label_foreground_halo_fill,10%); +@labels_lowzoom_shield_halo_radius: 1.3px + @labels_highzoom_text_fill: lighten(@label_foreground_fill,15%); @labels_highzoom_halo_fill: lighten(@label_foreground_halo_fill,10%); +@labels_highzoom_halo_radius: 1.4px; @labels_highzoom_class1_text_fill: lighten(@label_foreground_fill,5%); @labels_highzoom_class2_text_fill: darken(@label_foreground_fill,5%); +@labels_highzoom_class1_text_size: 12; +@labels_highzoom_class1_text_size_default: 10; @labels_marine_fill: white; @labels_marine_halo_fill: lighten(@label_foreground_fill,10%); +@labels_marine_halo_radius: 1.4px; @osm_roads_labels_fill: #bbb; @osm_roads_labels_halo: white; +@osm_roads_labels_radius: 1.8px; + +@countries_class1_text_fill: lighten(@label_foreground_fill,5%); +@countries_highzoom_class1_text_fill: darken(@label_background_fill,5%); + +@countries_class2_label_size: 10px; +@countries_class2_text_fill: lighten(@label_foreground_fill,10%); +@countries_class2_text_halo_radius: 1.8; + +@admin1_labels_size: 10; +@admin1_labels: rgba(255,255,255,1); +@admin1_labels_halo: rgba(47,48,53,0.8); +@admin1_labels_halo_radius: 1.4px; + +@admin1_lowzoom_labels_size: @admin1_labels_size; +@admin1_lowzoom_labels: @admin1_labels; +@admin1_lowzoom_labels_halo_radius: @admin1_labels_halo_radius; + +@label_park_fill: darken(#d4ded6, 30%); +@label_park_halo_fill: lighten(#e3e3dc, 8%); +@label_park_halo_radius: 1.4px; + +@label_water_fill: lighten(#6b8a95, 5%); +@label_water_halo_fill: lighten(#e3e3dc, 8%); +@label_water_halo_radius: 1.4px; + +@continent_labels: @label_foreground_fill; // assets @city_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/city_shield_light.svg"); @@ -109,10 +142,4 @@ Map { @capital_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_light.png"); @capital_shield_file_lowzoom: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_light.png"); -@label_park_halo_fill: lighten(#e3e3dc, 8%); -@label_park_fill: darken(#d4ded6, 30%); - -@label_water_halo_fill: lighten(#e3e3dc, 8%); -@label_water_fill: lighten(#6b8a95, 5%); - @park_texture_opacity: 0.0; diff --git a/styles/global_variables_dark.mss b/styles/global_variables_dark.mss index a1fb6d7..2128e2b 100644 --- a/styles/global_variables_dark.mss +++ b/styles/global_variables_dark.mss @@ -4,12 +4,10 @@ Map { -// background-color: darken(#333, 9%); background-color: @water; buffer-size: 256; } -//@landmass_fill: darken(#333333, 9%); @landmass_fill: #0e0e0e; @landmass_line: #222; @@ -42,9 +40,6 @@ Map { @admin1_lowzoom: #333; @admin1_highzoom: #444; -@admin1_labels: #333; -@admin1_labels_halo: #111; - //osm roads @rail_line: #2f2f2f; @rail_dashline: #111; @@ -92,21 +87,58 @@ Map { // labels @label_foreground_fill: #777; @label_foreground_halo_fill: rgba(0,0,0,0.7); +@label_foreground_halo_radius: 1.2px; + @label_background_fill: #444; @label_background_halo_fill: rgba(0,0,0,0.3); -@labels_lowzoom_shield_fill: darken(@label_foreground_fill, 15%); + +@labels_lowzoom_shield_fill: darken(@label_foreground_fill, 15%); @labels_lowzoom_shield_halo_fill: black; +@labels_lowzoom_shield_halo_radius: 1.3px; + @labels_highzoom_text_fill: #444; @labels_highzoom_halo_fill: darken(@label_foreground_halo_fill,10%); +@labels_highzoom_halo_radius: 1.7px; + @labels_highzoom_class1_text_fill: lighten(@labels_highzoom_text_fill,5%); @labels_highzoom_class2_text_fill: lighten(@labels_highzoom_text_fill,15%); +@labels_highzoom_class1_text_size: 12; +@labels_highzoom_class1_text_size_default: 9; -@labels_marine_halo_fill: darken(@label_foreground_halo_fill,10%); @labels_marine_fill: darken(@label_foreground_fill,20%); +@labels_marine_halo_fill: darken(@label_foreground_halo_fill,10%); +@labels_marine_halo_radius: 1.2px; @osm_roads_labels_fill: #444; @osm_roads_labels_halo: black; +@osm_roads_labels_radius: 1.7px; + +@countries_class1_text_fill: lighten(@label_foreground_fill,5%); +@countries_highzoom_class1_text_fill: darken(@label_background_fill,5%); + +@countries_class2_label_size: 10px; +@countries_class2_text_fill: @countries_class1_text_fill; +@countries_class2_text_halo_radius: 1.8; + +@admin1_labels_size: 14; +@admin1_labels: #333; +@admin1_labels_halo: #111; +@admin1_labels_halo_radius: 1px; + +@admin1_lowzoom_labels_size: @admin1_labels_size; +@admin1_lowzoom_labels: @admin1_labels; +@admin1_lowzoom_labels_halo_radius: @admin1_labels_halo_radius; + +@label_park_fill: darken(@label_foreground_fill,15%); +@label_park_halo_fill: darken(@label_foreground_halo_fill,10%); +@label_park_halo_radius: 1.2px; + +@label_water_fill: darken(@label_foreground_fill,20%); +@label_water_halo_fill: darken(@label_foreground_halo_fill,5%); +@label_water_halo_radius: 1.2px; + +@continent_labels: @label_foreground_fill; // assets @city_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/city_shield_dark_444.png"); @@ -114,10 +146,4 @@ Map { @capital_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_dark_444.png"); @capital_shield_file_lowzoom: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_dark_666.png"); -@label_park_halo_fill: darken(@label_foreground_halo_fill,10%); -@label_park_fill: darken(@label_foreground_fill,15%); - -@label_water_halo_fill: darken(@label_foreground_halo_fill,5%); -@label_water_fill: darken(@label_foreground_fill,20%); - -@park_texture_opacity: 0.1; +@park_texture_opacity: 0.12; diff --git a/styles/global_variables_dark_only_labels.mss b/styles/global_variables_dark_only_labels.mss new file mode 100644 index 0000000..e92fb8e --- /dev/null +++ b/styles/global_variables_dark_only_labels.mss @@ -0,0 +1,147 @@ +@polygoncolor: #ffd479; +@cachebuster: #000096; +@water: darken(#333336,6%); + + +Map { + buffer-size: 256; +} + +@landmass_fill: #0e0e0e; +@landmass_line: #222; + +@greenareas: darken(#263302, 8%); +@greenareas_fill_low: @greenareas; +@greenareas_fill_medium: @greenareas; +@greenareas_fill_high: @greenareas; + +@buildings: darken(@landmass_fill, 2%); +@buildings_outline_16: #141414; +@buildings_outline: #242424; + +@aeroways: #111; + +@ne10roads_line_color: rgba(0,0,0,0.8); +@ne10roads_line_outline: rgba(150,150,150,0.5); +@ne10roads_7_minor_color: #262626; + +@ne_rivers_stroke: #1f1f1f; +@ne_rivers_casing: rgba(0,0,0,0.1); + +@urbanareas: lighten(@landmass_fill,1%); +@urbanareas_highzoom: lighten(@landmass_fill,1%); + +@admin0_4: #555; +@admin0_5: #444; +@admin0_6: #151515; +@admin0_7: #444; + +@admin1_lowzoom: #333; +@admin1_highzoom: #444; + +//osm roads +@rail_line: #2f2f2f; +@rail_dashline: #111; + +@highwaycasing: rgba(70,70,70,0.9); +@highwaystroke: black; + +@osm_roads_z9_highway_casing: rgba(50,50,50,0.8); +@osm_roads_z9_highway_stroke: @highwaystroke; +@osm_roads_z9_major_stroke: #2a2a2a; + +@osm_roads_z10_highway_casing: rgba(60,60,60,0.8); +@osm_roads_z10_highway_stroke: @highwaystroke; +@osm_roads_z10_major_stroke: #2a2a2a; +@osm_roads_z10_minor_stroke: #252525; + +@osm_roads_z11_highway_casing: @highwaycasing; +@osm_roads_z11_highway_stroke: @highwaystroke; +@osm_roads_z11_major_stroke: #333; +@osm_roads_z11_minor_stroke: #2a2a2a; + +@osm_roads_z12_highway_casing: lighten(@highwaycasing,5%); +@osm_roads_z12_highway_stroke: @highwaystroke; +@osm_roads_z12_major_casing: darken(@highwaycasing,2%); +@osm_roads_z12_major_stroke: lighten(@highwaystroke,2%); +@osm_roads_z12_minor_stroke: #2a2a2a; + +@osm_roads_z13_highway_casing: lighten(@highwaycasing,5%); +@osm_roads_z13_highway_stroke: @highwaystroke; +@osm_roads_z13_major_casing: darken(@highwaycasing,7%); +@osm_roads_z13_major_stroke: lighten(@highwaystroke,2%); +@osm_roads_z13_minor_stroke: #2a2a2a; + +@osm_roads_z14plus_highway_casing: lighten(@highwaycasing,2%); +@osm_roads_z14plus_highway_stroke: lighten(@highwaystroke,5%); +@osm_roads_z14plus_major_casing: darken(@highwaycasing,2%); +@osm_roads_z14plus_major_stroke: lighten(@highwaystroke,2%); + +@osm_roads_z14plus_minor_casing: darken(@highwaycasing,15%); +@osm_roads_z14plus_minor_stroke: lighten(@highwaystroke,2%); + +@osm_roads_path_stroke: #181818; +@osm_tunnel_stroke: #111; + +// labels +@label_foreground_fill: lighten(#555,30%); +@label_foreground_halo_fill: rgba(0,0,0,0.8); +@label_foreground_halo_radius: 1.3px; + +@label_background_fill: lighten(#444,15%); +@label_background_halo_fill: rgba(0,0,0,0.8); + +@labels_lowzoom_shield_fill: lighten(#555, 30%); +@labels_lowzoom_shield_halo_fill: rgba(0,0,0,0.9); +@labels_lowzoom_shield_halo_radius: 1.3px; + +@labels_highzoom_text_fill: lighten(#555, 30%); +@labels_highzoom_halo_fill: darken(@label_foreground_halo_fill,10%); +@labels_highzoom_halo_radius: 1.3px; + +@labels_highzoom_class1_text_fill: lighten(@labels_highzoom_text_fill,15%); +@labels_highzoom_class2_text_fill: lighten(@labels_highzoom_text_fill,25%); +@labels_highzoom_class1_text_size: 12; +@labels_highzoom_class1_text_size_default: 9; + +@labels_marine_fill: darken(@label_foreground_fill,15%); +@labels_marine_halo_fill: darken(@label_foreground_halo_fill,10%); +@labels_marine_halo_radius: 1.2px; + +@osm_roads_labels_fill: lighten(#555, 25%); +@osm_roads_labels_halo: rgba(0,0,0,0.8); +@osm_roads_labels_radius: 1.8px; + +@countries_class1_text_fill: lighten(@label_foreground_fill,25%); +@countries_highzoom_class1_text_fill: lighten(@label_foreground_fill,10%); + +@countries_class2_label_size: 0; +@countries_class2_text_fill: transparent; +@countries_class2_text_halo_radius: 0; + +@admin1_labels_size: 14; +@admin1_labels: @label_foreground_fill; +@admin1_labels_halo: rgba(0,0,0,0.9); +@admin1_labels_halo_radius: 1.3px; + +@admin1_lowzoom_labels_size: 0; +@admin1_lowzoom_labels: transparent; +@admin1_lowzoom_labels_halo_radius: 0; + +@label_park_fill: lighten(#555, 20%); +@label_park_halo_fill: @label_foreground_halo_fill; +@label_park_halo_radius: 1.2px; + +@label_water_fill: lighten(#555, 20%); +@label_water_halo_fill: darken(@label_foreground_halo_fill,5%); +@label_water_halo_radius: 1.2px; + +@continent_labels: lighten(@label_foreground_fill,25%); + +// assets +@city_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/city_shield_dark_666.png"); +@city_shield_file_lowzoom: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/city_shield_dark_666.png"); +@capital_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_dark_666.png"); +@capital_shield_file_lowzoom: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_dark_666.png"); + +@park_texture_opacity: 0.12; diff --git a/styles/global_variables_only_labels.mss b/styles/global_variables_only_labels.mss index e6d9edc..b30ce75 100644 --- a/styles/global_variables_only_labels.mss +++ b/styles/global_variables_only_labels.mss @@ -30,8 +30,7 @@ Map { @urbanareas: darken(#f5f5f3, 4%); @urbanareas_highzoom: darken(#f5f5f3, 3%); - -@admin0_4: lighten(#c79297, 20%); +@admin0_4: lighten(#c79297, 20%); @admin0_5: lighten(#c99297,10%); @admin0_6: mix(lighten(#c99297, 20%), lighten(#e3e3dc, 8%), 20); @admin0_7: lighten(#c99297,20%); @@ -39,9 +38,6 @@ Map { @admin1_lowzoom: lighten(#6d6e71, 40%); @admin1_highzoom: lighten(#c79297, 15%); -@admin1_labels: #ccc; -@admin1_labels_halo: white; - //osm roads @rail_line: #dddddd; @rail_dashline: #fafafa; @@ -83,34 +79,64 @@ Map { @osm_tunnel_stroke: #eee; // labels -@label_foreground_fill: #8494a1; -@label_foreground_halo_fill: rgba(236,236,234,0.3); -@label_background_fill: #b6b6b6; -@label_background_halo_fill: rgba(255,255,255,0.3); -@labels_lowzoom_shield_fill: lighten(@label_foreground_fill, 7%); -@labels_lowzoom_shield_halo_fill: lighten(@label_foreground_halo_fill,10%); -@labels_highzoom_text_fill: lighten(@label_foreground_fill,15%); -@labels_highzoom_halo_fill: lighten(@label_foreground_halo_fill,10%); +@label_foreground_fill: darken(#8494a1, 25%); +@label_foreground_halo_fill: rgba(255,255,255,0.9); +@label_foreground_halo_radius: 1.2px; + +@label_background_fill: darken(#8494a1, 25%); +@label_background_halo_fill: rgba(255,255,255,0.9); + +@labels_lowzoom_shield_fill: darken(#8494a1, 25%); +@labels_lowzoom_shield_halo_fill: rgba(255,255,255,0.9); +@labels_lowzoom_shield_halo_radius: 1.3px + +@labels_highzoom_text_fill: @label_foreground_fill; +@labels_highzoom_halo_fill: @label_foreground_halo_fill; +@labels_highzoom_halo_radius: 1.7px; @labels_highzoom_class1_text_fill: lighten(@label_foreground_fill,5%); @labels_highzoom_class2_text_fill: darken(@label_foreground_fill,5%); +@labels_highzoom_class1_text_size: 12; +@labels_highzoom_class1_text_size_default: 9; @labels_marine_fill: white; -@labels_marine_halo_fill: lighten(@label_foreground_fill,10%); +@labels_marine_halo_fill: lighten(@label_foreground_fill,30%); +@labels_marine_halo_radius: 1.2px; -@osm_roads_labels_fill: #bbb; -@osm_roads_labels_halo: white; +@osm_roads_labels_fill: darken(#8494a1, 13%); +@osm_roads_labels_halo: rgba(255,255,255,0.8); +@osm_roads_labels_radius: 1.7px; -// assets -@city_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/city_shield_light.svg"); -@city_shield_file_lowzoom: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/city_shield_light.svg"); -@capital_shield_file: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_light.png"); -@capital_shield_file_lowzoom: url("http://s3.amazonaws.com/libs.cartocdn.com/stamen-base/capital_shield_light.png"); +@countries_class1_text_fill: @label_foreground_fill; +@countries_highzoom_class1_text_fill: @label_foreground_fill; -@label_park_halo_fill: lighten(#e3e3dc, 8%); -@label_park_fill: darken(#d4ded6, 30%); +@countries_class2_label_size: 0; +@countries_class2_text_fill: transparent; +@countries_class2_text_halo_radius: 0; -@label_water_halo_fill: lighten(#e3e3dc, 8%); -@label_water_fill: lighten(#6b8a95, 5%); +@admin1_labels_size: 14; +@admin1_labels: darken(#8494a1, 15%); +@admin1_labels_halo: rgba(255,255,255,0.9); +@admin1_labels_halo_radius: 1.6px; + +@admin1_lowzoom_labels_size: 0; +@admin1_lowzoom_labels: transparent; +@admin1_lowzoom_labels_halo_radius: 0; + +@label_park_fill: darken(#d4ded6, 25%); +@label_park_halo_fill: rgba(255,255,255,0.9); +@label_park_halo_radius: 1.2px; + +@label_water_fill: darken(#6b8a95, 13%); +@label_water_halo_fill: rgba(255,255,255, 0.9); +@label_water_halo_radius: 1.2px; + +@continent_labels: darken(@label_foreground_fill,5%); + +// assets +@city_shield_file: url("http://dl.dropboxusercontent.com/u/538411/basemaps_labels/city_shield_light_only_labels.svg"); +@city_shield_file_lowzoom: url("http://dl.dropboxusercontent.com/u/538411/basemaps_labels/city_shield_light_only_labels.svg"); +@capital_shield_file: url("http://dl.dropboxusercontent.com/u/538411/basemaps_labels/capital_shield_light_only_labels.svg"); +@capital_shield_file_lowzoom: url("http://dl.dropboxusercontent.com/u/538411/basemaps_labels/capital_shield_light_only_labels.svg"); @park_texture_opacity: 0.0; diff --git a/styles/marine_labels.mss b/styles/marine_labels.mss index de3c1ee..1055623 100644 --- a/styles/marine_labels.mss +++ b/styles/marine_labels.mss @@ -24,9 +24,9 @@ text-line-spacing: -2; text-character-spacing: 1.1; - text-halo-radius: 1.4px; - text-fill: @labels_marine_fill; text-placement: interior; + text-fill: @labels_marine_fill; + text-halo-radius: @labels_marine_halo_radius; text-halo-fill: @labels_marine_halo_fill; [zoom>=3][zoom<=8][featurecla='ocean'] { text-size: 14; diff --git a/styles/osm_roads_labels.mss b/styles/osm_roads_labels.mss index 2d33411..0575370 100644 --- a/styles/osm_roads_labels.mss +++ b/styles/osm_roads_labels.mss @@ -4,7 +4,7 @@ text-face-name: "Azo Sans Regular","DejaVu Sans Bold","unifont Medium"; text-fill: @osm_roads_labels_fill; text-transform: uppercase; - text-halo-radius: 1.8; + text-halo-radius: @osm_roads_labels_radius; text-halo-fill: @osm_roads_labels_halo; text-size: 10px; text-character-spacing: 1.0; @@ -24,7 +24,7 @@ text-face-name: "Azo Sans Regular","DejaVu Sans Bold","unifont Medium"; text-fill: @osm_roads_labels_fill; text-transform: uppercase; - text-halo-radius: 1.8; + text-halo-radius: @osm_roads_labels_radius; text-halo-fill: @osm_roads_labels_halo; text-size: 10px; text-character-spacing: 1.0; diff --git a/styles/park_labels.mss b/styles/park_labels.mss index a6afcb5..af85ae3 100644 --- a/styles/park_labels.mss +++ b/styles/park_labels.mss @@ -12,7 +12,7 @@ text-size: 12; text-name: "[name]"; text-fill: @label_park_fill; - text-halo-radius: 1.4px; + text-halo-radius: @label_park_halo_radius; text-halo-fill: @label_park_halo_fill; text-face-name: "Azo Sans Italic","DejaVu Sans Bold","unifont Medium"; text-character-spacing: 1.0; diff --git a/styles/water_labels.mss b/styles/water_labels.mss index 3bb1189..d897222 100644 --- a/styles/water_labels.mss +++ b/styles/water_labels.mss @@ -15,7 +15,7 @@ text-name: "[name]"; text-fill: @label_water_fill; text-halo-fill: @label_water_halo_fill; - text-halo-radius: 1.4; + text-halo-radius: @label_water_halo_radius; text-face-name: "Azo Sans Italic","DejaVu Sans Bold","unifont Medium"; text-placement: interior; text-min-distance: 20; @@ -27,7 +27,7 @@ text-name: "[name]"; text-fill: @label_water_fill; text-halo-fill: @label_water_halo_fill; - text-halo-radius: 1.4; + text-halo-radius: @label_water_halo_radius; text-face-name: "Azo Sans Italic","DejaVu Sans Bold","unifont Medium"; text-placement: line; text-min-distance: 100; diff --git a/tools/L.Map.Sync.js b/tools/L.Map.Sync.js new file mode 100644 index 0000000..d253c62 --- /dev/null +++ b/tools/L.Map.Sync.js @@ -0,0 +1,111 @@ +/* + * Extends L.Map to synchronize the interaction on one map to one or more other maps. + */ + +(function () { + 'use strict'; + + L.Map = L.Map.extend({ + sync: function (map, options) { + this._initSync(); + options = options || {}; + + // prevent double-syncing the map: + var present = false; + this._syncMaps.forEach(function (other) { + if (map === other) { + present = true; + } + }); + + if (!present) { + this._syncMaps.push(map); + } + + if (!options.noInitialSync) { + map.setView(this.getCenter(), this.getZoom(), { + animate: false, + reset: true + }); + } + return this; + }, + + // unsync maps from each other + unsync: function (map) { + var self = this; + + if (this._syncMaps) { + this._syncMaps.forEach(function (synced, id) { + if (map === synced) { + self._syncMaps.splice(id, 1); + } + }); + } + + return this; + }, + + // overload methods on originalMap to replay on _syncMaps; + _initSync: function () { + if (this._syncMaps) { + return; + } + var originalMap = this; + + this._syncMaps = []; + + L.extend(originalMap, { + setView: function (center, zoom, options, sync) { + if (!sync) { + originalMap._syncMaps.forEach(function (toSync) { + toSync.setView(center, zoom, options, true); + }); + } + return L.Map.prototype.setView.call(this, center, zoom, options); + }, + + panBy: function (offset, options, sync) { + if (!sync) { + originalMap._syncMaps.forEach(function (toSync) { + toSync.panBy(offset, options, true); + }); + } + return L.Map.prototype.panBy.call(this, offset, options); + }, + + _onResize: function (event, sync) { + if (!sync) { + originalMap._syncMaps.forEach(function (toSync) { + toSync._onResize(event, true); + }); + } + return L.Map.prototype._onResize.call(this, event); + } + }); + + originalMap.on('zoomend', function () { + originalMap._syncMaps.forEach(function (toSync) { + toSync.setView(originalMap.getCenter(), originalMap.getZoom(), { + animate: false, + reset: false + }); + }); + }, this); + + originalMap.dragging._draggable._updatePosition = function () { + L.Draggable.prototype._updatePosition.call(this); + var self = this; + originalMap._syncMaps.forEach(function (toSync) { + L.DomUtil.setPosition(toSync.dragging._draggable._element, self._newPos); + toSync.eachLayer(function (l) { + if (l._google !== undefined) { + l._google.setCenter(originalMap.getCenter()); + } + }); + toSync.fire('moveend'); + }); + }; + } + }); +})(); diff --git a/tools/test_basemap.html b/tools/test_basemap.html new file mode 100644 index 0000000..dbec7bc --- /dev/null +++ b/tools/test_basemap.html @@ -0,0 +1,67 @@ + + + + Easy example | CartoDB.js + + + + + + + + +
+
+ + + + + + + +