Created
April 16, 2019 14:16
-
-
Save elenatorro/ff01223b03c02baf2ca4dad64c0e2dba to your computer and use it in GitHub Desktop.
Test Polygon
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>Test Polygon | CARTO</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="UTF-8"> | |
<!-- Include CARTO VL JS --> | |
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script> | |
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script> | |
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" /> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
#map { | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
const map = new mapboxgl.Map({ | |
container: 'map', | |
style: carto.basemaps.voyager, | |
center: [-39.913015089260284, 12.52009632002347], | |
zoom: 1.2, | |
scrollZoom: true | |
}); | |
const nav = new mapboxgl.NavigationControl({ | |
showCompass: false | |
}); | |
map.addControl(nav, 'top-left'); | |
// SET THE USER | |
carto.setDefaultAuth({ | |
username: 'carto-vl', | |
apiKey: 'default_public' | |
}); | |
const source = new carto.source.SQL(`SELECT * FROM la_join WHERE specificusetype = 'Single Family Residence'`); | |
const viz = new carto.Viz(` | |
color: ramp(globalQuantiles($area, 7), sunset) | |
strokeWidth: ramp(zoomrange([12,14]),[0,0.7]) | |
`); | |
const layer = new carto.Layer('layer', source, viz); | |
layer.addTo(map, 'watername_ocean'); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment