Connecting a button to the behavior of zooming the map

I am still using this wonderful project! Unfortunately, the zoomTheMap() function as outlined below no longer works for me in the latest app I am building. I have not altered the code from a previous app where it works, and am lost as to why it no longer operates correctly.

Example Button code: <p><h2>Pond</h2><button ng-click="app.selectPage('map'); app.zoomTheMap(44.98025, -93.14514, 18);" class="btn btn-info btn-lg">View On Map</button></p>

The button will select and show the map screen, but no longer zooms or even pans the map. Interestingly, if the zoomTheMap function is called before the selectPage function, nothing happens, leading me to believe the issue is with the zoomTheMap. I am using the exact same zoomTheMap code as you have outlined below.

Any ideas as to what could have changed to break this feature? Perhaps an update to cordova, a plugin (angular.js), or to the android OS? Any help is greatly appreciated!

-TinArgus

To connect a button to the behavior of zooming the map, you'd first create a utility method like this:

// add to controller.js a method for setting calling setView() or setCenter()
// the zoom param is optional; if omitted will simply call setCenter()
zoomTheMap (lat, lng, zoom) {
    if (zoom !== undefined) {
        this.map.setView([ lat, lng ], zoom);
    }
    else {
        this.map.setCenter([ lat, lng ]);
    }
}

Then call it as usual from HTML, in conjunction with selectPage() to also switch to the map:

<button ng-click="app.selectPage('map'); app.zoomTheMap(34.5, -118.0, 6);" class="btn btn-primary btn-lg">Zoom To A Place</button>

Originally posted by @gregallensworth in https://github.com/GreenInfo-Network/MobileMapStarter2/issues/20#issuecomment-354806286

GreenInfo-Network / MobileMapStarter2

Connecting a button to the behavior of zooming the map #23