workshop ol iteraction get extent

by Francesco Boccacci

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<body>
  <div id="map" class="map"></div>
  <div id="togglebbox">
    <input type="checkbox" id="togglebbxobtn" value="Attiva BBOX" /> Attiva BBOX
  </div>
  <div>Extent: <span id="extent"></span></div>

</body>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.map {
  height: 90%;
  width: 100%;
}

JavaScript

const map = new ol.Map({
 
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [1253220.67184, 5430658.10783],
        zoom: 10
      })
});

const areaExtentInteraction = new ol.interaction.DragBox();

areaExtentInteraction.on('boxend', function(evt) {
      const extent = evt.target.getGeometry().getExtent();
      $("#extent").html(extent.join(", "));
});

areaExtentInteraction.setActive(false);
map.addInteraction(areaExtentInteraction);

const toggleBBOXbtn = $("#togglebbxobtn");

toggleBBOXbtn.change(function() {
      var activate = $(this).prop("checked");
      $("#extent").html("");
      areaExtentInteraction.setActive(activate);
});