OSM go

From OpenStreetMap Wiki
Jump to: navigation, search
Available languages — OSM go
· Afrikaans · Alemannisch · aragonés · asturianu · azərbaycanca · Bahasa Indonesia · Bahasa Melayu · Bân-lâm-gú · Basa Jawa · Baso Minangkabau · bosanski · brezhoneg · català · čeština · dansk · Deutsch · eesti · English · español · Esperanto · estremeñu · euskara · français · Frysk · Gaeilge · Gàidhlig · galego · Hausa · hrvatski · Igbo · interlingua · Interlingue · isiXhosa · isiZulu · íslenska · italiano · Kiswahili · Kreyòl ayisyen · kréyòl gwadloupéyen · Kurdî · latviešu · Lëtzebuergesch · lietuvių · magyar · Malagasy · Malti · Nederlands · Nedersaksies · norsk bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tiếng Việt · Türkçe · Vahcuengh · vèneto · Wolof · Yorùbá · Zazaki · српски / srpski · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 吴语 · 粵語 · 中文(繁體)‎ · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް


Description

Why and what, who and how

The intention of OSM go is to motivate new people to use OpenStreetMap as a useful, every day tool. But also to become a contributor and improve the data base. The idea was born with the hype of Pokémon GO: if the kids start to run around in the town, why not make them do something useful? Whether the idea is nicked by Pokemon, anyone may note. There are quite a view ideas for gamification and much to do yet. Some ar the same as in Kort_Game.

After a view days coding a first 3D-View, it was so impressing, my imagination started running wild: Walking or may be “flying” through OSM in 3D (not that discouraging Pokemon style, something tidy), overlay data; one could call it "OSM-Earth". OSM-3D is also an inspiration. As we used to do with 2D-maps, a 3D-rendering may have additional layers like KeepRight, Wikipedia and GeoCaching. External- / realtime data (trains,plains,ships). What would you expect, OpenStreetCam? And gamification is (almost) only another kind of layer.

See -karlos- ' diary for more history and the Twitter feed @OSM__go for actual news.

London landscape.png

Who: Actually there is no team behind it, just me -karlos- and a friend, Martin as a source of helpful functions and as a discussion partner. Therer are good contacts to Jan (OSMBuildings) and some to Tobias (OSM2World).

I would love to have some testers for different devices. And you may contribute, even without any writing of code: Design for game levels, batches and so on. Support for additional levels like Wikipedia portals. And much more.

How: At his state it is a Web-Page, mainly written in JavaScript with the use of TRHEEjs (using WebGL). There may be Apps in the future. So you need an up to date browser and a proper graphic hardware. Next to desktop devices, this works fine with most smartphones. Javascript "On-Events" are used to catch the moves and direction of a smartphone. The OSM-Data is loaded by AJAX/jquery form Overpass and rendered in 3D. As there is no Javascript OSM render engine, ready to use, this is also a challenge. The rendering is still in a medium state. There is not yet an import for map styles. I would like to get all style data from. carto. Could anyone write a Python script to generate a file, importable by Javascript?

Start at OSMgo.org into the 3D-View of OSM go with your actual position.

Or go to New York, Rio, Tokio or any other place to go *) ... (Lyrics by Trio Rio)
*) Opens the OSM Go slippy map to move and zoom to a place of your choice, then single-click to see it in 3D.

Some more places to go: Berlin Sony Center, Salt Lake City and some older animated demos.

OSMgo.org is work under construction! It may work or just crash because its also my online test sandbox! You may try older versions at OSMgo.org/versions

Controls / Handling

Keyboard, Mouse, Touchscreen and Device-Orientation.

  • If your device supports GPS and device-orientation-controls, OSM go will use it and show the streets and buildings around your actual position in the actual orientation. It's not yet Augmented Reality (until there will be a way to use the device camera as the background) Now you may move around in the real world and see the OSM view turn and go with you.
  • Or you override GPS and orientation-control by touch gestures, mouse or keyboard.
  • If you walk out of the downloaded area, an aditional load may be done. Use the ALT-L keys to change to a slippy map, select a new position and klick to go into 3D-View again.
  • Click/tap on an object to select it. Actual, the tag info of the object will be displayed. Click/tap no object or the sky to unselect. Actual, the tags of the marked object will be displayed. Selecting the top of the display will show a new browser tab with the objects OSM data.

