kekscom / osmbuildings Goto Github PK

var baseMaps;
var overlayMaps;
var control;

var wms = new L.TileLayer.WMS(
"/geoserver/wms",
{
layers: "planet_osm_polygon",
format: "image/png",
transparent: true
}
);

var build = new L.BuildingsLayer().addTo(map).geoJSON(bdata).setDate(new Date(2013, 03, 01, 11, 30));

baseMaps = {"OpenStreetMap": mapnik};
overlayMaps = {"Население по районам": wms/, "3D здания": build/};
control = L.control.layers(baseMaps, overlayMaps);
map.addControl(control);

ERROR: Cannot read property '_leaflet_id' of undefined?

OSM has a primitive but working 3D data model - http://wiki.openstreetmap.org/wiki/3D_building
Nice example - http://latlon.org/buildings?zoom=17&lat=55.82096&lon=37.6122&layers=BT
This script should also support this type of data.

Example with Leaflet and geoJSON

I set shadows to false but it always renders the shadows. I also tried 'shadows':'false'

var buildings = new L.BuildingsLayer().addTo(map).setStyle({'wallColor':'rgb(255,0,0)','roofColor':'rgb(0,0,255)','shadows':false}).geoJSON(data,true);

When panning around on the map in IE when I finish panning the currently drawn buildings flicker on and off as they are being redrawn I'm guessing. This does not occur in Chrome or Firefox.

Looks like Color.js is prepared to do this. Would be nice to be able to specify wallColor in hsv coords instead or rgb.

When using this on top of the open street map base map in leaflet it covers some of the building/store names. Would it be possible to add these labels on top of the roof or make what's currently on the base map visible by adjusting the opacity?

Is it possible to use osmbuildings without map layer?

Because whan I have no map layer all buildings are black and I'm not able to change their color.

per #14. I assume the roofs branch deals with this. Supported roof shapes should ideally be those listed here.

Hello -

Any activity or plans for testing OSM Buildings with OpenLayers 3 - http://ol3js.org/

Thanks

Chad

Would be nice to have buildings layer based on OpenLayers.

See 37f78bf#commitcomment-3562676

In MySQL and Postgres backend scripts, lat / lon order is different.
A small (set of) helpers to handle this transparently would be nice.

I tried to use bboxes and found two errors.

1. Unnecessary WHERE in line 82:

    return 'WHERE ST_Intersects(ST_GeomFromText(\'' + polygon + '\', 4326), ' + pgFootprintField + ')';

1. It's my fault, but I don't know how to fix it in node.js.
   pgBBox must be object, but it's a string, when we get it from arguments.

I suggest to use bbox parameter for data filtering. It's lot easier to think about box(left, bottom, right, top) than world(west, south, east, north)

Not the most urgent thing, but db handling could be a bit more abstracted.
I'm not for a big catch all package at the moment though.

self-solved

In order to avoid popping in objects after move, prerender a larger, hidden area.

I'm using django-pipeline and the compressor wraps each js module in an anonymous function for global namespace safety. This obscures OSMBuildings. Exposing OSMBuildings to the window global would alleviate this. I simply added window.OSMBuildings = OSMBuildings; to the end of OSMBuildings-Leaflet.debug.js to work around this.

Hey, Jan. I've been converting some .shp files to geoJSON with ogr2ogr, and I'm wondering what projection to use. Originally I was converting to EPSG:4326, but then a friend pointed out that most tile servers use EPSG:900913 a.k.a. EPSG:3857.

Do you have any pointers here? How do your lat --> pixel conversions work?

Hi,

I tried osmbuildings in android webview and performance his really low. Any advice?

thanks

Looking through the previous issues, looks like there is a default transparency setting.
Due to this, when two buildings are close, they are difficult to separate out as the borders are not clear. i have tried different color combinations to separate them out, but without success. I have searched the code v0.1.9 for the transparency effect, no success there as well.

How can i make the buildings opaque such that part of building that occluded by another building in front is hidden?

What about it?

Hi,

I just can't get min_height to work. It seems to work fine in the examples you provide, however, with my own data, all polygons always start at ground level. What could be the issue here?

Also, when I use low building height, the buildings soon get simplified, sometimes even on the highest zoom level. When this happens, they also loose their coloring. Can U somehow prevent this? In the best case, I don't want the simplifying at all, but just keeping the coloring would also be helpful.

Also, really great library! The buildings look really cool! Thanks for your work!

best,

bastian

According to the principle of Hill Shading ( 3d visulization of terrain/ground). For a good model:
The sun should be projected From North West corner
and the viewer should be assumed to be in South East corner.

This means that the top of building should be north of the foot and the top of the shadow should be south of the foot.

The formula you have used will give the sun's azimuth in south (which is the true case). Hence the shadow is to north of foot of building, due to this the buildings have a pseudoscopic effect (top appears as bottom).

• allow it to be just a different render output
• keep jitter predfined with data
• vary line widths
• shadow hatching

I've noticed that geometries that consist of the exact same long/lat coordinates only draw the first geometry. These geometries, of course, do have the proper minHeight/height properties set. This seems like a bug.

example of non-functioning issue:

var geoJSON = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[-82.66179263591766, 27.887153515841682],
[-82.66148686408997, 27.887272052051173],
[-82.66126692295074, 27.886987564930365],
[-82.661492228508, 27.886887994261496],
[-82.66179263591766, 27.887153515841682]
]]
},
"properties": {
"wallColor": "rgb(255,0,0)",
"roofColor": "rgb(255,128,0)",
"height": 20,
"minHeight": 0
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[-82.66179263591766, 27.887153515841682],
[-82.66148686408997, 27.887272052051173],
[-82.66126692295074, 27.886987564930365],
[-82.661492228508, 27.886887994261496],
[-82.66179263591766, 27.887153515841682]
]]
},
"properties": {
"wallColor": "rgb(255,0,0)",
"roofColor": "rgb(255,128,0)",
"height": 40,
"minHeight": 20
}
}]
};
var twostory = osmb.setData(geoJSON);


but changing a single digit of percision in each subsequent geometry will output proper results (second geometry, first long is altered):

var geoJSON = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[-82.66179263591766, 27.887153515841682],
[-82.66148686408997, 27.887272052051173],
[-82.66126692295074, 27.886987564930365],
[-82.661492228508, 27.886887994261496],
[-82.66179263591766, 27.887153515841682]
]]
},
"properties": {
"wallColor": "rgb(255,0,0)",
"roofColor": "rgb(255,128,0)",
"height": 20,
"minHeight": 0
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[-82.66179263591765, 27.887153515841682],
[-82.66148686408997, 27.887272052051173],
[-82.66126692295074, 27.886987564930365],
[-82.661492228508, 27.886887994261496],
[-82.66179263591766, 27.887153515841682]
]]
},
"properties": {
"wallColor": "rgb(255,0,0)",
"roofColor": "rgb(255,128,0)",
"height": 40,
"minHeight": 20
}
}]
};
var twostory = osmb.setData(geoJSON);


Thanks for looking. :)

Could buildings data format be much more simpler and understandable? Now there is a lot of strange processing and calculation.
I suggest to serve only linestring with height and do more calculations on client side.

Howdy! I just pulled the latest changes from the repo, and it looks like the z-indexes of some of my buildings are behaving strangely. I took a couple screen shots:

Notice in the bottom image how the left teal building moves in front / on top of the shorter blue building. I hadn't fetched the latest repo in a while, so I'm not sure which commit is the culprit.

I also noticed that many of my buildings appear much taller than they used to.

I'll start looking at the new commits.

I've generated a subset of your original dataset, containing all data with height not null, as a shapefile.
Here the download: http://dl.dropbox.com/u/2663849/osmbuildings.zip
Here the complete dataset as shapefile: http://dl.dropbox.com/u/2663849/osmbuildings_complete.zip

Hi,

First i wanna say thanks for you awesome work. I use OSMBuildings as a plugin with Leaflet map.
I use loadData method with my own database. It works well except that i want the buildings show up at smaller zoom levels.
My buildings appear on the last two zoom levels but i want to see them before.
I tried to change the MAX_HEIGHT on flatBuildings and it almost gave me what i need but only some of the buildings appear in 3d.
I wanna know how to do this. Is there a way?

I know this is a work in progress but I think this could benefit greatly from some better documentation on how exactly this is done. I've looked just about everywhere and cannot figure out how to create a building with another substructure on the top of it.

I'm using a GeoJson data set, and one feature looks like this:

        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-77.306579, 38.830296],
                [-77.306628, 38.830375],
                [-77.306715, 38.830340],
                [-77.306970, 38.830706],
                [-77.306890, 38.830737],
                [-77.306931, 38.830819],
                [-77.306579, 38.830947],
                [-77.306244, 38.830440],
                [-77.306579, 38.830296],
                [-77.30666, 38.830418],
                [-77.306774, 38.830585],
                [-77.306615, 38.830639],
                [-77.306501, 38.830460],
                [-77.30666, 38.830418]

            ]]
        },
        "properties": {
            "name": "David King Hall",
            "wallColor": "rgb(217,22,48)",
            "roofColor": "rgb(158, 147, 122)",
            "height": 20,
            "minHeight":"10"
        }
    }

The last 5 coordinates are the smaller substructure, that are supposed to be on top of the outer structure. As you can see I've used minHeight. All this does is create a smaller structure inside the larger one. Again, yet to see any good documentation on GeoJson data sets, and what all of the possible options are.

Do I literally have to create a new feature and specify its own minHeight and height to place it hovering in the air? I'd rather not do that, cause I'm using leaflet-search to index all my features, and I don't want random blocks indexed everywhere.

If each way segment is assumed equivalent to simple narrow boxes (i.e. using the same rendering method as the buildings), hopefully supporting these barriers wouldn't make things much more complicated.

According to taginfo, supporting only the values wall, fence and hedge covers over 90% of way-based barriers on OSM.

It would be great to have the ability to set the building not only from 0 to height, but from a min height too.

OSM has tags for this: min_height and building:min_level.

As it seems, drawing shadows is a substantial penalty on rendering speed. But there are not many buildings that need it. On the demo map I can see that even 1-floor buildings have shadow, but it's very hard to notice it because of small height.

I propose to not render shadow for 1 and 2-floor buildings (or make it configurable).

script src="/leaflet-0.5.1/dist/L.BuildingsLayer.js"></script

var data3d = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"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)",
"height": 500
}
}]
};

new L.BuildingsLayer().addTo(map).geoJSON(data3d);

After add to map my map is gray, and 3D buildings not showing?

Not the most urgent thing, but db handling could be a bit more abstracted.
I'm not for a big catch all package at the moment though.

The building ORCO Tower in Warsaw:

http://www.openstreetmap.org/browse/relation/3190068

has much more parts than just two visible "tower" pieces.

You might want to link to the github page from the banner at the top of http://osmbuildings.org/.

It would also be nice to have a "Development" section of the readme that covers requirements. (For instance, I just discovered that I need to install jshint in order to build.)

Hey there! I think Import.js is missing from the src directory. It's listed in config.js, so I end up with a build error when it can't be found.

See this building for example.

Move the viewport slightly to the left/right to see a weird clipping issue between the building-parts.

As GIF:

Might be nice to make a public method for modifying building data, so you can make changes on the fly. It could accept an array argument that contains an object per building, where each object contains only the key/value pairs that are to be updated.

• requestAnimFrame
• data webworker
• anim zoom
• try to avoid empty borders
• proper grow in!