Skip to content

Instantly share code, notes, and snippets.

@alasarr
Created August 28, 2017 14:37
Show Gist options
  • Save alasarr/08224304743798afba03c1642febca3c to your computer and use it in GitHub Desktop.
Save alasarr/08224304743798afba03c1642febca3c to your computer and use it in GitHub Desktop.
Valencia hexagon grid
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Postal Codes</title>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="map"></div>
<script src="main.js"></script>
</body>
</html>
#map {
height: 100%;
width: 100%;
position: relative;
}
var map = L.map('map', {
center: [39.48138799019374, -0.39001464843749994],
zoom: 12,
layers: [
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/{style}/{z}/{x}/{y}.png',{style: 'light_all', zIndex: 0})
]
});
// add cartodb layer with one sublayer
cartodb.createLayer(map, {
user_name: 'posterscope-admin',
type: 'cartodb',
sublayers: [{
sql: `
with zoom as (
select case when !scale_denominator!>70000 then 2000
when !scale_denominator!>35000 then 1000
else 500
end as hxgrid
)
SELECT cartodb_id,value,the_geom_webmercator FROM valencia_demo_hexagongrid,zoom
where hx_grid=zoom.hxgrid`,
cartocss: `#layer {
polygon-fill: ramp([value], (#c4eaf2 , #62cfee , #00aced , #0079af , #005272 ), quantiles);
polygon-opacity: 0.60;
line-width: 5;
line-color: #005272 ;
line-comp-op: color-burn;
line-opacity: 0.1;
line-offset: -5;
}`
}]
}, {https: true})
.addTo(map)
.done(function(layer) {
console.log('Yeah!')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment