OSM Buildings is a JavaScript library for visualizing OpenStreetMaps building geometry on interactive maps.
Example http://osmbuildings.org/
For the new WebGL version, check out https://github.com/OSMBuildings/OSMBuildings All versions will eventually land over there.
Former methods loadData()
, setData()
, setStyle()
, setDate()
are deprecated since v0.2.2
Equivalent replacements are load()
, set()
, style()
, date()
.
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.
Link Leaflet and OSM Buildings files in your HTML head section.
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/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 © <a href="http://mapbox.com">MapBox</a>', maxZoom: 17 }).addTo(map);
Add the buildings layer.
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.
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).set(geoJSON);
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).load();
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 |
---|---|
style({Object}) | Set default styles. See below for details. |
date(new Date(2015, 15, 1, 10, 30))) | Set date/time for shadow projection. |
each({Function}) | A callback wrapper to override each feature's properties on read. Return false in order to skip a particular feature. Callback receives a feature object as argument. |
click({Function}) | A callback wrapper to handle click events on features. Callback receives an object { featureId{number,string}, lat{float}, lon{float} } as argument. |
set({GeoJSON FeatureCollection}) | Just add GeoJSON data to your map. |
load({Provider}) | Without parameter, it loads OpenStreetMap data tiles via an OSM Buildings proxy. This proxy enables transparent data filtering and caching. Interface of such provider is to be published. |
getDetails(id, {Function}) | Convenience method to load additional feature information from data provider. Callback function receives a GeoJSON FeatureCollection. |
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. |
Styles
Option | Type | Description |
---|---|---|
color/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 |
GeoJSON property | OSM Tags |
---|---|
height | height, building:height, levels, building:levels |
minHeight | min_height, building:min_height, min_level, building:min_level |
color/wallColor | building:color, building:colour |
material | building:material, building:facade:material, building:cladding |
roofColor | roof:color, roof:colour, building:roof:color, building:roof:colour |
roofMaterial | roof:material, building:roof:material |
shape | building:shape[=cylinder,sphere] |
roofShape | roof:shape[=dome] |
roofHeight | roof:height |