Celer Docs

Appearance

On this page

Map Configuration ​

The map property in config is used for configuring map properties. Only one config in the array can specify configuration for map, otherwise the compiler will error.

An example of a map configuration: presets/botw-map.yaml

All properties below are required, unless specified otherwise.

Coordinate Concepts ​

  1. Route coordinates
    • Specified as 2 axes or 3 axes in the route.
    • Layer independent
  2. Game coordinates:
    • [x, y, z] that usually correspond to the scale in the game. x is horizontal, y is vertical, and z is height.
    • Transformed from route coordinates using the coord-map property
    • Layer independent
  3. Raster coordinates:
  4. Latitude and Longitude
    • Used internally in leaflet map
    • leaflet-rastercoords handles the transformation

TIP

Routes will usually only work with route coordinates. Map preset makers need to create the correct transform for game and raster coordinates for the routers.

Coord Map ​

In the example below from Breath of the Wild, when 3 axes are specified, the middle is z (height). This transform allows users to specify (x, y, z) in the order they know from the game.

yaml
config:
- map:
    coord-map:
      2d: ["x", "y"]
      3d: ["x", "z", "y"]

TIP

You can also specify one axis multiple times. The axes not specified will be 0

Initials ​

Use these properties to specify the initial condition of the map.

PropertyTypeDescription
initial-coordGame coordCenter of the map when the route is loaded
initial-zoomnumberZoom of the map when the route is loaded. Smaller is zoomed out
initial-colorstringDefault color of the line

Example:

yaml
config:
- map:
    initial-coord: [50, 60, 70]
    initial-zoom: 3
    initial-color: blue

WARNING

The initial-coord specified here must be a Game Coord, not a Route Coord like the ones specified in the route. in other words, it should always be [x, y, z] where z is height

Layers ​

Celer supports multiple layers of the map governed by z coordinate (height).

The layers property should be an array of layer objects, each with the following properties:

PropertyTypeDescription
namestringName of the layer. Visible in the layer switch UI
template-urlstringTileset URL of this layer. See https://leafletjs.com/reference.html#tilelayer
size[width, height]Raster coord size of this layer. Celer uses leaflet-rastercoords to create layers. See https://github.com/commenthol/leaflet-rastercoords for how to get this from the layer image
zoom-bounds[min, max]Min and max zoom of this layer
max-native-zoomnumberMax supported native zoom of the tileset. Higher zoom levels are produced by scaling the tile
transformmappingSee below
start-znumberThe lowest z value where this layer starts. This is ignored for the first layer
attributionmappingA link property for link to the tileset provider, and an optional copyright boolean property for if the tileset is copyrighted

WARNING

Celer does not support hosting tilesets. If your tileset is not hosted publicly, you need to host it yourself and use the URL in the config.

Layer Transform ​

The transform property has 2 sub-properties: scale and translate.

Suppose scale is [a, b] and translate is [c, d]. The raster coord is transformed from game coord as:

(x, y) -> (x * a + c, y * b + d)

Layer Example ​

Example:

yaml
config:
- map:
    layers:
    - name: Example
      template-url: https://some.tileset.org/{x}/{y}/{z}
      size: [500, 500]
      zoom-bounds: [3, 8]
      max-native-zoom: 6
      transform:
        scale: [2, 2]
        translate: [100, 100]
      start-z: 0
      attribution:
        link: https://some.tileset.org
        copyright: true