Created
December 20, 2012 17:44
-
-
Save wboykinm/4347133 to your computer and use it in GitHub Desktop.
Bootstrap style overriding CartoDB style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>US Mass Shootings Map</title> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
text-decoration:none; | |
} | |
</style> | |
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.css" /> | |
<link rel="stylesheet" href="http://geosprocket.com/assets/bootstrap/css/bootstrap.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.ie.css" /> | |
<![endif]--> | |
<!--<link href='http://fonts.googleapis.com/css?family=Monda:400,700' rel='stylesheet' type='text/css'>--> | |
</head> | |
<body> | |
<div class="navbar navbar-fixed-top"> | |
<div class="navbar-inner pull-right"> | |
<a class="brand" href="http://www.motherjones.com/politics/2012/07/mass-shootings-map">  Mass Shootings in the United States: 1980-2012</a> | |
<p><small> Firearms used were obtained: Legally = Yellow, Illegally = Red, or Not Known = Blue</small></p> | |
</div> | |
</div> | |
<div id="map"></div> | |
<style> | |
#h2 { | |
font-size:8; | |
} | |
</style> | |
</body> | |
<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"> | |
<!-- content.data contains the field info --> | |
<a><strong>{{content.data.incident}}</strong></a><br/> | |
<a>{{content.data.location}} | {{content.data.year}}</a> | |
<hr> | |
<a>Total # of Victims: {{content.data.total_victims}}</a><br/> | |
<a>Weapon Obtained Legally?: {{content.data.weapons_obtained_legally}}</a><br/> | |
<a>Shooter: {{content.data.shooter}}</a><hr> | |
</div> | |
</div> | |
<div class="cartodb-popup-tip-container"></div> | |
</div> | |
</script> | |
<script> | |
function main() { | |
var map = L.map('map', { | |
zoomControl: true, | |
center: [40.04443758460856, -95.09765625], | |
zoom: 5 | |
}) | |
// add a nice baselayer from mapbox | |
L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-sa4pz9ny/{z}/{x}/{y}.png', { | |
attribution: 'MapBox' | |
}).addTo(map); | |
cartodb.createLayer(map, 'http://geosprocket.cartodb.com/api/v1/viz/1797/viz.json') | |
.on('done', function(layer) { | |
map.addLayer(layer); | |
L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-r0hrxb15/{z}/{x}/{y}.png', { | |
attribution: 'Data compiled by Mother Jones' | |
}).addTo(map); | |
layer.infowindow.set('template', $('#infowindow_template').html()); | |
layer.on('featureOver', function(e, pos, latlng, data) { | |
console.log(e, pos, latlng, data); | |
}); | |
layer.on('error', function(err) { | |
console.log('error: ' + err); | |
}); | |
}).on('error', function() { | |
console.log("some error occurred"); | |
}); | |
} | |
window.onload = main; | |
</script> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script> | |
<script src="http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment