Style ocean depth data
Uses the interpolate expression with a cubic bezier curve expression to style bathymetry data.
Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html><html><head><meta charset='utf-8' /><title>Style ocean depth data</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' /><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }</style></head><body> <div id='map'></div> <script>mapboxgl.accessToken = '<your access token here>';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v10',center: [142.591669, 11.373335],zoom: 3,minZoom: 3,maxZoom: 5,}); 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"]}}, 'barrier_line-land-polygon');});</script> </body></html>