Last active
July 1, 2018 09:48
-
-
Save oriolbx/bf98f1af5a32b475b9dd6da5253370b8 to your computer and use it in GitHub Desktop.
CARTO.js v4: Add geometries from map to dataset
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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