Style ocean depth data

Uses the interpolate expression with a cubic bezier curve expression to style bathymetry data. See the example: https://docs.mapbox.com//mapbox-gl-js/example/style-ocean-depth-data/

by fxi

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiaGVsc2lua2kiLCJhIjoiY2puZW5rZ3N6MGRzYzNwb3drOW12MWEzdyJ9.IZC03hW3hKtBcbMgD0_KPw';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [142.591669, 11.373335],
        zoom: 3
       
    });

    map.on('load', function() {
        map.addSource('10m-bathymetry-81bsvj', {
            type: 'vector',
            url: 'mapbox://mapbox.9tm8dx88'
        });

        map.addLayer(
            {
                'id': '10m-bathymetry-81bsvj',
                'type': 'fill',
                'source': '10m-bathymetry-81bsvj',
                'source-layer': '10m-bathymetry-81bsvj',
                'layout': {},
                'paint': {
                    'fill-outline-color': 'hsla(337, 82%, 62%, 0)',
                    // cubic bezier is a four point curve for smooth and precise styling
                    // adjust the points to change the rate and intensity of interpolation
                    'fill-color': [
                        'interpolate',
                        ['cubic-bezier', 0, 0.5, 1, 0.5],
                        ['get', 'DEPTH'],
                        200,
                        '#78bced',
                        9000,
                        '#15659f'
                    ]
                }
            },
            'land-structure-polygon'
        );
    });