Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Map: Fit Region automatical


is there a way to set my Map region dynamical by the annotations that are on my map?

E.g. i got 5 Annotations and i want my map to fit the screen so all 5 are visible in the window.

— asked June 16th 2010 by Michael Gajda
  • annotations
  • iphone
  • map
  • region
  • It amazes me that there is not an answer to such an obvious function. Anyone have an answer to this?

    — commented October 18th 2011 by Sky Apperley
  • It amazes me that there are no answers to half the posts on this forum.

    — commented November 6th 2011 by Jonathon Kresner

3 Answers

  • Hi,

    I've create this function which take an array of points and return a region to set the map location.

    findZoomRegion : function(points) {
            var tmpDeltatLat = 0, tmpDeltatLong = 0, maxDeltatLat = 0, maxDeltatLong = 0, centerLat = 0, centerLong = 0;
            for(var i = 0; i <= Math.floor(points.length / 2); i++) {
                for(var j = nbPtToShow; j >= Math.floor(points.length / 2); j--) {
                    if(j != i) {
                        tmpDeltatLat = Math.abs(Math.abs(points[i].latitude) - Math.abs(points[j].latitude));
                        if(tmpDeltatLat > maxDeltatLat) {
                            maxDeltatLat = tmpDeltatLat;
                            centerLat = Math.min(points[i].latitude, points[j].latitude) + maxDeltatLat / 2;
                        tmpDeltatLong = Math.abs(Math.abs(points[i].longitude) - Math.abs(points[j].longitude));
                        if(tmpDeltatLong > maxDeltatLong) {
                            maxDeltatLong = tmpDeltatLong;
                            centerLong = Math.min(points[i].longitude, points[j].longitude) + maxDeltatLong / 2;
            var region = {
                latitude : centerLat,
                longitude : centerLong,
                latitudeDelta : maxDeltatLat,
                longitudeDelta : maxDeltatLong
            return region;

    I've got some issue on Android, cause the map zoom level is round up or down.

    — answered November 8th 2011 by yann sergent
    • Here is a way to get optimum zoom level on android :

      if(Ti.Platform.name == 'android'){
          maxDeltatLat = Math.floor(maxDeltatLat+1);
          maxDeltatLong = Math.floor(maxDeltatLong+1);

      — commented November 8th 2011 by yann sergent
    • Forgive me for overlooking something potentially rather simple here but when I paste your code into my file i get a syntax error in the simulator on the first line.. Any ideas? Thanks, James

      — commented November 14th 2011 by james thompson
    • You get a syntax error because he is showing you one function within an object. For you, just change the first line to:

      function findZoomRegion (points) {

      — commented November 15th 2011 by Justin Toth
    • @yann sergent - Please explain what "nbPtToShow" is, otherwise no one will be able to reuse this example.

      — commented November 15th 2011 by Justin Toth
    • Bug Fix : you need to replace "nbPtToShow" by "points.length".

      — commented November 15th 2011 by yann sergent
    • Yann, your code is really great. Thks a lot it works perfectly.
      Just an annotation, nbPtToShow has to be replaced by (points.length-1), if not, Math.abs(points[j].latitude) fails cause to array has not this number of annotations.
      Again, thks for share this great function.

      — commented November 17th 2011 by Alfredo Saralegui
    • How would i get this to work on an event? Currently my route is plotted using the values from two input fields and then fired when using the click event. How do I also fire the above function so that the view pans over to my route? the problem is my map locations is declared before the event listener etc variable scope yada yada.

      Please help. Thanks, James

      — commented November 21st 2011 by james thompson
    • Hi,

      before I found your findZoomRegion function I already had tried my luck with an own function to determine the bounding box and ended in needing a correction factor to ensure that all points are in the visible area of the map, similar to this solution: http://developer.appcelerator.com/question/121990/recenter-map

      Now I tried your findZoomRegion function and see the same effect: Some determined bounding boxes (resp. the visible map) do not contain all points. So again one would need to add a correction factor in order to zoom out one level. Anyone has a bullet proof solution for that?

      BTW I did not understand in which case one needs regionFit=true/false. Is this relevant to the problem discussed here?

      — commented December 21st 2011 by N N
    • I wonder why such a useful answer got only two votes!!!

      — commented May 7th 2013 by Muhammad Qasim
    • I've been trying to use this approach but with no success. Can someone provide an example of points. What exactly should it be? Is it an array of all annotations or?

      — commented May 31st 2013 by Tsvetan Nikolov
  • Hey all,

    There's a few comments etc around the errors in the original code, but it's a little hard to follow, so here is the working version of the above function in a gist:


    Upvote this answer if you found it useful! Hope you enjoy!

    — answered August 14th 2013 by Matthew Lanham
  • I'm wondering if it would is just be a matter of getting the max lat and long values of all the annotations in your set and then set the region boundaries to that? I don't have code for how to do this, but I think that's how it would be pulled off. Does anyone have a code example of this?

    — answered August 26th 2010 by Randy Hall
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.