From Navit's Wiki
Jump to: navigation, search

The layout[edit]

A layout defines how to render a map. You can have multiple layouts within a tag "layouts". At startup the first layout in navit.xml will be chosen. A GUI may allow you to change the layout on the fly.

A layout consist of one or more layers and one or more cursors which are each a set of rules. Those rules are called itemgra and define how and when to draw certain items or free forms.


Items in navit are streets, forests, POIs, rivers and many more.

There are different types of items: area, line and point.

Note: An always up to date list of items can be found in navit/item_def.h within the source code.

Note: items have to be put into layers. You can put the same item in different layers or multiple times into the same layer.


A range is defined as: "lower_bound-upper_bound". Possible values for a bound are between 0 and 32767 but not all of them make sense. "-5" is synonym to "0-5" as is "17" to "17-17". "0-" is synonym to "0-32767" and means to always draw the item or to not apply this range as a limiting factor and is the default for not specified options of type range.


Defining an itemgra:

<itemgra item_types="water_poly" order="0-">
  <polygon color="#82c8ea" />
  <polyline color="#5096b8" />

Here the available options:

  • item_types: Comma separated list of items
  • order: Range for zoom levels.
  • speed_range: Range for vehicle speed, useful for cursors.
  • angle_range: Range for pitch angle.
  • sequence_range: Useful for animated cursors.

Note: Meaningful values for order are between 0 and 18.


The available options are:

  • width (mandatory): with of the graphic overlay
  • height (mandatory): height of the graphic overlay
  • name: A name to be referenced by vehicles.
  • interval: Time before incrementing the sequence (mandatory for animated cursors).
  • sequence_range: A range to limit the sequence.

Note: A cursor has an implied name of default. Vehicles which do not specify a cursorname will use the cursor named default.

An example cursor definition:

<cursor name="blinky" w="25" h="25" interval="1000" sequence_range="-1">
  <itemgra sequence_range="0">
    <circle color="#00ff00" radius="24" width="2">
      <coord x="0" y="0"/>
  <itemgra sequence_range="1">
    <circle color="#0000ff" radius="24" width="2">
      <coord x="0" y="0"/>
  <itemgra speed_range="-2">
    <polyline color="#ff0000" width="2">
      <coord x="0" y="0"/>
      <coord x="0" y="0"/>
  <itemgra speed_range="3+">
    <polyline color="#ff0000" width="2">
      <coord x="-7" y="-10"/>
      <coord x="0" y="12"/>
      <coord x="7" y="-10"/>

This demonstrates a cursor with a circle which alternates the color with an interval of 1000ms. There is a dot in a third color which changes into an arrow if the vehicle is in motion.


The layers are rendered one by one as are the items in each layer. If you can't see an item make sure there is not another one hiding it.

You can define an item multiple times. Example :

<itemgra item_typestypes="street_route" order="17">
  <polyline color="#0000a0" width="268" />
<itemgra item_types="street_route" order="18">
  <polyline color="#0000a0" width="530" />

Here we define two different widths for the same item depending on the order. We could also have changed it's color.

The polygon color defines the color with which the polygon will be filled. Of course, it applies only to polygons, such as water, towns, wood, etc.

The polyline color defines the color with which the lines will be drawn. If the item is a line, such as a street, it's its color. If the item is a polygon, then it is it's border color.

Tips on creating a layout[edit]

Animated cursors[edit]

A low interval and many itemgras can kill a quad-core performance wise.