workshop ol layer selection

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>
    Tipo di selezione
    <select id="seltype">
      <option value="singlepoint">Puntuale - singola</option>
      <option value="multipoint">Puntuale - multipla - solo tipo A</option>
      <option value="area">Areale</option>
    </select>
  </div>
  <div id="results" class="results">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>quota</th>
          <th>Tipo</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

CSS

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

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

.results {
  font-size: 14px;
  margin-top: 10px;
}

.results table {
  border-collapse: collapse;
}

.results table,
th,
td {
  border: 1px solid grey
}

.results td {
  padding: 3px;
}

.results td.fieldname {
  font-weight: bold
}

JavaScript

const pois = {
    "type": "FeatureCollection",
    "crs": {
      "type": "name",
      "properties": {
        "name": "urn:ogc:def:crs:EPSG::3857"
      }
    },
    "features": [{
      "type": "Feature",
      "properties": {
        "id": 1,
        "tipo": "A",
        "quota": 91.63
      },
      "geometry": {
        "type": "Point",
        "coordinates": [1246198.7546599496, 5435469.6013667583]
      }
    }, {
      "type": "Feature",
      "properties": {
        "id": 3,
        "tipo": "B",
        "quota": 7.75
      },
      "geometry": {
        "type": "Point",
        "coordinates": [1251597.8380584808, 5431734.189015449]
      }
    }, {
      "type": "Feature",
      "properties": {
        "id": 2,
        "tipo": "A",
        "quota": 51.26
      },
      "geometry": {
        "type": "Point",
        "coordinates": [1247579.9155293412, 5426382.1906465562]
      }
    }, {
      "type": "Feature",
      "properties": {
        "id": 21,
        "tipo": "B",
        "quota": 18.34
      },
      "geometry": {
        "type": "Point",
        "coordinates": [1244064.2333163442, 5429066.0373359425]
      }
    }, {
      "type": "Feature",
      "properties": {
        "id": 5,
        "tipo": "C",
        "quota": 68.02
      },
      "geometry": {
        "type": "Point",
        "coordinates": [1255254.7753603929, 5427182.6361504076]
      }
    }, {
      "type": "Feature",
      "properties": {
        "id": 4,
        "tipo": "B",
        "quota": 77.34
      },
      "geometry": {
        "type": "Point",
        "coordinates": [1255992.4408247273, 5432267.81935135]
      }
    }, {
      "type": "Feature",
      "properties": {
        "id": 20,
        "tipo": "B",
        "quota": 85.33
      },
      "geometry": {
        "type": "Point",
        "coordinates": [1252806.3538191987, 5435296.9562580846]
      }
    }, {
      "type": "Feature",
      "properties": {
        "id": 19,
        "tipo": "B",
        "quota": 54.03
     ...