ol-geocoder 4.3.3 dosn't work in qgis2web preview

[andreaordonselli]

Hello, I'm the maintainer of qgis2web and the openlayers export uses ol-geocoder.
With version 4.2.0 I had no problems viewing the control in the qgis2web preview window (created with the old QtWebKit) while with subsequent versions I no longer see the icon. Can you think of a reason?

geocoder 4.2.0 where search no longer works

geocoder 4.3.3 (the lens icon does not appear)

It is very important for users to view the icon in the preview. Thank you.

[Dominique92]

Hello. It seems that you don't display the whole ol-geocoder control as the gap to display it isn't reserved.
Difficult to debug on a screen copy, I didn't succeed to reproduce the problem on my side.
Can you provide to me an html access to the 4.3.3 faulty page ?
Also, can you give me more context ? browser, system, ...
and/or any code repository ...

*** EDIT *** is there any js error on the console ?

[Dominique92]

The position of the geocoder control should be set by olwriter.py#L424-L425
I am unable to understand how %dpx is calculated but it seems that the next button don't take care of the shift
May be the next button hide the geocoder button ?

PLS have a look on glass-button-customisation glass-button-customisation. Detail may have been changed from 4.2.0

[andreaordonselli]

Hi, this is exactly the problem, there is no debug environment where I can understand the problem and help myself and you. Basically the QGIS-QtWebKit preview is a fairly old web page reader, but it does not provide tools of any kind.

In fact, if I export the map using the latest version of ol-geocoder everything works wonderfully, but it is precisely in the preview that the icon from version 4.2.0 does not appear on.

I would think of a css problem, maybe you changed something like containers or elements, or did you use recent css methods that are only supported by recent browsers? It makes me think of the :has selector of css, which is still not fully supported today.

Thank you and sorry for not being able to provide other elements.

[Dominique92]

Yes, I changed something : I use unicode characters to display the loop
content: "\1F50D;
The fairly old web page reader may not know this unicode block
I tried to put a non valid unicode but it should show a blank button or a "?" button.

You can tr to display a basic char. Try to add the following CSS

.ol-geocoder .gcd-gl-btn:after {
  content: "Q" !important;
}

[andreaordonselli]

In qgis2web preview the space reserved for icon is present

But I'm changing my mind about whether it's a css problem because if I comment python code that adds custom css and completely delete ol-geocoder.min.css file, the control is still not present in the preview.

qgis2web preview before export (completely without css)

qgis2web preview after export (completely without css)

The preview can't show it even without css

I also noticed that by inserting the geocoder, the attribution control that is programmed exactly below in the qgis2web.js file disappears, meaning that there is an interruption in the geocoder control.

The problem now I think is in ol-geocoder.js
I also failed every attempt to print the qtwebkit debug to the qgis python console.

[Dominique92]

Hi Andrea,

The first step is to be sure that we well understand the issue.
The main difference with 4.2.0 is that the loop image come from an Unicode char that can be misinterpreted by very old browsers.
Could you copy the following css at the end of your ol-geocoder.css (or ol-geocoder.min.css) ?
This will overwrite the Unicode button & come back to the previous image.

.ol-geocoder .gcd-gl-btn,
.ol-geocoder .gcd-txt-glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5em;
  height: 100%;
  background-size: 1.38889em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23333' d='M29.156 29.961l-.709.709a2.006 2.006 0 0 1-2.838 0l-5.676-5.674c-.656-.658-.729-1.644-.281-2.412l-3.104-3.102a9.975 9.975 0 0 1-5.965 1.979C5.043 21.461.552 16.97.552 11.43S5.043 1.398 10.583 1.398c5.541 0 10.031 4.491 10.031 10.032 0 2.579-.98 4.923-2.58 6.7l3.035 3.035c.768-.447 1.754-.375 2.41.283l5.676 5.674c.784.785.784 2.056.001 2.839zM18.088 11.389c0-4.155-3.369-7.523-7.524-7.523a7.523 7.523 0 1 0-.001 15.046 7.525 7.525 0 0 0 7.525-7.523z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center; 
}

.ol-geocoder .gcd-gl-btn:after,
.ol-geocoder .gcd-txt-glass:after {
  content: "";
}

[andreaordonselli]

Thanks for your help first of all.
I'm sure it's not a css problem.
Otherwise the map in the preview would be successful, but elements written later in the code (such as the attribution and the layerswitcher) are missing.
So there is a break in the javascript.
It can also be understood from the fact that by completely eliminating the css file you get the same result, the problem is therefore in the ol-geocode.js file and I'm pretty sure that the problem is linked to the fact that qtwebkit, the tool that creates the webmap of preview, it is obsolete therefore it requires obsolete code, an example: forEach is not allowed, you must use for (var i = 0; i < element.length; i++) {
Now it's all about understanding which part of the code to change, but without debugging I think it's impossible, can you think of anything?

PS:
I've just modified:
src:'data:image/svg+xml;charset=utf-8,<svg width="26" height="42" viewBox="0 0 26 42" xmlns="http://www.w3.org/2000/svg"><polygon points="1,18 14,42 25,18" fill="rgb(75,75,75)" /><ellipse cx="13" cy="13" rx="13" ry="13" fill="rgb(75,75,75)" /><ellipse cx="13" cy="14" rx="6" ry="6" fill="yellow" /></svg>'
to
src: './resources/marker.png'

[Dominique92]

Hi Andrea

May be the difference is that I removed any babel transcription form the production distribution
Ol-geocoder is now only supported on brothers compatible with HTML 5, CSS 3 & ECMAscript 2021
See compat table : https://compat-table.github.io/compat-table/es2016plus/
(Openlayers supports HTML5 and ECMAScript 2017)

There are many reasons for that:

• Since IE 11 & iOS 7 have been disactivated, most (quite all) of the browsers are now updated on a regular basis for security reasons & include most recent features to be able to access to modern websites
• There is no reason to deliver degraded distribution not including the most recent JS evolution (speed, efficiency, security, …)
• Difficulties to support babel & dependencies versions that evolute quickly

I understand the issue to comply with very old integration or test tool but I don’t think that it would be a good idea to come back to support older language compatibilities.
Let me know if you have a better idea.

[Dominique92]

*** EDIT ***
I just did a lint check : ol-geocoder is compliant ECMAscript 2018^
(Usage of ... iterator)

[andreaordonselli]

I'm quite convinced that the problem is the update to ECMAscript 2018 but you were right to update ol-geocoder and you absolutely must not go back.

At the moment I have restored version 4.2.0 of ol-geocoder; during the preview of qgis2web the icon is visible but the search does not work; but producing the web map ol-geocoder works like a charm.

QtWebKit, which generates the preview of qgis2web, is old, older than 2018, I will still work to transform the preview from QtWebKit to QtWebEngine, but I spent 2 days on it a little while ago with no result and I'm quite discouraged, maybe I should look for help.
Do you have ideas?

Thanks for now. Having understood the problem, I would say that you can close the issue.

Thanks again.

[Dominique92]

For sure, maintain the production & test environment is a tough task, sometime more challenging than the product.
I have the same problem with the sass, lint & testcafe suite on ol-geocoder that are evolving or end of support. I do need to rebuild everyting from scratch now.