Volumetric OSM Buildings

<!DOCTYPE html>
<html>
<head>
<title>OSM Buildings + CartoDB : Long night of museums Berlin 2014</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#map {
  height: 100%;
  background-color: #384047;
}
#mamufas {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  color: #fff;
  background: rgba(0,0,0,0.5) url('img/icon.png') 14px 20px no-repeat;
  padding: 15px;
}

#mamufas h1 {
  font-family: Helvetica, Arial, Sans-serif;
  font-weight: bold;
  font-size: 17px;
  margin: 6px 0 0 106px;
}

#mamufas h4 {
  font-family: Helvetica, Arial, Sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 21px;
  max-width: 1150px;
  margin: 7px 30px 7px 106px;
  color: rgba(255,255,255,0.8)
}

#mamufas h4 a {
  color: #FFF;
  }

.leaflet-control-zoom{
  bottom: 40px;
}

</style>
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css">
<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script src="https://cartodb.github.io/showcase-maps/nightofmuseums/osmbuildings-leaflet.js"></script>
</head>

<body>
<div id="map"></div>
<div id="mamufas">
  <h1>Portland 911 Call Density</h1>
  <h4>Made using<a href="https://cartodb.com">CartoDB</a> and <a href="https://osmbuildings.org">OSMBuildings</a></h4>
</div>
<script>
var map = new L.Map('map', {
  center: [45.5399, -122.4567],
  zoom: 15,
  minZoom: 5,
  maxZoom: 17,
  zoomControl: false
});

new L.Control.Zoom({ position: 'bottomleft' }).addTo(map);

// add a nice baselayer from Stamen 
        L.tileLayer('https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);

// cartodb.createLayer(map, 'https://saleiva.cartodb.com/api/v2/viz/15f8e4ba-dab0-11e3-be35-0e230854a1cb/viz.json').addTo(map)
//   .on('done', function(layer) {
//     //Remove layer with labels
//      layer.getSubLayer(2).hide()
//   });

// OSM processing helpers

var
  YARD_TO_METER = 0.9144,
  FOOT_TO_METER = 0.3048,
  INCH_TO_METER = 0.0254,
  METERS_PER_LEVEL = 3;

function alignProperties(properties) {
  if (properties.height) {
    properties.height = toMeters(properties.height);
  }
  if (!properties.height && properties['building:height']) {
    properties.height = toMeters(properties['building:height']);
  }

if (!properties.height && properties.levels) {
    properties.height = properties.levels*METERS_PER_LEVEL <<0;
  }
  if (!properties.height && properties['building:levels']) {
    properties.height = properties['building:levels']*METERS_PER_LEVEL <<0;
  }

if (properties.min_height) {
    properties.minHeight = toMeters(properties.min_height);
  }
  if (!properties.minHeight && properties['building:min_height']) {
    properties.minHeight = toMeters(properties['building:min_height']);
  }

if (!properties.minHeight && properties.min_level) {
    properties.minHeight = properties.min_level*METERS_PER_LEVEL <<0;
  }
  if (!properties.minHeight && properties['building:min_level']) {
    properties.minHeight = properties['building:min_level']*METERS_PER_LEVEL <<0;
  }

return properties;
}

</script>
</body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

Modified http://cartodb.github.io/showcase-maps/nightofmuseums/OSMBuildings-Leaflet.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js

https://cartodb.github.io/showcase-maps/nightofmuseums/OSMBuildings-Leaflet.js