padawannn/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>MapboxGL CARTO Building</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.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/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>

      const map = new mapboxgl.Map({
        container: 'map',
        center: [-3.6996205, 40.4078698],
        style: 'http://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
        zoom: 14
      });

      let geojsonLine = {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: []
        }
      }

      map.on('load', function(){

        map.addSource('line_source', { type: 'geojson', data: null });

        map.addLayer({
          id: 'line',
          type: 'line',
          source: 'line_source'
        });

        map.addSource('fill_source', { type: 'geojson', data: null });

        map.addLayer({
          id: 'fill',
          type: 'fill',
          source: 'fill_source',
          paint:{
            'fill-opacity': 0.2,
          }
        });

        map.dragPan.disable();

        map.on('mousedown', function(){
          map.on('mousemove', draw);
        })

        map.on('mouseup', function(){
          map.off('mousemove', draw);

          let geojsonFill = {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Polygon',
              coordinates: [geojsonLine.geometry.coordinates]
            }
          }
          geojsonFill.geometry.coordinates[0].push(geojsonLine.geometry.coordinates[0])

          map.getSource('fill_source').setData(geojsonFill);
          geojsonLine.geometry.coordinates = [];
          map.getSource('line_source').setData(geojsonLine);
          poisLayer(geojsonFill);

        })

      });

      function draw(e) {
        geojsonLine.geometry.coordinates.push([e.lngLat.lng, e.lngLat.lat])
        map.getSource('line_source').setData(geojsonLine);
      }

      async function poisLayer(geojsonFill) {
        const mapConfig = {
          buffersize: { mvt: 0 },
          layers: [
            {
              id: 'pois_carto',
              type: 'mapnik',
              options: {
                sql: `SELECT * from pois
                  WHERE st_intersects( pois.the_geom, ST_SetSRID(ST_GeomFromGeoJSON('${JSON.stringify(geojsonFill.geometry)}'), 4326))`,
                aggregation: false
              }
            }
          ]
        },
        tilejson = await getTiles(mapConfig)
        ;

        if (map.getLayer('pois')) {
          map.removeLayer('pois');
          map.removeSource('pois_source');
        }

        map.addSource('pois_source', { type: 'vector', tiles: tilejson });
        map.addLayer({
          id: 'pois',
          type: 'circle',
          source: 'pois_source',
          'source-layer': 'pois_carto',
          paint: {
            'circle-color': '#b13f64',
            'circle-stroke-width': 1,
            'circle-stroke-color': '#fff',
            'circle-radius': 2
          }
        });
      }

      async function getTiles(mapConfig) {
        const response = await fetch('https://paulajulia.carto.com/api/v1/map', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(mapConfig)
        }),
        layergroup = await response.json();
        return layergroup.metadata.tilejson.vector.tiles;
      }

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>MapboxGL CARTO Building</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.44.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/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>

	const map = new mapboxgl.Map({
	container: 'map',
	center: [-3.6996205, 40.4078698],
	style: 'http://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
	zoom: 14
	});

	let geojsonLine = {
	type: 'Feature',
	properties: {},
	geometry: {
	type: 'LineString',
	coordinates: []
	}
	}

	map.on('load', function(){

	map.addSource('line_source', { type: 'geojson', data: null });

	map.addLayer({
	id: 'line',
	type: 'line',
	source: 'line_source'
	});

	map.addSource('fill_source', { type: 'geojson', data: null });

	map.addLayer({
	id: 'fill',
	type: 'fill',
	source: 'fill_source',
	paint:{
	'fill-opacity': 0.2,
	}
	});

	map.dragPan.disable();

	map.on('mousedown', function(){
	map.on('mousemove', draw);
	})

	map.on('mouseup', function(){
	map.off('mousemove', draw);

	let geojsonFill = {
	type: 'Feature',
	properties: {},
	geometry: {
	type: 'Polygon',
	coordinates: [geojsonLine.geometry.coordinates]
	}
	}
	geojsonFill.geometry.coordinates[0].push(geojsonLine.geometry.coordinates[0])

	map.getSource('fill_source').setData(geojsonFill);
	geojsonLine.geometry.coordinates = [];
	map.getSource('line_source').setData(geojsonLine);
	poisLayer(geojsonFill);

	})

	});

	function draw(e) {
	geojsonLine.geometry.coordinates.push([e.lngLat.lng, e.lngLat.lat])
	map.getSource('line_source').setData(geojsonLine);
	}

	async function poisLayer(geojsonFill) {
	const mapConfig = {
	buffersize: { mvt: 0 },
	layers: [
	{
	id: 'pois_carto',
	type: 'mapnik',
	options: {
	sql: `SELECT * from pois
	WHERE st_intersects( pois.the_geom, ST_SetSRID(ST_GeomFromGeoJSON('${JSON.stringify(geojsonFill.geometry)}'), 4326))`,
	aggregation: false
	}
	}
	]
	},
	tilejson = await getTiles(mapConfig)
	;

	if (map.getLayer('pois')) {
	map.removeLayer('pois');
	map.removeSource('pois_source');
	}

	map.addSource('pois_source', { type: 'vector', tiles: tilejson });
	map.addLayer({
	id: 'pois',
	type: 'circle',
	source: 'pois_source',
	'source-layer': 'pois_carto',
	paint: {
	'circle-color': '#b13f64',
	'circle-stroke-width': 1,
	'circle-stroke-color': '#fff',
	'circle-radius': 2
	}
	});
	}

	async function getTiles(mapConfig) {
	const response = await fetch('https://paulajulia.carto.com/api/v1/map', {
	method: 'POST',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(mapConfig)
	}),
	layergroup = await response.json();
	return layergroup.metadata.tilejson.vector.tiles;
	}

	</script>

	</body>
	</html>