Layout
From Navit's Wiki
The way a map and cursor (the thing that shows your current location) is rendered in Navit is controlled by the particular Layout which has been selected. As with almost everything else in Navit, Layouts are highly configurable. Below are user-submitted examples of Navit Layouts.
Contents
Adding a Layout
If you want to share a layout with other Navit users, please do so using this page. Leave this page as an introduction to your layout (use the other layout descriptions as a template), and link to a new page in the Layout/ namespace where you can include extra images and the relevant xml code
Alternate Layouts
Mapnik
This layout tries to closely mimick the Mapnik rendering style used by default over at OpenStreetMap. It even uses the same icon styles where available (this means you will have to download the relevant icons - a link is provided).
Features
- Cycle ways are more prominently displayed in purple
- Routing is shown with a bright green line which is overlaid onto the road, rather than a fat blue line underneath it. Road names appear above the routing line.
- Zoom settings for various POIs have been changed. For example, fuel station POIs are shown out to quite a far zoom level.
- I have tried to make sure that POIs which will be most important to navigating drivers are prominently displayed, whilst those which are perhaps interesting but not very useful when navigating are less noticeable and/or only show up when zooming in closer. This is so that unhelpful POIs do not clutter up the map view.
- Bus stops are shown with a blue ring, until zoomed in quite close when a proper icon is used.
- There are a lot of bus stops everywhere, and the POI icon was cluttering up the map. The unobtrusive blue ring is still noticeable, but less annoying!
- Mini-roundabout icons have been removed, and are now shown by black rings.
- A few POI types which do not appear in maptool's osm.c (i.e. don't actually get converted from OSM and won't currently appear in the Navit data) have been removed.
0606.at HDPI/MDPI
- based on mapnik (see above)
- optimized for HDPI and MDPI Devices
- only for navigation important POIs are showen
- reduced visibile elements in higher zoom levels
- big font sizes for villages and Street names
- Used in 0606 Android Layout, see: OSD_Layouts#0606.at Android Layout
Snow
Snow style theme, optimised for the iPod/iPhone.
High-Visibility
Trying to read a computer screen in full sun with aging eyes and sunglasses on while driving is difficult - this high-visibility layout attempts to address those problems.
Features
- Cursor changes:
- Enlarged
- Different colour
- Altered route colour
- Street changes
- street_1_city is brown with a beige border
- street_2_city is brown with a black border
- street_3_city is a orange with a grey border
- Changed activation zoom levels for airport POI icons
bike
because all other layouts are not displaying bike paths properly on winCE devices, i've rolled my own. it is simple and needs fixing and refining. most POI's are hidden - this is one of things which should be changed. it is also not independent from car layout - another problem
Features
- bike paths visible green
- less confortable but still fine roads are visible in brown
- everything else is much like car layout
- no dashed lines - suitable for winCE
Alternate Cursors
The cursor is also defined in the layout, and alternate cursors are shown below. If you would like to share your alternate cursor design, but haven't really changed the rest of the layout, add it below!
2D Car
| Layout XML |
|---|
|
<cursor w="50" h="50"> <itemgra> <!-- Car outline --> <polyline color="#ffffff" width="12"> <coord x="-16" y="0"/> <coord x="15" y="0"/> </polyline> <polyline color="#ffffff" width="5"> <coord x="-16" y="0"/> <coord x="-13" y="13"/> <coord x="13" y="13"/> <coord x="16" y="0"/> </polyline> <polyline color="#ffffff" width="7"> <coord x="-10" y="-7"/> <coord x="-10" y="-12"/> </polyline> <polyline color="#ffffff" width="7"> <coord x="10" y="-7"/> <coord x="10" y="-12"/> </polyline> <!-- Car --> <polyline color="#0000ff" width="10"> <coord x="-15" y="0"/> <coord x="15" y="0"/> </polyline> <polyline color="#0000ff" width="3"> <coord x="-16" y="0"/> <coord x="-13" y="13"/> <coord x="13" y="13"/> <coord x="16" y="0"/> </polyline> <polyline color="#0000ff" width="5"> <coord x="-10" y="-7"/> <coord x="-10" y="-12"/> </polyline> <polyline color="#0000ff" width="5"> <coord x="10" y="-7"/> <coord x="10" y="-12"/> </polyline> </itemgra> <itemgra speed_range="-2"> <!--Back lights off --> <circle color="#000000" radius="5" width="2"> <coord x="-12" y="0"/> </circle> <circle color="#000000" radius="5" width="2"> <coord x="12" y="0"/> </circle> </itemgra> <itemgra speed_range="3-"> <!--Back lights on --> <circle color="#ff0000" radius="5" width="2"> <coord x="-12" y="0"/> </circle> <circle color="#ff0000" radius="5" width="2"> <coord x="12" y="0"/> </circle> <!-- Speed lines --> <polyline color="#ffffff" width="3"> <coord x="-17" y="-12"/> <coord x="-20" y="-20"/> </polyline> <polyline color="#000000" width="1"> <coord x="-17" y="-12"/> <coord x="-20" y="-20"/> </polyline> <polyline color="#ffffff" width="3"> <coord x="-10" y="-16"/> <coord x="-13" y="-24"/> </polyline> <polyline color="#000000" width="1"> <coord x="-10" y="-16"/> <coord x="-13" y="-24"/> </polyline> <polyline color="#ffffff" width="3"> <coord x="17" y="-12"/> <coord x="20" y="-20"/> </polyline> <polyline color="#000000" width="1"> <coord x="17" y="-12"/> <coord x="20" y="-20"/> </polyline> <polyline color="#ffffff" width="3"> <coord x="10" y="-16"/> <coord x="13" y="-24"/> </polyline> <polyline color="#000000" width="1"> <coord x="10" y="-16"/> <coord x="13" y="-24"/> </polyline> </itemgra> </cursor>
|
2D Car black for 10,2"
| Layout XML |
|---|
|
<cursor w="70" h="70">
<itemgra>
<!-- Car outline -->
<polyline color="#ffffff" width="24">
<coord x="-28" y="0"/>
<coord x="28" y="0"/>
</polyline>
<polyline color="#ffffff" width="8">
<coord x="-30" y="0"/>
<coord x="-15" y="26"/>
<coord x="15" y="26"/>
<coord x="30" y="0"/>
</polyline>
<polyline color="#ffffff" width="12">
<coord x="-25" y="-7"/>
<coord x="-25" y="-15"/>
</polyline>
<polyline color="#ffffff" width="12">
<coord x="25" y="-7"/>
<coord x="25" y="-15"/>
</polyline>
<!-- Car -->
<polyline color="#00000f" width="22">
<coord x="-28" y="0"/>
<coord x="28" y="0"/>
</polyline>
<polyline color="#00000f" width="6">
<coord x="-30" y="0"/>
<coord x="-15" y="26"/>
<coord x="15" y="26"/>
<coord x="30" y="0"/>
</polyline>
<!-- left tire -->
<polyline color="#00000f" width="10">
<coord x="-25" y="-7"/>
<coord x="-25" y="-15"/>
<!-- right tire -->
</polyline>
<polyline color="#00000f" width="10">
<coord x="25" y="-7"/>
<coord x="25" y="-15"/>
</polyline>
</itemgra>
<itemgra speed_range="-2">
<!--Back lights:brake -->
<polyline color="#ff0000" width="8">
<coord x="-20" y="0"/>
<coord x="-28" y="0"/></polyline>
<polyline color="#ff0000" width="8">
<coord x="20" y="0"/>
<coord x="28" y="0"/></polyline>
<polyline color="#ff0000" width="6">
<coord x="-7" y="24"/>
<coord x="7" y="24"/>
</polyline>
</itemgra>
<itemgra speed_range="3-">
<!--Back lights: drive -->
<polyline color="#ff0000" width="6">
<coord x="-20" y="0"/>
<coord x="-28" y="0"/></polyline>
<polyline color="#ff0000" width="6">
<coord x="20" y="0"/>
<coord x="28" y="0"/></polyline>
<!-- Speed lines -->
<polyline color="#ffffff" width="4">
<coord x="-17" y="-12"/>
<coord x="-23" y="-28"/>
</polyline>
<polyline color="#000000" width="3">
<coord x="-17" y="-12"/>
<coord x="-23" y="-28"/>
</polyline>
<polyline color="#ffffff" width="4">
<coord x="-10" y="-16"/>
<coord x="-16" y="-32"/>
</polyline>
<polyline color="#000000" width="3">
<coord x="-10" y="-16"/>
<coord x="-16" y="-32"/>
</polyline>
<polyline color="#ffffff" width="4">
<coord x="17" y="-12"/>
<coord x="23" y="-28"/>
</polyline>
<polyline color="#000000" width="3">
<coord x="17" y="-12"/>
<coord x="23" y="-28"/>
</polyline>
<polyline color="#ffffff" width="4">
<coord x="10" y="-16"/>
<coord x="16" y="-32"/>
</polyline>
<polyline color="#000000" width="3">
<coord x="10" y="-16"/>
<coord x="16" y="-32"/>
</polyline>
</itemgra>
</cursor>
|
2D cursor tangoGPS-like
| Layout XML |
|---|
|
<cursor w="50" h="50">
<itemgra>
<circle color="#ffffff" radius="20" width="20">
<coord x="0" y="0"/>
</circle>
<circle color="#0000ff" radius="30" width="5">
<coord x="0" y="0"/>
</circle>
</itemgra>
<itemgra speed_range="-2">
<circle color="#0000ff" radius="4" width="5">
<coord x="0" y="0"/>
</circle>
</itemgra>
<itemgra speed_range="3-">
<polyline color="#ffffff" width="11">
<coord x="0" y="0"/>
<coord x="0" y="20"/>
</polyline>
<polyline color="#0000ff" width="8">
<coord x="0" y="0"/>
<coord x="0" y="20"/>
</polyline>
</itemgra>
</cursor>
|
3D Arrow-head
Note that the screenshot below left was taken on an Android - not all graphics drivers support the drop shadow underneath the arrow, as shown by the screenshot from Navit on Windows Vista (<graphics type="win32"/>)
| Layout XML |
|---|
|
<cursor w="30" h="32"> <itemgra speed_range="-2"> <polyline color="#00BC00" radius="0" width="4"> <coord x="0" y="0"/> </polyline> <circle color="#008500" radius="8" width="3"> <coord x="0" y="0"/> </circle> <circle color="#00BC00" radius="14" width="3"> <coord x="0" y="0"/> </circle> <circle color="#008500" radius="20" width="3"> <coord x="0" y="0"/> </circle> </itemgra> <itemgra speed_range="3-"> <polygon color="#00000066"> <coord x="-14" y="-18"/> <coord x="0" y="8"/> <coord x="14" y="-18"/> <coord x="0" y="-8"/> <coord x="-14" y="-18"/> </polygon> <polygon color="#008500"> <coord x="-14" y="-12"/> <coord x="0" y="14"/> <coord x="0" y="-2"/> <coord x="-14" y="-12"/> </polygon> <polygon color="#00BC00"> <coord x="14" y="-12"/> <coord x="0" y="14"/> <coord x="0" y="-2"/> <coord x="14" y="-12"/> </polygon> <polyline color="#008500" width="2"> <coord x="-14" y="-12"/> <coord x="0" y="14"/> <coord x="0" y="-2"/> <coord x="-14" y="-12"/> </polyline> <polyline color="#008500" width="2"> <coord x="14" y="-12"/> <coord x="0" y="14"/> <coord x="0" y="-2"/> <coord x="14" y="-12"/> </polyline> </itemgra> </cursor>
|
