# osmbuildings-1 **Repository Path**: ssjylsg/osmbuildings-1 ## Basic Information - **Project Name**: osmbuildings-1 - **Description**: OSM Buildings Classic 2.5D - **Primary Language**: JavaScript - **License**: BSD-2-Clause - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-04-09 - **Last Updated**: 2021-04-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 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 ## Deprecated methods and their replacements - `loadData()` => `load()` - `setData()` => `data()` - `setStyle()` => `style()` - `setDate()` => `date()` - `screenshot()` => no replacement - `getDetails()` => no replacement **Example** https://osmbuildings.org/ It's safe use the [master branch](https://github.com/kekscom/osmbuildings/tree/master/dist/) for production. For further information visit https://osmbuildings.org, follow [@osmbuildings](https://twitter.com/osmbuildings/) on Twitter or report issues [here on Github](https://github.com/kekscom/osmbuildings/issues/). ## Documentation ### Integration with Leaflet Link Leaflet and OSM Buildings files in your HTML head section. ~~~ html ~~~ 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. ~~~ javascript var map = new L.Map('map').setView([52.52020, 13.37570], 17); new L.TileLayer('https://{s}.tiles.mapbox.com/v3//{z}/{x}/{y}.png', { attribution: 'Map tiles © Mapbox', maxZoom: 17 }).addTo(map); ~~~ Add the buildings layer. ~~~ javascript 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. ~~~ javascript 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. ~~~ html ~~~ Initialize the map engine and add a map tile layer.
Position is set to Berlin at zoom level 17. ~~~ javascript 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. ~~~ javascript new OSMBuildings(map).load(); ~~~ ## API ### Constructors
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
## Data ### OSM Tags used
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