<bmx-geo-editor>

<bmx-geo-editor id="ex-geo" label="Hollow Farm - field boundaries"></bmx-geo-editor>
<p class="note" id="ex-geo-out" role="status" style="margin: 12px 0 0"></p>

<bmx-geo-editor id="ex-grid" label="Street lights - British National Grid" table="false" style="margin-block-start: 24px"></bmx-geo-editor>
<p class="note" id="ex-grid-out" role="status" style="margin: 12px 0 0"></p>

<script type="module">
  await customElements.whenDefined('bmx-geo-editor');

  // An invented farm: field boundaries in longitude and latitude, one with a pond cut out of it,
  // drawn over a background of invented roads, a stream and woodland. Hill Field was drawn over the
  // edge of Top Piece: the Issues tab shows the overlap and fixes it.
  const at = (x, y) => [-1.75 + x * 0.0016, 52.05 + y * 0.001];
  const field = (id, name, crop, organic, surveyed, ring, holes = []) => ({
    type: 'Feature',
    id,
    properties: { name, crop, organic, surveyed },
    geometry: { type: 'Polygon', coordinates: [ring.map(([x, y]) => at(x, y)), ...holes.map(h => h.map(([x, y]) => at(x, y)))] },
  });
  const editor = document.getElementById('ex-geo');
  editor.background = [
    {
      name: 'Roads, stream and woods',
      data: {
        type: 'FeatureCollection',
        features: [
          { type: 'Feature', properties: { fill: 'rgba(76, 145, 65, 0.28)', stroke: 'rgba(76, 145, 65, 0.6)' }, geometry: { type: 'Polygon', coordinates: [[at(-1, 7), at(3, 8), at(4, 11), at(-1, 11), at(-1, 7)]] } },
          { type: 'Feature', properties: { fill: 'rgba(76, 145, 65, 0.28)', stroke: 'rgba(76, 145, 65, 0.6)' }, geometry: { type: 'Polygon', coordinates: [[at(11, -2), at(14, -2), at(14, 2), at(12, 1), at(11, -2)]] } },
          { type: 'Feature', properties: { stroke: '#7fb2e5', 'stroke-width': 3 }, geometry: { type: 'LineString', coordinates: [at(-1, 2.5), at(2, 3.2), at(5, 2.4), at(8, 3.6), at(11, 3), at(14, 4)] } },
          { type: 'Feature', properties: { stroke: '#d9a441', 'stroke-width': 4 }, geometry: { type: 'LineString', coordinates: [at(-1, -1), at(14, -1.2)] } },
          { type: 'Feature', properties: { stroke: '#c9ccd1', 'stroke-width': 2 }, geometry: { type: 'LineString', coordinates: [at(6.5, -1.1), at(6.4, 4), at(6.8, 9)] } },
        ],
      },
    },
  ];
  editor.layer = {
    type: 'FeatureCollection',
    name: 'Hollow Farm',
    features: [
      field(1, 'Long Ground', 'Winter wheat', false, '2026-05-14', [[0, 0], [6, 0], [6, 2.4], [0, 2]], [[[2, 0.6], [2.8, 0.6], [2.8, 1.2], [2, 1.2]]]),
      field(2, 'Brook Meadow', 'Permanent grass', true, '2026-06-02', [[0, 2.6], [6, 2.9], [6, 6], [0, 6.4]]),
      field(3, 'Top Piece', 'Spring barley', false, '2026-04-21', [[7, 0], [12, 0.2], [12, 3.2], [7, 3.4]]),
      field(4, 'Hill Field', 'Oilseed rape', false, null, [[7, 3.3], [12, 3.1], [12.5, 7], [7, 7.5]]),
      field(5, 'Little Close', 'Permanent grass', true, '2026-06-02', [[0, 6.8], [3, 6.6], [3, 8.6], [0, 9]]),
    ],
  };

  const out = document.getElementById('ex-geo-out');
  const report = async () => {
    const layer = await editor.getLayer();
    let area = 0;
    for (const f of layer.features) area += (await editor.measure(f.id))?.area ?? 0;
    out.textContent = `${layer.features.length} fields, ${(area / 10000).toFixed(2)} ha in all (geodesic, on the WGS84 ellipsoid).`;
  };
  editor.addEventListener('bmxChange', report);
  await report();

  // Street lights as a council keeps them: a CSV of eastings and northings on the British National Grid.
  // The editor reads the grid from the column names, draws the lights on the map and keeps the numbers as they are.
  const grid = document.getElementById('ex-grid');
  const rows = ['Asset,Easting,Northing,Lamp,Height (m),Installed'];
  for (let i = 0; i < 18; i += 1) rows.push(`SL-${String(i + 1).padStart(3, '0')},${(431200 + (i % 6) * 42.5).toFixed(1)},${(206400 + Math.floor(i / 6) * 55 + (i % 2) * 6).toFixed(1)},${i % 3 ? 'LED 35W' : 'LED 50W'},${i % 3 ? 6 : 8},2025-0${1 + (i % 9)}-15`);
  await grid.load(rows.join('\n'));
  grid.coordinates = 'degrees';
  const gridOut = document.getElementById('ex-grid-out');
  grid.addEventListener('bmxSelect', e => {
    const f = e.detail.features[0];
    gridOut.textContent = f ? `${f.properties.Asset}: easting ${f.geometry.coordinates[0]}, northing ${f.geometry.coordinates[1]} - ${f.properties.Lamp}` : '';
  });
</script>