Developer

OSM Buildings

Get started here or see our API documentation


<link href="https://cdn.osmbuildings.org/3.2.6/OSMBuildings.css" rel="stylesheet">
<script src="https://cdn.osmbuildings.org/3.2.6/OSMBuildings.js"></script>

<div id="map"></div>

<script>
var map = new OSMBuildings({
position: { latitude: 52.52111, longitude: 13.41078 },
zoom: 16,
minZoom: 15,
maxZoom: 20,
effects: ['shadows'],
attribution: '© Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> © Map <a href="https://mapbox.com/">Mapbox</a> © 3D <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'
}).appendTo(document.getElementById('map'));

map.addMapTiles('https://{s}.tiles.mapbox.com/v3/[YOUR_MAPBOX_KEY]/{z}/{x}/{y}.png');
map.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/[YOUR_OSMBUILDINGS_KEY]/tile/{z}/{x}/{y}.json');
</script>

Live example on our website.
Find source code on GitHub

OSM Buildings Classic

Get started here:


<link href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet">
<script src="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://cdn.osmbuildings.org/classic/0.2.2b/OSMBuildings-Leaflet.js"></script>

<div id="map"></div>

<script>
var map = new L.Map('map');
map.setView([52.52111, 13.40988], 16, false);

new L.TileLayer('https://{s}.tiles.mapbox.com/v3/[YOUR_MAPBOX_KEY]/{z}/{x}/{y}.png', {
attribution: '© Map tiles <a href="https://mapbox.com">Mapbox</a>',
maxZoom: 18,
maxNativeZoom: 20
}).addTo(map);

var osmb = new OSMBuildings(map).load('https://{s}.data.osmbuildings.org/0.2/[YOUR_OSMBUILDINGS_KEY]/tile/{z}/{x}/{y}.json');
</script>

Live example
Find source code on GitHub

Mapbox GL

Get started here:


<link href="https://cdn.osmbuildings.org/mapbox-gl/0.40.0/mapbox-gl.css" rel="stylesheet">
<script src="https://cdn.osmbuildings.org/mapbox-gl/0.40.0/mapbox-gl.js"></script>

<div id="map"></div>

<script>
var map = new mapboxgl.Map({
container: 'map',
style: 'https://data.osmbuildings.org/0.2/[YOUR_OSMBUILDINGS_KEY]/style.json',
center: [13.37, 52.52],
zoom: 15,
attributionControl: true
});
</script>

See example
Documentation, examples, source code on Mapbox.com