Version:
Version:
Drawing polygons and get it in KML or WKT format
Example of how to draw polygons, with additional tools like snapping, editing and drag elements, and get it in KML or WKT format
<!DOCTYPE html>
<html>
<head>
<title>Drawing polygons and get it in KML or WKT format</title>
<script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<style>
#map {
position: relative;
}
#editFeatureDiv {
padding: 20px 40px;
width: 300px;
background-color: #fff;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1000;
display: none;
}
#kmlDiv, #wktDiv {
display: none
}
#editFeatureDiv label {
margin-top: 7px;
}
</style>
<div id="map" class="map">
<div id="editFeatureDiv" class="container">
<div class="row">
<b>Edit feature</b>
</div>
<hr/>
<form>
<div class="form-group row">
<label for="inputFeatureId" class="col-sm-3 col-form-label">ID</label>
<div class="col-sm-9">
<input type="text" id="inputFeatureId" class="form-control" placeholder="Feature id">
</div>
</div>
<div class="form-group row">
<label for="inputFeatureName" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9">
<input type="value" id="inputFeatureName" class="form-control" placeholder="Feature name">
</div>
</div>
<div class="form-group row">
<button type="button" id="btnUpdate" class="btn btn-primary">Update</button>
<button type="button" id="btnGetWKT" class="btn btn-secondary">Get WKT</button>
<button type="button" id="btnGetKML" class="btn btn-secondary">Get KML</button>
</div>
</form>
</div>
</div>
<div>
<pre lang="xml" id="kmlDiv"></pre>
<pre lang="json" id="wktDiv"></pre>
</div> <script>
var map;
var features = [];
var selectedFeature = null;
var dragFeaturesEnabled = false;
var editFeaturesEnabled = false;
var removeFeaturesEnabled = false;
document.addEventListener('cercalia-ready', function() {
map = new cercalia.Map({
target: 'map',
controls: [],
center: new cercalia.LonLat(-0.05784564720924956, 51.520754395236935),
zoom: 11,
defaultClick: function() {
$('#editFeatureDiv').hide();
selectedFeature = null;
}
});
createControls();
createInitializeEvents();
});
function createControls() {
createDrawControl();
createSnapControl();
createDragFeaturesControl();
createEditFeaturesControl();
deleteFeaturesControl();
}
function createInitializeEvents() {
document.querySelector('#btnUpdate').addEventListener('click', handleUpdateFeature);
document.querySelector('#btnGetWKT').addEventListener('click', handleClickBtnGetWKT);
document.querySelector('#btnGetKML').addEventListener('click', handleClickBtnGetKML);
}
function deleteFeaturesControl() {
var cleanControl = new cercalia.control.Custom({
svgPath: 'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z',
title: 'Delete all features',
twoState: true,
clickFunction: function() {
removeFeaturesEnabled = this.isEnabled();
if (removeFeaturesEnabled) {
var notification = new cercalia.Notification('Click feature to delete', cercalia.Notification.Severity.INFO);
notification.display(map);
}
}
});
map.addCustomControl(cleanControl);
}
function createRandomId() {
return Math.random().toString(36).substr(2, 7);
}
function createDrawControl() {
var drawControl = new cercalia.control.Custom({
svgPath: 'M16.84,2.73C16.45,2.73 16.07,2.88 15.77,3.17L13.65,5.29L18.95,10.6L21.07,8.5C21.67,7.89 21.67,6.94 21.07,6.36L17.9,3.17C17.6,2.88 17.22,2.73 16.84,2.73M12.94,6L4.84,14.11L7.4,14.39L7.58,16.68L9.86,16.85L10.15,19.41L18.25,11.3M4.25,15.04L2.5,21.73L9.2,19.94L8.96,17.78L6.65,17.61L6.47,15.29',
title: 'Draw polygons',
twoState: true,
clickFunction: function() {
if (this.isEnabled()) {
map.enableDrawInteraction('Polygon', false, undefined, function(feature) {
this.disable();
map.disableDrawInteraction();
var id = createRandomId();
var name = 'Name_' + id;
feature.setSimpleLabel(new cercalia.SimpleLabel({
text:
'ID: ' + id + '\n' +
'Name: ' + name,
divided: false
}));
feature.setDraggable(dragFeaturesEnabled);
feature.setEditable(editFeaturesEnabled);
feature.onClick = handleOnClickFeature;
features.push(feature);
var olFeature = feature.getFeature();
olFeature.setProperties({
'id': id,
'name': name
});
}.bind(this));
} else {
map.disableDrawInteraction();
}
}
});
map.addCustomControl(drawControl);
}
function createSnapControl() {
var snapControl = new cercalia.control.Custom({
svgPath: 'M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z',
title: 'Snapping',
twoState: true,
clickFunction: function() {
map.disableDrawInteraction();
if (this.isEnabled()) {
map.enableSnapping();
} else {
map.disableSnapping();
}
}
});
map.addCustomControl(snapControl);
}
function createDragFeaturesControl() {
var dragControl = new cercalia.control.Custom({
svgPath: 'M23,5.5V20c0,2.2-1.8,4-4,4h-7.3c-1.08,0-2.1-0.43-2.85-1.19L1,14.83c0,0,1.26-1.23,1.3-1.25 c0.22-0.19,0.49-0.29,0.79-0.29c0.22,0,0.42,0.06,0.6,0.16C3.73,13.46,8,15.91,8,15.91V4c0-0.83,0.67-1.5,1.5-1.5S11,3.17,11,4v7 h1V1.5C12,0.67,12.67,0,13.5,0S15,0.67,15,1.5V11h1V2.5C16,1.67,16.67,1,17.5,1S19,1.67,19,2.5V11h1V5.5C20,4.67,20.67,4,21.5,4 S23,4.67,23,5.5z',
title: 'Drag feature',
twoState: true,
clickFunction: function() {
dragFeaturesEnabled = this.isEnabled();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
feature.setDraggable(dragFeaturesEnabled);
}
}
});
map.addCustomControl(dragControl);
}
function createEditFeaturesControl() {
var dragControl = new cercalia.control.Custom({
svgPath: 'M9,11.24V7.5C9,6.12,10.12,5,11.5,5S14,6.12,14,7.5v3.74c1.21-0.81,2-2.18,2-3.74C16,5.01,13.99,3,11.5,3S7,5.01,7,7.5 C7,9.06,7.79,10.43,9,11.24z M18.84,15.87l-4.54-2.26c-0.17-0.07-0.35-0.11-0.54-0.11H13v-6C13,6.67,12.33,6,11.5,6 S10,6.67,10,7.5v10.74c-3.6-0.76-3.54-0.75-3.67-0.75c-0.31,0-0.59,0.13-0.79,0.33l-0.79,0.8l4.94,4.94 C9.96,23.83,10.34,24,10.75,24h6.79c0.75,0,1.33-0.55,1.44-1.28l0.75-5.27c0.01-0.07,0.02-0.14,0.02-0.2 C19.75,16.63,19.37,16.09,18.84,15.87z',
title: 'Toggle edit features',
twoState: true,
clickFunction: function() {
editFeaturesEnabled = this.isEnabled();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
feature.setEditable(editFeaturesEnabled);
}
}
});
map.addCustomControl(dragControl);
}
/**
* @param {cercalia.Feature} feature Feature
*/
function handleOnClickFeature(feature) {
if (!removeFeaturesEnabled) {
selectedFeature = feature;
var olFeature = feature.getFeature();
$('#editFeatureDiv').show();
$('#inputFeatureId').val(olFeature.get('id'));
$('#inputFeatureName').val(olFeature.get('name'));
} else {
map.removeFeatures(feature);
var i = features.indexOf(feature);
features.splice(i, 1);
}
}
function handleUpdateFeature() {
if (selectedFeature) {
var id = $('#inputFeatureId').val();
var name = $('#inputFeatureName').val();
var olFeature = selectedFeature.getFeature();
olFeature.setProperties({
id: id,
name: name
});
selectedFeature.setSimpleLabel(new cercalia.SimpleLabel({
text:
'ID: ' + id + '\n' +
'Name: ' + name,
divided: false
}));
} else {
alert('Feature not selected');
}
}
function handleClickBtnGetWKT() {
if (selectedFeature) {
$('#kmlDiv').empty().hide();
$('#wktDiv').empty().show().text(selectedFeature.getWKT());
} else {
alert('Feature not selected');
}
}
function handleClickBtnGetKML() {
if (selectedFeature) {
$('#wktDiv').empty().hide();
$('#kmlDiv').empty().show().text(cercalia.Util.transformFeatureToKML(selectedFeature));
} else {
alert('Feature not selected');
}
}
</script>
</body>
</html>