Created
November 13, 2015 08:50
-
-
Save oriolbx/e3f354560c8671178dab to your computer and use it in GitHub Desktop.
paint leaflet polygons with CartoDB data
This file contains 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 characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <style>html, body, #map { height: 100%; padding: 0; margin: 0 }</style> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script type="text/javascript"> | |
| var layer; | |
| var color = []; | |
| var geom = []; | |
| function main() { | |
| var map = L.map('map', { | |
| zoomControl: false, | |
| center: [41.390205, 2.154007], | |
| zoom: 2, | |
| minZoom: 2, | |
| maxZoom: 4 | |
| }); | |
| // add basemap | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map); | |
| cartodb.createLayer(map, { | |
| user_name: 'oboix', | |
| type: 'cartodb', | |
| sublayers: [{ | |
| sql: "select * FROM excel_color;", | |
| cartocss: "#excel_color{ polygon-fill: #FF6600;polygon-opacity: 0;line-color: #FFF;line-width: 0.5;line-opacity: 0; }", | |
| }] | |
| }).addTo(map) | |
| .done(function(layer){ | |
| // start SQL API | |
| var sql = new cartodb.SQL({ user: 'oboix' }); | |
| var polygon = []; | |
| sql.execute("SELECT color_country, ST_asGeoJSON((ST_Dump(the_geom)).geom) as geom FROM draw_from_geom") | |
| .done(function(data){ | |
| for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table | |
| color[i] = data.rows[i].color_country; | |
| geom[i] = data.rows[i].geom; | |
| console.log(geom[i]); | |
| console.log(color[i]); | |
| polygon = L.geoJson(JSON.parse(geom[i]),{ | |
| style:{ | |
| color: "#000", | |
| weight: 0.5, | |
| fillColor: color[i] | |
| } | |
| }).addTo(map); | |
| } | |
| }); | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment