osmbuildings

OSM Buildings is a JavaScript library for visualizing OpenStreetMap building geometry on interactive maps.

Example: http://osmbuildings.org/

The new WebGL version is located here: https://github.com/OSMBuildings/OSMBuildings
All variants of OSM Buildings will eventually land over there.

There is also documentation of OSM Buildings Server side:
https://github.com/kekscom/osmbuildings/blob/master/docs/server.md

Deprecated methods and their replacements

- loadData() => load()
- setData() => data()
- setStyle() => style()
- setDate() => date()
- screenshot() => no replacement
- getDetails() => no replacement

Example http://osmbuildings.org/

It's safe use the master branch for production.

For further information visit http://osmbuildings.org, follow @osmbuildings on Twitter or report issues here on Github.

Documentation

$3

Link Leaflet and OSM Buildings files in your HTML head section.

~~~ html





~~~

Initialize the map engine and add a map tile layer.

Position is set to Berlin at zoom level 17, I'm using MapBox tiles here.

~~~ javascript
var map = new L.Map('map').setView([52.52020, 13.37570], 17);
new L.TileLayer('http://{s}.tiles.mapbox.com/v3//{z}/{x}/{y}.png',
{ attribution: 'Map tiles © MapBox', maxZoom: 17 }).addTo(map);
~~~

Add the buildings layer.

~~~ javascript
new OSMBuildings(map).load();
~~~

As a popular alternative, you could pass a GeoJSON FeatureCollection object.

Geometry types Polygon, Multipolygon and GeometryCollection are supported.

Make sure the building coordinates are projected in EPSG:4326.

Height units m, ft, yd, mi are accepted, no given unit defaults to meters.

~~~ javascript
var geoJSON = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": 134,
"geometry": {
"type": "Polygon",
"coordinates": [[
[13.37356, 52.52064],
[13.37350, 52.51971],
[13.37664, 52.51973],
[13.37594, 52.52062],
[13.37356, 52.52064]
]]
},
"properties": {
"wallColor": "rgb(255,0,0)",
"roofColor": "rgb(255,128,0)",
"height": 500,
"minHeight": 0
}
}]
};

new OSMBuildings(map).set(geoJSON);
~~~

$3

Link OpenLayers and OSM Buildings files in your HTML head section.

~~~ html




~~~

Initialize the map engine and add a map tile layer.

Position is set to Berlin at zoom level 17.

~~~ javascript
var map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());

var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);

map.setCenter(
new OpenLayers.LonLat(13.37570, 52.52020)
.transform(
new OpenLayers.Projection('EPSG:4326'),
map.getProjectionObject()
),
17
);
~~~

Add the buildings layer.

~~~ javascript
new OSMBuildings(map).load();
~~~

API

$3

Constants

Methods

Styles

Data

$3