In the following code I add a function to draw a polygon on an Open Layer based web map.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<style>
#mapa {
height: 100%;
width: 100%;
}
</style>
<title>Ejercicio 3</title>
</head>
<body>
<div id="mapa"></div>
<script type="text/javascript">
var vista = new ol.View({
center: [0, 5000000],
zoom: 5
});
var fuenteOrtofoto = new ol.source.TileArcGISRest({
url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
params: { "LAYERS": "World Imagery" },
attributions: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
});
var capaOrtofoto = new ol.layer.Tile({
source: fuenteOrtofoto
});
var fuenteVectorial = new ol.source.Vector();
var capaVectorial = new ol.layer.Vector({
source: fuenteVectorial
});
var mapa = new ol.Map({
target: "mapa",
layers: [capaOrtofoto],
view: vista,
});
var dibujar = new ol.interaction.Draw({
source: fuenteVectorial,
type: "Polygon"
});
mapa.addInteraction(dibujar);
</script>
</body>
</html>
But how do I add a button to activate and deactivate this function by clicking? I know that you have to create a button with CreateElement, create it and then occupy "addEventListener". But how do I tell it to activate or deactivate the function of drawing on the map?