OSM Buildings is a JavaScript library for showing building geometry on interactive maps.
This is the OSMBuildings-classics. One of the most favorable feature of the classic version is its integration with Leaflet and OpenLayers. Sadly, this version has multiple versions at GitHub, npmjs, and jsdelivr. The data (Building footprint GeoJSON tiles with height attribute) access method has also changed because onegeo.co hosts the data now. It seems some of these versions do not work well the new data source.
This fork is to make necessary changes to make the code work with the OneGeo data source and the latest Leaflet.
Link Leaflet and OSM Buildings files in your HTML head section.
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/osmbuildings-classic@3.0.0/dist/OSMBuildings.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/osmbuildings-classic@3.0.0/dist/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.
var osmb = new OSMBuildings(map)
.load('https://{s}-data.onegeo.co/maps/tiles/{z}/{x}/{y}.json?token={Your Key at OneGeo}');
osmb.style({"wallColor": "rgb(158,158,158)",
"roofColor": "rgb(218,218,218)",
"shadows": true})
osmb.date(new Date(2024, 11, 5, 10, 0)););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);| 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 |