fix raster subdomains

source/UI/js/Map/Map.js

@@ -935,12 +935,11 @@ Ox.Map = function(options, self) {
                     'raster-tiles': {
                         'type': 'raster',
                         'tiles': [
-                            // FIXME: use protocol and make use of all subdomains
-                            //'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
-                            'https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
-
+                            'https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+                            'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+                            'https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+                            'https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
                         ],
-                        'subdomains':['mt0','mt1','mt2','mt3'],
                         'tileSize': 256,
                         'attribution':
                             'FIXME',
@@ -951,6 +950,7 @@ Ox.Map = function(options, self) {
                         'id': 'simple-tiles',
                         'type': 'raster',
                         'source': 'raster-tiles',
+                        'roundZoom': true,
                         'minzoom': 0,
                         'maxzoom': 22
                     }

source/UI/js/Map/MapMarker.js

@@ -43,12 +43,12 @@ Ox.MapMarker = function(options) {
         that[key] = val;
     });
     setColor()
+    setSize()
     const element = document.createElement('div')
     element.style.border = '2px solid black'
     element.style.borderRadius = '50px'
     element.style.backgroundColor = '#' + Ox.toHex(that.color)
-    element.style.width = '16px'
-    element.style.height = '16px'
+    element.style.width = element.style.height = that.size + 'px'
     that.marker = new maplibregl.Marker({
         raiseOnDrag: false,
         shape: {coords: [8, 8, 8], type: 'circle'},
@@ -229,13 +229,8 @@ Ox.MapMarker = function(options) {
         }
     }
 
-    function setOptions() {
-        // workaround to prevent marker from appearing twice
-        // after setting draggable from true to false (google maps bug)
-        var fix = false, // that.marker.getDraggable() && !that.place.editing,
-            size = that.map.options('markerSize');
-        //Ox.Log('Map', 'setOptions, that.map: ', that.map)
-        setColor()
+    function setSize() {
+        var size = that.map.options('markerSize');
         if (size == 'auto') {
             that.size = 8;
             Ox.forEach(areaSize, function(size, area) {
@@ -250,6 +245,16 @@ Ox.MapMarker = function(options) {
         } else {
             that.size = size(that.place);
         }
+    }
+
+    function setOptions() {
+        // workaround to prevent marker from appearing twice
+        // after setting draggable from true to false (google maps bug)
+        var fix = false, // that.marker.getDraggable() && !that.place.editing,
+            size = that.map.options('markerSize');
+        //Ox.Log('Map', 'setOptions, that.map: ', that.map)
+        setColor()
+        setSize()
         /* fixme, some of those can be set some not
         that.marker.setOptions({
             // fixme: cursor remains pointer
@@ -266,6 +271,7 @@ Ox.MapMarker = function(options) {
         */
         //that.marker._color = that.color;
         that.marker._element.style.cursor = that.place.editing ? 'move' : 'pointer';
+        that.marker._element.height = that.marker._element.width =  that.size + 'px'
         that.marker.setDraggable(that.place.editing);
         that.marker.setLngLat(that.place.center);
         if (fix) {