QGIS 2 web plugin and shape drawing option

I would like to be able to draw some features on the map generated by the QGIS2web plugin.

I found some Openlayers drawing plugin here:

https://cdn.rawgit.com/HamHamFonFon/ol3-drawFeatures/82f29a3f/examples/basic_use.html

But I don't know how to combine them together with my existing map.

I tried to plot the drawing variables in my map (the qgis2web.js file).

where between the following code:

    var layerSwitcher = new ol.control.LayerSwitcher({tipLabel: "Layers"});
  map.addControl(layerSwitcher);

    var searchLayer = new SearchLayer({
  layer: lyr_Chamberspoles_2,
  colName: 'Object',
  zoom: 18,
  collapsed: true,
  map: map
   });


  map.getView().fit([-22418.727413, 6814717.343345, -21916.579134, 6815076.983154], map.getSize());

I plotted something like this:

  var layerSwitcher = new ol.control.LayerSwitcher({tipLabel: "Layers"});
  map.addControl(layerSwitcher);

   var searchLayer = new SearchLayer({
  layer: lyr_Chamberspoles_2,
  colName: 'Object',
  zoom: 18,
  collapsed: true,
  map: map
  });


    map.addControl(searchLayer);
    document.getElementsByClassName('search-layer')[0]
    .getElementsByTagName('button')[0].className +=
   ' fa fa-binoculars';

    var vector_draw = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    })
   });

    var options = {
    "popup_form" : false,
    "draw": {
        "Point": true,
        "LineString": true,
        "Square": true,
        "Circle": true,
        "Polygon": true
    }
};

    var buttonsDrawControls = new ol.control.ControlDrawFeatures(vector_draw, options);
     map.addControl(buttonsDrawControls);

   map.getView().fit([-22418.727413, 6814717.343345, -21916.579134, 6815076.983154], map.getSize());

My map disappeared.

The full qgis2web.js file is here:

https://jsfiddle.net/641jnc3y/

My current map looks like this:

where I have some options:

• geolocation
• measurement tool
• search

could be possible to include an option for shape drawing?

Thanks

UPDATE:

Now I am basing on the following example:

https://openlayers.org/en/latest/examples/draw-features.html?q=draw

and I would like to do something like in the thread below:

https://gis.stackexchange.com/questions/263626/drawing-shapes-and-features-in-openlayers-4

where I picked up the code from the link below:

https://jsfiddle.net/jelle002/qh1npzet/

I've placed the <form> in my index.html page

and I found the drawing section in the qgis2web.js file

  var draw; // global so we can remove it later
  function addInteraction() {
  var type = 'LineString';
  draw = new ol.interaction.Draw({
  source: source,
  type: /** @type {ol.geom.GeometryType} */ (type),
  style: new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.2)'
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(0, 0, 0, 0.5)',
    lineDash: [10, 10],
    width: 2
  }),
  image: new ol.style.Circle({
    radius: 5,
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 0, 0.7)'
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    })
   })
  })
 });

and tried to combine it with the main.js file.

Finally, I got something like this:

  var draw; // global so we can remove it later
  function addInteraction() {
  var typeSelect = document.getElementById('type');
  var value = typeSelect.value;
  if (value === 'None'){
    } else {
        var geometryFunction;
        if(value !== 'None' && value !== 'Square' && value !== 'Box') {
            console.log(value)
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
            });
        } else if(value === 'Square'){
            console.log(value)
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction
            });
        } else if(value === 'Box'){
            console.log(value)
            value = 'Circle';
            geometryFunction = ol.interaction.Draw.createBox();
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction
            });
        };
        map.addInteraction(draw)
      };
    
   typeSelect.onchange = function () {
   map.removeInteraction(draw);
   addInteraction();
  };


 /*addInteraction();*/
 var type = 'LineString';
 draw = new ol.interaction.Draw({
  source: source,
  type: /** @type {ol.geom.GeometryType} */ (type),
  style: new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.2)'
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(255, 0, 0, 0.5)',
    lineDash: [10, 10],
    width: 2
  }),
  image: new ol.style.Circle({
    radius: 5,
    stroke: new ol.style.Stroke({
      color: 'rgba(255, 0, 0, 0.7)'
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    })
  })
 })
});

/var typeSelect = document.getElementById('type');/

It comes with the shapes, but I can't stop it.

I tried also something like this:

  if (value === 'None'){
    null
      } else {
         var geometryFunction;

but it doesn't help either

and console says:

  **Uncaught TypeError: Cannot read property 'get' of null
     at qgis2web.js:381
     at h (Map.js:92)
     at VectorLayer.js:276
     at p (ExecutorGroup.js:176)
     at t.execute_ (Executor.js:694)
     at t.executeHitDetection (Executor.js:803)
     at t.forEachFeatureAtCoordinate (ExecutorGroup.js:201)
     at e.forEachFeatureAtCoordinate (VectorLayer.js:267)
     at e.forEachFeatureAtCoordinate (Map.js:123)
     at e.forEachFeatureAtPixel (PluggableMap.js:489)**

from QGIS 2 web plugin and shape drawing option