user icons

User Symbols

Since version 20201030.

A couple of the symbols that are used within AvNav can be adapted to your preferences. You can resize the existing symbols, set a couple of properties or replace them by own symbols.

If you are going to use your own symbols you need to upload them as .png files into the images directory - see description for user files.

The symbols you are going to change need to be described in a json file (images.json) in the user directory.

An example of this file may look like:

{ "boatImage": { "anchor": [20,0], "size":[40,71] }, "markerImage":{ "src": "/user/images/Marker.png", "anchor": [15,15], "size":[30,30] }, "aisNormalImage-Sail":{ "src": "/user/images/Sail-Boat-40.png", "anchor": [15,15], "size":[30,30], "courseVectorColor": "#ff00ff", "rotate":false }, "aisNormalImage-Military":{ "anchor": [32,0], "size":[64,120] } }

For each symbol that you want to replace there must be an entry with the correct name.

boatImage boat symbol on navigation page
markerImage symbol for active waypoint
aisNormalImage symbol for a normal AIS target (neither the nearest or warning)
aisNearestImage symbol for nearest AIS target
aisWarningImage symbol for AIS target with warning

For the AisImages you can append a "-shiptype" to define different images for different ship types. If you do not define a type specific image the appropriate base image (without -shiptype) or the built in image will be used.

Shiptype can have the following values:


You need to define all 3 variants (Normal, Nearest, Warning) for each of the AIS symbols - otherwise the symbol will change depending on the state.

For each of the symbols in the file you can specify the following parameters:

src The source url for the image. Normally /user/images/XYZ.png for a file that has been uploaded to the images folder.
If you do not specify this parameter the system will use the built in symbol. You still can e.g. alter the size.
Your image files should have a reasonable size (e.g. 2x the specified size) - but not to big as otherwise the performance could suffer. If you have vector graphics (like svg) you can use a program like inkscape to create png's from them.

size [width,height] - must be specified as an array - see the example. This defines the size that the image will be scaled to.
If you did not specify the src parameter you will scale the built in image.

anchor [x,y] - the point (related to with, height) of the image that should be put at the position of the item on the map.
rotate true or false - if you set this to false the symbol will not be rotated depending on its course. not for markerImage
courseVector true or false - if you set this to false there will be no course vector for this symbol. not for markerImage
courseVectorColor the color for the course vector. This allows you to align the course vector color to the image colors. not for markerImage

When you edit the images.json you have to be careful to create valid json. If you use the edit function inside AvNav at the Files/Download page (sub page ) there will be an automatic check when you try to save the file.

After you saved the file you need to reload AvNav.