Skip to main content

README

#Set gradient color surface layer

Supports custom ribbon gradient colors and attribute-driven gradient angles.

show
<!DOCTYPE html>
<html>

<head>
    <title>Gradient color surface layer</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
    <div id='map'></div>
    <script>
        let map = new mapmost.Map({
            container: 'map',
            zoom: 12.544032465932002,
            center: [120.7298482755258, 31.337044616618797],
            style: ‘<your style url>',
            userId: '***', // authorization code
        });

        map.on('load', () => {
            map.addSource('poly', {
                type: 'geojson',
                fillMetrics: true, // Enable polygon range metrics. This property is required for polygon layers that have a fill-gradient value defined.
                data: './polygon.geojson',
            });
            
            map.addLayer({
                id: 'poly',
                source: 'poly',
                type: 'fill',
                paint: {
                    'fill-opacity': 1.0,
                    'fill-gradient': [ // Set gradient ribbon
                        'interpolate',
                        ['linear'],
                        ['fill-gradient-progress'],
                        0, 'rgba(204, 255, 40,1.0)',
                        1, 'rgba(0, 15, 255,1.0)'
                    ],
                    'fill-gradient-angle': 45, // Set gradient angle
                }
            });
        });
    </script>
</body>

</html>