OSM go: Description - initial edit
New page
''Please read this next week, it's not ready!''
''OSM go'' 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? Wether the idea is nicked by Pokemon, anyone may note. There are quite a view ideas for gamification and much to do yet.
After a view days coding, a first 3D-View it was so impressing, my imagination started running wild: Walk or may be “fly” through OSM in 3D (not that discouraging Pokemon style, something tidy), overlay data; one could call it "OSM-Earth". Soon, more "layers" with external- / realtime data will be possible. Maybe switching to an 2D view. As we used to with 2D-maps a 3D-rendering may have additional layers like KeepRight, Wikipedia and GeoCashing. What would you expect, OpenStreetView? And gamification is (almost) just another kind of layer.
See [[User:-karlos-|-karlos-]] [http://www.openstreetmap.org/user/-karlos-/diary diary]
for more history.
'''Who:''' Actually there is no team behind it, just me [user:-karlos-] and Martin as a source of helpful functions and as a discussion partner. We 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.
[[File:BuildingLevel.png|750px]]
'''How:''' At his state it is a Web-Page, mainly written in JavaScript with the use of TRHEEjs (using WebGL). Javascript "On-Events" are used to catch the moves and direction of the smartphone. So you need an up to date browser and a proper graphic hardware. Next to desktop devices, this works fine with most smartphones. There may be Apps in the future. The OSM-Data is loaded by AJAX form Overpass and rendered in 3D. As we don’t have an Javascript OSM render engine, this is also a challenge. The rendering is still in a basic state. There is no import for map styles. Not yet, I would like to get all style data from. [https://github.com/gravitystorm/openstreetmap-carto carto]. Could anyone write a Python script to generate a file, importable by Javascript?
+++ Start [http://www.ac1000.de/OSM here] into the 3D-View of ''OSM go'' with your actual position. +++<br/>
''It may take quite a view seconds until the world apears''<br/>
<br/>
Or go to
[http://www.ac1000.de/OSM?lat=+40.70333&lon=-74.0166&dir=-80 New York],
[http://www.ac1000.de/OSM?lat=-22.98726&lon=-43.1984&dir=-22&rad=400 Rio],
[http://www.ac1000.de/OSM?lat=+35.62361&lon=139.7518&dir=+90 Tokio] or
[http://www.ac1000.de/OSM/OSMgoSlippy.html |any other place to go]<br/>
That last [http://www.ac1000.de/OSM/goSlippy.html link] will show a OSM 2D slippy map. Just move and zoom to the place, you like and single-click to see it in 3D.
Some more places to go:
[http://www.ac1000.de/OSM?lat=52.510005&lon=13.372823&rad=300&dir=-100 Berlin Sony Center],
[http://www.ac1000.de/OSM?lat=40.768090&lon=-111.8916&rad=300&view=-60 Salt Lake City]
Or se some [https://www.youtube.com/watch?v=So993SkMAno Animated]
[https://www.youtube.com/watch?v=AHJB2L048x4 demos] first.
Test-links:
[http://www.ac1000.de/O?lat=+40.70333&lon=-74.0166&dir=-80 N]
[http://www.ac1000.de/O?lat=-22.98726&lon=-43.1984&dir=-22&rad=400 R]
[http://www.ac1000.de/O?lat=+35.62361&lon=139.7518&dir=+90 T]
[http://www.ac1000.de/O/OSMgoSlippy.html S]
[http://www.ac1000.de/O?lat=52.510005&lon=13.372823&rad=300&dir=-100 B]
[http://www.ac1000.de/O?lat=40.768090&lon=-111.8916&rad=300&view=-60 S]
-------------------------------------------------------------
= 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 stop manual controlling, the orientation control will take over again.
This primary manual control handling is a shaky direct move (a smooth integral movement mode is intended). If you have any suggestions, just tell us!
* Move ahead and turn by keyboard arrow-keys, mouse-drag&drop or touch&move
* Use Shift-key or 2-finger-touch-up/down to elevate between street-view and overview
* Go to the most high overview for two seconds and you will change to a slippy map. Move, zoom to a new place. Then single-click to enter the 3D-View again.
* Go to the most high street view for two seconds to reload OSM data, with the center to this actual place. If you walk out of the downloaded area, a reload may be done.
* Start ''OSM go'' with your touch-device in horizontal orientation to get into the Cardboard-Stereo-Mode. There is no control supported yet. But there will be a "Segway-Mode" not far ahead.
[[File:Cardboard.png|750px]]
There are some keyboard functions:
* '''0:''' resets the position and view angles to the point, the last OSM data was downloaded
* '''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
* '''3:''' Cardboard mode on/off. (Still buggy)
* '''D:''' Debug-Level +1 to 2,3,4 etc.: more log lines output
== 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
* '''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
* '''kard:''' Cardboard/Stereo-mode: ''&card=1''/0 switches on/off. There will be a two color mode later
* '''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: ''&hud=1''
* '''dbg:''' Debug-output level: ''&dbg=0'' means all console.log of
Berlin, Sony-Center:<br/>
[[file:BerlinSonyCenter.png|500px]]
== Tests done ==
We would like to have more testers! Now, most tests are done with
* Firefox (macOS, Windwos)
* 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
-------------------------------------------------------------
= Components and states =
== Gameplay ==
There is still the question what gameplay is useful. Is there common interest to play this kind of “game”, anyway?<br/>
Just do 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.<br/>
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.<br/>
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 :)
[[file:OSM_PM_Style.png|500px]]
The Idea of gamification might work. I would like to write code but I am not that good in inventing stories and promotions or drawing batches. 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 ponts :-) It needed only 65 lines of code; quite raw and without any luxus. It needs a story behind it to motivate the kids.
== „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.
Well, here is an description of how to get the error data records of a certain area. This is implemented in ''OSM go'' now, huge blue spikes show the places. But there are some problems with the data and no info how to store back any notes. The email request was not replaced yet. "The Sourceforge project is no longer updated!"
== 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 a mess 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. It has to be improved to different movement modes.
== Overpass - Tiles - Server ==
Overpass is certainly not a proper source for a extended used game/tool. The reaction time is not idal and not relaiable. There are some vector tile services and open source code to be used. An extra server will be used to handle cashing, intermediate edit buffers, login and user tracking and virtual user meetings. Even 3D-Models by user could be placed there.<br/>
The next step will be to use JQuery instead of manual code (with relations not supported).
Mapzen offers a tile server for low traffic users. Sounds good. It is a commercial service, so I have my doubts. Are they nice to OSM? It looks like I could take their software and run it on my on server.
== Map styles ==
I would like to get all style data from. [https://github.com/gravitystorm/openstreetmap-carto 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.
== Rendering ==
A first rendering was done just to get a feeling. Checking the OSM Wiki, 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. And often, only the solution ideas may be usable because it is not Javascript.
* Cartagen is already a renderer in Javascript (2D) '''<=== ToDo !!!!'''
* Osm2world is a 3D-Renderer (java,static) There may be a way to interpret Java code in a Javascript environment. Wrote a mail and got a first answer.
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.
I got that hope to use a proven render code. Maybe I have to rewrite it to javascript, maybe I only will take the ideas and concepts and logics. If so, I would like to describe this logic in text, code independent. Or '''is there any independent description of OSM rendering?'''
Meanwhile I had already some experiences about rendering, mainly because of javascript runtime errors and odd things, spotted during my 3D walkthroughs:
=== Way without Nodes ===
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.
=== 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 floor. That should be fixed but also be handled in the rendered 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 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 "not found yet"
=== 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 als "holes". The tags may be only at the outer or at the relation. OSM-users enjoy much freedom!<br/>
A building relation may have a outer only to be used in 2D rendering and a lot of components used for 3D rendering
-------------------------------------------------------------
= ToDo-Lists =
== Actual ==
* Click on compass: link to this description
== Functions ==
* latest version of threejs before ...
* ... click on world-items
* Light sources, sun position in real-time
* street names and numbers, but where to place ...
* ... click at a building etc. show OSM-ID and more
* HUD independent of light and 3D position (http://www.evermade.fi/en/pure-three-js-hud/)
* 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
* http://keepright.at/interfacing.php
* FixIt / OSM-slippy-map errors: http://www.osmbugs.org/
* http://tools.geofabrik.de/osmi/
* OpenStreetView
* Wikipedia
* Geo-Cashing
* Trains, ships, plains position/move in real-time
* Filtering and showing OSM data like cellular antennas
* "Virtual Edit" without disturbing OSM-data (like W3D, Second Life)
== Game-"Level" ==
* Check parking grounds if privat/business/public + more tags? parking time etc.
* Map the position of the entry of a building (taxi-rooting)
== Controls ==
At the moment, there is only a simple direct move control. More to add:
* Smooth integral movement
* 3rd person control
* Seagway control
* Airplain control
* Quadrocopter/Ufo control
* Camera animation along a way/relation/rooting
-------------------------------------------------------------
= Notes =
== Other programs and services ==
* http://OSM2WORLD.org
* https://mapzen.com/products/tangram/
== Tools, Frameworks, Utils ==
* http://api.jquery.com/jQuery.getJSON/
* Files in HTML5: _http://www.html5rocks.com/de/tutorials/file/filesystem/
== More ==
* c't 2016,15,172: 3D-Rendering and more
* OSM-mascot: Elk, Rat, migratory bird, meerkat, marmot, stork, goose