Skip to content

Instantly share code, notes, and snippets.

Created October 22, 2014 04:37
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
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