Adding a custom vector tile layer

This examples renders water boundaries as lines from a custom vector tile source. Notice that the layer's sourceLayer is set to water which corresponds to the layer name provided by the vector tile data source. This tells the style layer which data to render from the data source.

custom-vector.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MapsGL SDK - Adding a custom vector tile layer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link href="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.css" rel="stylesheet" />
    <script defer src="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.js"></script>
    
    <script defer src="{% $paths.sdk %}"></script>
    <link href="{% $paths.css %}" rel="stylesheet" />
 
    <style>
    #map {
        height: 600px;
        margin: 30px auto;
        width: 1200px;
    }
    </style>
 
</head>
<body>
    <div id="map"></div>
 
    <script>
        window.addEventListener('load', () => {
 
            mapboxgl.accessToken = 'MAPBOX_TOKEN';
            const map = new mapboxgl.Map({
                container: document.getElementById('map'),
                style: 'mapbox://styles/mapbox/light-v11',
                center: [-95.5, 39],
                zoom: 3
            });
 
            const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
            const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
            
            controller.on('load', () => {
 
                controller.addSource('base', {
                    type: 'vector',
                    url: 'https://tile.nextzen.org/tilezen/vector/v1/256/all/{z}/{x}/{y}.mvt?api_key=[NEXTZEN_KEY]'
                });
                
                controller.addLayer('boundaries', {
                    type: 'line',
                    source: 'base',
                    sourceType: 'line',
                    sourceLayer: 'water',
                    paint: {
                        stroke: {
                            color: '#333333',
                            opacity: 1,
                            thickness: 3,
                            lineCap: 'round'
                        }
                    }
                });
            });
        });
 
    </script>
</body>
</html>

Adding custom GeoJSON data Attribution guide