Last active
August 29, 2015 14:15
-
-
Save Xatpy/6c7fcdcb08023f04c31d to your computer and use it in GitHub Desktop.
T3chfest
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> | |
| <title>T3chfest | CartoDB.js</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script> | |
| <script> | |
| function showPosition(position) { | |
| position.lat = position.coords.latitude; | |
| position.lon = position.coords.longitude; | |
| createMap(position); | |
| } | |
| function getLocation() { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(showPosition); | |
| } else { | |
| console.error("Geolocation is not supported by this browser."); | |
| } | |
| } | |
| function createMap(pos) { | |
| var map = new L.Map('map', { | |
| zoomControl: false, | |
| center: [pos.lat,pos.lon], | |
| zoom: 15 | |
| }); | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { | |
| attribution: 'CartoDB' | |
| }).addTo(map); | |
| var layerUrl = 'http://team.cartodb.com/api/v2/viz/2e144ed0-b2ce-11e4-8960-0e853d047bba/viz.json'; | |
| var sublayers = []; | |
| cartodb.createLayer(map, layerUrl) | |
| .addTo(map) | |
| .on('done', function(layer) { | |
| var limit = 100; | |
| var subLayerOptions = { | |
| sql: "WITH antenas AS \ | |
| (SELECT cartodb_id, the_geom, the_geom_webmercator, owner FROM antenas_1 \ | |
| ORDER BY the_geom <-> ST_SetSRID(ST_MakePoint("+pos.lon+","+pos.lat+"),4326) asc LIMIT " + limit +") \ | |
| SELECT null as cartodb_id, ST_MakeLine(ST_Transform(ST_SetSRID(ST_MakePoint(" + pos.lon + "," + pos.lat + "),4326),3857),the_geom_webmercator) as the_geom_webmercator, null as OWNER \ | |
| FROM antenas UNION ALL SELECT cartodb_id, the_geom_webmercator, owner FROM antenas", | |
| cartocss: '#antenas_1 [mapnik-geometry-type = 2]{ \ | |
| line-color: #FFCC00; \ | |
| line-opacity: 0.5; \ | |
| } \ | |
| #antenas_1[owner="TELEFONICA MOVILES ESPAÑA S.A.U."] { \ | |
| marker-fill: #2167AB; \ | |
| } \ | |
| #antenas_1[owner="VODAFONE ESPAÑA S.A."] { \ | |
| marker-fill: #F11810; \ | |
| } \ | |
| #antenas_1[owner="FRANCE TELECOM ESPAÑA SAU"] { \ | |
| marker-fill: #FF5C00; \ | |
| } \ | |
| #antenas_1[owner="XFERA MOVILES SA"] { \ | |
| marker-fill: #A53ED5; \ | |
| } \ | |
| #antenas_1[owner="FRANCE TELECOM ESPAÑA S.A."] { \ | |
| marker-fill: #ff7f00; \ | |
| } \ | |
| #antenas_1[owner="XFERA MÓVILES S.A."] { \ | |
| marker-fill: #A53ED5; \ | |
| } \ | |
| #antenas_1[owner="AIRTEL MOVIL S.A."] { \ | |
| marker-fill: #FFCC00; \ | |
| } \ | |
| #antenas_1[owner="TME"] { \ | |
| marker-fill: #055D00; \ | |
| }' | |
| } | |
| var sublayer = layer.getSubLayer(0); | |
| sublayer.set(subLayerOptions); | |
| sublayers.push(sublayer); | |
| }).on('error', function() { | |
| console.log('error'); | |
| }); | |
| } | |
| function main() { | |
| // We start getting the user location | |
| getLocation(); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment