Skip to content

Instantly share code, notes, and snippets.

Created October 22, 2014 04:37
Show Gist options
  • Save javisantana/d20063afd2c96a733002 to your computer and use it in GitHub Desktop.
Save javisantana/d20063afd2c96a733002 to your computer and use it in GitHub Desktop.
highlight polygon on click with leaflet and cartodb.js
<!DOCTYPE html>
<title>Leaflet example | CartoDB.js</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="" />
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
<link rel="stylesheet" href="" />
<div id="map"></div>
<!-- include cartodb.js library -->
<script src=""></script>
function main() {
var map = new L.Map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
var sql = new cartodb.SQL({ user: 'documentation', format: 'geojson' });
var polygon;
function showFeature(cartodb_id) {
sql.execute("select ST_Simplify(the_geom, 0.1) as the_geom from european_countries_e where cartodb_id = {{cartodb_id}}", {cartodb_id: cartodb_id} ).done(function(geojson) {
if (polygon) {
polygon = L.geoJson(geojson, {
style: {
color: "#000",
fillColor: "#fff",
weight: 2,
opacity: 0.65
L.tileLayer('{z}/{x}/{y}.png', {
attribution: 'Stamen'
cartodb.createLayer(map, '', { infowindow: false })
.on('done', function(layer) {
layer.on('featureClick', function(e, pos, latlng, data) {
}).on('error', function() {
cartodb.log.log("some error occurred");
// you could use $(window).load(main);
window.onload = main;
Copy link

MemberSense commented Oct 17, 2016

Once a feature is highlighted, clicking it has no effect. Is there another event, similar to featureClick, which is triggered when a selected feature (point, line or polygon) is clicked again? Thanks for the great examples Javi!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment