Map Layer Styling Follow

Overview

In the SVG, our map layer is made up of several g elements or groups. For example, there are g elements for floors, interior walls, exterior walls, among others:

    
      
        {elements in the floor group}
      
      
       {elements in the exterior-walls group}
      
      ...
    

The id value corresponds to the group IDs described below.

Image Size

SVG map images should be at least 1536px x 2048px

Map Upload Process

Contact Meridian at maps@meridianapps.com to enable map uploading in the Editor.

When an SVG map file is uploaded, the Editor will determine whether the SVG file is valid or invalid. If it’s invalid, the SVG will be rejected.

If the SVG file is valid, the Editor will import it and replace its style attributes with the default Meridian map styles.

You can customize the map styles using the Advanced Map Settings JSON field located on the THEME page. If there’s JSON content in the Advanced Map Settings field, it will override the default map styles.

JSON elements must be in a group, and all groups must have a valid group ID.

Notes on the Importer

In order to ensure that an SVG map file works properly with the Meridian Editor, the SVG importer makes changes to each imported SVG file.

1. All groups are flattened to a single layer. The elements of nested groups become part of their parent group before this flattening occurs.
2. An SVG with inline styles will be rejected.
3. An SVG with unsupported elements will be rejected. The Editor doesn’t support the defs element.
4. An SVG with groups lacking a global style will be rejected.

Group IDs

These are the valid group IDs organized by layer type.

Base Layers

The base layers are opaque with a fill and have no shadow. They will display regardless of zoom level.

Base layer IDs are floor or anything with the base_ prefix.

Custom opacity levels are only allowed on layers with the secondaryaccent_ and secondaryoutline_ layer prefixes.

Accent Layers

The accent layers are opaque with a fill. They will display regardless of zoom level.

Accent layer IDs are concessions or anything with the accent_ prefix.

Outline Layers

The outline layers are strokes without fill. They will display regardless of zoom level.

Outline layer IDs are exterior-walls or anything with the outline_ prefix.

Secondary Accent Layers

The secondary accent layers are fill without strokes. They will display regardless of zoom level.

The secondary accent layers are:

• concrete
• grass
• inaccessible
• moving-walkways
• restrooms
• rock
• roof
• roof2
• stairs-elevators
• streets
• walkways
• water
• Any ID with the secondaryaccent_ prefix

Secondary Outline Layers

The secondary outline layers are strokes without fill. They will only display at higher zoom levels.

Secondary outline layers are interior-walls or anything with the secondaryoutline_ prefix.

Styles

The style elements control the map color styles for each group ID.

fill

Use fill:#{HEX_CODE_RGB} to change an element’s fill color.

stroke

Use stroke:#{HEX_CODE_RGB} to change an element’s stroke’s color.

opacity

Use opacity:{FLOAT_OPACITY} to change an element’s level of opacity.

The opacity value is a float between 0.0 and 1.0.

stroke-width

Use stroke-width:{FLOAT_WIDTH} to change the thickness of an element’s stroke.

The stroke-width value is a float between 0.01 and 20.

client_shadow

Use client_shadow:{X_OFFSET},{Y_OFFSET},{RADIUS},{OPACITY},#{HEX_CODE_RGB} to change the location, size, opacity, and color of an element’s shadow.

Supported Elements

The Meridian Editor only supports the following SVG elements:

• circle
• ellipse
• line
• polygon
• polyline
• rect
• path

Style IDs

The following is a list of map element IDs that can be styled:

• concessions
• concrete
• exterior-walls
• floor
• grass
• inaccessible
• interior-walls
• moving-walkways
• restrooms
• rock
• roof
• roof2
• stairs-elevators
• streets
• walkways
• water

Original Style Default Values

    {
    "floor": { "style": "fill:#b5aa9a;fill-texture:url(subtle_floor_khaki)" },
    "stairs-elevators": {
    "style": "fill:#000000;opacity:0.10",
    "client_shadow": "0,0,6,1.0,#FFFFFF"
    },
    "restrooms": {
    "style": "fill:#e2e2e2;fill-texture:url(tile)",
    "client_shadow": "0,0,6,1.0,#FFFFFF"
    },
    "concessions": {
    "style": "fill:#cec6bd;fill-texture:url(concessions_khaki)",
    "client_shadow": "0,0,10,0.35,#000000"
    },
    "inaccessible": { "style": "fill:#FFFFFF;opacity:1.0" },
    "exterior-walls": {
    "style": "fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10",
    "client_shadow": "0,0,4,0.25,#000000"
    },
    "interior-walls": {
    "style": "fill:none;stroke:#ffffff;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:10",
    "client_shadow": "0,0,2,0.5,#000000"
    },
    "water": {
    "style": "fill:#78bcc3;fill-texture:url(water)",
    "client_shadow": "0,0,6,0.5,#FFFFFF"
    },
    "streets": {
    "style": "fill:#444444;fill-texture:url(asphalt)",
    "client_shadow": "0,0,4,0.25,#FFFFFF"
    },
    "concrete": {
    "style": "fill:#b3b3b3;fill-texture:url(concrete)",
    "client_shadow": "0,0,4,0.25,#FFFFFF"
    },
    "walkways": { "style": "fill:#000000;opacity:0.05" },
    "grass": {
    "style": "fill:#4c7e22;fill-texture:url(grass)",
    "client_shadow": "0,0,6,0.75,#000000"
    },
    "rock": {
    "style": "fill:#303030;fill-texture:url(rock)",
    "client_shadow": "0,0,3,1.0,#000000"
    },
    "moving-walkways": {
    "style": "fill:#2c2c2c;fill-texture:url(moving_walkway)",
    "client_shadow": "0,0,4,0.5,#FFFFFF"
    },
    "roof": {
    "style": "fill:#626f5e;fill-texture:url(tile_roof)",
    "client_shadow": "0,2,8,1.0,#000000"
    },
    "roof2": { "style": "fill:#626f5e", "client_shadow": "0,2,4,1.0,#000000" }
    }

New Style Default Values

The new style is used in the Beacons app.

    BEACONS_STYLE = {
        "floor": {"style": "fill:#d9d5ce "},
        "stairs-elevators": {"style": "fill:#000000; opacity:0.10"},
        "restrooms": {"style": "fill:#f2e3c2 "},
        "concessions": {"style": "fill:#e5e2da ","client_shadow": "0,0,40,0.25,#000000"},
        "inaccessible": {"style": "fill:#FFFFFF; opacity:1.0"},
        "exterior-walls": {"style": "fill:none;stroke:#ffffff;"},
        "interior-walls": {"style": "fill:none;stroke:#ffffff;"},
        "water": {"style": "fill:#8fc7cc "},
        "streets": {"style": "fill:#b3b3b3 "},
        "concrete": {"style": "fill:#e5e5e5 "},
        "walkways": {"style": "fill:#000000; opacity:0.05"},
        "grass": {"style": "fill:#aacca3 "},
        "rock": {"style": "fill:#b3b3b3 "},
        "moving-walkways": {"style": "fill:#000000; opacity:0.05"}
    }

Advanced Map Settings

In the sidebar, click THEME, and then scroll down to click Advanced Map Settings. In the MAP STYLE field, enter valid JSON to customize your map layer styles.

The MAP STYLE field is blank by default.

You can change the colors used in your map by going to THEME -> Advanced Map Settings.

When you edit a layer’s color value, take care not to change anything else. If you delete any of the punctuation or text in this field, it will break the map files.