Osmbuildings-classic NPM

OSM Buildings is a JavaScript library for showing building geometry on interactive maps.

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/leaflet@1.6.0/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.6.0/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 &copy; <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

Data

OSM Tags used

qolor

@everything-registry/sub-chunk-2390 @infinitebrahmanuniverse/nolb-osm

3.0.0

4 years ago