How fit all coordinates into the bounds of the map? fitBounds equivalent?

I'm making a running app using the Mapbox API and I'm struggling on how set the bounds of MGLMapView to fit all of the polylines the user created by running. Mapbox has a version of this in JavaScript here: https://www.mapbox.com/mapbox-gl-js/example/zoomto-linestring/

But I have no idea how to implement this using swift. I can't find a fitBounds equivalent.

I'm storing each CLLocationCoordinate2D into a Array called pointsArray and passing that to the result view controller along with the mapView.

I had method of finding the longest distance between two points in the array and set that as the bounds but since the algorithm is O(n^2) it takes way too long to calculate if I have too many points. There were also other cases where that wouldn't fit all points.

If there's any particular code you want to see let me know. Not sure what to show since I have nothing to fit the bounds.


… or you could just do this instead

    mapView?.setVisibleCoordinates(

        coordinates,
        count: UInt(coordinates.count),
        edgePadding: UIEdgeInsetsMake(20, 20, 20, 20),
        animated: true
    )

Fit to the bounds of a LineString | Mapbox GL JS, Get the bounds of a LineString by passing its first coordinates to LngLatBounds and chaining extend #map { position: absolute; top: 0; bottom: 0; width: 100%; }​. Styles (11) Add a default marker Add an animated icon to the map Add a generated icon to the map Generate and add a missing icon to the map Add a stretchable image to the map Add an icon to the map Display a map with a custom style Render world copies Display a satellite map Display a map Change a map's style Layers (32) Display buildings in 3D


You can do something like this O(n) linear algorithm:

var flyTo = MKMapRectNull

for coordinate in coordinateArray {
    // convert CLCoordinate to MKMapPoint
    MKMapPoint point = MKMapPointForCoordinate (coordinate1);

    let pointRect = MKMapRectMake(point.x, point.y, 0, 0)
    if MKMapRectIsNull(flyTo) {
        flyTo = pointRect
    } else {
        flyTo = MKMapRectUnion(flyTo, pointRect)
    }    
}

let coordNE = getCoordinateFromMapRectanglePoint(x: flyTo.origin.x, y: MKMapRectGetMaxY(flyTo))
let coordSW = getCoordinateFromMapRectanglePoint(x: MKMapRectGetMaxX(flyTo), y: flyTo.origin.y)
let coordinateBound = MGLCoordinateBoundsMake(coordSW, coordNE)

var edgeInsets = UIEdgeInsetsMake(20, 20, 20, 20)

mapView.setVisibleCoordinateBounds(coordinateBound, edgePadding: edgeInsets, animated: true)

----

class func getCoordinateFromMapRectanglePoint(x: Double, y: Double) -> CLLocationCoordinate2D {
    let swMapPoint = MKMapPointMake(x, y)
    return MKCoordinateForMapPoint(swMapPoint)
}

Fit a map to a bounding box | Mapbox GL JS, Fit a map to a bounding box. Use fitBounds to show a specific area of the map in view, regardless of the pixel size of the map. Hi, fitBounds doesn't seem to always be consistent. Here's what I'm doing: load locations onto a map based on the map's bounds click one of them to go to another page press the browser's back button fitBounds() is called for the bounding


This is my solution :

 
mapView.setVisibleCoordinateBounds(generateCoordinatesBounds(forCoordinates: [myCLLocationCoordinate2D]), animated: true)

func generateCoordinatesBounds(forCoordinates coordinates: [CLLocationCoordinate2D]) -> MGLCoordinateBounds {

var maxN = CLLocationDegrees(), maxS = CLLocationDegrees() , maxE = CLLocationDegrees() , maxW = CLLocationDegrees() for coordinates in coordinates { if coordinates.latitude >= maxN || maxN == 0 { maxN = coordinates.latitude } if coordinates.latitude <= maxS || maxS == 0 { maxS = coordinates.latitude } if coordinates.longitude >= maxE || maxE == 0 { maxE = coordinates.longitude } if coordinates.longitude <= maxW || maxW == 0{ maxW = coordinates.longitude } } let offset = 0.001 let maxNE = CLLocationCoordinate2D(latitude: maxN + offset, longitude: maxE + offset) let maxSW = CLLocationCoordinate2D(latitude: maxS - offset, longitude: maxW - offset) return MGLCoordinateBounds(sw: maxSW, ne: maxNE) }


Setting bounds and making map bounce back if moved away , [Final Answer]. I bet you can easily resolve this by setting the map's maxBounds equal to its initial bounds immediately upon loading. :) Just add this to your  (extend bounds with all points you want to fit) // Ensure the map does not get too zoomed out when fitting the bounds. gmap.setOptions({minZoom: 6}); // Clear the minZoom only after the map fits the bounds (note that // fitBounds() is asynchronous).


Can I view a Google Maps map by bounding latitude and longitude , The function you are looking for is called fitBounds. The fitBounds function takes a LatLngBounds as its parameter. You can read more about that here. Example  Fit to the bounds of a LineString Get the bounds of a LineString by passing its first coordinates to LngLatBounds and chaining extend to include the last coordinates.


[Question] fitBounds based on list of markers. · Issue #488 · google , Is there a way to fitBounds based on the list of markers i have? e.g: i have 5 map markers. i would like the bound fit automatically to show all the markers if using google maps api if using google maps api way, it will be similar like this: list of map markers contains coordinate */ setMarkers(mapMarkers)  Returns the maximum zoom level on which the given bounds fit to the map view in its entirety. If inside (optional) is set to true, the method instead returns the minimum zoom level on which the map view fits into the given bounds in its entirety. getSize() Point: Returns the current size of the map container (in pixels). getPixelBounds() Bounds


Add Fitbounds support · Issue #78 · alex3165/react-mapbox-gl , example: https://www.mapbox.com/mapbox-gl-js/example/fitbounds/ api: markers and you want to display all markers on the map wherever they are. be similar by feeding the property and array of all marker coordinates, however it might also automatically sets the zoom to the correct value so that all markers fit into  I am using this piece of code to display map markers pulled from a MySQL database using leaflet js on an open street map, but the map bounds are obviously hard coded at the top (with setView), and I have no idea how to set the bounds to include all iterated markers from the database.