Map Style Sheet Extensions

The extensions property at the root of a map style sheet can be used to add custom entries and states to your map's styles. Entries and states can be set on your map elements in the various Microsoft map controls to define how they are styled.

Create a Custom Entry

Creates a custom entry based on the foodPoint entry. When a map element's style sheet entry is set to “myNamespace.myFoodPoint”, the icon used for the point will be the foodPoint’s icon, but scaled up twice as large.

    { "version": "1.*",
      "extensions": {
        "myNamespace": {
          "myFoodPoint": {
            "parent": "foodPoint",
            "scale": 2
    } } } }

Create a Custom State

In this example, when a map element's style sheet entry is set to “myNamespace.myCustomState”, the fillColor of the element will override the entry's fillColor with yellow.

    { "version": "1.*",
      "extensions": {
        "myNamespace": {
          "myCustomState": {
            "fillColor": "#FFFF00"
    } } } }

When one or more states are applied to a map element, they are stacked on top of the element's entry and their properties override or interact with the properties of the entry.

States support the "parent" property to inherit from another state. There are a few default states provided by the styling system including "disabled", "hover", and "selected", but these don't have to be used.

Setting the state of a map element to multiple states, usually represented as a semi-colon separated string like "hover;myNamespace.myState", means that each stat is stacked on top of each other and then stacked on the entry.

Overriding Transparency

The "composition" property was added in style version 1.3. In this example, two states that, when applied to a map element, will either blend a transparent green color with the underlying entry's fillColor or override the underlying entry's fillColor with a transparent green color.

    { "version": "1.*",
      "extensions": {
        "myNamespace": {
          "myBlendedState": {
            "fillColor": { "value":"#AA008200", "composition": "blend" }
          },
          "myOverriddenState": {
            "fillColor": { "value":"#AA008200", "composition": "override" }
    } } } }

Swapping Colors

The "property" pointer was added in style version 1.3. This example shows a state that, when applied to a map element, will swap existing colors around. This only works for color properties (not numeric or string properties), and it reads the property of the underlying entry (not of the state).

    { "version": "1.*",
      "extensions": {
        "myNamespace": {
          "mySwappingState": {
            "fillColor": { "property": "iconColor" },
            "iconColor": { "property": "fillColor" },
            "strokeColor": { "property": "fillColor" }
    } } } }

Changing Background Shape

The "shape" property was added in style version 1.4 and can also be applied to "elements". This example shows a state that, when applied to a map icon, will change the background shape to a teardrop and the foreground to the beach icon.

    { "version": "1.*",
      "extensions": {
        "myNamespace": {
          "myTeardropBeachState": {
            "shape": {
              "background": "teardrop",
              "icon": "beach"
    } } } } }