workshop ol getextent modifier iteraction

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>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({
			//meta-key sul Mac, ctrl-key sugli altri
     condition:ol.events.condition.platformModifierKeyOnly
     // sttanto always vado a ""sovrascrivere il normale funzionamento del draBox
     //condition: ol.events.always	
     /*condition: function(mapBrowserEvent) {
        //console.log( mapBrowserEvent.pointerEvent)
        return mapBrowserEvent.pointerEvent.altKey
        //return ol.events.condition.platformModifierKeyOnly(mapBrowserEvent)
     }*/
});

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

map.addInteraction(areaExtentInteraction);