Measure symbol and "shadow" missing when opening in Edge and Chrome

[Cordillera94]

First time using GitHub and fairly new to QGIS so please bear with me.

Any web map I export is missing the following when opened using Microsoft Edge or Google Chrome:

• measure/ruler icon ("shadow" is still there)
• "shadow" around zoom icons
• "shadow" around layers list

They are not missing if I open the same web map using Internet Explorer or Firefox.

Edit: I am exporting to a Leaflet web map

QGIS version: 3.10.3
qgis2web version: 3.14.0
Microsoft Edge version: 44.17763.831.0
Google Chrome version: 81.0.4044.138
Internet Explorer version: 11.1217.17763.0
Firefox version: 76.0.1

Firefox:

Microsoft Edge:

[tomchadwin]

A couple of questions:

1. Are you seeing these issues when looking at local copies of the files? If so, are you able to upload them to a web address, and browse them there? Does that make a difference?
2. Are there any errors in the browser console (hit F12 in your browser to show the console)?

[tomchadwin]

I can see these issues. However, I'm not having a lot of joy understanding the cause or fixing them. Can anyone help?

[jipexu]

Hi
Working for me with chrome and safari and FF (all latest version) in my mac
qgis 3.14.0
qgis2web 3.16.0
for leaflet and openlayer

howewer we can notice that the script(s) call some fonts that are not in the folder /webfonts generated by qgis2web ... (probably is a be different issue)

[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-brands-400.woff2
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-brands-400.woff
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-brands-400.ttf
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-brands-400.svg#fontawesome
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-regular-400.woff2
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-regular-400.woff
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-regular-400.ttf
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-regular-400.svg#fontawesome
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-solid-900.woff
[Error] Not allowed to load local resource: file:///Users/jpb/Documents/Chine/qgis2web_2020_07_05-08_34_04_510344/webfonts/fa-solid-900.svg#fontawesome

[abodsalas]

I'm having the same issue.

However, I've used Qgis2web for a few years without any issues.
If i open previous index.html generated files, the measure icon is OK.
The error probably has to do with the plugin.

QGIS version: 3.16.1-Hannover
qgis2web version: 3.16.0
Google Chrome version: Versión 87.0.4280.141

SOLVED IT!!!

I was able to solve it by copying a previous versión of leaflet.js in the /js folder of the new map.
Hope this helps....

Andrés Bodini Salas

[Mikester-Calgary]

Would it make sense to compare a leaflet.js that DOES work with one that DOES NOT and see what is causing the problem and tell Tom so we can have a permanent fix?

[Mikester-Calgary]

That swap the leaflet.js procedure didn't work for me anyway.

[abodsalas]

I have the lastest QGIS 3.30 with an up to date QGIS2Web plugin 3.1.6 (June 2020) on a Windows 10 machine.

I still have the same issue.
I discovered QGIS2Web generates a Leaflet map using Leaflet version 1.6.0 !!!

That seems to be the problem. If I replace Leaflet.js with an older version it works OK !!!
Leaflet 1.6.0 seems to be the only one with issues.

Unfortunately Version 1.9.3 of leaflet generated some issues when measuring. It panned the entire map when thrying to use the measure tool.
I finally had to use Leaflet version 1.5.1 in order to make all work like it should.

Solution that worked: Replaced leaflet.js supplied by qgis2web with leaflet.js version 1.5.1
Downloaded it from: https://github.com/Leaflet/Leaflet/releases/tag/v1.5.1

[nameloCmaS]

The latest version of qgis2web uses Leaflet version 1.7.1. Have you tried that version?

Unless rewriting the exported html and JavaScript code, all the exported files in the same file structure should be used.

Edit: noted the edit and 1.5.1 - if that works great but any other issues try 1.7.1

Edit2: misunderstood the issue. Will review why older Leaflet works and 1.7.1 doesn't.

[abodsalas]

Hi nameloCmaS:

1. With leaflet.js version 1.7.1 the measure tool works as expected.
   Unfortunatelly it has issues with the sidepanel I use for my maps.
   Im using the Sidebar v2 library: https://github.com/Turbo87/sidebar-v2

2. I'm using QGIS 3.30 on a Windows 10 machine.
   I'm also using Qgis2web version 3.16.
   When you create the webmap for Leaflet, the leaflet.js version used is 1.6.0.
   The QGIS plugin manager doesn't allow any updates because its says it's up to date.

[andreaordonselli]

In the latest versions of Chrome and Edge the problem has been resolved. I ask you to reopen the issue if there are further problems.