MapKit Mobile SDK

Map styles

MapKit lets you change the appearance of both the entire displayed map and its individual layers. Map styling is set as a JSON array of objects. Each object defines a single style. Each style can be applied to one or more objects.

JSON array format

[{
    "tags": {
        "all": ["string", "string", ...],
        "any": ["string", "string", ...],
        "none": ["string", "string", ...]
    },
    "types": ["string", "string", ...],
    "elements": ["string", "string", ...],
    "stylers": {
        "zoom": [integer, integer],
        "visibility": "string",
        "hue": "string",
        "saturation": double,
        "lightness": double,
        "color": "string",
        "opacity": double,
        "scale": double
    }
}]

  • tags: The tags that define a subset of styled objects. The list of tags for substrate objects is given below. If the field is missing, styles are applied to all objects. If an unknown tag is specified, styles are not applied.

    • all: The object must have all the specified tags.
    • any: The object must have at least one of the specified tags.
    • none: The object must not have the specified tags.

  • types: Types of styled objects. If the field is missing, styles are applied to all types of objects. You can only set a single element instead of an array. Possible values:

    • point: Points, such as bus stops or POI.
    • polyline: Lines, such as roads or borders.
    • polygon: Polygons, such as parks or lakes.

  • elements: Elements of the object whose display properties will change. If the field is missing, styles are applied to all elements. You can only set a single element instead of an array. Possible values:

    • geometry: Geometric elements of the object.
      • geometry.fill: Inner area (fill) of the object's geometric elements.
        • geometry.fill.pattern: Image that fills the inner area of the polygon or polyline.
      • geometry.outline: Outline of the object's geometric elements.
    • label: All elements of the object's label.
      • label.icon: Object icon.
      • label.text: Text of the object label.
        • label.text.fill: Fill of the object label text.
        • label.text.outline: Outline of the object label text.

  • stylers: One or more styles to be applied to objects. Styles are applied in the specified order.

    • zoom: Limits the use of styles to a range of scales. You can specify a single value or range of values from minimum to maximum. To apply styles, fractional scale values are rounded to the nearest integer.
    • visibility: Sets the visibility of the object. Possible value: off.
    • hue: Changes the hue of the object on the map. Set as a base color in #RRGGBB format. For a base color with an undefined hue (white, gray, or black), the color of the object doesn't change.
    • saturation: Changes the color saturation on the map. Possible values: -1 to 1. If -1, all colors become shades of gray. If 1, the image color is highly saturated.
    • lightness: Changes the brightness of colors on the map. Possible values: -1 to 1. If -1, the object turns black. If 1, it turns white.
    • color: Changes the color of the object. The following formats are supported:
      • A string containing a HEX color code, for example: #RGB, #RRGGBB, 0xRGB, 0xRRGGBB, RGB, or RRGGBB.
      • A string containing a HEX color code and alpha channel, for example: #RGBA, #RRGGBBAA, 0xRGBA, 0xRRGGBBAA, RGBA, or RRGGBBAA.
    • opacity: Changes the relative transparency of the object. If the alpha channel is set in the colorfield, it multiplies opacity.
    • scale: Changes the scale of the object. The size of the object is multiplied by scale. Doesn't apply to the selected icon.

List of tags

The tags of objects depend on the map layer styled. Below are the tags that can be used to change the map substrate.

  • road: Highways:

    • road_N: Highways with category of importance N ranging from 1 (most important) to 7 (least important).
    • road_limited: Roads with restricted motor traffic, pedestrian areas.
    • road_unclassified: Unclassified roads (usually in forests and fields).
    • road_minor: Intra-block passages.
    • road_construction: Roads under construction.
    • ferry: Ferry crossings.
    • path: Roads that are not suitable for motor traffic (sidewalks, park paths, and bicycle paths).
    • crosswalk: Pedestrian and bicycle crossings.
    • traffic_light: Traffic lights.

  • water: Bodies of water:

    • bathymetry: Map of the depth of reservoirs.

  • landscape: Landscape objects:

    • land: Land surface.
    • landcover: Vegetation, swamps, and glaciers:
      • vegetation: Vegetation (including lawns, urban vegetation and point plants).
    • urban_area: Urban blocks:
      • residential: Residential blocks.
      • industrial: Industrial blocks.
      • cemetery: Cemeteries.
      • park: Gardens and parks.
      • medical: Healthcare facilities.
      • sports_ground: Sports grounds and playing fields.
      • beach: Beaches.
      • construction_site: Construction sites.
    • national_park: National parks and nature preserves.
    • terrain: Relief.

  • poi: Points of interest:

    • major_landmark: Prominent objects marked with a separate icon.
    • outdoor: Outdoor playgrounds:
      • park: Gardens and parks.
      • beach: Beaches.
    • shopping: Stores and shopping malls.
    • commercial_services: Organizations providing commercial services:
      • fuel_station: Gas stations.
      • hotel: Hotels and housing.
    • food_and_drink: Restaurants and bars.
    • cemetery: Cemeteries.
    • medical: Healthcare facilities.

  • admin: Labels and borders of districts, and public spaces in localities:

    • country: Countries.
    • region: Regions or states.
    • locality: Localities.
    • district: Urban districts.
    • address: Addresses.

  • transit: Any map objects related to public transport:

    • transit_location: Any point on the map related to public transport, such as metro stations, bus stops, or entrances:
      • transit_stop: Public transport stops with passenger drop-off and pick-up.
      • transit_entrance: Entrances or exits of a metro station.
    • transit_line: Transit lines as a physical object, such as railway and tram tracks or cable lines above ground.
    • transit_schema: Schematic representation of public transit lines.
    • is_unclassified_transit: Public transport objects of unknown importance.

  • structure: Structures:

    • building: Buildings:
      • entrance: Building entrances.
    • fence: Fences.

  • is_tunnel: A section of road or track passing through a tunnel.

  • geographic_line: Equator line and polar circles.

How to apply map styles

To apply styles to a map, use the following methods:

  • setMapStyle: Styling for the map substrate.
  • setLayerStyle: Styling for any layer.
String style = "[" +
            "        {" +
            "            \"types\": \"point\"," +
            "            \"tags\": {" +
            "                \"all\": [" +
            "                    \"poi\"" +
            "                ]" +
            "            }," +
            "            \"stylers\": {" +
            "                \"color\": \"f00\"" +
            "            }" +
            "        }" +
            "    ]";
mapView.getMap().setMapStyle(style);

NSString *style = @"[" +
            "        {" +
            "            \"types\": \"point\"," +
            "            \"tags\": {" +
            "                \"all\": [" +
            "                    \"poi\"" +
            "                ]" +
            "            }," +
            "            \"stylers\": {" +
            "                \"color\": \"f00\"" +
            "            }" +
            "        }" +
            "    ]";
[[MMKMap MapView] setMapStyleWithStyle:style];
In this article: