Multiple webgpsmap improvements

[jacopotediosi]

Description

This PR is a nearly complete rewrite of the webgpsmap plugin frontend to improve responsible design on mobile devices and usability and performance even with hundreds of thousands of markers on the map.

In detail, the following changes have been made to webgpsmap:

• updated javascript libraries
• improved screen space management and responsive design (rewriting the html code in modern HTML5 using flexbox)
• calibrated layers max zoom and markerClusterGroup settings to improve map usability based on the Access Point marker size
• the search field now shows an X button to clear the field in browsers that support it (e.g. Chrome)
• added first seen and last seen dates for each AP on the map
• added scale to the map
• implemented current location via leaflet-locatecontrol library (only in secure contexts)
• added offline map download button
• various tricks to improve performance in the case of maps with numerous APs (use of template literals, reduced complexity in creating and applying search filter, ...)
• improved code readability and general refactor (e.g., better subdivision into functions, removed unused or useless code, improved indentation, updated comments, moved variables as much as possible inside their scope)

Motivation and Context

The map from the webgpsmap plugin was outdated and the last update was years ago.
The JavaScript libraries used were several versions behind.
The usability on mobile was not optimal (for example, the lack of definition of the viewport caused small texts). Various graphic errors were evident even to the naked eye (texts not centered vertically, the filter bar overlapped the map, ...).

Below are the screenshots of how the old map looked and how the new one looks. The graphical differences may not be so obvious in these screenshots, but behind the scenes it changes a lot.

Old:

New:

• I have raised an issue to propose this change (required)

How Has This Been Tested?

I have been testing the code for this PR for two weeks in my pwnagotchi instance.

I also measured the performance (empirically) of the new code compared to the old one:

• I added the console.time('A'); and console.timeEnd('A'); statements at the start and the end of the drawPositions() function
• I loaded the map page and simulated loading 100k markers into the map executing the following code via the browser console:

positions = [];
for (let i = 0; i < 100000; i++) {
    positions[`key${i}`] = {
        ssid: `ssid${i}`,
        mac: `00:0a:95:9d:68:${i}`,
        type: 'type',
        acc: Math.random() * 100,
        pass: `password${i}`,
        lat: (Math.random() * 180 - 90).toFixed(6),
        lng: (Math.random() * 360 - 180).toFixed(6)
    };
}

• I pressed enter in the filter field to call the drawPositions() function

Here are the times I measured:

• OLD: 15070ms
• NEW: 7554ms

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project. --> I'm pretty sure the new code is more elegant than the old one. I spent a lot of time rewriting the code in the smartest way possible.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I've read the CONTRIBUTION guide
• I have signed-off my commits with git commit -s

[Mr-Process]

Update

[Mr-Process]

Bot update