Examples on using CartoDB.js.
Create a new layer based on a custom SQL and CSS
Last active
January 21, 2016 08:24
-
-
Save jsanz/b70d09760561cbe3355a to your computer and use it in GitHub Desktop.
CartoDB.js Examples: analysis
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 characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Ejemplos IGN</title> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <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> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| $( document ).ready(function() { | |
| //Create the leaflet map | |
| var map = L.map('map', { | |
| zoomControl: true, | |
| center: [39.583,2.670], | |
| zoom: 12 | |
| }); | |
| // PNOA WMS | |
| L.tileLayer.wms("http://www.ign.es/wms-inspire/pnoa-ma", { | |
| layers: 'OI.OrthoimageCoverage', | |
| format: 'image/jpeg', | |
| transparent: false, | |
| attribution: "IGN" | |
| }).addTo(map); | |
| //Add a CartoDB Layer | |
| var mySQL = 'WITH'+ | |
| ' data AS ('+ | |
| ' SELECT * '+ | |
| ' FROM lugint_btn100'+ | |
| ' WHERE etiqueta like \'Gasolinera\''+ | |
| ' ), '+ | |
| ' insideIds AS ('+ | |
| ' SELECT a.cartodb_id'+ | |
| ' FROM data a,nucleos_pobl_btn100 b'+ | |
| ' WHERE ST_Intersects(a.the_geom , b.the_geom)'+ | |
| ' )'+ | |
| ' SELECT * FROM data '+ | |
| ' WHERE cartodb_id NOT IN'+ | |
| ' ('+ | |
| ' SELECT cartodb_id '+ | |
| ' FROM insideIds'+ | |
| ' )'; | |
| var myCSS = '#layer{'+ | |
| ' marker-fill-opacity: 0.5;'+ | |
| ' marker-line-color: #FFCC00;'+ | |
| ' marker-line-width: 2;'+ | |
| ' marker-line-opacity: 1;'+ | |
| ' marker-placement: point;'+ | |
| ' marker-width: 14;'+ | |
| ' marker-fill: #FFCC00;'+ | |
| ' marker-allow-overlap: true;'+ | |
| '}'; | |
| cartodb.createLayer(map, {user_name: 'ignspaintest', | |
| type: 'cartodb', | |
| sublayers: [ | |
| { | |
| sql: 'SELECT * FROM nucleos_pobl_btn100', | |
| cartocss: '#layer{polygon-fill: #5CA2D1;polygon-opacity: 0.7;}' | |
| }, | |
| { | |
| sql: mySQL, | |
| cartocss: myCSS | |
| }] | |
| }).addTo(map); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment