I am new to OSM and would like to do the following for a mobile ″urban guide″ application (a webapp written in HTML, CSS and JavaScript):
select and ″cut″ a section from OSM,
reduce considerably the information shown in the section,
change the colors of the remaining information (lots of black to save battery),
show a route, my GPS position and other tags,
display the new map in a (mobile) browser and
keep the zooming and sliding functions.
Now my question is: What would be the right approach to do this (online with a very complex URL oder offline using either raw data oder an exported map; static map or image file) and which tools would I use (for selecting layers, changing colors, showing route, gps position and tags, etc.)?
Just to be clear: I am not asking for a detailed handbook. All I need are a few hints so I don′t walk into the wrong direction. Many thanks in advance for you answers!
There are several links about OSM related apps for mobile devices.
Have a look at each one that can fit your aims in any feature, and have a look for opensource apps. Then try to understand how OSM data or mas can be displayed via online connection or self rendered by an app from offline data from sd-card or similar.
Then tell us some apps that come near your aims and we can try to help you in detail if you get stuck somewhere.
However, since I don’t see if you understood my question appropriately or not, I am not sure if you sent me on the right path.
I am planning to write a webapp (not fundamentally different from a webpage) which is an application running in a (mobile) browser, therefore I hope that I don’t need any Android or iPhone specific apps.
I guess the first question I need an answer for is if the query on openstreetmap.org is complex enough for my purpose. I know that I can choose layers in the URL, but can I also choose a section, different colors, etc.? Probably not.
Assuming that this means that I have to use an offline map, the second question is what file type I will need to have in the end if I want to keep zooming and sliding abilities.
The third question is if this file type can be displayed in a browser or browser plugin. Or do I really need to “understand how OSM [raw] data or maps can be displayed via an online connection”?
The forth question is about tool which lets me take away layers I don’t need and change colors.
The fifth question is if it would be easier to add a route with another or the same tool, rather than adding a html5 layer with both plus my GPS position?
I know these are a lot of questions, but I am convinced that the knowledge to answer these questions is out there somewhere in the community. From rtfm I also believe that it is somewhere in the wiki, yet well-hidden. Of course I will also be glad about precise links to wiki sections which I have overlooked.
For some sort of webapp with a slippy map, with zooming and scrolling etc, you will probably want to use map tiles. See http://wiki.openstreetmap.org/wiki/Tiles
These tiles are bitmap graphics, so you can’t really just change the colours or add or remove things from them.
So you have to find some tiles in the style/colours you want, or generate your own tiles from the OSM data. There are a few different styles on openstreetmap.org. Or have a look at Cloudmade, they have loads of different styles, plus a style editor, which lets you change colours of things: http://maps.cloudmade.com/
Note that these sites may have a tile usage policy or terms and conditions, so check if that is suitable for using in your app. eg for the standard style on openstreetmap.org, see http://wiki.openstreetmap.org/wiki/Tile_usage_policy
If you can’t find a map style you like, you can produce tiles in your own style (or pay someone to produce tiles for you). This is known as ‘rendering’. http://wiki.openstreetmap.org/wiki/Rendering
The most popular rendering software is Mapnik, though there are some others listed on that page.
For using the tiles in a webapp, see http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map
You can use Openlayers or Leaflet - these are Javascript library which will give you a map with scrolling, zooming etc. They also let you add layers on top of the map, eg your route or GPS position etc.