osmbuildings
v0.2.0-b
Published
OSM Buildings
Readme
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 replacementgetDetails()=> 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
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.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",
"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);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).load();API
Constructors
Constants
Methods
Styles