@maplibre/maplibre-react-native 11.0.0-alpha.21 → 11.0.0-alpha.23

package/android/src/main/java/org/maplibre/reactnative/components/camera/CameraStop.kt

@@ -111,9 +111,8 @@ class CameraStop {
         ): CameraStop {
             val stop = CameraStop()
 
-            if (readableMap.hasKey("longitude") && readableMap.hasKey("latitude")) {
-                stop.center =
-                    LatLng(readableMap.getDouble("latitude"), readableMap.getDouble("longitude"))
+            if (readableMap.hasKey("center")) {
+                stop.center = GeoJSONUtils.toLatLng(readableMap.getArray("center"))
             } else if (readableMap.hasKey("bounds")) {
                 stop.bounds = GeoJSONUtils.toLatLngBounds(readableMap.getArray("bounds"))
             }

package/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapView.kt

@@ -13,6 +13,7 @@ import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.ReadableArray
@@ -23,13 +24,11 @@ import com.facebook.react.bridge.WritableNativeArray
 import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.EventDispatcher
-import com.google.gson.JsonObject
 import org.json.JSONException
 import org.json.JSONObject
 import org.maplibre.android.camera.CameraPosition
 import org.maplibre.android.camera.CameraUpdate
 import org.maplibre.android.geometry.LatLng
-import org.maplibre.android.geometry.LatLngBounds
 import org.maplibre.android.gestures.MoveGestureDetector
 import org.maplibre.android.log.Logger
 import org.maplibre.android.maps.AttributionDialogManager
@@ -39,7 +38,6 @@ import org.maplibre.android.maps.MapView
 import org.maplibre.android.maps.OnMapReadyCallback
 import org.maplibre.android.maps.Style
 import org.maplibre.android.maps.Style.OnStyleLoaded
-import org.maplibre.android.plugins.annotation.OnSymbolClickListener
 import org.maplibre.android.plugins.annotation.OnSymbolDragListener
 import org.maplibre.android.plugins.annotation.Symbol
 import org.maplibre.android.plugins.annotation.SymbolManager
@@ -48,7 +46,6 @@ import org.maplibre.android.style.layers.Layer
 import org.maplibre.android.style.layers.Property
 import org.maplibre.android.style.layers.PropertyFactory
 import org.maplibre.geojson.Feature
-import org.maplibre.geojson.FeatureCollection
 import org.maplibre.reactnative.R
 import org.maplibre.reactnative.components.AbstractMapFeature
 import org.maplibre.reactnative.components.annotations.MLRNMarkerView
@@ -274,8 +271,7 @@ open class MLRNMapView(
         children().remove(child)
     }
 
-    private fun children() =
-        queuedChildren?.takeIf { it.isNotEmpty() } ?: children
+    private fun children() = queuedChildren?.takeIf { it.isNotEmpty() } ?: children
 
     val featureCount: Int get() = children().size
 
@@ -860,15 +856,11 @@ open class MLRNMapView(
             { compassMargins = it })
     }
 
-    fun getCenter(): WritableMap {
+    fun getCenter(): WritableArray {
         val cameraPosition = mapLibreMap!!.cameraPosition
         val center = cameraPosition.target!!
 
-        val payload: WritableMap = WritableNativeMap()
-        payload.putDouble("longitude", center.longitude)
-        payload.putDouble("latitude", center.latitude)
-
-        return payload
+        return GeoJSONUtils.fromLatLng(center)
     }
 
     fun getZoom(): Double {
@@ -880,7 +872,8 @@ open class MLRNMapView(
     fun getBearing(): Double {
         val cameraPosition = mapLibreMap!!.cameraPosition
 
-        return cameraPosition.bearing
+        // Convert -0.0 to 0.0
+        return cameraPosition.bearing + 0.0
     }
 
     fun getPitch(): Double {
@@ -895,7 +888,8 @@ open class MLRNMapView(
     }
 
     fun getViewState(): WritableMap {
-        val payload = this.getCenter()
+        val payload = Arguments.createMap();
+        payload.putArray("center", getCenter())
         payload.putDouble("zoom", getZoom())
         payload.putDouble("bearing", getBearing())
         payload.putDouble("pitch", getPitch())
@@ -904,68 +898,77 @@ open class MLRNMapView(
         return payload
     }
 
-    fun queryRenderedFeaturesWithCoordinate(
-        latLng: LatLng, layers: ReadableArray?, filter: Expression?,
-    ): WritableMap {
-        val features =
-            mapLibreMap!!.queryRenderedFeatures(
-                mapLibreMap!!.projection.toScreenLocation(latLng),
-                filter,
-                *(layers?.let { Array(layers.size()) { layers.getString(it) } } ?: emptyArray()))
+    fun queryRenderedFeaturesWithPoint(
+        point: PointF, layers: ReadableArray?, filter: Expression?,
+    ): WritableArray {
+        val density = this.displayDensity
+        val screenPoint = PointF(point.x * density, point.y * density)
 
+        val features = mapLibreMap!!.queryRenderedFeatures(
+            screenPoint,
+            filter,
+            *(layers?.let { Array(layers.size()) { layers.getString(it) } } ?: emptyArray()))
 
-        val featureCollection = FeatureCollection.fromFeatures(features)
-        val jsonObject: JsonObject =
-            com.google.gson.JsonParser.parseString(featureCollection.toJson()).asJsonObject
-        return ConvertUtils.toWritableMap(jsonObject)
-    }
 
+        val result = Arguments.createArray()
+        for (feature in features) {
+            val jsonObject = com.google.gson.JsonParser.parseString(feature.toJson()).asJsonObject
+            result.pushMap(ConvertUtils.toWritableMap(jsonObject))
+        }
+        return result
+    }
 
-    fun queryRenderedFeaturesWithBounds(
-        bounds: LatLngBounds, layers: ReadableArray?, filter: Expression?,
-    ): WritableMap {
-        val swPoint = mapLibreMap!!.projection.toScreenLocation(bounds.southWest)
-        val nePoint = mapLibreMap!!.projection.toScreenLocation(bounds.northEast)
 
-        val rect = RectF(
-            swPoint.x, nePoint.y, nePoint.x, swPoint.y
-        )
+    fun queryRenderedFeaturesWithRect(
+        rect: RectF?, layers: ReadableArray?, filter: Expression?,
+    ): WritableArray {
+        val screenRect = if (rect == null) {
+            val width = this.width.toFloat()
+            val height = this.height.toFloat()
+            RectF(0f, 0f, width, height)
+        } else {
+            RectF(
+                rect.left * this.displayDensity,
+                rect.top * this.displayDensity,
+                rect.right * this.displayDensity,
+                rect.bottom * this.displayDensity
+            )
+        }
 
         val features = mapLibreMap!!.queryRenderedFeatures(
-            rect,
+            screenRect,
             filter,
             *(layers?.let { Array(layers.size()) { layers.getString(it) } } ?: emptyArray()))
 
-        val featureCollection = FeatureCollection.fromFeatures(features)
-        val jsonObject =
-            com.google.gson.JsonParser.parseString(featureCollection.toJson()).asJsonObject
-        return ConvertUtils.toWritableMap(jsonObject)
+        val result = Arguments.createArray()
+        for (feature in features) {
+            val jsonObject = com.google.gson.JsonParser.parseString(feature.toJson()).asJsonObject
+            result.pushMap(ConvertUtils.toWritableMap(jsonObject))
+        }
+        return result
     }
 
-    fun project(mapCoordinate: LatLng): WritableMap {
+    fun project(mapCoordinate: LatLng): WritableArray {
         val pointInView = mapLibreMap!!.projection.toScreenLocation(mapCoordinate)
         val density = this.displayDensity
         pointInView.x /= density
         pointInView.y /= density
-        val payload: WritableMap = WritableNativeMap()
+        val payload: WritableArray = Arguments.createArray()
 
-        payload.putDouble("locationX", pointInView.x.toDouble())
-        payload.putDouble("locationY", pointInView.y.toDouble())
+        payload.pushDouble(pointInView.x.toDouble())
+        payload.pushDouble(pointInView.y.toDouble())
 
         return payload
     }
 
-    fun unproject(pointInView: PointF): WritableMap {
+    fun unproject(pointInView: PointF): WritableArray {
         val density = this.displayDensity
         pointInView.x *= density
         pointInView.y *= density
 
-        val mapCoordinate = mapLibreMap!!.projection.fromScreenLocation(pointInView)
-        val payload: WritableMap = WritableNativeMap()
-        payload.putDouble("longitude", mapCoordinate.longitude)
-        payload.putDouble("latitude", mapCoordinate.latitude)
+        val latLng = mapLibreMap!!.projection.fromScreenLocation(pointInView)
 
-        return payload
+        return GeoJSONUtils.fromLatLng(latLng)
     }
 
     fun takeSnap(writeToDisk: Boolean, callback: (String) -> Unit) {

package/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapViewModule.kt

@@ -1,16 +1,14 @@
 package org.maplibre.reactnative.components.mapview
 
+import android.graphics.RectF
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
-import org.maplibre.android.camera.CameraUpdateFactory.newLatLngBounds
-import org.maplibre.android.geometry.LatLng
-import org.maplibre.android.geometry.LatLngBounds
 import org.maplibre.reactnative.NativeMapViewModuleSpec
 import org.maplibre.reactnative.utils.ConvertUtils
 import org.maplibre.reactnative.utils.ExpressionParser
+import org.maplibre.reactnative.utils.GeoJSONUtils
 import org.maplibre.reactnative.utils.ReactTag
 import org.maplibre.reactnative.utils.ReactTagResolver
 
@@ -65,36 +63,36 @@ class MLRNMapViewModule(
     }
 
     override fun project(
-        reactTag: Double, coordinate: ReadableMap, promise: Promise
+        reactTag: Double, lngLat: ReadableArray, promise: Promise
     ) {
         withViewportOnUIThread(reactTag, promise) { mapView ->
             promise.resolve(
                 mapView.project(
-                    LatLng(coordinate.getDouble("latitude"), coordinate.getDouble("longitude"))
+                    GeoJSONUtils.toLatLng(lngLat)!!
                 )
             )
         }
     }
 
     override fun unproject(
-        reactTag: Double, point: ReadableMap, promise: Promise
+        reactTag: Double, pixelPoint: ReadableArray, promise: Promise
     ) {
         withViewportOnUIThread(reactTag, promise) { mapView ->
-            promise.resolve(mapView.unproject(ConvertUtils.toPointF(point)))
+            promise.resolve(mapView.unproject(ConvertUtils.toPointF(pixelPoint)))
         }
     }
 
-    override fun queryRenderedFeaturesWithCoordinate(
+    override fun queryRenderedFeaturesWithPoint(
         reactTag: Double,
-        coordinate: ReadableMap,
+        pixelPoint: ReadableArray,
         layers: ReadableArray?,
         filter: ReadableArray?,
         promise: Promise
     ) {
         withViewportOnUIThread(reactTag, promise) { mapView ->
             promise.resolve(
-                mapView.queryRenderedFeaturesWithCoordinate(
-                    LatLng(coordinate.getDouble("latitude"), coordinate.getDouble("longitude")),
+                mapView.queryRenderedFeaturesWithPoint(
+                    ConvertUtils.toPointF(pixelPoint),
                     layers,
                     ExpressionParser.from(filter),
                 )
@@ -104,24 +102,33 @@ class MLRNMapViewModule(
 
     override fun queryRenderedFeaturesWithBounds(
         reactTag: Double,
-        bounds: ReadableArray?,
+        pixelPointBounds: ReadableArray?,
         layers: ReadableArray?,
         filter: ReadableArray?,
         promise: Promise
     ) {
+
+
         withViewportOnUIThread(reactTag, promise) { mapView ->
+            val rect = if (pixelPointBounds == null) {
+                null
+            } else {
+                val topLeft = pixelPointBounds.getArray(0)
+                val bottomRight = pixelPointBounds.getArray(1)
+
+                RectF(
+                    topLeft!!.getDouble(0).toFloat(),
+                    topLeft.getDouble(1).toFloat(),
+                    bottomRight!!.getDouble(0).toFloat(),
+                    bottomRight.getDouble(1).toFloat()
+                )
+            }
+
             promise.resolve(
-                mapView.queryRenderedFeaturesWithBounds(
-                    if (bounds != null && bounds.size() == 4)
-                        LatLngBounds.from(
-                            bounds.getDouble(3),
-                            bounds.getDouble(2),
-                            bounds.getDouble(1),
-                            bounds.getDouble(0)
-                        )
-                    else
-                        LatLngBounds.world(),
-                    layers, ExpressionParser.from(filter),
+                mapView.queryRenderedFeaturesWithRect(
+                    rect,
+                    layers,
+                    ExpressionParser.from(filter),
                 )
             )
         }
@@ -135,7 +142,8 @@ class MLRNMapViewModule(
         promise: Promise
     ) {
         withViewportOnUIThread(reactTag, promise) {
-            promise.resolve(it.setSourceVisibility(visible, sourceId, sourceLayerId))
+            it.setSourceVisibility(visible, sourceId, sourceLayerId)
+            promise.resolve(null)
         }
     }
 
@@ -153,7 +161,8 @@ class MLRNMapViewModule(
         reactTag: Double, promise: Promise
     ) {
         withViewportOnUIThread(reactTag, promise) {
-            promise.resolve(it.showAttribution())
+            it.showAttribution()
+            promise.resolve(null)
         }
     }
 }

package/android/src/main/java/org/maplibre/reactnative/events/FeatureClickEvent.java

@@ -44,15 +44,12 @@ public class FeatureClickEvent extends AbstractEvent {
         }
         map.putArray("features", features);
 
-        WritableMap coordinates = Arguments.createMap();
-        coordinates.putDouble("latitude", mLatLng.getLatitude());
-        coordinates.putDouble("longitude", mLatLng.getLongitude());
-        map.putMap("coordinates", coordinates);
+        map.putArray("lngLat", GeoJSONUtils.fromLatLng(mLatLng));
 
-        WritableMap point = Arguments.createMap();
-        point.putDouble("x", mPoint.x);
-        point.putDouble("y", mPoint.y);
-        map.putMap("point", point);
+        WritableArray point = Arguments.createArray();
+        point.pushDouble( mPoint.x);
+        point.pushDouble( mPoint.y);
+        map.putArray("point", point);
 
         return map;
     }

package/android/src/main/java/org/maplibre/reactnative/events/MapPressEvent.kt

@@ -5,6 +5,7 @@ import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 import org.maplibre.android.geometry.LatLng
+import org.maplibre.reactnative.utils.GeoJSONUtils
 
 class MapPressEvent(
     surfaceId: Int,
@@ -18,10 +19,11 @@ class MapPressEvent(
 
     override fun getEventData(): WritableMap {
         return Arguments.createMap().apply {
-            putDouble("longitude", latLng.longitude)
-            putDouble("latitude", latLng.latitude)
-            putDouble("locationX", screenPoint.x.toDouble())
-            putDouble("locationY", screenPoint.y.toDouble())
+            putArray("lngLat", GeoJSONUtils.fromLatLng(latLng))
+            putArray("point", Arguments.createArray().apply {
+                pushDouble(screenPoint.x.toDouble())
+                pushDouble(screenPoint.y.toDouble())
+            })
         }
     }
 }

package/android/src/main/java/org/maplibre/reactnative/utils/ConvertUtils.java

@@ -203,8 +203,8 @@ public class ConvertUtils {
         return list;
     }
 
-    public static PointF toPointF(ReadableMap map) {
-        return new PointF((float) map.getDouble("locationX"), (float) map.getDouble("locationY"));
+    public static PointF toPointF(ReadableArray map) {
+        return new PointF((float) map.getDouble(0), (float) map.getDouble(1));
     }
 
     public static RectF toRectF(ReadableArray array) {

package/android/src/main/java/org/maplibre/reactnative/utils/GeoJSONUtils.kt

@@ -224,12 +224,13 @@ object GeoJSONUtils {
         return geometry
     }
 
+    @JvmStatic
     fun fromLatLng(latLng: LatLng): WritableArray {
-        val coords = doubleArrayOf(latLng.longitude, latLng.latitude)
-        val writableCoords: WritableArray = WritableNativeArray()
-        writableCoords.pushDouble(coords[0])
-        writableCoords.pushDouble(coords[1])
-        return writableCoords
+        val coordinates: WritableArray = WritableNativeArray()
+        coordinates.pushDouble(latLng.longitude)
+        coordinates.pushDouble(latLng.latitude)
+
+        return coordinates
     }
 
     @JvmStatic
@@ -289,10 +290,7 @@ object GeoJSONUtils {
     fun toLatLngBounds(array: ReadableArray?): LatLngBounds? {
         if (array != null && array.size() == 4) {
             return LatLngBounds.from(
-                array.getDouble(3),
-                array.getDouble(2),
-                array.getDouble(1),
-                array.getDouble(0)
+                array.getDouble(3), array.getDouble(2), array.getDouble(1), array.getDouble(0)
             )
         }
 

package/ios/components/camera/CameraStop.m

@@ -33,8 +33,8 @@
 + (CameraStop *)fromDictionary:(NSDictionary *)args {
   CameraStop *stop = [[CameraStop alloc] init];
 
-  if (args[@"longitude"] && args[@"latitude"]) {
-    stop.center = [MLRNUtils fromLongitude:args[@"longitude"] latitude:args[@"latitude"]];
+  if (args[@"center"]) {
+    stop.center = [MLRNUtils fromLongitude:args[@"center"][0] latitude:args[@"center"][1]];
   }
 
   if (args[@"zoom"]) {

package/ios/components/camera/MLRNCameraComponentView.mm

@@ -89,10 +89,10 @@ using namespace facebook::react;
   if (_view.initialViewState == nil) {
     NSMutableDictionary *initialViewState = [NSMutableDictionary dictionary];
 
-    if (newViewProps.initialViewState.longitude != -360 &&
-        newViewProps.initialViewState.latitude != -360) {
-      initialViewState[@"longitude"] = @(newViewProps.initialViewState.longitude);
-      initialViewState[@"latitude"] = @(newViewProps.initialViewState.latitude);
+    if (newViewProps.initialViewState.center.size() == 2) {
+      initialViewState[@"center"] = @[
+        @(newViewProps.initialViewState.center[0]), @(newViewProps.initialViewState.center[1])
+      ];
     } else if (newViewProps.initialViewState.bounds.size() == 4) {
       initialViewState[@"bounds"] = @[
         @(newViewProps.initialViewState.bounds[0]), @(newViewProps.initialViewState.bounds[1]),
@@ -122,8 +122,7 @@ using namespace facebook::react;
 
   BOOL updateCamera = NO;
 
-  if (oldViewProps.stop.longitude != newViewProps.stop.longitude ||
-      oldViewProps.stop.latitude != newViewProps.stop.latitude ||
+  if (oldViewProps.stop.center != newViewProps.stop.center ||
 
       oldViewProps.stop.bounds != newViewProps.stop.bounds ||
       oldViewProps.stop.padding.top != newViewProps.stop.padding.top ||
@@ -139,9 +138,8 @@ using namespace facebook::react;
       oldViewProps.stop.easing != newViewProps.stop.easing) {
     NSMutableDictionary *stop = [NSMutableDictionary dictionary];
 
-    if (newViewProps.stop.longitude != -360 && newViewProps.stop.latitude != -360) {
-      stop[@"longitude"] = @(newViewProps.stop.longitude);
-      stop[@"latitude"] = @(newViewProps.stop.latitude);
+    if (newViewProps.stop.center.size() == 2) {
+      stop[@"center"] = @[ @(newViewProps.stop.center[0]), @(newViewProps.stop.center[1]) ];
     } else if (newViewProps.stop.bounds.size() == 4) {
       stop[@"bounds"] = @[
         @(newViewProps.stop.bounds[0]), @(newViewProps.stop.bounds[1]),

package/ios/components/camera/MLRNCameraModule.mm

@@ -50,9 +50,9 @@
          reject:(RCTPromiseRejectBlock)reject {
   NSMutableDictionary<NSString *, id> *stopDict = [NSMutableDictionary dictionary];
 
-  if (stop.longitude().has_value() && stop.latitude().has_value()) {
-    stopDict[@"longitude"] = @(stop.longitude().value());
-    stopDict[@"latitude"] = @(stop.latitude().value());
+  if (stop.center().has_value() && stop.center().value().size() == 2) {
+    NSArray<NSNumber *> *center = @[ @(stop.center().value()[0]), @(stop.center().value()[1]) ];
+    stopDict[@"center"] = center;
   } else if (stop.bounds().has_value() && stop.bounds().value().size() == 4) {
     NSArray<NSNumber *> *bounds = @[
       @(stop.bounds().value()[0]), @(stop.bounds().value()[1]), @(stop.bounds().value()[2]),

package/ios/components/map-view/MLRNMapTouchEvent.m

@@ -10,18 +10,24 @@
   feature.coordinate = _coordinate;
   if (_id == nil) {
     feature.attributes = @{
-      @"longitude" : [NSNumber numberWithDouble:_coordinate.longitude],
-      @"latitude" : [NSNumber numberWithDouble:_coordinate.latitude],
-      @"locationX" : [NSNumber numberWithDouble:_screenPoint.x],
-      @"locationY" : [NSNumber numberWithDouble:_screenPoint.y]
+      @"lngLat" : @[
+        [NSNumber numberWithDouble:_coordinate.longitude],
+        [NSNumber numberWithDouble:_coordinate.latitude]
+      ],
+      @"point" : @[
+        [NSNumber numberWithDouble:_screenPoint.x], [NSNumber numberWithDouble:_screenPoint.y]
+      ]
     };
   } else {
     feature.attributes = @{
       @"id" : _id,
-      @"longitude" : [NSNumber numberWithDouble:_coordinate.longitude],
-      @"latitude" : [NSNumber numberWithDouble:_coordinate.latitude],
-      @"locationX" : [NSNumber numberWithDouble:_screenPoint.x],
-      @"locationY" : [NSNumber numberWithDouble:_screenPoint.y]
+      @"lngLat" : @[
+        [NSNumber numberWithDouble:_coordinate.longitude],
+        [NSNumber numberWithDouble:_coordinate.latitude]
+      ],
+      @"point" : @[
+        [NSNumber numberWithDouble:_screenPoint.x], [NSNumber numberWithDouble:_screenPoint.y]
+      ]
     };
   }
   return [feature geoJSONDictionary];

package/ios/components/map-view/MLRNMapView.m

@@ -294,14 +294,18 @@ static double const M2PI = M_PI * 2;
       CLLocationCoordinate2D coordinate = [mapView convertPoint:screenPoint
                                            toCoordinateFromView:mapView];
 
-      MLRNEvent *event = [MLRNEvent makeEvent:eventType
-                                  withPayload:@{
-                                    @"longitude" : [NSNumber numberWithDouble:coordinate.longitude],
-                                    @"latitude" : [NSNumber numberWithDouble:coordinate.latitude],
-                                    @"locationX" : [NSNumber numberWithDouble:screenPoint.x],
-                                    @"locationY" : [NSNumber numberWithDouble:screenPoint.y],
-                                    @"features" : geoJSONDicts,
-                                  }];
+      MLRNEvent *event = [MLRNEvent
+            makeEvent:eventType
+          withPayload:@{
+            @"lngLat" : @[
+              [NSNumber numberWithDouble:coordinate.longitude],
+              [NSNumber numberWithDouble:coordinate.latitude]
+            ],
+            @"point" : @[
+              [NSNumber numberWithDouble:screenPoint.x], [NSNumber numberWithDouble:screenPoint.y]
+            ],
+            @"features" : geoJSONDicts,
+          }];
 
       source.onPress([event toJSON]);
 
@@ -804,8 +808,10 @@ static double const M2PI = M_PI * 2;
   MLRNMapView *rctMapView = (MLRNMapView *)mapView;
 
   NSDictionary *viewState = @{
-    @"longitude" : [NSNumber numberWithDouble:mapView.centerCoordinate.longitude],
-    @"latitude" : [NSNumber numberWithDouble:mapView.centerCoordinate.latitude],
+    @"center" : @[
+      [NSNumber numberWithDouble:mapView.centerCoordinate.longitude],
+      [NSNumber numberWithDouble:mapView.centerCoordinate.latitude]
+    ],
     @"zoom" : [NSNumber numberWithDouble:mapView.zoomLevel],
     @"pitch" : [NSNumber numberWithDouble:mapView.camera.pitch],
     @"bearing" : [NSNumber numberWithDouble:mapView.camera.heading],