Skip to content

Instantly share code, notes, and snippets.

@oriolbx
Last active Jul 1, 2018
Embed
What would you like to do?
CARTO.js v4: Add geometries from map to dataset
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment