Custom Map Layers

Layers are responsible for rendering data associated with a data source based on a particular style configuration. There are two primary components to a layer: the source that provides the data to render, and a layer style that determines how that data gets rendered on a map.

Adding Layers

Once you've set up your sources, you can start configuring and adding your layers to get your data rendered to your map.

For instance, we want to render the alerts vector tile source we set up in our sources example. Since this is a vector source consisting of polygon geometry, we need to determine if we want to render the data as filled shapes using the fill render style, or as outlines using the stroke render style.

For this example, we'll choose to fill the geometry with a red color to start:

// data source must be added first
controller.addSource('alerts', {
    type: 'vector',
    url: 'https://maps{s}.aerisapi.com/[CLIENT_ID]_[CLIENT_SECRET]/alerts/{z}/{x}/{y}/0.pbf'
});
 
// add layer and reference the above source id
controller.addLayer('alerts-fill', {
    type: 'fill',
    source: 'alerts',
    paint: {
        fill: {
            color: '#ff0000'
        }
    }
});

Notice in the above configuration we're setting the source property to alerts, which is the identifier for the corresponding vector tile source we set up and added to the map controller prior to the layer.

Coloring every alert the same color isn't very informative. Instead, we want to use the fill color provided by a property value for each feature in the data set. In this case, you would need to know what properties are available for each feature in order to select the correct value.

For our alerts source, each feature has a COLOR property that gives the hexidecimal color value for that alert type:

{
    advisory: 'FLOOD WATCH',
    CAT: 'flood',
    COLOR: '2E8B57',
    EXPIREDATE: 1689926400,
    LOCATION: 'scott',
    STARTDATE: 1689883200,
    VTEC: 'FA.A',
    ZONE: 'KSZ043'
}

So we can update our layer paint configuration to reference this property's value instead to fill each polygon with the correct alert color:

controller.addLayer('alerts-fill', {
    type: 'fill',
    source: 'alerts',
    paint: {
        fill: {
            color: {
                property: 'COLOR'
            }
        }
    }
});

We can even add a black outline to the polygons so that neighboring features of the same color are clearer:

controller.addLayer('alerts-fill', {
    type: 'fill',
    source: 'alerts',
    paint: {
        fill: {
            color: {
                property: 'COLOR'
            }
        },
        stroke: {
            color: '#000'
        }
    }
});

By configuring our color as { property: 'COLOR' }, we are informing the renderer that we want the fill color for each feature to be determined by the value of the COLOR property in the feature's available properties. Refer to the Data-Driven Styling documentation for more information on how to style data features based on the underlying data.

Removing Layers

To remove a layer from your map and map controller, just provide the identifier you assigned the source when it was added to the map:

controller.removeLayer('alerts-fill');

If the layer exists on the map, then it will be removed and perform any necessary cache and object disposal. The data source associated with the layer will still exist, however, until you explicitly remove it using removeSource(:id).

Custom Sources Custom Icons