JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://osmbuildings.org/examples/js/highlight/highlight.pack.js"></script>
<script src="http://osmbuildings.org/js/OpenLayers.Layer.Buildings.js"></script>
<link rel="stylesheet" href="http://osmbuildings.org/examples/assets/styles.css">
<link rel="stylesheet" href="http://osmbuildings.org/examples/js/highlight/github.css">
<script src="http://osmbuildings.org/examples/js/censusData.js"></script>
<div id="map"></div>
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.42857, 52.49480)
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),
17
);
var osmb = new OpenLayers.Layer.Buildings();
map.addLayer(osmb);
var geoJSONData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[13.42634, 52.49533, 50],
[13.42660, 52.49524, 50],
[13.42619, 52.49483, 50],
[13.42583, 52.49495, 50],
[13.42590, 52.49501, 50],
[13.42611, 52.49494, 50],
[13.42640, 52.49525, 50],
[13.42630, 52.49529, 50],
[13.42634, 52.49533, 50]
]
]
},
"properties": {
"color": "rgb(255,200,150)"
}
}, {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[13.42706, 52.49535],
[13.42675, 52.49503],
[13.42694, 52.49496],
[13.42678, 52.49480],
[13.42657, 52.49486],
[13.42650, 52.49478],
[13.42686, 52.49466],
[13.42714, 52.49494],
[13.42692, 52.49501],
[13.42717, 52.49525],
[13.42741, 52.49516],
[13.42745,...