Difference between revisions of "Layout"

From Navit's Wiki
Jump to: navigation, search
m (3D Arrow-head)
m (3D Arrow-head: spacing)
Line 160: Line 160:
 
<cursor w="30" h="32">
 
<cursor w="30" h="32">
 
<itemgra speed_range="-2">
 
<itemgra speed_range="-2">
<polyline color="#00BC00" radius="0" width="4">
+
<polyline color="#00BC00" radius="0" width="4">
 
<coord x="0" y="0"/>
 
<coord x="0" y="0"/>
 
</polyline>
 
</polyline>
Line 174: Line 174:
 
</itemgra>
 
</itemgra>
 
<itemgra speed_range="3-">
 
<itemgra speed_range="3-">
<polygon color="#00000066">
+
<polygon color="#00000066">
 
<coord x="-14" y="-18"/>
 
<coord x="-14" y="-18"/>
 
<coord x="0" y="8"/>
 
<coord x="0" y="8"/>

Revision as of 13:33, 26 January 2011

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.

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

Mapnik-style map layout

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).

Go to layout

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.


Snow

Snow-style map layout

Snow style theme, optimised for the iPod/iPhone.

Go to layout


High-Visibility

Hi-Vis style layout

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.

Go to layout

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

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

2D car cursor

<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>


3D Arrow-head

3D Arrow-head cursor

Note that the screenshot was taken on an Android - not all graphics drivers support the drop shadow underneath the arrow.

<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>