JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<h4>cartodb_id: </h4>
<p id="cartodb_id">{{content.data.cartodb_id}}</p>
<input type="submit" id="clickme" value="clickme" />
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
CSS
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
JavaScript
var map = new L.Map('map', {
center: [39.115941, -105.763576]
});
map.fitBounds([
[37.004128, -109.053447],
[41.016427, -102.015180]
]);
var layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
id: 'willcarter.cigctwbwf0dqgt9kq4geyzag4',
accessToken: 'pk.eyJ1Ijoid2lsbGNhcnRlciIsImEiOiJjaWdjdHdkNzYwZGp3dTVtMGhhY2ZkaDloIn0.9qTtVfFnKXVe82B-6mJbqQ'
}).addTo(map);
cartodb.createLayer(map, {
user_name: 'coloradooilandgas',
type: 'cartodb',
sublayers: [{
sql: ' select * from co_wells_1898_2015 where year = 1950',
cartocss: "#co_wells_1898_2015 {marker-fill: #EA4335; marker-width: 5; }",
interactivity: 'cartodb_id'
}]
})
.addTo(map)
.done(function(layer) {
sublayer = layer.getSubLayer(0);
cartodb.vis.Vis.addInfowindow(map, sublayer,
['cartodb_id'], {
infowindowTemplate: $('#infowindow_template').html(),
templateType: 'mustache'
});
// Why isn't this working?
$('body').on('click', "#clickme", function() {
alert('clicked!', $('#cartodb_id').text());
});
})
.error(function(err) {
console.log("error: " + err);
});