The controls have been reworked generally. Now there are two ways to move and look around, the Inspection- and the Segway-Mode. Inspection is default, use the key “C” to change the mode.
Inspection is what you know from other 3D renderers like OSMBuildings: By keys, you move your point of view, by mouse or touch, you move the 3D world.

  • Use the arrow keys, the first mouse key or single touch to move ahead and back, right and left on ground level.
  • Use the shift key, the second mouse key or the double touch to control the direction you look at.
  • Use the enter- and space key, the mouse wheel or the two finger pinch(?) to move in view angle ahead or backward.

In Segway-Mode you move, guess what, a Segway on the ground, but not only there:

  • Use the arrow keys, the first mouse key or the single touch to control the horizintal direction and drive ahead or back.
  • Use the shift key, the second mouse key or double touch to look up or down and shift right or left.
  • Use the enter- and space key, the mouse wheel or the two finger pinch(?) to get your Segway flying.
  • Start OSM go with your touch-device in horizontal orientation you will be asked to start the Cardboard-Stereo-Mode.

Cardboard.png

There are some keyboard functions:

  • 0: resets the position and view angles to the point, the last OSM data was downloaded (0 and O)
  • S: sets/stores the actuals position and angles into a cookie
  • R: gets/restores the position and angles form that cookie
  • H: Head-Up-Display with diagnostic data on/off
  • D: Debug-Level +1 to 2,3,4 etc.: more log lines output

COMMING SOON:

  • C: Changes Control between Inspection- and the Segway-Mode
  • Z: Zooms the view without moving ahead. Use the Shift key to unzoom
  • L: Load OSM-Data around you positin (temporary solution) Use Shift key to relaod the Web-Page and Alt key to change to the slippy map

URL-Parameters:

You may start OSM go with parameters to define the location you want to visit and to use some debug features. By default, the actual local position will be used

  • lat/lon: start coordinates, latitude/longitude in grad, like ?lat=51.508080&lon=-0.097124 for the Globe Theater in London
  • ele: Position above ground level
  • dir: Direction horizontal of view in Grad: &dir=180 for South
  • view: Angle of view up/down in Grad: &view=0 for flat, -30 for a view down from above
  • rad: "radius" of the OSM-Download quare. &rad=300 is ok, much more may make trouble
  • card: Cardboard/Stereo-mode: &card=1/0 switches on/off. There will be a two color mode later
  • con: Changes Control between Inspection- (=1) and the Segway-Mode (=2)

Render parameter

  • hei: Set all undefinded buildings to as you like it. Override the default height-by-foodprind
  • sha: Show/hide shadows: &sha=1/0
  • abs: Abstract nodes like "public_transport" visible? &abs=1/0 Default is off
  • sub: Se below ground (experimental)
  • keep: Show Keepright-Errors: &keep=1

Debug parameter

  • fps: Set the minimum FPS (frames per secound) Next to this limit the far view will be limited. Default is 5
  • osm: To simulate some OSM-Data without download: &osm=0
  • gps: To simulate some GPS coordinates: &gps=1
  • hud: Head-Up-Display with diagnostic data on, also "frames per second": &hud=1
  • dbg: Debug-output level: &dbg=0 means all console.log of


Berlin, Sony-Center:
BerlinSonyCenter.png


Implementation

Components and states

Tests done

We would like to have more testers! Now, most tests are done with

  • Firefox (macOS, Windows)
  • Firefox (iOS 9/iPhone6, Android/china?)
  • Safari (iOS 9/iPad2)

There have been no remarkable problems with Chrome and MS-IE. At this place should be a detailed list of what's tested (versions!), ok or fault

Gameplay

There is still the question what gameplay is useful. Is there common interest to play this kind of “game”, anyway?
Just to start, we will do OSM-useless point collecting: Any healthy walked step counts, find and go to hydrants and water dispenser. Another intended feature is: if the player wants, he may set himself and its walks "visible" to all other players.
Really fun comes up with OSM-useful things: Check if a shop, contained in OSM, still exists; the older the last verification, the more points you get. Verify, update or insert tags of the shop. Note new house numbers. Is a way really a dead-end or did the first mapper run out of time/enthusiasm? Enter new POI or even totally new ways.

At that moment OSM, data get changed by the "game", it gets critical and needs verifying. We could start with less critical tags like building:level or hight. Editing "in world" and see the buildings rise and change roof style while changing "online" should be motivating and fun.
A lot helps a lot: If three players claim the same, it will be rather correct, and only now, it will be taken over to the OSM data. It is also a good idea, to put edits into an intermediate pool, used by “real” OSMer to load them into an editor and verify them.

If you have more gameplay ideas and features, tell us. We will ad them in this OSM wiki page.

Doing the first code to render OSM, there was a "Pokemon-mode". It is rather easy to render just some ways and buildings. When a Map-Style-Import is done, there will be this style again :)

OSM PM Style.png

The Idea of gamification will work. I am not that good in inventing stories and promotions or drawing prizes. A player will expect an experience with high scores, competitions, batches and motivating optical effects. I would love to code such things. But I need help, may be an artist and designer to develop the whole gameplay. So if anyone would like to join, you are mostly welcome.

Pacman

At a rainy Saturday, a simple game was added: Around the GPS starting point some spheres were paced above any OSM way node (see picture above). If you walk closer than 15m, they change color, twist around a bit and disappear. And you will get 100 game points :-) It needed only 65 lines of code; quite raw and without any luxus. It needs a story behind it to motivate the kids.

Kort

In 2017, the Kort_Game will come back as an App for Andorid and iOS. And bay be also in OSM go. Tests with the Kort-API will be done, simple visualisation of batches and ranking. The tasks will be shown as done with "Keep Right".

Select (Edit)

Klick or touch on an object in the 3D world to select it. The tag info of the marked way, building etc. will be shown in an overhead display at the top left. Selecting the upper part of the display will show a new browser tab with the objects OSM data.
There is no edit feature yet. Next there may be an edit of building levels.

NEW: Find

Are you looking for something special? Use the URL parameter "&f=" to find all visible OSM-objects with your string in ohne of

  • the tag names,
  • the tag values,
  • or the OSM-ID.

If something is found, the number of findings will be presented (each time, new OSM-Datas are loaded, don't move to much) There are three display modes:

  • Default is increased transparency of all other objects. Only the found objects will keep their normal color
  • A prefix + (plus) will show the other objects as wireframe only
  • A prefix ! (exclamation mark) will show all objects as usual but mark the found objects by a huge yellow spike. Klick on it to get details.

The simple filter string is only a first step. The Idea is, to accept an Overpass querry and mark all objects, this querry returns. Anoter Idea todo: After selecting any object and a tag. All objects with this tag/tag-value will be marked

OSM go Filter.png

„Keep Right“.

http://wiki.openstreetmap.org/wiki/Keep_Right http://www.keepright.at/ is a good and save start to improve OSM because the "player" will NOT change the OSM database but just investigate and give notes about it. There is already a gamification "kort.ch“ doing this even in in Javascript(in 2D)! Someone told me to do an Android app too. But "The Sourceforge project is no longer updated!"

Well, there is an description of how to get the error data records of a certain area. After some help from the Harald, this is implemented in OSM go now: Huge blue spikes show the places. If a spike is selected, the info of the error is shown in the overhead display. Selecting the display will show two new browser tabs with the Keepright error and the OSM objects data.
To code an edit dialog is not a challenge, just work to do. There are some problems about how to store back any notes. Harald and I are in contact. Use the URL-parameter "&keep=0/1" to show/hide the error marker

Controls / Handling

The framework THREE.js offers much examples and controls. Now views are merged into one: Screen- and Device Orientation, Stereo-Effect and GPS. The code is still messy but works, mostly.

  • The compass is wrong using Android?
  • Switching of stereo is messy

Also included are key, mouse and touch controls. The user handling is described above.

Overpass - Tiles - Server

Overpass may not be the best source for an extended used game/tool. There are some vector tile services and open source code to be used. An extra server will come, may be used to handle caching, intermediate edit buffers, login and user tracking and virtual user meetings. Even 3D-Models by user could be placed there. Mapzen and Mapbox offer a tile servers for low traffic users. Sounds good. It is commercial service, so I have my doubts. Are they realy nice to OSM? It looks like I could take their software and run it on my on server. But they don't include all data I need. So a second, additional type of tile data catch may be nedded. A vector tile could support much help, like building parts, clipping landuse, costline data.

Overpass only seemed to be slow. My code with a lot of string copy is now replaced by a fast query.js and getJSON. A simple linear search for existing nodes is replaced by arrays with the OSM-ID as index. Tag decoding and 3D object placing is now moved from the callback into the render cycle, sliced in fast steps. Now, the default load radius is set up to 800m and still fine in a dense city. Old devices may break downloading. And you may even move already during the download.

The “Tile Loading” has been improved. There will be no reload any more, if you come to the end of the loaded area, an additional part will be loaded in the background. Its not fast, don’t hurry to much. And will be added, there is no “unload” yet! After running around of a while, everything gets slow. The keyboard control will stop while mouse and touch may still work.

NEW: To avoid slow frame rates (FPS) the amound of shown objects will be reduced by setting the far view limit closer. Remote buildings and roads will get invisible. This is done automaticly next to 5 fps. Use the URL parameter "&fps" to set the limit you like.


Map styles

I would like to get all style data from. carto. Could anyone write a Python script to generate a file, importable by Javascript? At the moment I manually look for colours and calculate them to THREEjs materials. Details as way- and area border lines are not done yet.

Nodes (non-way-nodes)

An student from the [[1]] Rapperswil branched OSM2WORLD and implementet amenity=="table". I also got the code extentions and adappted them to Javascript and OSM go. The cool thing is: sizes, numbers of chairs and color are calculated from given OSM-Tags. There is a lot of geometry transforming and rotating. So I made an class to handle parts of node-objects and implementet some more types:

  • amenity=="table": Tables with shairs are dynamical generated by tags
  • leisure=="picnic_table": The size is also generated by tags
  • power=="generator": A wind mill is placed, even spinning

There is still a problem with exact position calulation form GPS to Meter

OSM go camping and table.png


NEW:

All nodes with tags are visible now. Still as a simple red tetrahedron. But a klick on it shows all the tags in the info display. A lot of work ahead: detect the types, create and show different geometries. Anyone wana help? For some nodes, it is not really useful to show them:

  • If it is only a level tag of a way, it will not be visible. Also if it is only a tag "created_by"
  • It doesn’t make sense to show a railway- or highway-crossing, does it? It is visual by the ways anyway.

Now or then, types of nodes will be designed in 3D. The first are realised: “natural"==“tree” and “barrier"==“bollard”. What about imaginary objects like stop positions of “public_transport”? There may be a busstop sign anyway. You may want to see this “ghost objects” or not. User the new URL parameter “&abs” to decide, default is off.

building/roof:colour/height

Walls and roofs are coloured now, thanks to Three.js. There are still some gaps: Colors outside the 130 default names (Cream), mixed names may be handled to ((light_brown, yellow-brown, dark_grey), spelling should be fixed (geez, maron). Prefixes like 0x and # are to consider to. Actual, unknown strings are displayed as sky-blue. The keys building/roof:material are still to do. Bitmaps are welcome.

NEW: If a building has no tags for height or building:levels, the height is "guest" by the footprint of the building. Still wrong but looks good. You may override this by the URL parameter "&hei=" to set all undefinded buildings to as you like it. ToDo: A mode to highlight buildings with no height-tag. And a way to add the height, may be onlinie and outdoors, may be as part of the Kort-Game

Shadow

Jan (OSMBuildings) asked me, how fast Three handles shadows: about 20% more rendering time. When you start now, the place around that point has shadows. To show the effect even more, a big disk flies over you. There are still some shadow options to investigate. In the Code, a virtual camera is placed at the shadow casting light. Mostly the graphic card is doing the hard work. This “camera” analyses the shapes, if they cast shadow and if this shadow is seen by the “real” camera. A greyscale bitmap is generated and placed between before the virtual world. Looks good. Todo: move the virtual with the real camera. Use the URL-parameter "&sha=0/1" to de-/activate shadows

Placing Modells

For quite a view buildings, extruding doesn’t make much sense, especially for famous buildings like churches or monuments like the Eifel Tower. There are 3D-models of many of them. To place them in the virtual OSM world will not improve data visualisation but give an realistic view. And it’s cool anyway if you move around by mouse or with VR glasses. How to render: First the model files. I like the Idea of https://wiki.openstreetmap.org/wiki/OpenBuildingModels, but its offline :-( Now there are only the two models, OSMBuildings uses:

Eye high.png Alex ball.png

London Eye, and Berlin Alexanderplat.

OSM2WORD and other 3D-viewer seems to have a lot models. How do the do that? What about Google Scetchup? I will try to get and dynamically convert all the models. But I am sure there is a copyright prohibiting a use. How to place: The models should be in the right scale and direction. The Server should know the exact position to place them. So we only need a tag for the server/service and the model name/id. This tag has to be added to the building(s) the model replaces. Now the renderer can make them invisible. Watch it at the London Eye. Well, there is a third model but you will have to discover it somehow :) And yes, shadows do also work for models.

Level & Layer

Underground objects shouldn’t be seen above, bridges should be raised. Now the tag:level * 4m is added, also the tag:layer * 0.5m. That’s not always correct and often looks strange. We need an AI to interpret this tags nicely, don’t we? It is also a very first step to indoor mapping. The move controls now allow to look underground now.

NEW: Subways are shown as tubes now. When the tag level jumps up and down, it looks odd. It will be difficult to make smooth level changes automaticly. An other attempt will be, to place negativ "height"-tags to the subway nodes.

NEW: steps are in the 3rd dimention now. They should be connected to ways with different levels. If so, this levels will be used to show steps inclining.

OSM go tubes steps.png

Rendering

A first rendering was done just to get a feeling. Checking the OSM Wiki got the impression, everything exists already; renderer in 2D and 3D, gamification with OSM improvements. Demotivating? Well - it’s fine, if one has less to do himself. However, its quite difficult to dig into stacks of alien code. If it is not Javascript, only the solutions or ideas, concepts and logics may be usable. Anyway, I would like to describe this logic in text, code independent. Or is there any independent description of OSM rendering?

  • Cartagen is already a renderer in Javascript (2D) ToDo: Why not use it?
  • Osm2world is a 3D-Renderer (java,static) There may be a way to interpret Java code in a Javascript environment. Tobias and me are in mail contact. Wenn we started, Martin and I had some different opinions about code has to be written and how the result should look like. I intend to have a "data view" to make all the data of OSM accessible. Colours should be like the standard 2D map mostly. Martin likes a realistic view as much as possible and so will be a good team up with Osm2World. At the moment we do a competition in writing different codes but compare our solutions and merge ideas.
  • Mapzen offers Tangram. I have to check if it is possible to use it as it is or if it is open source and adaptable without to much effort.

Meanwhile I had already some experiences about rendering, mainly because of javascript runtime errors and odd things, spotted during my 3D walkthroughs:

Way without Tags

Can't be? O yes, it can. Usually its a relation, using this way as components: big areas or buildings with "holes".

Way with only two Nodes

In New York, amenity areas with two nodes caused errors. It was the type "bench". Now a rectangle to sit on is created. Wouldn't it better to do place a single node with an angle-tag? Ok, editing is not that simple this way.
Later I got an error because a bench was tagged as area. Now, if first node = last note, it will be an area, else a way. This rool could be used in general, to be tag-variation-flexible.

Way-Nodes at the same position

Some OSM error tools know this too. And TREE-js will draw an exception if it builds the building footprint. That should be fixed but also be handled in the renderer by a workaround.

Main Tag priority

Some tags are more important than others. If it is a road or a building or a power line is a kind of "main tag". But what here is i.e both, a power and a building? Building overrides, power becomes a subtype of building. And don't expect the tags in the OSM data base to be sorted by priority, they are in alphabetic order.

Building=NO

Yes, this exists in OSM! Is there any sense to it? Now the code just sets the main tag back to "prior type not found yet". Usually another tag will follow anyway.

Buildings: holes and components

A building may be a way with tags only. But it also may be part of a relation as an outer way and some inner ways as "holes". The tags may be only at the outer way or at the relation. OSM-users enjoy much freedom!
A building relation may have a outer only to be used in 2D rendering and a lot of components used for 3D rendering. There is an extra wiki page for Multipolygon logic: ToDo!


Dead Ends?

  • Using HTTPS (S=Save) seems not a problem. But I get: No 'Access-Control-Allow-Origin' with "Keep Right"
  • Using csg2d.js looked good but the resulting list of vector2 has to much points and can't be convertet into shape.
  • Why is the compass sphere only transparent from below?
  • Why do subway tubes cast shadow even if it is set off?

ToDo-Lists

Actual

  • mixed colors like "red-brown" by interpolation (blank minus underscore)

Functions

  • Light sources, sun position in real-time
  • street names and numbers, but where to place ...
  • showing Tagged Nodes(non way)
  • Packman: intermediate spheres at long way parts

Layer

As 2D-maps, OSM go may have optional layers, adding more info

Game-"Level"

  • Check parking grounds if private/business/public + more tags? parking time etc.
  • Map the position of the entry of a building (taxi-rooting)
  • Kort.ch OSM go as client?

Controls

At the moment, there are only move controls. More to add:

  • 3rd person control
  • Segway control (for Cardboard with move)
  • Airplaine control
  • Quadrocopter/Ufo control
  • Camera animation along a way/relation/rooting
  • Collision detection

Ideas far away

  • Indoor
  • Non-OSM Fun: Lummerland, Tracy Island, Atlantis

Notes

Unfinishd Work

  • Check GPS to Meter calculation
  • More node objects by Geometry-Matrix-Class
  • Shadow camera sync to view camera
  • Implement all landuse, amenti, all tags :-)
  • wiki.openstreetmap.org/wiki/DE:OSM-3D-Integrated-DEM-Style

Tools, Frameworks, Utils

More or Less

  • c't 2016,15,172: 3D-Rendering and more
  • OSM-mascot: Elk, Rat, migratory bird, meerkat, marmot, stork, goose