I am integrating Leaflet with OSMBuildings and i am using Classic 2.5D. Everything is working and it is showing 3D building on 2D Map, But The Building levels are not working (I am gone through this docs http://wiki.openstreetmap.org/wiki/Simple_3D_buildings).

Findout in HTML code as mentioned in **"building:levels": 12**, I have added this line to my geojson property.

Here is my HTML code :

<!DOCTYPE html>
<html >
    <meta charset="UTF-8">
    <link rel='stylesheet prefetch' href='http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css'>
        <link rel="stylesheet" href="css/style.css">
    <div id="map" style="width:620px; height:450px;"></div>
    <p>Objects on the map are build from custom GeoJSON.<br>
        Edit the data or paste your own examples here.</p>
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [[[72.8999412059784,19.0702453117883],[72.8998178243637,19.0699157606889],[72.9002845287323,19.0700019510397],[72.9003381729126,19.0703416419859],[72.8999197483063,19.0702351717642],[72.8999412059784,19.0702453117883]]
    "properties": {
      "color": "rgb(255,200,150)",
      "height": 150,
      **"building:levels": 12**
<button onclick="setGeoJSON()">Apply changes</button>
    <script src='http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js'></script>
<script src='http://cdn.osmbuildings.org/OSMBuildings-Leaflet.js'></script>
        <script src="js/index.js"></script>

and my JS file is :

var map = new L.Map('map');
map.setView([52.52111, 13.40988], 16, false);
new L.TileLayer('http://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png', {
  attribution: 'Map tiles &copy; <a href="http://mapbox.com">MapBox</a>',
  maxZoom: 18,
  maxNativeZoom: 20
var osmb = new OSMBuildings(map);
var geoJsonBlock;
function getCenter(geoJson) {
  var geometry, len = 0, lat = 0, lon = 0;

  for (var i = 0, il = geoJson.features.length; i < il; i++) {
    geometry = geoJson.features[i].geometry.coordinates[0];
    if (geometry[0][0][0]) {
      geometry = geometry[0];

    len += geometry.length-1;
    for (var j = 0, jl = geometry.length-1; j < jl; j++) {
      lat += geometry[j][1];
      lon += geometry[j][0];

  return { lat:lat/len, lon:lon/len };

function setGeoJSON() {
  try {
    var geoJson = JSON.parse(geoJsonBlock.value);
  } catch(e) {}
  var center = getCenter(geoJson);
  map.setView([center.lat, center.lon], 17)

geoJsonBlock = document.querySelector('textarea');

Can anybody help how i am displaying my 3D building to levels, roofs, sphere?

  • Any relevant errors in your javascript console? – scai Jun 27 '16 at 11:03
  • if i write the code in my geojson property like "height": {"height": 150, "building:levels": 7}, Then it given an error TypeError: geoJson is undefined – Sanjeeva Reddy Yanala Jun 29 '16 at 7:11

See the Readme about GeoJSON properties. The correct property name is height, not building:levels. building:levels is the corresponding tag in the OSM database but it is converted to a height property for the resulting GeoJSON data.

  • Thanks, But here how would write the building levels. and where i should apply ? – Sanjeeva Reddy Yanala Jun 29 '16 at 7:09
  • Sorry, I don't understand your question. Just use "height" instead of "building:levels". – scai Jun 29 '16 at 7:23
  • "properties": { "color": "rgb(255,200,150)", "height": {"building:levels" :7}, "minHeight": 50, "roofColor": "#FFDA33", "roofMaterial":"wood", "material": "material", "shape":"cylinder", "roofShape":"gabled", "roof:shape":"mansard" } Like this we can use? This is not working ("height": {"building:levels" :7},). How i can apply the building:levels to my geojson properties ? – Sanjeeva Reddy Yanala Jun 29 '16 at 10:54
  • Please read my answer again. Don't use "building:levels". This is the tag for the OSM database, not for OSMBuildings library. OSMBuildings uses "height" instead. See the example in the Readme. – scai Jun 29 '16 at 11:17
  • Finally my requirement is how to apply levels to my building ? explain and show me an example ? – Sanjeeva Reddy Yanala Jul 4 '16 at 9:54

"levels": 13 will do the trick

  • Welcome to GIS SE. This doesn't really answer the question - please edit your answer to expand on how/why this is the correct answer. See How to Answer – Midavalo Sep 18 '16 at 5:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.