gis3w / workshop-ol Goto Github PK

/* lession 13 */

const CustomControl = function(options={}) { // <-- it can be completely rewritten using modern javascript classes
  const button = document.createElement('button');
  button.className = 'far fa-map'
  const element = document.createElement('div');
  element.className = 'custom-control ol-control';
  element.appendChild(button);
  ol.control.Control.call(this, {
    element: element,
    target: options.target || document.getElementById('contenitore_controllo_esterno'),
  });
  this.onClick = function(evt) {
    const map = this.getMap();
    map.getView().setZoom(4);
  }
  button.addEventListener('click',this.onClick.bind(this));
  
}

CustomControl.prototype = Object.create(ol.control.Control.prototype);

CustomControl.prototype.constructor = CustomControl;

const control = new CustomControl({})

/* lession 12 */

closer.addEventListener('click', () => {  // <-- avoid arrow functions if unnecessary
  popup && popup.setPosition(undefined); // <-- avoid shortcircuiting logic if unnecessary
  closer.blur();
  return false;
});

const interaction = new ol.interaction.Interaction({
	handleEvent(evt){ // <-- avoid object shorthand property / methods names if unnecessary
  	if (evt.type === 'dblclick'){
    	const coordinate = evt.coordinate;
  		content.innerHTML = '<h3>Coordinate:</h3><div>' + coordinate + '</div>';
 			popup.setPosition(coordinate);
    }
    return true;
  }
})

/* lession 13 */

const options = {
 element, // <-- avoid object shorthand property assignment if unnecessary
 render, // <-- avoid object shorthand property assignment if unnecessary
 target, // <-- avoid object shorthand property assignment if unnecessary
}

/*lession 15*/

const singlePointSelection = new ol.interaction.Select({
    layers: [poi],
    style: selectionStyle,
    // toggleCondition: come aggiungere le features alla corrente selezione
    // features: Collezione su cui limitarela selezione
    // filter: se volissimo filtare la feature (cattura una feature alla volta)  in base ad una proprietà specifica
    // toggleCondition: // nel caso customizzare il tipo di selezione
    // addCondition: funzione che permette di agire sull'aggiunte di nuove features selezionate
    // removeCondition: come sopra ma per la rimozione
    multi: false // dafault. Nel caso volessimo selezionare più features quando sono in overlay bisogna settarlo a true
});

/* lession 11 */

const gbw_coords_el = $("#gbw_coords");     // same as: document.querySelector("#gbw_coords");
const wgs84_coords_el = $("#wgs84_coords"); // same as: document.querySelector("#wgs84_coords");

/* lession 12 */

$("#extent").html(extent.join(", "));       // same as: document.querySelector("#extent").innerHTML = extent.join(", ");