Style features from HERE Map Attributes API

The HERE Map Attributes API v8 provides map data that you can render as a layer and style with custom style rules. Use feature attributes returned by the service to select features and configure their appearance.

Unlike the HERE Style Editor, which lets you adjust values of predefined style definitions, custom styles based on Map Attributes API v8 allow you to define entirely new style rules for any data layer.

Create a styled Map Attributes layer

To apply custom styles from the Map Attributes API, create an instance of H.map.render.harp.Style class to load a custom style definition with rules for the Map Attributes API-specific features. In each rule, use when to select features, choose a rendering technique, and set its properties in attr.

The following example renders building polygons from the BUILDING layer. The COLOR attribute determines each polygon's fill color, while a green outline highlights features named HERE Berlin. For buildings with a defined NAME attribute each polygon vertex is rendered as a red dot and the name of the building:

// A small red dot defined with SVG
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10">
               <circle cx="5" cy="5" r="4" fill="red"/>
             </svg>`
const style = new H.map.render.harp.Style({
  "assets": {
    // A custom asset for the red dot icon:
    "custom_redDotIcon": {
      "url": `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
    }
  },
  "styles": [
    // Building fill:
    {
      "when": ["all", ["==", ["geometry-type"], "Polygon"]],
      "technique": "polygon",
      "attr": {
        "color": ["get", "COLOR"]
      }
    },
    // Building outlines if the building's "HEIGHT" exceeds 20 m" :
    {
      "when": ["all",
        ["==", ["geometry-type"], "LineString"],
        [">", ["to-number", ["get", "HEIGHT"], 0], 20]
      ],
      "technique": "line",
      "attr": {
        "color": "#0C0",
        "width": ["pixel-world-scale", 3]
      }
    },
    // Optional icon and text if building's "NAME" is present:
    {
      "when": ["all", ["get", "NAME"], ["==", ["geometry-type"], "Point"]],
      "technique": "icon-text",
      "attr": {
        "text": ["get", "NAME"],
        "text-color": "#00F",
        "icon-source": 'custom_redDotIcon',
        "icon-width": 8,
        "text-placement": "T",
        "text-size": 12
      }
    }
  ]
});

const providerOptions = {
  layer: "BUILDING",
  level: 13,
  geometryTypes:
    H.service.mapAttributes.Provider.GeometryType.POLYGON |
    H.service.mapAttributes.Provider.GeometryType.LINE|
    H.service.mapAttributes.Provider.GeometryType.POINT
};
const layerOptions = { min: 17, max: 22 };
const service = platform.getMapAttributesService();
const layer = service.createLayer(style, providerOptions, layerOptions);

map.addLayer(layer);
map.setZoom(19);
map.setCenter({ lat: 52.53082, lng: 13.38515 });

In this example:

• The providerOptions attribute selects the Map Attributes data to request
• The layer and level are set to values supported by the Map Attributes API
• The | expression combines geometry-type flags when style rules render more than one geometry type
• The layerOptions attribute controls the zoom range in which the map displays the resulting layer

The following figure shows the BUILDING layer as configured in the previous example, rendered on the map:

Style with feature attributes

Use expressions in when and attr to read Map Attributes feature properties. The get expression reads a property from the current feature, so color: ["get", "COLOR"] uses each feature's COLOR value instead of a fixed color.

You can combine attribute checks in when to assign different styles to groups of features. For example, use all with get expressions to select features that have a specific Map Attributes property value, then choose a suitable technique for their geometry.

Rules can also use expressions such as match, step, and interpolate to derive technique attributes from feature properties or map zoom level.

Next steps

Explore the following documents when customizing map style:

• Style rules reference
• Style techniques reference
• Style expressions reference