From 1e07f8eb16d3365a27dba8dcb12a62420d6ef054 Mon Sep 17 00:00:00 2001 From: Nathaniel Kelso Date: Wed, 28 Dec 2016 20:47:43 -0800 Subject: [PATCH] adapt html rig from Tron, modify a few globals along the way --- bubble-wrap.yaml | 565 +++++++++++++++++----------------- index.html | 777 ++++++++++++++++++++++++++++++++++++++++------- main.js | 405 ------------------------ 3 files changed, 962 insertions(+), 785 deletions(-) delete mode 100644 main.js diff --git a/bubble-wrap.yaml b/bubble-wrap.yaml index 8c6eb43..144450d 100644 --- a/bubble-wrap.yaml +++ b/bubble-wrap.yaml @@ -195,7 +195,7 @@ global: sdk_shield_visible: true # # enable interactivity for key features - interactive: true + sdk_interactive: true # # default order for basemap features feature_order: function() { return feature.sort_rank; } @@ -211,39 +211,42 @@ global: text_visible_address: true text_visible_water_labels: true text_visible_island: true - label_visible_landuse_green: true - icon_visible_landuse_green: true + label_visible_landuse_green: true #this needs work + icon_visible_landuse_green: true #this needs work + icon_size_green: [[13, '14px'], [16, '18px'], [18, '19px']] # 0px for no, default, more [[13, 14px], [16, 18px], [18, 19px]] + icon_size_green_l: [[14, '24px'],[16, '32px']] # 0px for no, default, more [[14,24px],[16,32px]] text_visible_landuse_green: true - label_visible_poi_landuse: true + label_visible_poi_landuse: true #false on default icon_visible_poi_landuse: true text_visible_poi_landuse: true - label_visible_poi_landuse_e: true - icon_visible_poi_landuse_e: true - text_visible_poi_landuse_e: true + label_visible_poi_landuse_e: true # true by default + icon_visible_poi_landuse_e: true # true by default + text_visible_poi_landuse_e: true # true by default text_visible_landuse_generic: true label_visible_station: true icon_visible_station: true text_visible_station: true text_visible_highway: true - text_visible_highway_e: true + text_visible_highway_e: true # true by default text_visible_trunk_primary: true - text_visible_trunk_primary_route: true - text_visible_trunk_primary_e2: true - text_visible_trunk_primary_e: true + text_visible_trunk_primary_route: true # true by default + text_visible_trunk_primary_e2: true # true by default + text_visible_trunk_primary_e: true # true by default text_visible_secondary: true - text_visible_secondary_e: true + text_visible_secondary_e: true # true by default text_visible_tertiary: true - text_visible_tertiary_e: true + text_visible_tertiary_e: true # true by default text_visible_minor_road: true - text_visible_minor_road_e: true + text_visible_minor_road_e: true # true by default text_visible_service_road: true text_visible_path: true text_visible_piste: true text_visible_steps: true text_visible_aerialway: true text_visible_airport_gate: true - text_visible_shields: true text_visible_exits: true + text_visible_exits_e: true # true by default // not used in Bubble Wrap? + # #label styling text_fill: [0.300, 0.300, 0.300] # BLACK @@ -335,7 +338,7 @@ global: # #landuse water1: [0.83, 0.83, 0.83] # water - water2: [.75,.75,.75] # playa + water2: [0.83, 0.83, 0.83] # playa water1_o: '#9dc3de' # water stroke water2_o: '#9dc3de' # water stroke 2 earth1: [0.870,0.870,0.870] # land color, used to set scene background color @@ -414,7 +417,7 @@ global: building2: [.860, .860, .860] # building stroke building_o: 5 # building stroke order building_e: true # building stroke order early - building_extrude: true # building extrusion toggle + sdk_building_extrude: true # building extrusion toggle building_extrude_height: | # building extrude height logic function() { return feature.height || 20; } @@ -1075,19 +1078,19 @@ styles: ux-icons-overlay: base: points texture: pois - interactive: global.interactive + interactive: global.sdk_interactive blend: overlay blend_order: 3 sdk-point-overlay: base: points texture: pois - interactive: global.interactive + interactive: global.sdk_interactive blend: overlay blend_order: 3 sdk-shield-overlay: base: points texture: pois - interactive: global.interactive + interactive: global.sdk_interactive blend: overlay blend_order: 3 sdk-line-overlay: @@ -1149,7 +1152,7 @@ layers: data: { source: mz_route_start } draw: ux-icons-overlay: - interactive: global.interactive + interactive: global.sdk_interactive priority: 1 sprite: ux-route-start size: [36px,46px] @@ -1160,7 +1163,7 @@ layers: data: { source: mz_route_destination } draw: ux-icons-overlay: - interactive: global.interactive + interactive: global.sdk_interactive priority: 1 sprite: ux-route-stop size: [36px,46px] @@ -1179,7 +1182,7 @@ layers: data: { source: mz_search_result } draw: ux-icons-overlay: - interactive: global.interactive + interactive: global.sdk_interactive sprite: ux-search-active size: [36px,54px] collide: false @@ -1205,7 +1208,7 @@ layers: data: { source: mz_default_point } draw: sdk-point-overlay: - interactive: global.interactive + interactive: global.sdk_interactive sprite: ux-search-active size: [36px,54px] collide: false @@ -1215,7 +1218,7 @@ layers: data: { source: mz_default_shield } draw: sdk-shield-overlay: - interactive: global.interactive + interactive: global.sdk_interactive sprite: | function() { if( feature.shield_text ) { @@ -1377,16 +1380,16 @@ layers: grid: color: global.water1 other-water-areas: - filter: { not: { kind: [ocean, lake, water, reservoir, playa, swimming_pool] }, $zoom: { min: 11 }, area: { min: 100 } } + filter: { not: { kind: [ocean, lake, water, reservoir, swimming_pool, playa] }, $zoom: { min: 11 }, area: { min: 100 } } draw: grid: color: global.water1 playas: - filter: { kind: playa, $zoom: {min: 6} } + filter: { kind: playa } draw: polygons: - order: global.feature_order - color: [0.870,0.870,0.870] + order: function() { return feature.sort_rank + 1; } + color: global.water2 #[0.870,0.870,0.870] water-boundary-ocean-early: filter: { boundary: true, kind: ocean, $zoom: {min: 1, max: 17} } draw: @@ -1655,7 +1658,7 @@ layers: # draw: # text-blend-order: # priority: 50 - # visible: global.text_visible_shields + # visible: global.sdk_shield_visibles # text_source: ref # font: # fill: [1.0,1.0,1.0] @@ -1668,7 +1671,7 @@ layers: # shield_text: false # draw: # text-blend-order: - # visible: global.text_visible_shields + # visible: global.sdk_shield_visibles # text_source: ref # font: # fill: [1.0,1.0,1.0] @@ -1681,7 +1684,7 @@ layers: # shield_text: false # draw: # text-blend-order: - # visible: global.text_visible_shields + # visible: global.sdk_shield_visibles # text_source: ref # font: # fill: [1.0,1.0,1.0] @@ -1694,7 +1697,7 @@ layers: # shield_text: false # draw: # text-blend-order: - # visible: global.text_visible_shields + # visible: global.sdk_shield_visibles # text_source: ref # font: # fill: [1.0,1.0,1.0] @@ -1820,6 +1823,7 @@ layers: draw: text-blend-order: text_source: global.ux_language_text_source_road_ref_and_name + visible: global.text_visible_trunk_primary_route # labels-trunk_primary-route-z13: # filter: # $zoom: { max: 14 } @@ -1838,7 +1842,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary_route #text_source: ref font: fill: [0.0,0.0,0.0] @@ -1849,7 +1852,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary_route #text_source: global.ux_language_text_source_road_ref_and_name font: fill: [0.0,0.0,0.0] @@ -1861,7 +1863,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary_route #text_source: global.ux_language_text_source_road_ref_and_name font: fill: [0.0,0.0,0.0] @@ -1872,6 +1873,7 @@ layers: draw: text-blend-order: text_source: global.ux_language_text_source_road_ref_and_name_short + visible: global.text_visible_trunk_primary labels-trunk_primary-z11: filter: $zoom: [11] @@ -1902,7 +1904,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.25,0.25,0.25] @@ -1914,7 +1915,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.10,0.10,0.10] @@ -1925,7 +1925,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.0,0.0,0.0] @@ -1936,7 +1935,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary #text_source: global.ux_language_text_source_road_ref_and_name font: fill: [0.0,0.0,0.0] @@ -1947,7 +1945,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary #text_source: global.ux_language_text_source_road_ref_and_name font: fill: [0.0,0.0,0.0] @@ -1958,7 +1955,6 @@ layers: draw: text-blend-order: priority: 51 - visible: global.text_visible_trunk_primary #text_source: global.ux_language_text_source_road_ref_and_name font: fill: [0.0,0.0,0.0] @@ -2082,6 +2078,7 @@ layers: draw: text-blend-order: text_source: global.ux_language_text_source_road_ref_and_name_short + visible: global.text_visible_secondary labels-secondary-z13: filter: $zoom: [13] @@ -2112,7 +2109,6 @@ layers: draw: text-blend-order: priority: 56 - visible: global.text_visible_secondary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.10,0.10,0.10] @@ -2123,7 +2119,6 @@ layers: draw: text-blend-order: priority: 56 - visible: global.text_visible_secondary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.0,0.0,0.0] @@ -2134,7 +2129,6 @@ layers: draw: text-blend-order: priority: 56 - visible: global.text_visible_secondary #text_source: ref text_source: global.ux_language_text_source_road_ref_and_name font: @@ -2228,6 +2222,7 @@ layers: draw: text-blend-order: text_source: global.ux_language_text_source_road_ref_and_name_short + visible: global.text_visible_tertiary labels-tertiary-z13: filter: { $zoom: [13] } draw: @@ -2255,7 +2250,6 @@ layers: draw: text-blend-order: priority: 57 - visible: global.text_visible_tertiary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.3,0.3,0.3] @@ -2266,7 +2260,6 @@ layers: draw: text-blend-order: priority: 57 - visible: global.text_visible_tertiary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.3,0.3,0.3] @@ -2277,7 +2270,6 @@ layers: draw: text-blend-order: priority: 57 - visible: global.text_visible_tertiary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.15,0.15,0.15] @@ -2288,7 +2280,6 @@ layers: draw: text-blend-order: priority: 57 - visible: global.text_visible_tertiary #text_source: global.ux_language_text_source_road_ref_and_name_short font: fill: [0.15,0.15,0.15] @@ -2616,7 +2607,7 @@ layers: icons: priority: 47 #color: yellow - visible: global.text_visible_shields + visible: global.sdk_shield_visibles default_priority_trunk: filter: @@ -2627,7 +2618,7 @@ layers: icons: priority: 48 #color: red - visible: global.text_visible_shields + visible: global.sdk_shield_visibles default_priority_primary: filter: all: @@ -2637,7 +2628,7 @@ layers: icons: priority: 49 #color: aqua - visible: global.text_visible_shields + visible: global.sdk_shield_visibles default_priority_trunk_secondary: filter: all: @@ -2647,7 +2638,7 @@ layers: icons: priority: 53 #color: blue - visible: global.text_visible_shields + visible: global.sdk_shield_visibles default_priority_trunk_tertiary: filter: all: @@ -2657,7 +2648,7 @@ layers: icons: priority: 55 #color: green - visible: global.text_visible_shields + visible: global.sdk_shield_visibles width_1char: filter: | @@ -2762,7 +2753,7 @@ layers: # you need to match any custom shield to the vector tile `network` values sprite: function() { return (feature.network + '-' + feature.shield_text.length + 'char'); } priority: 46 - visible: global.text_visible_shields + visible: global.sdk_shield_visibles text: offset: [0px, 0.5px] font: @@ -2805,7 +2796,7 @@ layers: function() { return ('US:US-' + feature.shield_text.length + 'char'); } priority: 47 cull_from_tile: true - visible: global.text_visible_shields + visible: global.sdk_shield_visibles text: offset: [0px, -0.7px] font: @@ -2848,7 +2839,7 @@ layers: # icons: # # you need to match any custom shield to the vector tile `network` values # #priority: 48 - # visible: global.text_visible_shields + # visible: global.sdk_shield_visibles US-CA: # Match California state highways: `US:CA` filter: | @@ -2869,17 +2860,17 @@ layers: filter: { kind_detail: [motorway], $zoom: [7,8] } draw: icons: - visible: global.text_visible_shields + visible: global.sdk_shield_visibles trunk: filter: { kind_detail: [trunk], $zoom: [8,9] } draw: icons: - visible: global.text_visible_shields + visible: global.sdk_shield_visibles primary: filter: { kind_detail: primary, $zoom: [10,11] } draw: icons: - visible: global.text_visible_shields + visible: global.sdk_shield_visibles width_1char: filter: function() { return (feature.shield_text.length === 1) } draw: @@ -3027,7 +3018,7 @@ layers: sprite: function() { return ('county_shield-' + feature.shield_text.length + 'char'); } #color: pink #priority: 19 - visible: global.text_visible_shields + visible: global.sdk_shield_visibles text: font: fill: [0.508,0.508,0.508] @@ -3516,7 +3507,7 @@ layers: extrude: filter: all: - - function() { return global.building_extrude; } + - function() { return global.sdk_building_extrude; } - any: - { $zoom: 15, height: { min: 190 } } - { $zoom: 15, area: { min: 5000 } } @@ -4033,7 +4024,7 @@ layers: text-blend-order: visible: global.text_visible_populated_places buffer: 8px - interactive: global.interactive + interactive: global.sdk_interactive font: size: [[5,9px],[8,10px],[12,11px]] @@ -4575,9 +4566,9 @@ layers: # size: 12px # style: italic - pois_and_landuse_labels: + pois: data: { source: mapzen, layer: pois } - visible: global.label_visible_poi_landuse + #visible: global.label_visible_poi_landuse filter: all: - not: { kind: [building,address,farm,tree,apron,residential,commercial,industrial] } @@ -4590,7 +4581,7 @@ layers: size: [[13, 14px], [16, 18px], [18, 19px]] sprite: function() { return feature.kind; } sprite_default: generic - interactive: global.interactive + interactive: global.sdk_interactive priority: 65 #function() { return (feature.min_zoom && Math.floor(feature.min_zoom * 1000)) || 65; } repeat_group: abc buffer: 3px @@ -4606,6 +4597,7 @@ layers: fill: [0.20,0.20,0.20] size: [[13,10px],[14,11px],[17,12px],[19,12px],[20,14px]] stroke: { color: global.text_stroke, width: [[12,2px],[16,4px]] } + # improve legibility at high zooms poi_labels-z18: filter: { $zoom: { min: 18 } } @@ -4710,219 +4702,220 @@ layers: text: { font: { style: italic } } # the server should be setting better values here - hide-until-z12-any: - filter: - kind: [landmark, museum, prison] - $zoom: { max: 12 } - draw: - icons: - visible: false - hide-until-z14-any: - filter: - kind: [natural_forest, natural_park, natural_wood, post_office] - $zoom: { max: 14 } - draw: - icons: - visible: false - hide-until-z15-any: - filter: - $zoom: { max: 15 } - kind: [cafe, restaurant] - draw: - icons: - visible: false - hide-until-z15-no-area: - filter: - area: false - $zoom: { max: 15 } - kind: [park] - draw: - icons: - visible: false - hide-until-z15-with-area: - filter: - area: true - $zoom: { max: 15 } - kind: [nursing_home] - draw: - icons: - visible: false - hide-until-z16-any: - filter: - kind: [fire_station, grass, peak, police, tram_stop] - $zoom: { max: 16 } - draw: - icons: - visible: false - hide-until-z16-no-area: - filter: - area: false - kind: [allotments, college, garden, university] - $zoom: { max: 16 } - draw: - icons: - visible: false - # no POIs for commercial, residential - hide-until-z17-any: - filter: - $zoom: { max: 17 } - kind: [bank, bus_stop, car_sharing, wood] - draw: - icons: - visible: false - hide-until-z17-with-area: - filter: - area: true - $zoom: { max: 17 } - kind: [common, grass, houseboat, pedestrian, pitch, railway, ship, wetland] - draw: - icons: - visible: false - hide-until-z17-no-area: - filter: - area: false - $zoom: { max: 17 } - # note: atm and drinking_water appear hear and in area versions - kind: [accountant, administrative, advertising_agency, animal, architect, association, atm, bakery, bed_and_breakfast, bicycle, bicycle_parking, bicycle_rental_station, books, butcher, car, car_repair, chalet, clothes, company, computer, consulting, convenience, doityourself, drinking_water, dry_cleaning, educational_institution, emergency_phone, employment_agency, estate_agent, fashion, financial, florist, foundation, gift, government, greengrocer, guest_house, hairdresser, hostel, hotel, insurance, it, jewelry, lawyer, mast, memorial, mobile_phone, motel, newspaper, ngo, notary, optician, parking, pet, physician, playground, political_party, post_box, religion, research, subway_entrance, tax_advisor, telecommunication, telephone, theatre, therapist, toilets, traffic_signals, travel_agent, water_tower] - draw: - icons: - visible: false - hide-until-z18-any: - filter: - kind: [atm, bus_stop, drinking_water] - $zoom: { max: 18 } - draw: - icons: - visible: false - hide-until-z18-no-area: - filter: - $zoom: { max: 18 } - area: false - kind: [bench, parking, waste_basket] - draw: - icons: - visible: false - hide-until-z19-any: - filter: - $zoom: { max: 19 } - kind: [bicycle_parking, burial_vault, car_sharing] - draw: - icons: - visible: false + z-server-friend: + hide-until-z12-any: + filter: + kind: [landmark, museum, prison] + $zoom: { max: 12 } + draw: + icons: + visible: false + hide-until-z14-any: + filter: + kind: [natural_forest, natural_park, natural_wood, post_office] + $zoom: { max: 14 } + draw: + icons: + visible: false + hide-until-z15-any: + filter: + $zoom: { max: 15 } + kind: [cafe, restaurant] + draw: + icons: + visible: false + hide-until-z15-no-area: + filter: + area: false + $zoom: { max: 15 } + kind: [park] + draw: + icons: + visible: false + hide-until-z15-with-area: + filter: + area: true + $zoom: { max: 15 } + kind: [nursing_home] + draw: + icons: + visible: false + hide-until-z16-any: + filter: + kind: [fire_station, grass, peak, police, tram_stop] + $zoom: { max: 16 } + draw: + icons: + visible: false + hide-until-z16-no-area: + filter: + area: false + kind: [allotments, college, garden, university] + $zoom: { max: 16 } + draw: + icons: + visible: false + # no POIs for commercial, residential + hide-until-z17-any: + filter: + $zoom: { max: 17 } + kind: [bank, bus_stop, car_sharing, wood] + draw: + icons: + visible: false + hide-until-z17-with-area: + filter: + area: true + $zoom: { max: 17 } + kind: [common, grass, houseboat, pedestrian, pitch, railway, ship, wetland] + draw: + icons: + visible: false + hide-until-z17-no-area: + filter: + area: false + $zoom: { max: 17 } + # note: atm and drinking_water appear hear and in area versions + kind: [accountant, administrative, advertising_agency, animal, architect, association, atm, bakery, bed_and_breakfast, bicycle, bicycle_parking, bicycle_rental_station, books, butcher, car, car_repair, chalet, clothes, company, computer, consulting, convenience, doityourself, drinking_water, dry_cleaning, educational_institution, emergency_phone, employment_agency, estate_agent, fashion, financial, florist, foundation, gift, government, greengrocer, guest_house, hairdresser, hostel, hotel, insurance, it, jewelry, lawyer, mast, memorial, mobile_phone, motel, newspaper, ngo, notary, optician, parking, pet, physician, playground, political_party, post_box, religion, research, subway_entrance, tax_advisor, telecommunication, telephone, theatre, therapist, toilets, traffic_signals, travel_agent, water_tower] + draw: + icons: + visible: false + hide-until-z18-any: + filter: + kind: [atm, bus_stop, drinking_water] + $zoom: { max: 18 } + draw: + icons: + visible: false + hide-until-z18-no-area: + filter: + $zoom: { max: 18 } + area: false + kind: [bench, parking, waste_basket] + draw: + icons: + visible: false + hide-until-z19-any: + filter: + $zoom: { max: 19 } + kind: [bicycle_parking, burial_vault, car_sharing] + draw: + icons: + visible: false - # hide based on kind and area filters - military-early: - filter: - kind: [military] - any: - # show labels for smaller landuse areas at higher zooms - - { $zoom: [8], area: { max: 50000000 } } - draw: - icons: - visible: false - university-early: - filter: - kind: [university, college] - any: - # show labels for smaller landuse areas at higher zooms - - { $zoom: [11], area: { max: 2000000 } } - - { $zoom: [12], area: { max: 500000 } } - draw: - icons: - visible: false - school-early: - filter: - kind: [school, kindergarten] - any: - # show labels for smaller landuse areas at higher zooms - - { $zoom: [13], area: { max: 100000 } } - - { $zoom: [14], area: { max: 50000 } } - - { $zoom: [15], area: { max: 10000 } } - - { $zoom: [16], area: { max: 5000 } } - - { $zoom: [17], area: { max: 2000 } } - draw: - icons: - visible: false - garden-area-early: - filter: - kind: [garden, allotments] - any: + # hide based on kind and area filters + military-early: + filter: + kind: [military] + any: + # show labels for smaller landuse areas at higher zooms + - { $zoom: [8], area: { max: 50000000 } } + draw: + icons: + visible: false + university-early: + filter: + kind: [university, college] + any: + # show labels for smaller landuse areas at higher zooms + - { $zoom: [11], area: { max: 2000000 } } + - { $zoom: [12], area: { max: 500000 } } + draw: + icons: + visible: false + school-early: + filter: + kind: [school, kindergarten] + any: + # show labels for smaller landuse areas at higher zooms + - { $zoom: [13], area: { max: 100000 } } + - { $zoom: [14], area: { max: 50000 } } + - { $zoom: [15], area: { max: 10000 } } + - { $zoom: [16], area: { max: 5000 } } + - { $zoom: [17], area: { max: 2000 } } + draw: + icons: + visible: false + garden-area-early: + filter: + kind: [garden, allotments] + any: + # limit show smaller landuse areas to higher zooms + - { $zoom: [12], area: { max: 500000 } } + - { $zoom: [13], area: { max: 100000 } } + - { $zoom: [14], area: { max: 10000 } } + - { $zoom: [15], area: { max: 5000 } } + draw: + icons: + visible: false + cemetery-early: + filter: + kind: [cemetery] # limit show smaller landuse areas to higher zooms - - { $zoom: [12], area: { max: 500000 } } - - { $zoom: [13], area: { max: 100000 } } - - { $zoom: [14], area: { max: 10000 } } - - { $zoom: [15], area: { max: 5000 } } - draw: - icons: - visible: false - cemetery-early: - filter: - kind: [cemetery] - # limit show smaller landuse areas to higher zooms - any: - - { $zoom: [12], area: { max: 3000000 } } - draw: - icons: - visible: false - golf_course-early: - filter: - kind: golf_course - any: - - { $zoom: [12], area: { max: 2500000 } } - draw: - icons: - visible: false - office-early: - filter: - - { kind: [insurance, office, company], $zoom: [15], area: { max: 10000 } } - - { kind: [insurance, office, company], $zoom: [16], area: { max: 5000 } } - draw: - icons: - visible: false - landuse-labels-green-areas-not-national-park: - filter: - kind: [park, conservation, protected_area, nature_reserve, forest, grass] - any: - # show labels for smaller landuse areas at higher zooms - - { $zoom: { max: 6 }, area: true } - - { $zoom: [6], area: { max: 5000000000 } } - - { $zoom: [7], area: { max: 5000000000 } } - - { $zoom: [8], area: { max: 1000000000 } } - - { $zoom: [9], area: { max: 100000000 } } - - { $zoom: [10], area: { max: 50000000 } } - - { $zoom: [11], area: { max: 25000000 } } - - { $zoom: [12], area: { max: 5000000 } } - - { $zoom: [13], area: { max: 200000 } } - - { $zoom: [14], area: { max: 50000 } } - - { $zoom: [15], area: { max: 10000 } } - - { $zoom: [16], area: { max: 1000 } } - draw: - icons: - visible: false - wilderness-areas-early: - filter: function() { return $zoom < 9 && feature.name && (feature.name.indexOf("Wilderness") > -1 || feature.name.indexOf("BLM") > -1 || feature.protect_class == '1' || feature.protect_class == '1a' || feature.protect_class == '1b' ); } + any: + - { $zoom: [12], area: { max: 3000000 } } draw: icons: visible: false - not-national-park: - filter: function() { return feature.name && !((feature.name.indexOf("National Park") > -1) || feature.name.indexOf("National Monument") > -1); } - early: - filter: { $zoom: { max: 8 } } + golf_course-early: + filter: + kind: golf_course + any: + - { $zoom: [12], area: { max: 2500000 } } + draw: + icons: + visible: false + office-early: + filter: + - { kind: [insurance, office, company], $zoom: [15], area: { max: 10000 } } + - { kind: [insurance, office, company], $zoom: [16], area: { max: 5000 } } + draw: + icons: + visible: false + landuse-labels-green-areas-not-national-park: + filter: + kind: [park, conservation, protected_area, nature_reserve, forest, grass] + any: + # show labels for smaller landuse areas at higher zooms + - { $zoom: { max: 6 }, area: true } + - { $zoom: [6], area: { max: 5000000000 } } + - { $zoom: [7], area: { max: 5000000000 } } + - { $zoom: [8], area: { max: 1000000000 } } + - { $zoom: [9], area: { max: 100000000 } } + - { $zoom: [10], area: { max: 50000000 } } + - { $zoom: [11], area: { max: 25000000 } } + - { $zoom: [12], area: { max: 5000000 } } + - { $zoom: [13], area: { max: 200000 } } + - { $zoom: [14], area: { max: 50000 } } + - { $zoom: [15], area: { max: 10000 } } + - { $zoom: [16], area: { max: 1000 } } + draw: + icons: + visible: false + wilderness-areas-early: + filter: function() { return $zoom < 9 && feature.name && (feature.name.indexOf("Wilderness") > -1 || feature.name.indexOf("BLM") > -1 || feature.protect_class == '1' || feature.protect_class == '1a' || feature.protect_class == '1b' ); } draw: icons: visible: false - landuse-labels-not-any-above: - filter: - $zoom: { max: 6 } - not: { kind: [aerodrome, airport, allotments, aquarium, attraction, battlefield, beach, cemetery, college, conservation, forest, garden, glacier, golf_course, grass, kindergarten, landmark, maze, national_park, nature_reserve, park, playground, protected_area, resort, school, stadium, station, theme_park, university, winery, winter_sports, zoo] } - draw: - icons: - visible: false - glacier: - filter: { $zoom: { max: 14 }, kind: glacier, area: false } - draw: - icons: - visible: false + not-national-park: + filter: function() { return feature.name && !((feature.name.indexOf("National Park") > -1) || feature.name.indexOf("National Monument") > -1); } + early: + filter: { $zoom: { max: 8 } } + draw: + icons: + visible: false + landuse-labels-not-any-above: + filter: + $zoom: { max: 6 } + not: { kind: [aerodrome, airport, allotments, aquarium, attraction, battlefield, beach, cemetery, college, conservation, forest, garden, glacier, golf_course, grass, kindergarten, landmark, maze, national_park, nature_reserve, park, playground, protected_area, resort, school, stadium, station, theme_park, university, winery, winter_sports, zoo] } + draw: + icons: + visible: false + glacier: + filter: { $zoom: { max: 14 }, kind: glacier, area: false } + draw: + icons: + visible: false # set special priority, sprite, and text styles per kind has-area: @@ -4936,8 +4929,11 @@ layers: kind: [national_park, battlefield] draw: icons: + visible: global.icon_visible_landuse_green + size: global.icon_size_green sprite: park text: + visible: global.text_visible_landuse_green font: fill: [0.200,0.409,0.398] #*text_fill_park style: italic @@ -4946,15 +4942,18 @@ layers: draw: icons: sprite: park-l - size: [[14,24px],[16,32px]] + size: global.icon_size_green_l parks: filter: - kind: [park, conservation, nature_reserve, grass] - { kind: protected_area, not: { protect_class: [6, '6'] } } draw: icons: + visible: global.icon_visible_landuse_green + size: global.icon_size_green sprite: park text: + visible: global.text_visible_landuse_green font: fill: [0.181,0.370,0.361] style: italic @@ -4972,8 +4971,11 @@ layers: - { kind: protected_area, protect_class: [6, '6'] } draw: icons: + visible: global.icon_visible_landuse_green + size: global.icon_size_green sprite: forest text: + visible: global.text_visible_landuse_green font: fill: [0.181,0.370,0.361] style: italic @@ -4982,7 +4984,10 @@ layers: kind: [beach] draw: icons: + visible: global.icon_visible_landuse_green + size: global.icon_size_green text: + visible: global.text_visible_landuse_green font: fill: global.text_fill_beach airport: @@ -4990,12 +4995,16 @@ layers: kind: [airport, aerodrome] draw: icons: + visible: global.icon_visible_landuse_green + size: global.icon_size_green priority: 42 text: + visible: global.text_visible_landuse_green text_source: global.ux_language_text_source_iata early: filter: { $zoom: [9,10,11] } draw: { icons: { text: { text_source: iata } } } + enclosure-related: filter: kind: [enclosure, animal] @@ -5400,7 +5409,7 @@ layers: draw: text-blend-order: text_source: global.ux_language_text_source - interactive: global.interactive + interactive: global.sdk_interactive move_into_tile: true priority: 100 visible: global.text_visible_landuse_generic @@ -6060,14 +6069,14 @@ layers: icons: visible: global.sdk_transit_overlay size: [[13, 12px], [16, 16px], [19, 20px]] - interactive: global.interactive + interactive: global.sdk_interactive priority: 15 text: buffer: 4px move_into_tile: false # preserves text alignment w/icons in JS #anchor: bottom #offset: [[13, [0, 6px]], [16, [0, 8px]], [19, [0, 10px]]] # offset tracks alongside icon size (half icon height) - interactive: global.interactive + interactive: global.sdk_interactive priority: 16 font: fill: black @@ -6190,7 +6199,7 @@ layers: size: [[13, 8px], [16, 10px], [17, 12px], [18, 18px]] sprite: bus_station text: - interactive: global.interactive + interactive: global.sdk_interactive font: fill: black size: 12px @@ -6205,7 +6214,7 @@ layers: sprite: bus_station priority: 17 text: - interactive: global.interactive + interactive: global.sdk_interactive priority: 18 font: fill: black @@ -6231,7 +6240,7 @@ layers: text: #offset: [[17, [0, 6px]], [19, [0, 7px]]] # offset tracks alongside icon size (half icon height) priority: 20 - interactive: global.interactive + interactive: global.sdk_interactive text_source: function() { if( feature.ref || feature.name ) { if( feature.ref && feature.name ) { return '[' + feature.ref + ']\n' + feature.name; } else { return feature.name; } } else { return "Entrance"; } } font: fill: black diff --git a/index.html b/index.html index 4491379..ccd134a 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,33 @@ - Bubble Wrap cartography - - + Bubble Wrap + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + +
- - - + + - - - - - + var animated = true; + var url_search = window.location.search.slice(1); + if (url_search.length > 0) { + if (url_search.indexOf('animated=false') > -1) { + animated = false; + } + } + + // location + var url_hash = window.location.hash.slice(1).split('/'); // map location as #z/x/y + var map_start_location = [37.7926, -122.4003, 15]; // San Francisco + var defaultpos = true; // use default position + + // location is passed through url + if (url_hash.length == 3) { + var defaultpos = false; + if (url_hash[1] > 180) { // parse hash as tile coordinates + // example: http://localhost:9001/#15/5242/12663 + // add .5 to coords to center tile on screen + map_start_location = [tile2lat(parseFloat(url_hash[2]) + .5, url_hash[0]), tile2long(parseFloat(url_hash[1]) + .5, url_hash[0]), url_hash[0]]; + } + else { // parse hash as lat/lng coordinates + map_start_location = [url_hash[1],url_hash[2], url_hash[0]]; + // convert from strings + map_start_location = map_start_location.map(Number); + } + } + + // enable setting language by URL argument + // eg: '?language=en&this=no' + + var query = splitQueryParams(); + // { language: 'en', this: 'no'} + + function splitQueryParams () { + var str = window.location.search; + + var kvArray = str.slice(1).split('&'); + // ['language=en', 'this=no'] + + var obj = {}; + + for (var i = 0, j=kvArray.length; iTangram, © OSM contributors' + }); + + var scene = layer.scene; + var latlng = {}; + var popup = document.getElementById('popup'); // click-popup + var hash = new L.Hash(map); + + function updateKey(value) { + keytext = value; + + for (layer in scene.config.layers) { + if (layer == "earth") continue; + scene.config.layers[layer].properties.key_text = value; + } + scene.rebuildGeometry(); + scene.requestRedraw(); + } + + function updateValue(value) { + valuetext = value; + + for (layer in scene.config.layers) { + if (layer == "earth") continue; + scene.config.layers[layer].properties.value_text = value; + } + scene.rebuildGeometry(); + scene.requestRedraw(); + } + + window.addEventListener('load', function () { + // Scene initialized + layer.scene.subscribe({ + load: function (data) { + data.config.global.sdk_animated = animated; + } + }); + layer.addTo(map); + }); + + // Feature selection + var picking = false; + function initFeatureSelection () { + layer.setSelectionEvents({ + hover: function(selection) { + if (!picking) { + if (!selection || selection.feature == null || selection.feature.properties == null) { + picking = false; + popup.style.visibility = 'hidden'; + return; + } + + var properties = selection.feature.properties; + popup.style.width = 'auto'; + popup.style.left = (selection.pixel.x + 0) + 'px'; + popup.style.top = (selection.pixel.y + 0) + 'px'; + popup.style.margin = '10px'; + if (properties.name) { + popup.innerHTML = '' + properties.name + '
'; + } else { + popup.innerHTML = '' + 'unnamed ' + properties.kind + '
'; + } + popup.innerHTML += '' + 'Click to view more...' + '
'; + popup.style.visibility = 'visible'; + } + } + }); + } + + function createEditLinkElement (url, type, label) { + var el = document.createElement('div'); + var anchor = document.createElement('a'); + el.className = 'labelInner'; + anchor.href = url; + anchor.target = '_blank'; + anchor.textContent = label; + anchor.addEventListener('click', function (event) { + trackOutboundLink(url, 'mapzen_carto_debug', type); + }, false); + el.appendChild(anchor); + return el; + } + + /** + * Function that tracks a click on an outbound link in Google Analytics. + * This function takes a valid URL string as an argument, and uses that URL string + * as the event label. Setting the transport method to 'beacon' lets the hit be sent + * using 'navigator.sendBeacon' in browser that support it. + */ + function trackOutboundLink (url, post_name, editor) { + // ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]); + ga('send', 'event', 'outbound', post_name, url, { + 'transport': 'beacon', + // If opening a link in the current window, this opens the url AFTER + // registering the hit with Analytics. Disabled because here want the + // link to open in a new window, so this hit can occur in the current tab. + //'hitCallback': function(){document.location = url;} + }); + } + + // convert tile coordinates to lat-lng + // from http://gis.stackexchange.com/questions/17278/calculate-lat-lon-bounds-for-individual-tile-generated-from-gdal2tiles + function tile2long(x,z) { return (x/Math.pow(2,z)*360-180); } + function tile2lat(y,z) { + var n=Math.PI-2*Math.PI*y/Math.pow(2,z); + return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n)))); + } + + function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); } + function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); } + + function mapzenTileURL() { + // find minimum max_zoom of all sources + var max_zoom = 16; + for (source in scene.config.sources) { + if (scene.config.sources.hasOwnProperty(source)) { + if (scene.config.sources[source].max_zoom != "undefined") { + max_zoom = Math.min(max_zoom, scene.config.sources[source].max_zoom); + } + } + } + var zoom = max_zoom < map.getZoom() ? max_zoom : Math.floor(map.getZoom()); + var tileCoords = { x : long2tile(latlng.lng,zoom), y: lat2tile(latlng.lat,zoom), z: zoom }; + + var url = 'http://tile.mapzen.com/mapzen/vector/v1/all/' + zoom + '/' + tileCoords.x + '/' + tileCoords.y + '.topojson'; + return url; + } + + /***** Render loop *****/ + + // Create dat GUI + var gui = new dat.GUI({ autoPlace: true }); + + function addGUI() { + gui.domElement.parentNode.style.zIndex = 10000; + window.gui = gui; + + // Language selector + var langs = { + '(default)': false, + 'English': 'en', + 'Russian': 'ru', + 'Chinese': 'zh', + 'Japanese': 'ja', + 'Korean': 'ko', + 'German': 'de', + 'French': 'fr', + 'Arabic': 'ar', + 'Spanish': 'es', + 'Greek': 'gr' + }; + // use query language, else default to English + gui.language = query.language || false; + gui.add(gui, 'language', langs).onChange(function(value) { + scene.config.global.ux_language = value; + scene.updateConfig(); + //window.location.search = 'language=' + value; + }); + gui.fallback_lang = query.language || false; + gui.fallback_button = gui.add(gui, 'fallback_lang', langs).onChange(function(value) { + scene.config.global.ux_language_fallback = value; + scene.updateConfig(); + //window.location.search = 'language=' + value; + }); + gui.fallback_button.name('lang fallback'); + + // Labels selector + var labels = { + '(default)': 'some', + 'More': 'more', + 'Some': 'some', + 'None': 'none' + }; + // use query language, else default to English + gui.labels = query.labels || 'more'; + gui.add(gui, 'labels', labels).onChange(function(value) { + var _default = true; + var _more = false; + + if(value === 'more') { + _more = true; + _default = true; + } else if(value === 'some') { + _more = false; + _default = true; + } else { + _more = false; + _default = false; + } + + scene.config.global.text_visible_continent = _default; + scene.config.global.text_visible_admin = _default; + scene.config.global.text_visible_populated_places = _default; + scene.config.global.icon_visible_populated_places = _default; + scene.config.global.text_visible_neighbourhoods = _default; + scene.config.global.text_visible_neighbourhoods_e = _default; + scene.config.global.text_visible_water = _default; + scene.config.global.text_visible_water_labels = _default; + scene.config.global.text_visible_island = _default; + + scene.config.global.sdk_shield_visible = _default; + scene.config.global.text_visible_roads = _default; + scene.config.global.text_visible_highway = _default; + scene.config.global.text_visible_highway_e = _default; + scene.config.global.text_visible_trunk_primary_route = _default; + scene.config.global.text_visible_trunk_primary = _default; + scene.config.global.text_visible_secondary = _default; + scene.config.global.text_visible_tertiary = _default; + scene.config.global.text_visible_minor_road = _default; + scene.config.global.text_visible_minor_road_e = _default; + scene.config.global.text_visible_service_road = _default; + scene.config.global.text_visible_path = _default; + scene.config.global.text_visible_piste = _default; + scene.config.global.text_visible_steps = _default; + + scene.config.global.text_visible_highway_e = _default; + scene.config.global.text_visible_trunk_primary_e2 = _default; + scene.config.global.text_visible_trunk_primary_e = _default; + scene.config.global.text_visible_secondary_e = _default; + scene.config.global.text_visible_tertiary_e = _default; + scene.config.global.text_visible_minor_road_e = _default; + scene.config.global.text_visible_exits_e = _default; + + scene.config.text_visible_aerialway = _default; + scene.config.global.text_visible_airport_gate = _default; + scene.config.global.text_visible_exits = _default; + + scene.config.global.text_visible_buildings = _default; + scene.config.global.text_visible_addresses = _default; + + scene.config.global.label_visible_poi_landuse = _more; + scene.config.global.label_visible_poi_landuse_e = _more; + scene.config.global.icon_visible_poi_landuse = _more; + scene.config.global.icon_visible_poi_landuse_e = _more; + scene.config.global.text_visible_poi_landuse_e = _more; + scene.config.global.icon_visible_station = _more; + + scene.config.icon_visible_landuse_green = _default; + scene.config.text_visible_landuse_green = _default; + scene.config.text_visible_landuse_generic = _default; + if( _more ) { + scene.config.global.icon_size_green = [[13, '14px'], [16, '18px'], [18, '19px']]; + scene.config.global.icon_size_green_nationl_park = [[10,'18px'],[12,'28px'],[13,'36px']]; + scene.config.global.icon_size_green_airport = [[13,'12px'],[14,'12px'],[17,'18px'],[19,'36px']]; + scene.config.global.icon_size_green_l = [[14,'24px'],[16,'32px']]; + } else { + scene.config.global.icon_size_green = [[0, '0px']]; + scene.config.global.icon_size_green_nationl_park = [[0, '0px']]; + scene.config.global.icon_size_green_airport = [[0, '0px']]; + scene.config.global.icon_size_green_l = [[0, '0px']]; + } + + // Oct. 7, 2016 + //need to rework this, upon switching back to labels, buildings stay light and labels dont read + // if( _val ) { + // scene.config.global.building_style = 'buildings_with_labels'; + // scene.config.global.building_lines_with_or_without_labels = '[0.512,0.594,0.840]'; + // } else { + // scene.config.global.building_style = 'buildings_no_labels'; + // scene.config.global.building_lines_with_or_without_labels = '[0.567,0.658,0.930]'; + // } + scene.updateConfig(); + //window.location.search = 'language=' + value; + }); + + // Transit selector + var transit_overlay = { + '(default)': false, + 'Show': true, + 'Hide': false + }; + // use transit ux, else default to false + gui.transit_overlay = query.transit_overlay || false; + gui.transit_button = gui.add(gui, 'transit_overlay', transit_overlay).onChange(function(value) { + scene.config.global.sdk_transit_overlay = (value === 'true' || value === true); // dat.gui passes a string + if (value === 'true' || value === true) { + scene.config.global.sdk_shield_visible = false; + } else { + scene.config.global.sdk_shield_visible = true; + } + scene.updateConfig(); + }); + gui.transit_button.name('transit'); + + // Building extrusion selector + var building_3d = { + '(default)': true, + 'Yes': true, + 'No': false + }; + // use transit ux, else default to false + gui.building_3d = query.building_3d || true; + gui.building_button = gui.add(gui, 'building_3d', building_3d).onChange(function(value) { + scene.config.global.sdk_building_extrude = (value === 'true' || value === true); // dat.gui passes a string + scene.updateConfig(); + }); + gui.building_button.name( '3D buildings' ); +// +// // Animation selector +// var animated = { +// '(default)': true, +// 'Yes': true, +// 'No': false +// }; +// gui.animated = query.animated || true; +// gui.add(gui, 'animated', animated).onChange(function(value) { +// scene.config.global.sdk_animated = (value === 'true' || value === true); // dat.gui passes a string +// scene.updateConfig(); +// //window.location.search = 'animated=' + value; +// }); + + // Enable/disable interactivity for all features + var interactive_label = 'interactive'; + gui[interactive_label] = false; + gui.add(gui, interactive_label).onChange(function(value) { + scene.setIntrospection(value); + }); + scene.setIntrospection(gui[interactive_label]); + + // Take a screenshot and save to file + gui.save_screenshot = function () { + return scene.screenshot().then(function(screenshot) { + // uses FileSaver.js: https://github.com/eligrey/FileSaver.js/ + timestamp = new Date(); + month = timestamp.getMonth()+1; + if( month < 10 ) { month = '0' + month; } + prettydate = timestamp.getFullYear() + month + timestamp.getDate() + timestamp.getHours() + timestamp.getMinutes(); + map_location = map.getZoom() + '-' + map.getCenter().lat.toFixed(5) + '-' + map.getCenter().lng.toFixed(5); + saveAs(screenshot.blob, 'tangram-' + map_location + '-' + prettydate + '.png'); + }); + }; + gui.screenshot = gui.add(gui, 'save_screenshot'); + gui.screenshot.name('save screenshot'); + + // Take a video capture and save to file + if (typeof window.MediaRecorder == 'function') { + gui.video = function () { + if (!gui.video_capture) { + if (scene.startVideoCapture()) { + gui.video_capture = true; + gui.video_button.name('stop video'); + } + } + else { + return scene.stopVideoCapture().then(function(video) { + gui.video_capture = false; + gui.video_button.name('capture video'); + saveAs(video.blob, 'tangram-video-' + (+new Date()) + '.webm'); + }); + } + }; + gui.video_button = gui.add(gui, 'video'); + gui.video_button.name('capture video'); + gui.video_capture = false; + } + + // Link to edit in OSM - hold 'e' and click + map.getContainer().addEventListener('dblclick', function (event) { + //console.log( 'dblclick was had' ); + if( timer ) { clearTimeout( timer ); timer = null; } + popup.style.visibility = 'hidden'; + }); + + var timer; + + map.getContainer().addEventListener('mousemove', function (event) { + picking = false; + popup.style.visibility = 'hidden'; + return; + }); + + layer.setSelectionEvents({ + click: function(selection) { + if( timer ) { clearTimeout( timer ); timer = null; } + timer = setTimeout( function() { + picking = true; + latlng = selection.leaflet_event.latlng; + + if( key.cmd || key.alt ) { + window.open( mapzenTileURL(), '_blank' ); + } else { + var url = 'https://www.openstreetmap.org/edit?'; + if (!selection || selection.feature == null || selection.feature.properties == null) { + picking = false; + popup.style.visibility = 'hidden'; + return; + } + //console.log(selection.feature, selection.changed); + // enable iD to show properties sidebar for selected feature + osm_type = 'node'; + osm_zoom = '19' + if( selection.feature.properties.sort_key ) { + osm_type = 'way'; + osm_zoom = Math.max( 17, map.getZoom() ); + } + osm_id = selection.feature.properties.id; + if( osm_id < 0 ) { + osm_type = 'relation' + osm_id = Math.abs( osm_id ); + osm_zoom = Math.max( 16, map.getZoom() ); + } + url += osm_type + '=' + osm_id; + // and position the map so it's at a similar zoom to Tangram + if (latlng) { + url += '#map=' + osm_zoom + '/' + latlng.lat + '/' + latlng.lng; + } + + if( key.shift ) { + window.open(url, '_blank'); + } else { + var properties = selection.feature.properties; + + var label = ''; + //console.log(properties); + for (var x in properties) { + var val = properties[x] + label += ""+x+" : "+val+"
" + } + + if (label != '') { + popup.style.left = (selection.pixel.x) + 'px'; + popup.style.top = (selection.pixel.y) + 'px'; + popup.style.margin = '0px'; + popup.innerHTML = '' + label + ''; + } + + // JOSM editor link + var position = '19' + '/' + latlng.lat + '/' + latlng.lng; + var josmUrl = 'http://www.openstreetmap.org/edit?editor=remote#map='+position; + + popup.appendChild(createEditLinkElement( url, 'iD', 'Edit with iD ➹') ); + popup.appendChild(createEditLinkElement( mapzenTileURL(), 'rawTile', 'View tile data ➹') ); + //popup.appendChild(createEditLinkElement( josmUrl, 'JOSM', 'Edit with JOSM ➹') ); + popup.style.visibility = 'visible'; + } + } + timer = null; + }, 200 ); + } + }); + } + + function inIframe () { + try { + return window.self !== window.top; + } catch (e) { + return true; + } + } + + // Add map + window.addEventListener('load', function () { + // Scene initialized + layer.on('init', function() { + var camera = scene.config.cameras[scene.getActiveCamera()]; + // if a camera position is set in the scene file, use that + if (defaultpos && typeof camera.position != "undefined") { + map_start_location = [camera.position[1], camera.position[0], camera.position[2]] + } + map.setView([map_start_location[0], map_start_location[1]], map_start_location[2]); + + if (!inIframe()) { + addGUI(); + } + }); + if (!inIframe()) { + map.scrollWheelZoom.enable(); + initFeatureSelection(); + } + + function addToMap () { + layer.addTo(map); + } + }); - - - - - - - - - - - - - - - - - - - - + + + + - + \ No newline at end of file diff --git a/main.js b/main.js deleted file mode 100644 index b413de3..0000000 --- a/main.js +++ /dev/null @@ -1,405 +0,0 @@ -/*jslint browser: true*/ -/*global Tangram */ -var picking = false; -map = (function () { -// (function () { - // 'use strict'; - - // defaults - var map_start_location = [37.7926, -122.4003, 15]; // San Francisco - var style_file = 'bubble-wrap.yaml'; - - /*** URL parsing ***/ - - // convert tile coordinates to lat-lng - // from http://gis.stackexchange.com/questions/17278/calculate-lat-lon-bounds-for-individual-tile-generated-from-gdal2tiles - function tile2long(x,z) { return (x/Math.pow(2,z)*360-180); } - function tile2lat(y,z) { - var n=Math.PI-2*Math.PI*y/Math.pow(2,z); - return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n)))); - } - - // leaflet-style URL hash pattern: - // #[zoom],[lat],[lng] - var url_hash = window.location.hash.slice(1).split('/'); - - // location - var defaultpos = true; // use default position - - // location is passed through url - if (url_hash.length == 3) { - var defaultpos = false; - if (url_hash[1] > 180) { // parse hash as tile coordinates - // example: http://localhost:9001/#15/5242/12663 - // add .5 to coords to center tile on screen - map_start_location = [tile2lat(parseFloat(url_hash[2]) + .5, url_hash[0]), tile2long(parseFloat(url_hash[1]) + .5, url_hash[0]), url_hash[0]]; - } - else { // parse hash as lat/lng coordinates - map_start_location = [url_hash[1],url_hash[2], url_hash[0]]; - // convert from strings - map_start_location = map_start_location.map(Number); - } - } - - // enable setting language by URL argument - // eg: '?language=en&this=no' - - var query = splitQueryParams(); - // { language: 'en', this: 'no'} - - function splitQueryParams () { - var str = window.location.search; - - var kvArray = str.slice(1).split('&'); - // ['language=en', 'this=no'] - - var obj = {}; - - for (var i = 0, j=kvArray.length; iTangram | © OSM contributors | Mapzen' - }); - - window.layer = layer; - var scene = layer.scene; - window.scene = scene; - var latlng = {}; - var popup = document.getElementById('popup'); // click-popup - - // setView expects format ([lat, long], zoom) - var hash = new L.Hash(map); - - function updateKey(value) { - keytext = value; - - for (layer in scene.config.layers) { - if (layer == "earth") continue; - scene.config.layers[layer].properties.key_text = value; - } - scene.rebuildGeometry(); - scene.requestRedraw(); - } - - function updateValue(value) { - valuetext = value; - - for (layer in scene.config.layers) { - if (layer == "earth") continue; - scene.config.layers[layer].properties.value_text = value; - } - scene.rebuildGeometry(); - scene.requestRedraw(); - } - - // Feature selection - function initFeatureSelection () { - map.getContainer().addEventListener('mousemove', function (event) { - picking = true; - latlng = map.mouseEventToLatLng(event); - - var pixel = { x: event.clientX, y: event.clientY }; - - scene.getFeatureAt(pixel).then(function(selection) { - if (!selection || selection.feature == null || selection.feature.properties == null) { - picking = false; - popup.style.visibility = 'hidden'; - return; - } - var properties = selection.feature.properties; - - popup.style.width = 'auto'; - popup.style.left = (pixel.x + 0) + 'px'; - popup.style.top = (pixel.y + 0) + 'px'; - popup.style.margin = '10px'; - if (properties.name) { - popup.innerHTML = '' + properties.name + '
'; - } else { - popup.innerHTML = '' + 'unnamed ' + properties.kind + '
'; - } - popup.innerHTML += '' + 'Click to view more...' + '
'; - popup.style.visibility = 'visible'; - }); - }); - } - - function createEditLinkElement (url, type, label) { - var el = document.createElement('div'); - var anchor = document.createElement('a'); - el.className = 'labelInner'; - anchor.href = url; - anchor.target = '_blank'; - anchor.textContent = label; - anchor.addEventListener('click', function (event) { - trackOutboundLink(url, 'mapzen_carto_debug', type); - }, false); - el.appendChild(anchor); - return el; - } - - /** - * Function that tracks a click on an outbound link in Google Analytics. - * This function takes a valid URL string as an argument, and uses that URL string - * as the event label. Setting the transport method to 'beacon' lets the hit be sent - * using 'navigator.sendBeacon' in browser that support it. - */ - function trackOutboundLink (url, post_name, editor) { - // ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]); - ga('send', 'event', 'outbound', post_name, url, { - 'transport': 'beacon', - // If opening a link in the current window, this opens the url AFTER - // registering the hit with Analytics. Disabled because here want the - // link to open in a new window, so this hit can occur in the current tab. - //'hitCallback': function(){document.location = url;} - }); - } - - function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); } - function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); } - - function mapzenTileURL() { - // find minimum max_zoom of all sources - var max_zoom = 21; - for (source in scene.config.sources) { - if (scene.config.sources.hasOwnProperty(source)) { - if (scene.config.sources[source].max_zoom != "undefined") { - max_zoom = Math.min(max_zoom, scene.config.sources[source].max_zoom); - } - } - } - var zoom = max_zoom < map.getZoom() ? max_zoom : Math.floor(map.getZoom()); - var tileCoords = { x : long2tile(latlng.lng,zoom), y: lat2tile(latlng.lat,zoom), z: zoom }; - - var url = 'http://tile.mapzen.com/mapzen/vector/v1/all/' + zoom + '/' + tileCoords.x + '/' + tileCoords.y + '.topojson?api_key=vector-tiles-HqUVidw'; - return url; - } - - /***** Render loop *****/ - - // Create dat GUI - var gui = new dat.GUI({ autoPlace: true, width: 250 }); - - function addGUI() { - gui.domElement.parentNode.style.zIndex = 10000; - window.gui = gui; - - // Language selector - var langs = { - '(default)': false, - 'English': 'en', - 'Russian': 'ru', - 'Chinese': 'zh', - 'Japanese': 'ja', - 'Korean': 'ko', - 'Vietnamese': 'vi', - 'German': 'de', - 'French': 'fr', - 'Arabic': 'ar', - 'Spanish': 'es', - 'Italian': 'it', - 'Greek': 'el' - }; - // use query language, else default to English - gui.language = query.language || false; - gui.add(gui, 'language', langs).onChange(function(value) { - scene.config.global.ux_language = value; - scene.updateConfig(); - //window.location.search = 'language=' + value; - }); - gui.fallback_lang = query.language || false; - gui.add(gui, 'fallback_lang', langs).onChange(function(value) { - scene.config.global.ux_language_fallback = value; - scene.updateConfig(); - //window.location.search = 'language=' + value; - }); - - // Transit selector - var transit_overlay = { - '(default)': false, - 'Show': true, - 'Hide': false - }; - // use transit ux, else default to false - gui.transit_overlay = query.transit_overlay || false; - gui.add(gui, 'transit_overlay', transit_overlay).onChange(function(value) { - scene.config.global.sdk_transit_overlay = (value === 'true' || value === true); // dat.gui passes a string - if (value === 'true' || value === true) { - scene.config.global.sdk_shield_visible = false; - } else { - scene.config.global.sdk_shield_visible = true; - } - scene.updateConfig(); - }); - - // Building extrusion selector - var building_3d = { - '(default)': true, - 'Yes': true, - 'No': false - }; - // use transit ux, else default to false - gui.building_3d = query.building_3d || true; - gui.add(gui, 'building_3d', building_3d).onChange(function(value) { - scene.config.global.building_extrude = (value === 'true' || value === true); // dat.gui passes a string - scene.updateConfig(); - }); - - // Take a screenshot and save to file - gui.save_screenshot = function () { - return scene.screenshot().then(function(screenshot) { - // uses FileSaver.js: https://github.com/eligrey/FileSaver.js/ - timestamp = new Date(); - month = timestamp.getMonth()+1; - if( month < 10 ) { month = '0' + month; } - prettydate = timestamp.getFullYear() + month + timestamp.getDate() + timestamp.getHours() + timestamp.getMinutes(); - map_location = map.getZoom() + '-' + map.getCenter().lat.toFixed(5) + '-' + map.getCenter().lng.toFixed(5); - saveAs(screenshot.blob, 'tangram-' + map_location + '-' + prettydate + '.png'); - }); - }; - gui.add(gui, 'save_screenshot'); - - // Enable/disable interactivity for all features - var interactive_label = 'debug_interactive'; - gui[interactive_label] = false; - gui.add(gui, interactive_label).onChange(function(value) { - scene.setIntrospection(value); - }); - scene.setIntrospection(gui[interactive_label]); - - // Link to edit in OSM - hold 'e' and click - map.getContainer().addEventListener('dblclick', function (event) { - //console.log( 'dblclick was had' ); - if( timer ) { clearTimeout( timer ); timer = null; } - popup.style.visibility = 'hidden'; - }); - - var timer; - - map.getContainer().addEventListener('click', function (event) { - //console.log( 'click was had' ); - if( timer ) { clearTimeout( timer ); timer = null; } - timer = setTimeout( function(){ - picking = true; - latlng = map.mouseEventToLatLng(event); - var pixel = { x: event.clientX, y: event.clientY }; - - if( key.cmd || key.alt ) { - window.open( mapzenTileURL(), '_blank' ); - } else { - var url = 'https://www.openstreetmap.org/edit?'; - scene.getFeatureAt(pixel).then(function(selection) { - if (!selection || selection.feature == null || selection.feature.properties == null) { - picking = false; - popup.style.visibility = 'hidden'; - return; - } - //console.log(selection.feature, selection.changed); - // enable iD to show properties sidebar for selected feature - osm_type = 'node'; - osm_zoom = '19' - if( selection.feature.properties.sort_key ) { - osm_type = 'way'; - osm_zoom = Math.max( 17, map.getZoom() ); - } - osm_id = selection.feature.properties.id; - if( osm_id < 0 ) { - osm_type = 'relation' - osm_id = Math.abs( osm_id ); - osm_zoom = Math.max( 16, map.getZoom() ); - } - url += osm_type + '=' + osm_id; - // and position the map so it's at a similar zoom to Tangram - if (latlng) { - url += '#map=' + osm_zoom + '/' + latlng.lat + '/' + latlng.lng; - } - - if( key.shift ) { - window.open(url, '_blank'); - } else { - var properties = selection.feature.properties; - - var label = ''; - //console.log(properties); - for (var x in properties) { - var val = properties[x] - label += ""+x+" : "+val+"
" - } - - if (label != '') { - popup.style.left = (pixel.x) + 'px'; - popup.style.top = (pixel.y) + 'px'; - popup.style.margin = '0px'; - popup.innerHTML = '' + label + ''; - } - - // JOSM editor link - var position = '19' + '/' + latlng.lat + '/' + latlng.lng; - var josmUrl = 'http://www.openstreetmap.org/edit?editor=remote#map='+position; - - popup.appendChild(createEditLinkElement( url, 'iD', 'Edit with iD ➹') ); - popup.appendChild(createEditLinkElement( mapzenTileURL(), 'rawTile', 'View tile data ➹') ); - //popup.appendChild(createEditLinkElement( josmUrl, 'JOSM', 'Edit with JOSM ➹') ); - popup.style.visibility = 'visible'; - } - }); - } - timer = null; - }, 200 ); - }); - } - - function inIframe () { - try { - return window.self !== window.top; - } catch (e) { - return true; - } - } - - // Add map - window.addEventListener('load', function () { - // Scene initialized - layer.on('init', function() { - if (!inIframe()) { - map.scrollWheelZoom.enable(); - addGUI(); - initFeatureSelection(); - } - - var camera = scene.config.cameras[scene.getActiveCamera()]; - // if a camera position is set in the scene file, use that - if (defaultpos && typeof camera.position != "undefined") { - map_start_location = [camera.position[1], camera.position[0], camera.position[2]] - } - map.setView([map_start_location[0], map_start_location[1]], map_start_location[2]); - }); - - // Set initial language on scene load - layer.scene.subscribe({ - load: function (msg) { - msg.config.global.ux_language = query.language; - } - }); - - layer.addTo(map); - }); - - return map; -}());