makella/index.html

## index.html
<!DOCTYPE html>
        <html>
        <head>
        <title>Add layer | CARTO</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <script src="http://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.js"></script>
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
        <style>
           html, body {
               margin: 0;
           }
           #map {
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>
        </head>
        <body>
        <div id="map"></div>

        <script>
            const map = new mapboxgl.Map({
                container: 'map',
                style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
                center: [82.25556587988785, 23.83162863534578],
                zoom: 5.303958263158539,
                pitch: 59.5, // pitch in degrees (map.getPitch())
                bearing: 0, // bearing in degrees (map.getBearing())
            });

            carto.setDefaultConfig({
                serverURL: 'https://{user}.carto.com'
            });

            carto.setDefaultAuth({
                username: 'cartovl',
                apiKey: 'default_public'
            });


            const source = new carto.source.Dataset("himilaya_glacier");
            const viz = new carto.Viz(`
                width: ($glims_polygons_db_area)
                color: opacity(ramp(linear($glims_polygons_db_area),teal),0.8)
                strokeWidth: 0
                order: asc(width())
                symbol: triangle
                //filter:
                symbolPlacement: align_bottom
                resoultion: 0.5
            `);
            const layer = new carto.Layer('layer', source, viz);

            layer.addTo(map, 'watername_ocean');
        </script>
        </body>
        </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Add layer \| CARTO</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<script src="http://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	html, body {
	margin: 0;
	}
	#map {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
	center: [82.25556587988785, 23.83162863534578],
	zoom: 5.303958263158539,
	pitch: 59.5, // pitch in degrees (map.getPitch())
	bearing: 0, // bearing in degrees (map.getBearing())
	});

	carto.setDefaultConfig({
	serverURL: 'https://{user}.carto.com'
	});

	carto.setDefaultAuth({
	username: 'cartovl',
	apiKey: 'default_public'
	});


	const source = new carto.source.Dataset("himilaya_glacier");
	const viz = new carto.Viz(`
	width: ($glims_polygons_db_area)
	color: opacity(ramp(linear($glims_polygons_db_area),teal),0.8)
	strokeWidth: 0
	order: asc(width())
	symbol: triangle
	//filter:
	symbolPlacement: align_bottom
	resoultion: 0.5
	`);
	const layer = new carto.Layer('layer', source, viz);

	layer.addTo(map, 'watername_ocean');
	</script>
	</body>
	</html>