Drawing new features with QGIS2web plugin

Question

I would like to draw shapes with QGIS2web plugin

According to the query here:

Add OpenLayers3 controls to qgis2web project

I should be able to develop the qgis2web.js file further behind the ol.Map section.

I found a good drawing shapes test for Openlayers here:

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

from where I picked up the relevant files. I did the following steps:

1. Linked the essential scripts and csses into my index.html page:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   

2. Added, and next linked the following script and css files:

       <link rel="stylesheet" href="./resources/ol3-drawcontrols.css">
       <script src="resources/ol3-controldrawfeatures.js"></script>
   

3. Placed the following section:

     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'
           })
       })
   })
    });
   

in the layers.js file

4. Situated another section:

       var options = {
      "style_buttons" : null, /** @var {string} glyphicon|default */
      "draw": {
       "Point": true,
       "LineString": true,
       "Square": true,
       "Circle": true,
       "Polygon": true
   }
    };
   

before the

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

in the qgis2web.js file

1. At the finish I placed the following line:

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

but the map is gone.

The console says:

Uncaught TypeError: ol.inherits is not a function at ol3-controldrawfeatures.js:209 at ol3-controldrawfeatures.js:16 at ol3-controldrawfeatures.js:18

which refers to:

at ol3-controldrawfeatures.js 209 ol.inherits(ol.control.ControlDrawFeatures, ol.control.Control); at ol3-controldrawfeatures.js:16 root.ControlDrawFeatures = factory(root.ol); at ol3-controldrawfeatures.js:18 }(this, function(ol) {

The similar problem was raised here:

ol.inherits in OpenLayers 6

Uncaught TypeError: Cannot set property 'Ending' of undefined at new ol.control.ControlDrawFeatures (ol3-controldrawfeatures.js:24) at qgis2web.js:135

which refers to:

at ol3-controldrawfeatures options.draw.Ending = true;

at qgis2web.js var buttonsDrawControls = new ol.control.ControlDrawFeatures({vector_draw, options});

UPDATE:

After expanding the draw.on('drawend', function

 draw.on('drawend',
  function(evt) {
    measureTooltipElement.className = 'tooltip tooltip-static';
    measureTooltip.setOffset([0, -7]);
    // unset sketch
    sketch = null;
    // unset tooltip so that a new one can be created
    measureTooltipElement = null;
    createMeasureTooltip();
    ol.Observable.unByKey(listener);
  }, this);
 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: sourcedraw,
                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: sourcedraw,
                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: sourcedraw,
                type: /** @type {ol.geom.GeometryType} */ (value),
                geometryFunction: geometryFunction
            });
        };
        map.addInteraction(draw)
     };

I still get an error:

Uncaught TypeError: ol.inherits is not a function at ol3-controldrawfeatures.js:209 at ol3-controldrawfeatures.js:16 at ol3-controldrawfeatures.js:18

The full code to my map is available here

What have I done wrong?

IInd approach

I used another code, which seems to be even better than the first one. Basically i am able to draw all the features except of the rectangle.

where after the selection my cursour is sticked to the map dragging it unless I leave the map canvas completely.

After implementation to my JavaScript file, which you can find below:

https://jsfiddle.net/t0dnpL73/

I am getting an error:

Uncaught TypeError: Cannot read properties of null (reading 'getGeometry') at e.modifyDrawing_ (Draw.js:688) at e.handlePointerMove_ (Draw.js:590) at e.handleEvent (Draw.js:495) at e.handleMapBrowserEvent (PluggableMap.js:846) at e.dispatchEvent (Target.js:115) at e.relayEvent_ (MapBrowserEventHandler.js:230)

referring me to the draw.js file, which i can find anywhere in my Qgis2web map repositories.

The issue is very similar to this thread:

https://stackoverflow.com/questions/52848282/drawing-and-modifying-vector-features-openlayers

how can I fix this problem? Is there something I could change easily? I tried to change

var rectangleInteraction = new ol.interaction.Draw({
type: 'LineString',

to type: 'Polygon' but it's still the same.

Answer 1

The deprecated ol.inherits method is easy to add back

<script src="./resources/ol.js"></script>
<script>
  ol.inherits = function(child,parent) {
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;
  }
</script>

But there is no guarantee that old third party add-ons will work with later versions of OpenLayers than they were designed for as there have been many other changes between version 3 and 6.