thomwolf/osmbuildings

OSM Buildings is a JavaScript library for visualizing OpenStreetMaps building geometry on interactive maps.
Everything is stabilizing now, entering beta state.

Example

http://osmbuildings.org/

Files

It's safe to fork the latest code revision for development, or use it's build files for production.

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

Documentation

Integration with Leaflet

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

<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
  <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
  <script src="OSMBuildings-Leaflet.js"></script>
</head>

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.

var map = new L.Map('map').setView([52.52020, 13.37570], 17);
new L.TileLayer('http://{s}.tiles.mapbox.com/v3/<YOUR KEY HERE>/{z}/{x}/{y}.png',
  { attribution: 'Map tiles &copy; <a href="http://mapbox.com">MapBox</a>', maxZoom: 17 }).addTo(map);

Add the buildings layer.

new OSMBuildings(map).loadData();

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.

var geoJSON = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "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).setData(geoJSON);

Integration with OpenLayers

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

<head>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script src="OSMBuildings-OpenLayers.js"></script>
</head>

Initialize the map engine and add a map tile layer.
Position is set to Berlin at zoom level 17.

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.

new OSMBuildings(map).loadData();

API

Constructors

Constructor	Description
new OSMBuildings(map)	Initializes the buildings layer for a given map engine. Currently Leaflet and OpenLayers are supported.

Constants

Option	Type	Description
ATTRIBUTION	String	Holds OSM Buildings copyright information.
VERSION	String	Holds current version information.

Methods

Method	Description
setStyle({Object})	Set default styles. See below for details.
setDate(new Date(2014, 15, 1, 10, 30)))	Set date / time for shadow projection.
each({Function})	A callback method to override each feature's properties on read. Return false in order to skip a feature.
setData({GeoJSON FeatureCollection})	Just add GeoJSON data to your map.
loadData({String})	Without parameter, it loads data tiles from OpenStreetMaps. You don't need to care for data anymore. As an alternative, pass an URL to CartoDB or any other GeoJSON service. See below.
screenshot({Boolean})	Creates a screenshot of all visible OSM Buildings content and returns it as data URL. Parameter indicates, whether browser should display the image directly.

CartoDB URL example

http://<YOUR CARTODB ACCOUNT HERE>.cartodb.com/api/v2/sql?q=' + ('SELECT cartodb_id AS id, height, ST_AsText(the_geom) AS the_geom FROM <YOURTABLE> WHERE the_geom %26%26 ST_SetSRID(ST_MakeBox2D(ST_Point({w},{s}), ST_Point({e},{n})), 4326)') + '&format=geojson');

Styles

Option	Type	Description
color or wallColor	String	Defines the objects default primary color. I.e. #ffcc00, rgb(255,200,200), rgba(255,200,200,0.9)
roofColor	String	Defines the objects default roof color.
shadows	Boolean	Enables or disables shadow rendering, default: enabled

Data

OSM Tags used

Result	OSM Tags
height	height, building:height, levels, building:levels
minHeight	min_height, building:min_height, min_level, building:min_level
wallColor	building:color, building:colour, building:material, building:facade:material, building:cladding
roofColor	roof:color, roof:colour, building:roof:color, building:roof:colour, roof:material, building:roof:material
shape	building:shape[=cylinder,sphere]
roofShape	roof:shape[=dome]
roofHeight	roof:height

thomwolf / osmbuildings