here-apicartography

Road Label Layer in HERE Maps API for JavaScript


I'm attempting to add a vector map to a webpage using HERE Maps API for JavaScript. I've been using the style code below to render a super minimal style akin to the 4th picture from the top at this link (the one with only road and water area layers).

sources:
    omv:
        type: OMV
        max_zoom: 17
        min_display_zoom: 1
# global description of the map, in this example
# the map background color is white
scene:
    background:
        color: [1.000, 1.000, 1.000, 1.00]

# section contains the style information for the layers
# that are present on the map
layers:
    # user defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from source: omv is mandatory for the Vector Tile API
        # layer: water specifies what vector layer is taken
        # for the rendering see REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]
    road:
        data: {source: omv, layer: roads}
        draw:
            lines:
                order: 2
                color: [0.561, 0.561, 0.561, 1.00]
                width: 15

It wasn't difficult to figure out how to add things like geoshape overlays and UI controls and panning, but the one thing I haven't been able to add successfully is road labels. (Which seems like it'd be quite easy.)

I've attempted to grab code for road label layers from other documentation examples, but it always breaks the map (leaving only my geoshapes on a white background). This may be because there's always global variable attached to the label's language or fill color, but when I attempt to bring in all the global variable settings and references, the map is still broken.

So my question is, does anyone know of a simple/foolproof way to add road labels to a HERE map with such a minimal style? I suppose I'm looking for the minimum attributes necessary to make that layer visible. Thanks!


Solution

  • To better way to rework (delete section/add yours) vector styles to utilize the online editor Map Style editor (it allows you see changes immediately) and after that load reworked style yaml file in your web app like:

    function setStyle(map) {
            // get the vector provider from the base layer
            var provider = map.getBaseLayer().getProvider();
            // Create the style object from the YAML configuration.
            // First argument is the style path and the second is the base URL to use for
            // resolving relative URLs in the style like textures, fonts.
            // all referenced resources relative to the base path https://js.api.here.com/v3/3.1/styles/omv.
            var style = new H.map.Style('URL/to/your.yaml',
                'https://js.api.here.com/v3/3.1/styles/omv/');
            // set the style on the existing layer
            provider.setStyle(style);
        }
    

    See please the example on https://jsfiddle.net/qw64zL85/ There is using this yaml example file with road_labels: there only yaml text