OSM Buildings is a JavaScript library for visualizing OpenStreetMap building geometry on interactive maps.
Example: https://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
loadData()=>load()setData()=>data()setStyle()=>style()setDate()=>date()screenshot()=> no replacementgetDetails()=> no replacement
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.
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('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);- 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();| 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(2017, 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. |
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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent