Maps

Nathan Elledge6 years ago

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

Anton Tananaev6 years ago

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

Nathan Elledge6 years ago

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
},
Nathan Elledge6 years ago

Once I enabled debug it started working....

Nathan Elledge6 years ago

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.
alt text

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.
alexthefifth6 years ago

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

Juankaher6 years ago

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

Adrien B.5 years ago

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.

hrafael_salomon5 years ago

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

David4 years ago

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