block by wboykinm 4346767

bootstrap.css superceding cartodb.css

Full Screen

index.html

<!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="//libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.css" />
    <link rel="stylesheet" href="//geosprocket.com/assets/bootstrap/css/bootstrap.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="//libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
    <![endif]-->
    <!--<link href='//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="//www.motherjones.com/politics/2012/07/mass-shootings-map">&nbsp Mass Shootings in the United States: 1980-2012</a>
        <p><small>&nbspFirearms 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}}&nbsp|&nbsp{{content.data.year}}</a>
           <hr>
           <a>Total # of Victims:&nbsp{{content.data.total_victims}}</a><br/>
           <a>Weapon Obtained Legally?:&nbsp{{content.data.weapons_obtained_legally}}</a><br/>
           <a>Shooter:&nbsp{{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('//a.tiles.mapbox.com/v3/landplanner.map-sa4pz9ny/{z}/{x}/{y}.png', {
        attribution: 'MapBox'
      }).addTo(map);
 
      cartodb.createLayer(map, '//geosprocket.cartodb.com/api/v1/viz/1797/viz.json')
       .on('done', function(layer) {
 
        map.addLayer(layer);
 
        L.tileLayer('//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="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
  <script src="//geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
 
 
</html>