workshop ol events

by Francesco Boccacci

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script src="https://epsg.io/3003.js"></script>
<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>
    <div>
      <span>Coordinate GB Ovest: </span><span id="gbw_coords" class="coords"></span>
    </div>
    <div>
      <span>Coordinate WGS84: </span><span id="wgs84_coords" class="coords"></span>
    </div>
  </div>
</body>

CSS

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

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

JavaScript

//vado a registrare la nuova proiezione
 ol.proj.proj4.register(proj4);
 
 const firenze_gbw = [1681450.785672498, 4848967.319261061];

 const firenze_gmerc = ol.proj.transform(firenze_gbw, "EPSG:3003", "EPSG:3857");

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

		// uso jquery per poter selezionare i due elementi
    const gbw_coords_el = document.querySelector("#gbw_coords");
    const wgs84_coords_el = document.querySelector("#wgs84_coords");
    const map_dom = map.getTargetElement(); //// 
    //utilizzando jquery
    /*map_dom.on('mouseleave', function() {
    	gbw_coords_el.text('');
      wgs84_coords_el.text('')
    })*/
    
    // registriamo l'evento mouseleave sul DOM dell mappa 
    // che ci servirà per cancellare le coordinate (testo) dai due elementi DOM
    // adibiti all visualizzazione delle coordinate
    map_dom.addEventListener('mouseleave', function() {
    	gbw_coords_el.innerText = '';
      wgs84_coords_el.innerText = '';
    })
		//utilizziamo l'evento sulla mappa pointermove
    ///https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
    map.on('pointermove', function(event) {
      //event è ol.MapBrowserEvent 
      const gbw_coords = ol.proj.transform(event.coordinate, "EPSG:3857", "EPSG:3003");
      const wgs84_coords = ol.proj.transform(event.coordinate, "EPSG:3857", "EPSG:4326");
      gbw_coords_el.innerText = formatCoords(gbw_coords);
      wgs84_coords_el.innerText = formatCoords(wgs84_coords, 4);
    });
		
    // funzione che ha il solo compito di trasformare le coordinate avent dec cifre decimali
    function formatCoords(coords, dec) {
      dec = dec || 2;
      // .toFixed Converte un numero in stringa, lasciando solo n decimali:
      return coords[0].toFixed(dec) + ", " + coords[1].toFixed(dec);
    };