source/UI/css/UI.css

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

source/UI/js/Map/Map.js

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