Last active
February 19, 2018 10:54
-
-
Save oriolbx/1e3755a44583058f4b95 to your computer and use it in GitHub Desktop.
CartoDB searchbox SQL filter createLayer
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> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
<style> | |
html, body,#map { | |
width:100%; | |
height:100%; | |
padding: 0; | |
margin: 0; | |
} | |
div#searchbox{ | |
background-color: #d2eaef; | |
opacity: 0.8; | |
position: absolute; | |
top: 10px; | |
left: 50px; | |
width: auto; | |
height: auto; | |
padding: 10px; | |
display: block; | |
z-index: 9000; | |
} | |
div#searchbox input{ | |
width: 200px; | |
} | |
div#results{ | |
background: #FFF; | |
} | |
</style> | |
<link rel="stylesheet" | |
href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
</head> | |
<body> | |
<div id="map"></div> | |
<div id="searchbox"> | |
<input type="text" name="ad" value="" id="ad" size="10" /> | |
<button type="button" id="searchButton">Search</button> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
<script> | |
var layer; | |
var input; | |
var map; | |
function main() { | |
var map = L.map('map', { | |
zoomControl: false, | |
center: [41.390205, 2.154007], | |
zoom: 4 | |
}); | |
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map); | |
// add CartoDB layer | |
cartodb.createLayer(map,{ | |
user_name: 'oboix', // Required | |
type: 'cartodb', // Required | |
sublayers: [ | |
{ // second sublayer is painted above the previous sublayer | |
sql: "SELECT * FROM world_table_2", // Required | |
cartocss: '#world_table_2 {polygon-fill: #3E7BB6;polygon-opacity: 0.7;line-color: #FFF;line-width: 0.5;line-opacity: 1;}' // Required | |
}] | |
}).addTo(map) | |
.done(function(){ | |
$('#searchButton').click(function(){ | |
input = $( "#ad").val(); | |
console.log(input); | |
var sql = new cartodb.SQL({ user: 'oboix' }); | |
sql.getBounds("SELECT * FROM world_table_2 where name Ilike '" + input + "'") | |
.done(function(bounds) { | |
map.fitBounds(bounds) | |
}); | |
}); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment