Last active
April 6, 2016 16:33
-
-
Save ramiroaznar/6bbc6cb7c8087f7c5896 to your computer and use it in GitHub Desktop.
How to make a map of the Antartica
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> | |
<title>How to make a map of the Antartica</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" /> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
<style> | |
html, body,#map { | |
background-color: #aae0f0; | |
width:100%; | |
height:100%; | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script type="text/SQL" id="sql_template"> | |
SELECT cartodb_id, st_transform(the_geom, 3031) as the_geom_webmercator FROM ata_adm0 | |
</script> | |
<script type="text/javascript"> | |
function main() { | |
var map; | |
// center and zoom level | |
var options = { | |
center: [0,0], | |
zoom: 4, | |
}; | |
var map = new L.Map('map', options); | |
// add layer | |
urlLayer = "https://team.cartodb.com/u/ramirocartodb/api/v2/viz/22ce4356-eb89-11e5-94d4-0e3ff518bd15/viz.json" | |
cartodb.createLayer(map, urlLayer) | |
.addTo(map) | |
.on('done', function(layer) { | |
// set sql query | |
var query = $('#sql_template').text(); | |
var subLayerOptions = { | |
sql: query, | |
cartocss: '#ata_adm0{polygon-fill: #FFFFFF;polygon-opacity: 0.7;line-color: #FFF;line-width: 0.5;line-opacity: 1;}' | |
} | |
var sublayer = layer.getSubLayer(0); | |
layer.getSubLayer(0).set(subLayerOptions); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment