Providing a store, client, or other location-listing feature is a common requirement for many Enterprise apps. In this recipe, we will show how to use the Yahoo Local Search API and Ti.Map.View to provide a store locator. For demonstration purposes, the recipe uses the Yahoo API to provide location search results for the popular American coffee chain, Starbucks. The search results for each location are then displayed on a Ti.Map.View, as shown in the following screenshots:
This recipe uses the Yahoo Search CommonJS module. This module and other code assets can be downloaded from the source code provided by the book. Installing this module into your project is straightforward. Simply add the yahoo_search.js file into your project, as shown in the following screenshot:
Once you've added the yahoo_search.js file to your project, you need to create your application namespaces in the app.js file and use require to import the module into your code, as shown in the following code block:
//Create our application namespace
var my = {
search : require('yahoo_search'),
isAndroid : ( Ti.Platform.osname === 'android')
};The next step in our recipe is to add your Yahoo developer API key. The following snippet shows how to register your API key with the module:
my.search.addAPIKey('YOUR_KEY_GOES_HERE'),This recipe uses a simple UI containing Ti.UI.TextField, Ti.Map.View, and a Ti.UI.Button to search. Here we demonstrate the creation of these UI elements.
- First, we create a
Ti.UI.Windowto attach our visual elements.var win = Ti.UI.createWindow({ backgroundColor:'#fff' }); - Next, we attach a text field to allow the user to enter a business for which to search.
var txtSubject = Ti.UI.createTextField({ left:0, width:150, height:40,top:30, hintText:'Enter Business Name', borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED }); win.add(txtSubject); - Next, a button is added to allow the user to search for the business name entered in the text field.
var searchButton = Ti.UI.createButton({ title:'Search', right:0, width:150, height:40,top:30 }); win.add(searchButton); - Finally, a map view is attached to display our search results.
var mapView = Ti.Map.createView({ mapType: Ti.Map.STANDARD_TYPE, width:Ti.UI.FILL, userLocation:true, top:75,bottom:0 }); win.add(mapView);
The updateMap function is the callback method to the search module. updateMap provides the search results and then it transforms them to display to the user.
function updateMap(e){- The search results are provided as the
eparameter to the method. The first step in the process is to check if the search was successful, by checking thee.successproperty.if(!e.success){ alert("Sorry we encountered an error"); return; } - After verifying that the search was successful, a loop is used to create map annotations for each
e.itemprovided in the results.var points = [], itemCount = e.items.length, rightBtn = Ti.UI.iPhone.SystemButton.DISCLOSURE; for (var iLoop=0;iLoop<itemCount;iLoop++){ points.push(Ti.Map.createAnnotation({ latitude : e.items[iLoop].Latitude, longitude : e.items[iLoop].Longitude, title : e.items[iLoop].Address, subtitle : e.items[iLoop].Phone, pincolor : Ti.Map.ANNOTATION_GREEN, ClickUrl : items[iLoop].ClickUrl, animate:true, rightButton: rightBtn })); } var currentRegion = { latitude:e.latitude, longitude:e.longitude, latitudeDelta:0.04, longitudeDelta:0.04}; - The new region object is created using the search coordinates and applied to set the viewing point of the map. This allows the user to see all of the pins added.
mapView.setLocation(currentRegion); mapView.regionFit = true; - Finally, the points array containing all of our annotations is added to the
mapView.mapView.annotations = points; };
When the searchButton button is pressed, the following snippet is used to perform a location search using the device's coordinates.
searchButton.addEventListener('click',function(e){- First, any existing map pins are removed
mapView.removeAllAnnotations();
- If the text field's keyboard is open, the
blurmethod is called to close it.txtSubject.blur();
- To avoid an empty search, the text field is checked to make sure it contains a value.
if((txtSubject.value+'').length ===0){ alert('Enter a business to search'), return; } - The module's
currentLocationQuerymethod is then called, providing the business name entered in the text field and theupdateMapfunction to be used as a callback.my.search.currentLocationQuery(txtSubject.value,updateMap); });
The Yahoo Search CommonJS module (yahoo_search.js) provides the following public functions, detailed in the following sections.
The Yahoo Local Search API requires a developer key. Before using any of the query methods, you must first use addAPIKey
to associate your developer key with the module.
my.search.addAPIKey('YOUR_KEY_GOES_HERE'),Tip
You can obtain a Yahoo API key by visiting developer.yahoo.com and creating a project within their developer portal.
The geoQuery function performs a Yahoo Local search using the latitude, longitude, and topic provided. The next example demonstrates how to search for Starbucks locations near Times Square in New York City. When the search has been completed, the results are provided to the callback function.
my.search.geoQuery(40.75773, -73.985708,'starbucks',callback);
The currentLocationQuery method uses your device's location services to determine your current latitude and longitude. It then provides the geoQuery function with the required search details. The next code line demonstrates how to search for Starbucks outlets near your current position. Once the search has been completed, the results are provided to the callback function.
my.search.currentLocationQuery('starbucks',callback);