osmbuildings-classic
v3.0.0
Published
OSM Buildings Classic
Downloads
283
Readme
OSM Buildings is a JavaScript library for showing building geometry on interactive maps.
Example: https://osmbuildings.org/
The standalone WebGL version odf OSM Buildings is located here: https://github.com/OSMBuildings/OSMBuildings
There is also documentation of OSM Buildings Server side: https://github.com/kekscom/osmbuildings/blob/master/docs/server.md
Example https://osmbuildings.org/
It's safe use the master branch for production.
For further information visit https://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="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/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('https://{s}.tiles.mapbox.com/v3/<YOUR KEY HERE>/{z}/{x}/{y}.png',
{ attribution: 'Map tiles © <a href="https://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
- NEW: for Integration with OpenLayers 5 see /tests/openlayers-5.3.0 *
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