Maps

Using the below as some examples I pulled from another post.
It would be really nice if we could switch between the different map layers without refreshing the page.
Like google, you can choose the different layers in say the corner and the layer would switch in stead of going into the settings and pasting in the examples below.
My question is, How hard would that be to implement?

Examples of tile servers:

Google Road:
https://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga
Google Satellite:
https://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}&s=Ga
ArcGis Topo:
https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png
ArcGis Imagery:
https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png
Wikimedia (OSM-based):
https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png

Probably not too hard, if you know what you are doing.

To get started on my little adventure,
I have some coding skills but am not a pro by any means...

Here is what I did, but it isn't working.
When I select one of the new options from the server menu it wont load correctly and I then have to clear the DB server table's map field, then it comes back.

Question is, would this even work? or is this a completely wrong approach...

en.json:

"mapGoogleRoad": "Google Road",
"mapGoogleSat": "Google Satellite",

app.min.js and BaseMap.js

case 'googleRoad':
     layer = new ol.layer.Tile({
          source: new ol.source.XYZ({
               url: 'https://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga',
               attributions: ''
          })
     });
break;
case 'googleSat':
     layer = new ol.layer.Tile({
          source: new ol.source.XYZ({
               url: 'https://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}&s=Ga',
               attributions: ''
          })
     });
break;

MapTypes.js

{
     key: 'googleRoad',
     name: Strings.mapGoogleRoad
 }, {
     key: 'googleSat',
     name: Strings.mapGoogleSat
},

Once I enabled debug it started working....

OK, so I started trying to figure it out on my own and this is what i got.
I know it is the wrong way but i am really trying to figure it out.
Goal #1:
allow for quick changing of the map layer without refresh.

Steps taken:
I took the clearable combobox from the server menu and placed it on the main window next to the option button.

Map.js
I added this code below the settingsMenu code

,{
            handler: 'onComboChange',
            xtype: 'clearableComboBox',
            name: 'map',
            store: 'MapTypes',
            displayField: 'name',
            valueField: 'key'
         }```

ClearableComboBox.js
I added a listener below the triggers

```javascript
,
listeners: {
    select: function(newVal, oldVal) {
    var dialog, store, record, server;
        var dialog = Ext.create('Traccar.view.dialog.Server');
    server = Traccar.app.getServer();
    server.set('map',newVal.value);
        dialogFrame = dialog.down('form');
    dialogFrame.loadRecord(server);
        dialogFrame.updateRecord();
        record = dialogFrame.getRecord();
        store = record.store;
        if (store) {
            if (record.phantom) {
                store.add(record);
            }
            store.sync({
                failure: function (batch) {
                    store.rejectChanges();
                    Traccar.app.showError(batch.exceptions[0].getError().response);
                }
            });
        } else {
            record.save();
        }
        
    }```

With those 2 changes I was able to make it save the map choice when you change the dropdown.
There is a few problems still.
I know that this is attached to ALL "clearableComboBox"s so that isn't ideal. (I am working on this)
When the page loads the combobox isnt populated with the current server layer selected.
When you select a layer from the dropdown it dosent reload the map.

What Im really looking to fix in my quest is the last issues.
When you select a layer from the dropdown it dosent reload the map.

I have been trying for a while to get it to refresh with no luck.
I would hope there is 1 line of code that can refresh the map i can put after record.save()
but cant seem to figure it out. Any help would be great.
I was looking at the load process and was trying to replicate the map init process but couldn't figure it out.
Hope all this makes sense and any help or guidance would be great.

Nathan, this looks amazing, an absolute must for Traccar. Have you made any progress since the last update?

Very interesting..any progress ?......

Thanks Nathan, I've managed to add several new map layers using your code, which is nice. I've tried to fix your comboBox issue with no success so far, but it's definetly a must have option to add to this already fantastic system.

good morning adrien B. can you tell me what changes you made and used the described code but it does not add more layers

buen dia, alguna guia paso a paso para agregar esta funcion a traccar?