oriolbx/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Carto.js Guide</title>

    <!-- Include Leaflet 1.2.0 Library -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw.css" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw.js"></script>

    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

    <!-- Include cartodb.js Library -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.2/carto.min.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            box-sizing: border-box;
            height: 100%;
        }
        body {
            background: #f2f6f9;
            height: 100%;
            font-family: "Open sans", Helvetica, Arial, sans-serif;
        }
        #container {
            display: flex;
            width: 100%;
            height: 100%;
        }
        #map {
            flex: 1;
            margin: 10px;
        }

    </style>
</head>

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


    </div>
    <script>
        // define map
        let map = L.map('map', {drawControl: false}).setView([41.390205, 2.154007], 15);

        // define leaflet.draw settings
        let drawnItems = new L.FeatureGroup();
        let drawControl = new L.Control.Draw({
            draw: {
                polygon: true,
                polyline: false,
                line: false,
                marker: false,
                rectangle: true,
                circle: false,
                circlemarker: false,
            },
            edit: {
                featureGroup: drawnItems,
                edit: false,
                remove: false
            },
            draw: {
                polygon: {
                    allowIntersection: false,
                    showArea: true
                }
            }
        });

        map.addControl(drawControl);
        map.addLayer(drawnItems);

        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
            maxZoom: 18
        }).addTo(map);

        // define client
          // We have created a empty dataset with private privacy
          // and we give it insert permission for SQL and select permission for maps
          // So we can display the geometries added on the map when we refresh
        const client = new carto.Client({
            apiKey: 'AL-AqOfgZtmvrs8BY-XQGQ',
            username: 'oboix'
        });
        let source = new carto.source.SQL(`
            SELECT * FROM insert_polygons
        `);

        let cartoCSS = new carto.style.CartoCSS(`
            #layer {
                polygon-fill: blue;
            }`
        );
        let cartoLayer = new carto.layer.Layer(source, cartoCSS);

        client.addLayer(cartoLayer);

        client.getLeafletLayer().addTo(map);


        map.on(L.Draw.Event.CREATED, function (e) {
            let layer = e.layer;
            map.addLayer(layer);
            let layerAdded = JSON.stringify(layer.toGeoJSON().geometry)

            // use Fetch API to send request
            fetch(`https://oboix.carto.com/api/v2/sql?q=
                    INSERT INTO insert_polygons(the_geom)
                    VALUES(
                        St_SetSRID(
                            St_GeomFromGeoJSON('${layerAdded}'), 4326
                        )
                    )&api_key=AL-AqOfgZtmvrs8BY-XQGQ`,
                    {
                        headers: new Headers({
                            'Content-Type': 'application/json',
                            'Access-Control-Allow-Headers': 'Content-Type',
                            'Access-Control-Allow-Origin': '*'
                        }),
                        method: 'get',
                        mode: 'no-cors'
                    }
            ).then(function(response){
                console.log(response)
            }).catch(function(err){
                console.log(err)
            })


        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Carto.js Guide</title>

	<!-- Include Leaflet 1.2.0 Library -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw.css" />
	<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw.js"></script>

	<!-- Fonts -->
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

	<!-- Include cartodb.js Library -->
	<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.2/carto.min.js"></script>


	<style>
	* {
	margin: 0;
	padding: 0;
	}
	html {
	box-sizing: border-box;
	height: 100%;
	}
	body {
	background: #f2f6f9;
	height: 100%;
	font-family: "Open sans", Helvetica, Arial, sans-serif;
	}
	#container {
	display: flex;
	width: 100%;
	height: 100%;
	}
	#map {
	flex: 1;
	margin: 10px;
	}

	</style>
	</head>

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


	</div>
	<script>
	// define map
	let map = L.map('map', {drawControl: false}).setView([41.390205, 2.154007], 15);

	// define leaflet.draw settings
	let drawnItems = new L.FeatureGroup();
	let drawControl = new L.Control.Draw({
	draw: {
	polygon: true,
	polyline: false,
	line: false,
	marker: false,
	rectangle: true,
	circle: false,
	circlemarker: false,
	},
	edit: {
	featureGroup: drawnItems,
	edit: false,
	remove: false
	},
	draw: {
	polygon: {
	allowIntersection: false,
	showArea: true
	}
	}
	});

	map.addControl(drawControl);
	map.addLayer(drawnItems);

	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	maxZoom: 18
	}).addTo(map);

	// define client
	// We have created a empty dataset with private privacy
	// and we give it insert permission for SQL and select permission for maps
	// So we can display the geometries added on the map when we refresh
	const client = new carto.Client({
	apiKey: 'AL-AqOfgZtmvrs8BY-XQGQ',
	username: 'oboix'
	});
	let source = new carto.source.SQL(`
	SELECT * FROM insert_polygons
	`);

	let cartoCSS = new carto.style.CartoCSS(`
	#layer {
	polygon-fill: blue;
	}`
	);
	let cartoLayer = new carto.layer.Layer(source, cartoCSS);

	client.addLayer(cartoLayer);

	client.getLeafletLayer().addTo(map);


	map.on(L.Draw.Event.CREATED, function (e) {
	let layer = e.layer;
	map.addLayer(layer);
	let layerAdded = JSON.stringify(layer.toGeoJSON().geometry)

	// use Fetch API to send request
	fetch(`https://oboix.carto.com/api/v2/sql?q=
	INSERT INTO insert_polygons(the_geom)
	VALUES(
	St_SetSRID(
	St_GeomFromGeoJSON('${layerAdded}'), 4326
	)
	)&api_key=AL-AqOfgZtmvrs8BY-XQGQ`,
	{
	headers: new Headers({
	'Content-Type': 'application/json',
	'Access-Control-Allow-Headers': 'Content-Type',
	'Access-Control-Allow-Origin': '*'
	}),
	method: 'get',
	mode: 'no-cors'
	}
	).then(function(response){
	console.log(response)
	}).catch(function(err){
	console.log(err)
	})


	});
	</script>
	</body>

	</html>