JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Osmbuildings

    :city_sunrise: OSM Buildings
    Filed under  › 

    • 🔾32%Overall
    • 501
    • 34.7 days
    • 🕩140
    • 👥6

    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/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

    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
    Show All