Interactive Demo

Draw polygons on the map and watch the event log update in real time. Every geometry change fires onDrawChange with the current GeoJSON.
Source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GeoCertaMap — Live Demo</title>
  <link rel="stylesheet" href="https://cdn.geocerta.io/geocerta-map/v0.1.0/geocerta-map.css" />
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { display: flex; height: 100vh; font-family: sans-serif; overflow: hidden; }
    #map { flex: 1; }
    #event-log {
      width: 280px;
      display: flex;
      flex-direction: column;
      background: #0f172a;
      border-left: 1px solid #1e293b;
    }
    /* ... styles omitted for brevity, see CDN Installation for full CSS */
  </style>
</head>
<body>
  <div id="map"></div>
  <aside id="event-log">
    <header>
      <span>Event log</span>
      <button id="btn-clear-log">Clear</button>
    </header>
    <div id="messages"></div>
  </aside>

  <script src="https://cdn.geocerta.io/geocerta-map/v0.1.0/geocerta-map.umd.js"></script>
  <script>
    const messages = document.getElementById('messages');

    function log(eventName, cssClass, payload) {
      const time = new Date().toLocaleTimeString('en-GB', {
        hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit',
      });
      const el = document.createElement('div');
      el.className = 'msg';
      const payloadText = payload === undefined ? '' : '\n' + JSON.stringify(payload, null, 2);
      el.innerHTML =
        '<span class="msg-time">' + time + '</span> ' +
        '<span class="msg-event ' + cssClass + '">' + eventName + '</span>' +
        (payloadText ? '<div class="msg-payload">' + payloadText + '</div>' : '');
      messages.prepend(el);
    }

    const geomap = new GeoCertaMap.GeoCertaMap({
      container: '#map',
      center: [-0.118, 51.509],
      zoom: 12,
      toolbar: {
        modes: ['polygon', 'select'],
        position: 'top-right',
      },
      onReady:         ()  => log('ready',           'ready',    undefined),
      onFeatureCreate: (f) => log('feature:create',  'create',   { id: f.id, type: f.geometry.type }),
      onFeatureUpdate: (f) => log('feature:update',  'update',   { id: f.id }),
      onFeatureDelete: (f) => log('feature:delete',  'delete',   { id: f.id }),
      onModeChange:    (m) => log('mode:change',     'mode',     m),
      onDrawChange:    (g) => log('geometry:change', 'geometry', g),
    });

    document.getElementById('btn-clear-log').addEventListener('click', () => {
      messages.innerHTML = '';
    });
  </script>
</body>
</html>