Last active
June 22, 2019 17:36
-
-
Save ramiroaznar/347f40c79a0f8f7f9a249e5a5b5e7cd5 to your computer and use it in GitHub Desktop.
Revisions
-
ramiroaznar revised this gist
Jun 22, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,6 @@ const map = new mapboxgl.Map({ container: 'map', style: carto.basemaps.voyager, center: [-3, 40], zoom: 5, scrollZoom: false, -
Jun 22, 2019 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ const cities = {"type": "FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"Point","coordinates":[2.450021,41.539957]},"properties":{"latitude":41.5399566844,"longitude":2.45002070986,"name":"Mataro","country":"Spain","pop":183293}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.980028,37.60043]},"properties":{"latitude":37.6004297069,"longitude":-0.98002832173,"name":"Cartagena","country":"Spain","pop":201274}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.67,43.530016]},"properties":{"latitude":43.530016092,"longitude":-5.67000044903,"name":"Gijon","country":"Spain","pop":335972}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-15.429999,28.099976]},"properties":{"latitude":28.0999760122,"longitude":-15.4299990249,"name":"Las Palmas","country":"Spain","pop":378495}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.698512,37.688564]},"properties":{"latitude":37.6885638621,"longitude":-1.6985115981,"name":"Lorca","country":"Spain","pop":86119}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2.654246,39.574263]},"properties":{"latitude":39.5742627147,"longitude":2.65424597028,"name":"Palma","country":"Spain","pop":375773}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2.181424,41.385245]},"properties":{"latitude":41.3832995799,"longitude":2.18337031923,"name":"Barcelona","country":"Spain","pop":4920000}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.799985,43.380464]},"properties":{"latitude":43.3804644969,"longitude":-3.79998539368,"name":"Santander","country":"Spain","pop":208763}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.770004,37.879999]},"properties":{"latitude":37.8799992056,"longitude":-4.77000370423,"name":"Cordoba","country":"Spain","pop":321376}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.87,39.000344]},"properties":{"latitude":39.0003442577,"longitude":-1.86999983866,"name":"Albacete","country":"Spain","pop":158094}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-7.869995,42.32996]},"properties":{"latitude":42.3299601431,"longitude":-7.86999536277,"name":"Ourense","country":"Spain","pop":118107}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.929949,37.250374]},"properties":{"latitude":37.2503735545,"longitude":-6.92994938295,"name":"Huelva","country":"Spain","pop":144174}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.429991,42.470365]},"properties":{"latitude":42.4703650096,"longitude":-2.42999149719,"name":"Logrono","country":"Spain","pop":143698}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.46653,36.126712]},"properties":{"latitude":36.1267121482,"longitude":-5.46653036284,"name":"Algeciras","country":"Spain","pop":111027}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.649987,42.820008]},"properties":{"latitude":42.8200077505,"longitude":-1.64998742818,"name":"Pamplona","country":"Spain","pop":274545}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.980007,37.405015]},"properties":{"latitude":37.4050152782,"longitude":-5.98000736635,"name":"Seville","country":"Spain","pop":1212045}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.669977,42.84998]},"properties":{"latitude":42.8499800812,"longitude":-2.66997684876,"name":"Vitoria","country":"Spain","pop":224578}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.429991,36.830348]},"properties":{"latitude":36.8303475129,"longitude":-2.42999149719,"name":"Almeria","country":"Spain","pop":179405}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-13.537833,28.969049]},"properties":{"latitude":28.9690492304,"longitude":-13.5378328307,"name":"Arrecife","country":"Spain","pop":52944}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.050008,39.970414]},"properties":{"latitude":39.9704142446,"longitude":-0.05000756977,"name":"Castello","country":"Spain","pop":180610}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.306999,35.888984]},"properties":{"latitude":35.888983784,"longitude":-5.30699935039,"name":"Ceuta","country":"Spain","pop":78674}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.337998,38.912004]},"properties":{"latitude":38.9120040184,"longitude":-6.33799751231,"name":"Merida","country":"Spain","pop":52423}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.929987,43.249982]},"properties":{"latitude":43.2499815054,"longitude":-2.92998681783,"name":"Bilbao","country":"Spain","pop":875552}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-16.250001,28.469979]},"properties":{"latitude":28.4699792674,"longitude":-16.2500006525,"name":"Santa Cruz de Tenerife","country":"Spain","pop":336061}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.750031,41.650002]},"properties":{"latitude":41.650001647,"longitude":-4.75003076315,"name":"Valladolid","country":"Spain","pop":322304}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.969973,38.880429]},"properties":{"latitude":38.8804290965,"longitude":-6.96997277976,"name":"Badajoz","country":"Spain","pop":140133}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.249991,41.12037]},"properties":{"latitude":41.1203698924,"longitude":1.24999059918,"name":"Tarragona","country":"Spain","pop":126291}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.633355,38.08332]},"properties":{"latitude":38.0833201284,"longitude":-3.63335473776,"name":"Linares","country":"Spain","pop":59761}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.585011,37.164978]},"properties":{"latitude":37.1649782502,"longitude":-3.58501143535,"name":"Granada","country":"Spain","pop":388290}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.225005,36.534991]},"properties":{"latitude":36.5349908641,"longitude":-6.22500533184,"name":"Cadiz","country":"Spain","pop":283157}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.979993,43.320391]},"properties":{"latitude":43.3203906444,"longitude":-1.97999312479,"name":"San Sebastián","country":"Spain","pop":357468}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.88333,36.51662]},"properties":{"latitude":36.5166198924,"longitude":-4.88333012025,"name":"Marbella","country":"Spain","pop":186131}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.829991,43.350492]},"properties":{"latitude":43.3504921662,"longitude":-5.8299906834,"name":"Oviedo","country":"Spain","pop":235651}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.950011,35.300002]},"properties":{"latitude":35.300001647,"longitude":-2.95001143535,"name":"Melilla","country":"Spain","pop":141308}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.166587,40.633707]},"properties":{"latitude":40.6337070913,"longitude":-3.16658736308,"name":"Guadalajara","country":"Spain","pop":72850}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.401958,39.486963]},"properties":{"latitude":39.4850175161,"longitude":-0.40001204569,"name":"Valencia","country":"Spain","pop":808000}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.679967,42.350398]},"properties":{"latitude":42.3503981721,"longitude":-3.67996687968,"name":"Burgos","country":"Spain","pop":170183}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.129967,37.979993]},"properties":{"latitude":37.9799931021,"longitude":-1.12996749003,"name":"Murcia","country":"Spain","pop":406807}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-8.729995,42.220019]},"properties":{"latitude":42.2200185334,"longitude":-8.72999454898,"name":"Vigo","country":"Spain","pop":378952}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-8.419988,43.329977]},"properties":{"latitude":43.3299766226,"longitude":-8.41998763166,"name":"La Coruña","country":"Spain","pop":370610}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.67,40.970405]},"properties":{"latitude":40.9704048859,"longitude":-5.67000044903,"name":"Salamanca","country":"Spain","pop":162353}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.889982,41.650002]},"properties":{"latitude":41.650001647,"longitude":-0.88998213846,"name":"Zaragoza","country":"Spain","pop":649404}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.799985,37.770393]},"properties":{"latitude":37.7703934927,"longitude":-3.79998539368,"name":"Jaén","country":"Spain","pop":116400}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-8.541091,42.882898]},"properties":{"latitude":42.8828979686,"longitude":-8.54109135073,"name":"Santiago de Compostela","country":"Spain","pop":92430}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.685298,40.401972]},"properties":{"latitude":40.4000262645,"longitude":-3.683351686,"name":"Madrid","country":"Spain","pop":5567000}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.570007,42.579971]},"properties":{"latitude":42.5799707225,"longitude":-5.57000655254,"name":"Leon","country":"Spain","pop":136227}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.419999,36.720406]},"properties":{"latitude":36.7204059032,"longitude":-4.41999922832,"name":"Malaga","country":"Spain","pop":550058}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.016716,39.867036]},"properties":{"latitude":39.8670355418,"longitude":-4.01671635071,"name":"Toledo","country":"Spain","pop":74632}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.483641,38.35122]},"properties":{"latitude":38.3512198953,"longitude":-0.48364072142,"name":"Alicante","country":"Spain","pop":315863}}]} This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,46 @@ <!DOCTYPE html> <html> <head> <title>CARTO VL & Airship with GeoJSON data source</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- Include CSS --> <link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v2.1.0/airship.css"> <!-- Include Icons --> <link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v2.1.0/icons.css"> <!-- Include Web Components --> <script src="https://libs.cartocdn.com/airship-components/v2.1.0/airship.js"></script> <!-- Include CARTO VL JS --> <script src="https://libs.cartocdn.com/carto-vl/v1.3.1/carto-vl.min.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> <script src='cities.js' type='text/javascript'></script> </head> <body class="as-app-body"> <div class="as-app"> <div class="as-content"> <main class="as-main"> <div class="as-map-area"> <div id="map"></div> </div> </main> <aside class="as-sidebar as-sidebar--right"> <as-category-widget id="cities-widget" heading="Populated places" description="Maximun population of the most populated cities in Spain" visible-categories="5"> </as-category-widget> </aside> </div> </div> <script src='main.js'></script> </body> </html> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,40 @@ const map = new mapboxgl.Map({ container: 'map', style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json', center: [-3, 40], zoom: 5, scrollZoom: false, dragRotate: false, touchZoomRotate: false }); const nav = new mapboxgl.NavigationControl({ showCompass: false }); map.addControl(nav, 'top-left'); // Define user carto.setDefaultAuth({ user: 'cartovl', apiKey: 'default_public' }); // Define layer const source = new carto.source.GeoJSON(cities); const viz = new carto.Viz(` @cities: viewportFeatures($pop, $name), `); const layer = new carto.Layer('layer', source, viz); layer.addTo(map, 'watername_ocean'); const $categoryWidget = document.querySelector('#cities-widget'); layer.on('updated', updateWidgets); function updateWidgets() { $categoryWidget.categories = viz.variables.cities.value .map(feature => ({ name: feature.properties.name, value: feature.properties.pop, })) .sort((a, b) => b.value - a.value); };