Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/index.html

Last active September 17, 2015 22:58
Show Gist options
  • Save clhenrick/201661ff9c61d591d6d3 to your computer and use it in GitHub Desktop.
Save clhenrick/201661ff9c61d591d6d3 to your computer and use it in GitHub Desktop.
Download ZIP
cartodb js > cartocss bug? This file will display the cartodb layer without labels. Uncomment lines 71-72 and comment out line 73 to see that the layer no longer draws. This cartocss is the same that I used in the CartoDB Dashboard.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Nag-Brooklyn map</title>
<meta charset=utf-8 />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- CSS libraries -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- My Style Sheet -->
<style type="text/css">
#map {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
</style>
</head>
<body>
<div id='map'></div>
<!-- Javascript Libraries -->
<script src="//libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script src='//api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.standalone.js'></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
var southWest = L.latLng(40.679628, -74.089720),
northEast = L.latLng(40.755792, -73.856475),
bounds = L.latLngBounds(southWest, northEast);
var params = {
center: [40.718640, -73.950605], //Greenpoint
zoomControl: false,
zoom: 14,
maxZoom: 19,
minZoom: 14,
scrollwheel: false,
maxBounds: bounds,
legends: true,
infoControl: false,
attributionControl: true
};
map_object = new L.Map('map', params);
var accessToken = 'pk.eyJ1IjoiYm93b25jIiwiYSI6InFDV2RBNjAifQ._F8zZ-AkgNHp0_h2XKk9Pw';
var mapid = 'bowonc.n26oid7e';
var attr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>';
//mapbox basemap
var basemap = L.tileLayer('https://{s}.tiles.mapbox.com/v4/' + mapid + '/{z}/{x}/{y}.png?access_token=' + accessToken,
{attribution: attr}
).addTo(map_object);
var cdb_options = {
cartodb_logo: false,
legends: false,
https: true,
attributionControl: true
};
var layerSource = {
user_name: 'nag-brooklyn',
type: 'cartodb',
sublayers: [{
name: 'industrial_history_points',
sql: 'SELECT * FROM industrialhistory_points',
cartocss: "#industrialhistory_points{marker-fill-opacity:0.9;marker-line-color:#FFF;"+
"marker-line-width:1;marker-line-opacity:1;marker-placement:point;marker-type:ellipse;"+
"marker-width:14;marker-fill:#2E5387;marker-allow-overlap:true;"+
// "text-name:[id];text-face-name:'Lato';text-size:10;text-fill:#FFFFFF;text-dy:0;text-allow overlap:true;"+
// "text-placement:point;text-placement-type:dummy;}",
"}",
interactivity: 'cartodb_id, id'
}]
}
cartodb.createLayer(map_object, layerSource, cdb_options).addTo(map_object);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment