2

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

  1. 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

enter image description here

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.

6
  • 1
    Without seeing the complete code as it is (not only isolated excerpts), it all would be just guessing. Any errors in the browser debugger console?
    – TomazicM
    Nov 12 '20 at 18:14
  • @TomazicM you are right. I should have to see the console. I did it now. My query has been updated.
    – MKR
    Nov 13 '20 at 8:48
  • It looks like the OL version you are using is not the right one for ol3-controldrawfeatures.js you are trying to use. Try replacing your current version of OL with version the example above is using: cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.css and cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.js
    – TomazicM
    Sep 14 '21 at 14:46
  • And you should put <script src="./resources/ol3-controldrawfeatures.js"></script> before <script src="./resources/qgis2web.js"></script>.
    – TomazicM
    Sep 14 '21 at 14:52
  • @TomazicM could you explain to me why in the 2nd example I constantly get the error cannot read properties or null? I have completely no idea how to fix it.
    – MKR
    Sep 14 '21 at 15:11
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.

2
  • OK, thank you. I will check tomorrow. However, I shouldn't worry about the changes between OpenLayers 3 and 6. The QGIS2Web plugin still works at 3.0 I guess, as all the files are dated back to Oct 2020.
    – MKR
    Sep 14 '21 at 20:08
  • Unnfortunatey it doesn't work. Instead of it I am getting error: ol3-controldrawfeatures.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
    – MKR
    Sep 21 '21 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.