Skip to content

Instantly share code, notes, and snippets.

@oriolbx

oriolbx/index.html

Last active June 1, 2016 07:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oriolbx/8aa16503402bd37fc781 to your computer and use it in GitHub Desktop.
Save oriolbx/8aa16503402bd37fc781 to your computer and use it in GitHub Desktop.
Download ZIP
Buffer on click
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<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 {
width:100%;
height:100%;
padding: 0;
margin: 0;
cursor: pointer;
}
#rad{
position: absolute;
top: 50px;
left: 50px;
cursor: pointer;
background-color: red;
color: #FFF;
}
#des{
position: absolute;
top: 80px;
left: 50px;
cursor: pointer;
background-color: blue;
color: #FFF;
}
</style>
</head>
<body>
<div id='map'></div>
<div id = 'rad'>Radius = 300Km</div>
<div id = 'des'>Click on the map to see the megacities within 300 Km</div>
<script type="text/javascript">
var lat;
var lon;
var geom;
var polygon;
var radius = 300000; // in meters
var geom1 = [];
var points;
function main() {
// center and zoom level
var options = {
center: [41.38, 2.18],
zoom: 5,
};
var map_object = new L.Map('map', options);
// set basemap
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map_object);
cartodb.createLayer(map_object,{
user_name: 'oboix',
type: 'cartodb',
sublayers: [
{
sql: 'SELECT * FROM populated_places where megacity = 1',
cartocss: '#populated_places{marker-fill: #FF6600;marker-allow-overlap: true;marker-opacity:0.5}'
}
]}).addTo(map_object)
.done(function(layer){
// when click on map, save lat/lng coordinates
map_object.on('click', function(e){
lat = e.latlng.lat;
lon = e.latlng.lng;
// cartodb sql api
var sql = new cartodb.SQL({ user: 'oboix'});
// select the attribute tables to extract from CartoDB table
sql.execute("WITH point as(SELECT ST_SetSRID(ST_Point('" + lon + "','" + lat + "'),4326) as the_geom)SELECT ST_asGeoJson(ST_Transform(ST_Buffer(ST_Transform(the_geom,3857),'" + radius + "'),4326)) as geom FROM point")
.done(function(data){
if(polygon){
map_object.removeLayer(polygon);
}
geom = data.rows[0].geom;
polygon = L.geoJson(JSON.parse(geom),{
style:{
color: "#000",
weight: 1,
fillColor: "#9999ff",
fillOpacity: 0.2
}
});
map_object.addLayer(polygon)
}); // end sql api call
var sql2 = new cartodb.SQL({ user: 'oboix'});
// select the attribute tables to extract from CartoDB table
sql2.execute("SELECT ST_asGeoJSON(the_geom) as geometry, megacity FROM populated_places WHERE megacity = 1 AND ST_Intersects((SELECT ST_Buffer(ST_Transform(ST_SetSRID(ST_Point('" + lon + "','" + lat + "'),4326),3857),'" + radius + "')),ST_Transform(the_geom,3857))")
.done(function(data){
if(points){
points = [];
map_object.removeLayer(points);
geom1 = [];
}
for(i = 0; i < data.total_rows; i++){
geom1 = data.rows[i].geometry;
points = L.geoJson(JSON.parse(geom1),{
style:{
color: "#000",
weight: 2,
fillColor: "#fff"
}
});
map_object.addLayer(points)
}
}); // end sql api call
}); // end click map_object
}); // end createLayer
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment