index.html

<html>
  <head>
    <title>OpenLayers Editor</title>
    <link rel="stylesheet" type="text/css" href="style/ole.css" />
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/ol@10.1.0/ol.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@4.2.0/dist/maplibre-gl.css"
    />
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="https://unpkg.com/ol@10.1.0/dist/ol.js"></script>
    <script src="https://unpkg.com/maplibre-gl@4.2.0/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/jsts@2.11.3/dist/jsts.min.js"></script>
    <script src="index.js"></script>
    <div id="app">
      <div id="header">
        <nav>
          <div id="brand">OpenLayers Editor</div>
          <div id="links">
            <a href="#" class="active">Demo</a>
            <a href="api.html">API</a>
            <a
              target="_blank"
              href="https://github.com/geops/openlayers-editor"
            >
              Code
            </a>
          </div>
        </nav>
      </div>
      <div id="map"></div>
      <div id="promo">
        <a href="https://geops.com/en/career" target="_blank">
          <div id="promo-text">Join the team!</div>
        </a>
      </div>
      <div id="copyright">
        <a href="https://www.sbb.ch/" target="_blank">© SBB/CFF/FFS</a>|
        <a href="https://www.geops.ch/" target="_blank">© geOps Tiles</a>|
        <a href="https://www.openstreetmap.org/about/" target="_blank">
          © OpenStreetMap Contributors
        </a>
        |
        <a href="https://www.openmaptiles.org/" target="_blank">
          © OpenMapTiles
        </a>
        |
        <a
          href="https://geops.com/en/imprint"
          target="_blank"
          rel="noopener noreferrer"
        >
          Imprint
        </a>
        |
        <a
          href="https://geops.com/en/privacy"
          target="_blank"
          rel="noopener noreferrer"
        >
          Privacy
        </a>
        |
        <a
          href="https://geops.com/en"
          target="_blank"
          rel="noopener noreferrer"
        >
          About geOps
        </a>
      </div>
    </div>
    <script type="text/javascript">
      var editLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          wrapX: false,
        }),
      });

      // Code taken from https://openlayers.org/en/latest/examples/mapbox-layer.html
      var mbMap = new maplibregl.Map({
        container: 'map',
        center: ol.proj.toLonLat([873708.375917, 6105425.847789]),
        attributionControl: false,
        interactive: false,
      });

      // Get the public api key
      fetch('https://backend.developer.geops.io/publickey')
        .then((response) => response.json())
        .then(function (data = {}) {
          mbMap.setStyle(
            'https://maps.geops.io/styles/travic_v2/style.json?key=' + data.key,
          );
        });

      // Code taken from https://openlayers.org/en/latest/examples/mapbox-layer.html
      var mbLayer = new ol.layer.Layer({
        render: function (frameState) {
          if (!mbMap) {
            return null;
          }
          var canvas = mbMap.getCanvas();
          var viewState = frameState.viewState;
          var visible = mbLayer.getVisible();
          canvas.style.position = 'absolute';
          canvas.style.display = visible ? 'block' : 'none';

          var opacity = mbLayer.getOpacity();
          canvas.style.opacity = opacity;

          // adjust view parameters in mapbox
          var rotation = viewState.rotation;
          mbMap.jumpTo({
            center: ol.proj.toLonLat(viewState.center),
            zoom: viewState.zoom - 1,
            bearing: (-rotation * 180) / Math.PI,
            animate: false,
          });
          if (!(
            canvas.width === Math.floor(frameState.size[0] * frameState.pixelRatio) &&
            canvas.height === Math.floor(frameState.size[1] * frameState.pixelRatio)
          )) {
            mbMap.resize();
          }

          mbMap.redraw();

          return mbMap.getCanvas();
        },
      });

      var map = new ol.Map({
        layers: [mbLayer, editLayer],
        target: 'map',
        view: new ol.View({
          center: [873708.375917, 6105425.847789],
          zoom: 15,
        }),
        keyboardEventTarget: document,
      });

      var editor = new ole.Editor(map);

      var cad = new ole.control.CAD({
        source: editLayer.getSource(),
      });

      var draw = new ole.control.Draw({
        source: editLayer.getSource(),
      });

      var drawLine = new ole.control.Draw({
        type: 'LineString',
        source: editLayer.getSource(),
      });

      var rotate = new ole.control.Rotate({
        source: editLayer.getSource(),
      });

      var drawPoly = new ole.control.Draw({
        type: 'Polygon',
        source: editLayer.getSource(),
      });

      var modify = new ole.control.Modify({
        source: editLayer.getSource(),
      });

      var buffer = new ole.control.Buffer({
        source: editLayer.getSource(),
      });

      var union = new ole.control.Union({
        source: editLayer.getSource(),
      });

      var intersection = new ole.control.Intersection({
        source: editLayer.getSource(),
      });

      var difference = new ole.control.Difference({
        source: editLayer.getSource(),
      });

      editor.addControls([
        cad,
        draw,
        drawLine,
        drawPoly,
        modify,
        rotate,
        buffer,
        union,
        intersection,
        difference,
      ]);

      var ls = new ole.service.LocalStorage();

      editor.addService(ls);

      // For tests purpose
      window.editor = editor;
      window.editLayer = editLayer;
    </script>
  </body>
</html>