OSM Buildings is a JavaScript library for visualizing OpenStreetMaps building geometry on interactive maps.
Everything is stabilizing now, entering beta state.
With version 0.1.9a ahead, there are a few changes regarding files and API.
It's about aligning, functionality stays the same.
- Files are now named
OSMBuildings-<ENGINE>.js- where engine isLeafletorOpenLayersat the moment. - Initialization is just
new OSMBuildings(map)- no more addTo(...) - Loading data from external GeoJSON source is done via
loadData(<URL>) - Setting GeoJSON or alike formatted data is done by
setData(<DATA>)
For details, see documentation below.
Release version 0.1.8a https://github.com/kekscom/osmbuildings/tree/v0.1.8a
Latest development version https://github.com/kekscom/osmbuildings
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.5.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/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 MAPBOX 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).loadData();As a popular alternative, you could pass a GeoJSON FeatureCollection object.
Feature types Polygon, Multipolygon and Linestring 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);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();| 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(2013, 15, 1, 10, 30))) | Set date / time for shadow projection. |
| 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. |
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 |
| 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 |