toggle style

source/UI/css/UI.css

@@ -1800,6 +1800,7 @@ Maps
 .OxMap .OxLabel.OxMapControl.OxMapScale {
     right: 4px;
     bottom: 19px;
+    line-height: 1;
 }
 
 .OxMap .OxPlaceControl.OxPlaceFlag {

source/UI/js/Map/Map.js

@@ -719,10 +719,6 @@ Ox.Map = function(options, self) {
             - self.options.showZoombar * 16;
     }
 
-    function getMapType() {
-        return self.options.showLabels ? 'HYBRID' : 'SATELLITE'
-    }
-
     function getMaxZoom(point, callback) {
         if (arguments.length == 1) {
             callback = point;
@@ -945,11 +941,8 @@ Ox.Map = function(options, self) {
 
             self.center = mapBounds ? mapBounds.getCenter() : new maplibregl.LngLat(0, 0);
             self.zoom = self.minZoom;
-            window.map = that.map = self.map = new maplibregl.Map({
-                container: self.$map[0],
-                center: self.center,
-                style2: self.options.style,
-                    style: {
+
+            self.sateliteStyle = {
                 'version': 8,
                 'sources': {
                     'raster-tiles': {
@@ -963,7 +956,7 @@ Ox.Map = function(options, self) {
                         'tileSize': 256,
                         'attribution':
                             'FIXME',
-                    }
+                    },
                 },
                 'layers': [
                     {
@@ -973,10 +966,13 @@ Ox.Map = function(options, self) {
                         'roundZoom': true,
                         'minzoom': 0,
                         'maxzoom': 22
-                    }
+                    },
                 ]
-            },
-                //mapTypeId: google.maps.MapTypeId[getMapType()],
+            };
+            window.map = that.map = self.map = new maplibregl.Map({
+                container: self.$map[0],
+                center: self.center,
+                style: self.options.showLabels ? self.options.style : self.sateliteStyle,
                 //noClear: true,
                 //scrollwheel: !self.options.zoomOnlyWhenFocused,
                 zoom: self.zoom
@@ -1153,7 +1149,8 @@ Ox.Map = function(options, self) {
     }
 
     function pan(x, y) {
-        self.map.panBy(x * self.$map.width() / 2, y * self.$map.height() / 2);
+        console.log(x, y, self.$map.width())
+        self.map.panBy([x * self.$map.width() / 2, y * self.$map.height() / 2]);
     };
 
     function panToPlace() {
@@ -1220,15 +1217,19 @@ Ox.Map = function(options, self) {
         }
         function getType(types, data) {
             // see https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingAddressTypes
-            types.push(data.properties.addresstype)
+            types.unshift(data.properties.addresstype)
+            console.log(types)
+
 
             var strings = {
                     'country': ['country'],
                     'region': [
                         'administrative_area', 'colloquial_area',
-                        'state', 'county'
+                        'state', 'county', 'region'
+                    ],
+                    'city': [
+                        'locality', 'city', 'town'
                     ],
-                    'city': ['locality', 'city'],
                     'borough': ['neighborhood', 'postal_code', 'sublocality', 'suburb', 'borough'],
                     'street': [
                         'intersection', 'route',
@@ -1489,7 +1490,7 @@ Ox.Map = function(options, self) {
 
     function toggleLabels() {
         self.options.showLabels = !self.options.showLabels;
-        self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
+        self.map.setStyle(self.options.showLabels ? self.options.style : self.sateliteStyle)
         that.triggerEvent('togglelabels', {
             visible: self.options.showLabels
         });