Skip to content

Instantly share code, notes, and snippets.

@ernesmb

ernesmb/index.html

Created June 26, 2016 16:13
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 ernesmb/4966872aa1fdd01c8bb5e2005996f26d to your computer and use it in GitHub Desktop.
Save ernesmb/4966872aa1fdd01c8bb5e2005996f26d to your computer and use it in GitHub Desktop.
Download ZIP
SearchBox with autocomplete
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>SearchBox with autocomplete | CartoDB</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" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
/*.cartodb-logo{
display:none!important;
}*/
</style>
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
function initAutocomplete() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
var sql = cartodb.SQL({ user: 'ernestomb' });
$( ".cartodb-searchbox .text" ).autocomplete({
source: function( request, response ) {
var s
sql.execute("select name, adm0_a3 from populated_places where name ilike '" + request.term + "%'").done(function(data) {
response(data.rows.map(function(r) {
return {
label: r.name+', '+r.adm0_a3,
value: r.nameunit
}
})
)
})
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value :
"Nothing selected, input was " + this.value );
}
});
};
</script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!--
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</head>
<body>
<script type="text/html" id="cartoCSS">
/** simple visualization */
#municipios{
marker-type:ellipse;
marker-width:6px;
marker-fill:red;
}
</script>
<div id="map"></div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<!--
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
-->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Drop your code between the script tags below! -->
<script>
layerSource={
user_name: 'ernestomb',
type: 'cartodb',
sublayers: [{
sql: 'SELECT * FROM populated_places',
cartocss: $('#cartoCSS').html()
}]
}
map= new L.Map('map', {
zoom:2,
center:[40.5,-3.6]
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
{attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
cartodb.createLayer(map, layerSource,{
//options
}).addTo(map)
.done(function(layer){
//do stuff
var v = cdb.vis.Overlay.create('search', map.viz, {})
v.show();
$('#map').append(v.render().el);
initAutocomplete();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment