osmbuildings / osmbuildings Goto Github PK

View Code? Open in Web Editor NEW

921.0 59.0 206.0 10.35 MB

3d building geometry viewer based on OpenStreetMap data

Home Page: https://osmbuildings.org/

License: Other

JavaScript 87.16% GLSL 6.87% HTML 5.68% CSS 0.30%

osm osm-buildings geometry javascript 3d buildings

osmbuildings's Introduction

Our project name was seized by a multimillion dollar organization for profit.

OSM Buildings

OSM Buildings is a library for visualizing 3d building geometry.

Quick integration

Link all required libraries in your HTML head section. Files are provided in folder /dist.

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

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

In a script section initialize OSM Buildings and add it to a DOM container.

  var osmb = new OSMBuildings({
    container: 'map',
    position: { latitude: 52.52000, longitude: 13.41000 },
    zoom: 16,
    minZoom: 15,
    maxZoom: 22
  });

  osmb.addMapTiles(
    YOUR_TILESET_URL,
    {
      attribution: '© Data <a href="http://openstreetmap.org/copyright/">OpenStreetMap</a> · © Map <a href="http://mapbox.com">Mapbox</a>'
    }
  );

  osmb.addGeoJSONTiles('http://{s}.data.osmbuildings.org/0.2/anonymous/tile/{z}/{x}/{y}.json');

OSM Buildings server

There is also documentation of OSM Buildings Server side. See https://github.com/OSMBuildings/OSMBuildings/blob/master/docs/server.md

osmbuildings's People

Contributors

Stargazers

Watchers

Forkers

dientaufan kevinmel2000 cule giserh zhaochunliang moklick jaukia jomis willymaps dankarran p5cn apextw defconcepts nstoykov adsort tormi concerned3rdparty wallb cuulee kitcheng rossanag ovau matt-deboer jiangkevin thdtjsdn joryfleming communities-communications fxkulou jan-eric-kregis bullfest elcinertugrul sturfeeinc lexieleileiduan mynokia6680 wangchunyu907 sandykurniawan19 rawbeans benderpan hbcodexci allanhao mapsgeek cmollet chong-spatial 7dir gaurav225 mskjaldgaard ueun rufatpro chen369 ddrel caomw guviva jackxieweiwu satorbs yeri-kim millerhooks luoxz-ai tiberiuzuld manijenya trong huang9495 liangdwuoi paskuale75 lucreitus dodolooking ssjylsg fangguanya dabiaoluo rajibchanda lp249839965 ianmadlenya newcodebear valokai jclevenne fakebenjay tonytsangzsu hogwartsrico ericyao2013 junglelan joyeux7 mfkzj zy20091082 nightking-iitr ikeogu caabgchik salvak lasanthaa chezulkhairi hervevtl teemosir ancientlog gcmillar parselife wegiangb 153233976 tmcangku iqnaul wclwksn xuhande sermonis

osmbuildings's Issues

i want call google map services or some custom wmts services

hi , how can i call google map services use GLMap api

problems with addOBJ

Hi,

just downloaded the current Release and tried to add the "Fernsehturm_Berlin.obj" OBJ with the following code found in the git /test/index.html. (obj and material files are exsinting and found)

osmb.addOBJ('data/Fernsehturm_Berlin.obj', { latitude:52.51941, longitude:13.40445 }, { id:'Fernsehturm', scale:0.095, elevation:8, rotation:51 });

I get many errors (probably every frame):
TypeError: a is undefined
or with the debug.js:
TypeError: buffer is undefined

Note: i also removed the osmb.addGeoJSONTiles line.

Please, help ;) !! ...couldn't find any real example in the web :(

OSMBuildings.js?

Hi all,

in the documentation there is that ".....Link all required libraries in your HTML head section. Files are provided in folder /dist.", but under that folder I can't find this file .... :-(

Suggestion?

Thank you in advance!

slower rendering rate when the viewport is done rendering

Will it be possible to slow down the rendering rate once all the buildings are loaded? The CPU loading level seems to remain high, even if not action was taken. (with osmbuildings.com as the only window opened in the browser).

cpu profile over a period of 3 minutes on macbook air
red: "system"; blue: "user"; black: "idle"

Hey people, great job on the project, we used the classic version for our client in telecom.

How to add a icon on the map?

Hi all,

is there any sample for to add an icon on the map? Could be useful also put a label: I've seen that there is a suggestions but id doesn't work for me ... Could be possibile have a example?

Thanks!

Shadow artifacts

From James Conellan

There are these weird lines on the map. You can see them most clearly in the bottom-right corner of the attached screenshot, where they form a 4-pointed star. They seem to always appear on the map no matter where I look, and no matter what zoom level, rotation, or angle I use. They also show up regardless of what browser I use. I've only seen them recently, so I wonder if this is the result of some recent change in your renderer.

Allow Points and LineStrings in GeoJSON

Points should be presented as markers. I could imagine a vertical line of defined length + a small spherical element on top.
A billboard representation is another option.

For LineStrings I'd buffer them to Polygons and then display as usual.

Refers to #30 and #50

Reusing polygons in relations

From https://openstreetmap.org/user/Amaroussi

I spent the best part of last night figuring out how to apply the balcony pattern to Frinstead House in London (http://osmbuildings.org/?zoom=19.2&lat=51.51391&lon=-0.21905&rotation=-5&tilt=45).

I followed the advice at http://forum.openstreetmap.org/viewtopic.php?pid=204915#p204915 and I created a relation (http://www.openstreetmap.org/relation/6041437) so that the balcony (http://www.openstreetmap.org/way/220641109) repeats twice over ten storeys, without having to create extraneous ways.

However, your map doesn’t seem to render the two balconies that should appear with that relation.

Can you please advise on how to get the centre balconies to clone vertically to the 12th and 17th storey on the map?

where is the OSMBuildings.js file?

by the way, does it work with Mabox-gl-js now? thanks

Feature: Support for clearGeoJSON / clearMesh / clearObj

It would be nice to have a helper function that clears existing objects from the map, so for e.g. if geojson or other data is added using the addGeoJSON or addObj , a clearGeoJSON / clearObj will remove them.

OL3

I made an example with ol3 (not the best way of doing it but ...):

var proto = osmb.prototype = ol.layer.Layer ? new ol.layer.Vector({source: new ol.source.Vector( { projection: ol.proj.get('EPSG:900913') } )}) : { };

proto.setOrigin = function() {
var map = this.map;
try {
var origin = map.getCoordinateFromPixel([0,0]),
res = map.getView().getResolution(),
ext = this.maxExtent,
x = (origin[0] - ext[0]) / res <<0,
y = (ext[3] - origin[1]) / res <<0;
setOrigin({ x:x, y:y });
} catch (e) {
console.log(e);
}
};

proto.setMap = function(map) {
var scope = this;
Layers.appendTo(document.getElementById(map.get("target")));
setSize({ width:map.getSize()[0], height:map.getSize()[1] });

map.on('precompose', function(e) {
setZoom(map.getView().getZoom());
scope.setOrigin();
Data.update();
});

setZoom(map.getView().getZoom());
scope.setOrigin();
Data.update();
};

I hope will help someone :)

Feature: Remove updating address bar with lat, lng, tilt zoom

It would be nice if the library did not change the URL based on the current map state. It is OK for single screen / single map application where data is just loaded but for complex applications it does not work.

Missing Data?

I was working with this little patch of land (33.90088, 35.48196) and about an hour in all the buildings disappear from my embedded map as well as osmbuildings.org

Is this normal? help :(

a website maybe you will interested in

hi, @kekscom i found a website which is using threejs, is something like osmb. maybe you will interested in it.

http://barradeau.com/projects/cartography/habitat/full_city/index.html

OSMBuildings.debug.js missing after successful "grunt"

Ran 'npm install' , which installed all the dependencies and then ran 'grunt' . Yet I can't find the OSMBuildings.debug.js under dist/OSMBuildings/ .

Question about (1) supporting icons (like my_location.png) and (2) text labels

Hi,
It seems like a great tool, and I would like to know if it supports these 2 features, so as to make it my map engine:
(1) Place png icons on the map
(2) Place text labels on the map. If so, does it keep them facing the user, even if map is rotating?

Thanks

Make vertical shading height dependent

Right now vertical gradients are height independent which makes them look bad on very flat or very tall buildings.

Height / Min Height rendering

When a min height is assigned and height is set as 0 in geoJSON, the library extrudes the height anyway. Is there a default height associated?

Have the ability to load geoJSON straight from a variable as string

Currently, addGeoJSON fires a request to read a external file. However, geojson features may be stored in the browser context as a string or JSON. The library should have the ability to pass this string to the addGeoJSON method to render as well.

How to obtain the screen bounds of an object by id?

Suppose I want to display a callout box with some details surrounding a feature, and I want to arrange the callout so that it is close, but not overlapping the 3d object it targets.

Is there any way to obtain the screen bounds of the object if I know it's ID?

Passing in GeoJSON with Point geometry gives an error

If your geometry contains something like:

"geometry": {
    "type": "Point",
    "coordinates": [
        -0.302199,
        50.846629
    ]
},

you get: GeoJSON.js:176 Uncaught TypeError: Cannot read property '1' of undefined

By comparison Leaflet.js interprets this as a simple marker.

the GLMap test can not run normal

hi, i have download the source code but found the GLMap test can not run normal. could you provide a demo code which is same as osmbuilding website? thx.

Terrain Data

I know this may be out of scope of this project but is there any way that terrain data can be added to OSMB?

Moving label sample (typo error ...)

Hi all,

I've notice that there is a typo error in the example about Moving Label at the line

label.stye.top = Math.round(pos.y) + 'px'; --> error on "stye" !!

The correct one is

label.style.top = Math.round(pos.y) + 'px';

In any case is there a live sample that show how it works?

Thank you!

Cesare

OBJ display is corrupted sometimes

I have a 3d model that I'm importing, and it displays wrong sometimes.

Here's an example. Sometimes, the model will show up correctly, like this:

And then other times, it will show up like this:

I'm not sure what's wrong here. Could it have to do with the number of polygons?

Improve documentation

I cleaned up the docs in the readme, but there's still quite a bit of work that could be done. What do you guys think of making a Jekyll site similar to http://leafletjs.com/ with docs, examples, news, etc?

Showing Points and Polylines

Is it possible to show points and polyline data via the addGeoJSON method (with or without height attribute) on the GL / OSM map?

What I am trying to do is show buildings with height, in conjunction with lines (without height). Per my testing, Lines or points cannot be displayed and the geoJSON should contain polygon only.

Bower package

It'd be nice if there was a bower package for this library, so we could install it easily with bower install osmbuildings

Outline relation fix

From JaLooNZ

If you are up for a challenge, there's a crazy dude who imported a model and it doesn't render the model well. This will really test the limits of the rendering system just like the CSS tests.
http://osmbuildings.org/?lat=35.62447&lon=139.77558&zoom=20&rotation=0&tilt=30
http://demo.f4map.com/#lat=35.6245044&lon=139.7754597&zoom=21

Highlight activation area doesn't account for container position

When adding display: absolute; top: 30px; to the CSS for the container, the map highlight area (or probably more specifically getTarget or onMouseMove) doesn't account for this offset.

Here's an example codepen: http://codepen.io/anon/pen/XdVNra

z-fighting on some buildings

I'm seeing z-fighting in some buildings, usually ones that are more complex, such as the one at the base of this tower in Berlin:
http://osmbuildings.org/?lat=52.52108&lon=13.40914&zoom=18&rotation=4&tilt=36

I'm seeing it in London and New York as well. I suspect this is possibly the result of duplicate triangles. I don't know if the duplicates are in the incoming tile data or created client-side.

Right click listener

I'd like a listener for right click. Something like:

map.on('rightpointerdown', function(e) {})
map.on('rightpointerup', function(e) {})

Better tests

It seems like there are quite a few bugs in this library. I can't help but wonder if some of them are due to it not being properly tested. I haven't ever done front-end tests before, but I know it's possible. Leaflet has certainly done it. What do you guys think about adding tests?

As a side-note, this will probably help with creating comprehensive docs (#68), because API docs can generally be generated from the tests.

getTarget with added OBJs

I wanted a pointermove callback when I had the cursor above an added OBJ model. However, I didn't get the OBJ's id (that I had defined in its options) from getTarget().

After some digging it seems to work with a small change in addItems in OBJ.js...
from:
this.data.ids.push(idColor[0], idColor[1], idColor[2], 1);
to:
this.data.ids.push(idColor[0], idColor[1], idColor[2]);

Support highlighting multiple features

I would like to be able to highlight more than one building/object.

I'm going to take a stab at implementing this, but I'll have some questions. I'll put them here as I have them.

My first question: what does this function do? The name seems to indicate it converts an id to a color. Is that right? I'm not sure I understand what that accomplishes.

Transparency?

Color rendering is very archaic

Hi it seems that the colour rendering is only using several defined colours while other implementations interpret more precise values as hexadecimal #ccef34. See for example here: http://demo.f4map.com/

Add a LineString GeoJSON

Hi,
I've tried to add a GeoJSON (poly) fro some buildings and it's working fine, but I can't add a LineString GeoJSON: I'de like to show the path form two different buildings (I can calculate my path outside, obtaining a path in JSON format). I'ts not possible? I've tried to modify the GeoJSON in the sample transforming it in a LineString GeoJSON but it's not working. Any sample? Thank you in advance!

GLX map catching unbinded click events

This a peculiar behaviour I am seeing when using the latest GLX map. When user input is set up as disabled: true there are no issues.

However the map seems to be picking up click events unconnected to it when loaded in a container div within a larger page. At every click event the map pans to the right for every click event.

how could I interact with osm buildings like leaflet

I want to interact with osmBuildings using the leaflet api. Is it posssible? if not, how to bind event to some specific bulidings (not all the buildings)?how to link buildings with geojson data one to one so that I can set different styles(color) of each buildings according to their geojson feature?

Bower support

Hi, thanks for this great project ! Could you please add the bower support : http://bower.io/docs/creating-packages/

It's easier for developers to install and update javascript dependencies

Thanks again

Change wall color on the fly?

Hi at all,
is there a way to change the color of one or multiple buildings (e.g. the wall color) by ID from geoJSON data programmatically?

Best regards!

btw: great project!!!

Don't render walls for building=roof

There are quite a number of "buildings" in OSM that do not represent actual buildings, but just free-standing roofs (e.g. http://overpass-turbo.eu/s/d2F). For those buildings tagged as building=roof OSMBuildings should not attempt to create wall geometry.

(Note: this change would require the building type to be returned in the GeoJSON responses in order to identify those roofs. This is not currently the case).

Needs to support multipolygons

It's common to have buildings represented as multipolygons in OSM.
Unfortunatelly OSMBuildings just don't display anything when there are such cases.

Would be good if it could support this.

Fix map.getBounds()

It looks like getBounds() was disabled a while back, due to issues with camera tilt. I'd like to use that function for something I'm doing. Can we fix it?

How to obtain original GeoJSON from building ID

Extending from the highlight-building-on-hover example, suppose I want to display some of the original OSM data about that building in a pop-over--is there any easy way to extract the original GeoJSON from which the building was generated? (specifically, I'm trying to recover the 2d polygon from which the building was extruded so I can correlate with other map data)

using in indoor mapping?

Hi,
I have a simple question..Does OSMBuilding is usable to map indoor?For example mapping rooms or things like that?

Potential visual artifacts due to Filter.time()

Filter.time() returns the time that has passed since a filter was initialized. This duration is then used for animations. Currently, Filter.time() can be called by different Render objects to render different parts of the scene for a single frame. In this case it will return different results for these individual scene parts during the same frame (since time has progressed in-between calls).

This effect is usually unnoticable. But in cases where geometry has to match exactly (e.g. when rendering objects twice to gl.BLEND effects), this small difference can lead to visual artifacts.

One solution would be to have a method Filter.mark() that is called once every frame and updates an internal variable that holds the updated duration, and replace Filter.time() by a method Filter.frameTime() that returns the value of that internal variable, thereby returning the same value for each call during an animation frame.

format of JS3D

Hi, the src\formats exists three types(OBJ, GeoJSON, and JS3D). I think JS3D is three.js, but I don't know how to use it. Is it possible use like OBJ and GeoJSON?

Thanks.

Disappearing 3D-tiles on iOS

When I go to osmbuildings.org using safari on iOS (9.3) the 3D objects within individual tiles disappears/appears as I translate, rotate or zoom the map. Is it a known issue? Has anyone investigated as to why or have any ideas? It seems to also affect OBJects I add, i,e they seem to be clipped at tile borders as well.

osmbuildings / osmbuildings Goto Github PK

osmbuildings's Introduction

Our project name was seized by a multimillion dollar organization for profit.

OSM Buildings

Quick integration

OSM Buildings server

osmbuildings's People

Contributors

Stargazers

Watchers

Forkers

osmbuildings's Issues

Recommend Projects

Recommend Topics

Recommend Org