Modifying Layer Configurations - Part 2

As we saw in Modifying layer configurations for WMTS Image layers, all non-default layer configurations primarily reside in layers.json . So let's go ahead and add a new layer entry for this storm track.

In layers.json , add the following entry:

{
    "layers": [
        ...
        {
            "id": "storm_track_hurricane_maria",
            "title": "Hurricane Maria Storm Track",
            "type": "data",
            "handleAs": "vector_kml",
            "vectorStyle": "storm",
            "updateParameters": { "time": false },
            "url": "default-data/demo-default-data/al152017_best_track_Maria.kml",
            "timeFormat": "YYYY MMM DD HHmm"
        },
        ...   
    ]
}

"handleAs": "vector_kml" will signal our MapWrapper classes to parse this layer as a KML and to render it as a vector. "timeFormat": "YYYY MMM DD HHmm" is a format string for Moment.js which is the library CMC uses for date parsing and manipulation. "updateParameters" is a set of predefined parameters for which a layer might be updated. In this case, we are setting time to false so that when the app changes date, it will not attempt to update this layer (we will change this later). "vectorStyle": "storm" will signal our MapWrapper classes to use a specific styling strategy when rendering this layer. Note that "vectorStyle" is not part of the CMC layer model and in fact will do nothing until we create new functions to handle it in the following sections. Because CMC uses ImmutableJS to merge all of the layer configurations together, it's ok that "vectorStyle" doesn't exist in the CMC Core layer model, this field will simply be added to this layer's data structure and for all other layers it will be read as undefined.

Avioding Mispellings

Later, we will be using the vectorStyle: "storm" to match this layer and customize it's rendering on the map. That means we'll need to match the string "storm" exactly, so let's store that string in a constants file so we can access it programmatically.

Create and edit the following file: src/constants/appStrings.js

export const VECTOR_STYLE_STORM = "storm";

Adding a Colorbar

Just like we did for the new raster layers, let's add colorbar configurations for this new vector layer.

Edit src/default-data/demo-default-data/palettes.json and add the following config

{
    "paletteArray": [
        ...
        {
            "name": "storm_track",
            "values": [
                ["<= 33", "#1976d2"],
                ["34 - 63", "#26c6da"],
                ["64 - 82", "#ffee58"],
                ["83 - 95", "#ffca28"],
                ["96 - 111", "#ffb300"],
                ["112 - 136", "#fb8c00"],
                [">= 137", "#e53935"]
            ]
        }
    ]
}

Now edit src/default-data/demo-default-data/layers.json and add the following colorbar information to the storm_track_hurricane_maria entry

{
    "id": "storm_track_hurricane_maria",
    ...
    "units": "knots",
    "palette": {
        "name": "storm_track",
        "min": "<=33",
        "max": ">=136",
        "handleAs": "json-fixed"
    },
    ...
}

Notice this configuration is a little bit different from the raster layers. Here we are specifying the min and max in the palette area. This is because those values are used purely for display and so can use arbitrary strings like >= or <=.

Save your changes and refresh your browser. You should now see a layer control entry for "Hurricane Maria - Storm Track", however enabling it will likely do nothing except spit out some errors as we did not import the image sprites for the Placemarks in the KML.