AnsweredAssumed Answered

dojox/mobile - Find nearby locations - iPhone issues

Question asked by schlot on Nov 17, 2014
Latest reply on Nov 18, 2014 by schlot

I've been fairly successful using the dojox/mobile components.  I used the example 'Find Nearby' a year or so ago, in one of it's earlier iterations: Find nearby locations | ArcGIS API for JavaScript   At the time, the example was written with API version 2.7.  Because it was based on a really old version of the API, as well as in legacy, I updated it, comparing the code I had with the updated example. I thought I had it all updated and working.

 

Something in these changes has caused this to stop working on an iPhone.  I'm assuming there is something with either a meta tag, or CSS change or maybe both. The original example had a line item specifically for iPhone.css.  I'm wondering if this is missing from the example or if it's combined in some other css and no long necessary. It looks like there is still a css available for it, under the newer directory structure as   

<link type="text/css" href="https://js.arcgis.com/3.9/dojox/mobile/themes/iphone/iphone.css" rel='stylesheet'> 

I added that entry into my code, but that didn't help.

I've also not sure what apple meta tags are necessary. 

 

Since this was working until I started trying to update it, I'm hoping someone can review this and give me some idea of why this doesn't work in particular on an iPhone.  I have had it tested on Android and a Windows phone and it works there.  I've tried various emulation web sites, and they all work as well.

 

This link is public facing:

Warming Center Locations

 

<!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>Warming Center Locations</title>
    <link type="text/css" rel="stylesheet" href="https://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">  
    <link type="text/css" href="https://js.arcgis.com/3.9/dojox/mobile/themes/iphone/iphone.css" rel='stylesheet'> 
    <link rel="stylesheet" href="https://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript">
        var dojoConfig = {
            mblAlwaysHideAddressBar: true, 
            parseOnLoad: false
        };
    </script>
    <script type="text/javascript" src="https://js.arcgis.com/3.9compact/"></script>
    <script type="text/javascript">
   //  var pathName = "https://ogi.oa.mo.gov";
    var pathName = "https://ogitest.oa.mo.gov";
        var locator,geomService, map, spatialReference, resizeEvt, currentLocation, currentGraphic, startAddr;
        var searchQuery,siteFeatureLayer, infoTemplate, siteInfoTemplate;
        var startSymbol, siteRenderer;
        var routeGraphicLayer,routePolylineSymbol, segmentGraphicsLayer;
        var routeTask, routeParams, directionFeatures, itemList;
        var currentBufferDist = 25;
        var pointSource = "";
        require(["dojox/mobile","dojox/mobile/parser","dojox/mobile/compat","dojox/mobile/deviceTheme", 
          "dojo/dom", "dijit/registry", "dojo/on", "dojo/query", "dojo/sniff", "dojo/keys",
          "esri/map", "esri/SpatialReference", "esri/geometry/Extent", "esri/dijit/Popup","esri/InfoTemplate",         
          "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/GraphicsLayer", 
          "esri/tasks/locator","esri/tasks/GeometryService", "esri/tasks/query", "esri/tasks/QueryTask", 
          "esri/tasks/RouteTask", "esri/tasks/RouteParameters", "esri/tasks/FeatureSet","esri/units",
          "esri/tasks/BufferParameters",
          "esri/renderers/SimpleRenderer", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", 
          "esri/symbols/SimpleMarkerSymbol","esri/symbols/PictureMarkerSymbol", "esri/symbols/TextSymbol",  
          "esri/symbols/Font","esri/geometry/Point","esri/geometry/webMercatorUtils","esri/geometry/mathUtils",
          "esri/graphic", "dojo/_base/Color", "dojo/_base/array", "dojox/mobile/ListItem","dojox/mobile/Button",
          "dojox/mobile/RoundRectList","dojox/mobile/View","dojox/mobile/ToolBarButton","dojox/mobile/Heading",
          "dojox/mobile/RoundRect","dojox/mobile/TextBox","dojox/mobile/ContentPane",
          "dojo/domReady!"], 
          function(mobile, parser, compat,dTheme, dom, registry, on, query, has,keys,
              Map, SpatialReference, Extent,Popup, InfoTemplate,                
              FeatureLayer, ArcGISDynamicMapServiceLayer, GraphicsLayer,
              Locator, GeometryService, Query, QueryTask, 
              RouteTask,RouteParameters,FeatureSet,esriUnits,BufferParameters,
              SimpleRenderer, SimpleLineSymbol, SimpleFillSymbol,SimpleMarkerSymbol, PictureMarkerSymbol,
              TextSymbol, Font, Point, webMercatorUtils, mathUtils, Graphic, Color, arrayUtils, ListItem, Button, RoundRectList){
            parser.parse();


    routeTask = new RouteTask(pathName+"/arcgis/rest/services/BaseMap/Route/NAServer/Route");  
    geomService = new GeometryService(pathName+"/arcgis/rest/services/Utilities/Geometry/GeometryServer");
    locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
    locator.on("address-to-locations-complete", showGeocodeResults);
    resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";
    on(window, resizeEvt, resizeMap);
   
    var spatialReference = new SpatialReference({ wkid : 102100});
    var startExtent = new Extent(-10723197, 4186914, -9829190, 4992866, spatialReference);
    var map = new Map("mapDiv", {
        extent : startExtent,
        basemap:"streets",
        autoResize:false
      }); 
    map.on("load", mapLoadHandler);  
    
    startSymbol = new PictureMarkerSymbol('images/bluedot.png', 20, 20);
    routePolylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([115, 44, 123, 0.6]), 4.5);
    var routeRenderer = new SimpleRenderer(routePolylineSymbol);
    routeGraphicLayer = new GraphicsLayer({id : "routeGraphicLayer"});
    routeGraphicLayer.setRenderer(routeRenderer);
    map.addLayer(routeGraphicLayer);


    var segmentSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([102, 255, 255, 0.5]), 10);
    var segmentRenderer = new SimpleRenderer(segmentSymbol);
    segmentGraphicsLayer = new GraphicsLayer({
        id : "segmentGraphicsLayer"
    });
    segmentGraphicsLayer.setRenderer(segmentRenderer);
    map.addLayer(segmentGraphicsLayer);

    var locSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 4, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#f79d17"), 2), new Color("#f79d17"));   
    var siteSymbol = new PictureMarkerSymbol('images/i_pin_red_sm.png', 32, 32);
    siteRenderer = new SimpleRenderer(siteSymbol);
    siteInfoTemplate = new InfoTemplate();
    siteInfoTemplate.setTitle("<b>Site Information</b>");
    siteInfoTemplate.setContent(generateInfoContent); 
    siteFeatureLayer = new FeatureLayer(pathName+"/arcgis/rest/services/DHSS/warmingCenter/MapServer/0", {
        id : "siteFeatureLayer",
        mode : FeatureLayer.MODE_SELECTION,
        outFields : ['*'],
        infoTemplate : siteInfoTemplate
    });
    siteFeatureLayer.setRenderer(siteRenderer);
    map.addLayer(siteFeatureLayer);


    searchQuery = new Query();
    routeParams = new RouteParameters();
    routeParams.returnRoutes = true;
    routeParams.returnDirections = true;
    routeParams.directionsLengthUnits = esriUnits.MILES;
    routeParams.outSpatialReference = map.spatialReference;
    routeParams.stops = new FeatureSet();
 //-------------------------------------------------   
 //map resize events needed for mobile maps   
  function resizeMap() {
    mobile.hideAddressBar();
    adjustMapHeight();
    map.resize();
    map.reposition();
  }
  function adjustMapHeight() {
    var headHeight = registry.byId('mapHeader').domNode.clientHeight;
    var availHeight = mobile.getScreenSize().h - headHeight - 60;
    if (has('iphone') || has('ipod')) {
    availHeight += iphoneAdjustment();
    }
    dom.byId("mapDiv").style.height = availHeight + "px";
    dom.byId("mapDiv").style.width = "100%";
  }
  function iphoneAdjustment() {
    var sz = mobile.getScreenSize();
    if (sz.h > sz.w) { //its portrait
    //Need to add address bar height back to map because it has not been hidden yet 44 = height of bottom safari button bar 
        return screen.availHeight - window.innerHeight - 44; 
    } else { // must be landscape
    //Need to react to full screen / bottom button bar visible toggles
        var _conn = on(window, 'resize', function() {
           _conn.remove();
            resizeMap();
        });
      return 0;
    }
  }
//functions for geolocation API -------------------------
  function mapLoadHandler(evt){
    if (navigator.geolocation) {   
         navigator.geolocation.getCurrentPosition(estimateAddressLocation, geoLocationError);
    } else {
      alert("No geolocation support. You must specify a starting address to begin your search.");
        registry.byId('locationDiv').domNode.innerHTML = "Your location not detected";
        registry.byId('accuracyDiv').domNode.innerHTML = "Use 'Enter my starting address' to set your current location.";
        registry.byId('mainHeader').set("busy", false);  
    }
    registry.byId('mapView').on('AfterTransitionIn', resizeMap);
  }
function estimateAddressLocation(location) {
    var pt = new Point([location.coords.longitude, location.coords.latitude], new SpatialReference({ wkid : 4326 }));   
    // Geolocation api returns an address but iPhone returns null so use reverse geocoding to get address
    locator.locationToAddress(pt, 100, function(candidate) {
        if (candidate.address) {
          startAddr = candidate.address.Address;
            var address = candidate.address.Address + "<br/> " 
            + candidate.address.City + ", " 
            + candidate.address.Region 
            + " " + candidate.address.Postal;
            registry.byId('locationDiv').domNode.innerHTML = "Placed near: <br/> " + address;
            var webMercPt = webMercatorUtils.geographicToWebMercator(candidate.location);
            registry.byId('accuracyDiv').domNode.innerHTML = "Location accurate within " 
                + location.coords.accuracy + " meters <br />of the address listed.  Last Updated: " 
                + new Date(location.timestamp).toLocaleString();
          if (pointSource == "Geocode") {
              currentLocation = candidate.location;            
          }else {
            currentLocation = webMercPt; // webMercator  
          }
          registry.byId('mainHeader').set("busy", false);     
            if (!currentGraphic) {  //currentGraphic used as the starting location for buffer search
               var attr = { "Source" : "Geolocated point"};
               currentGraphic = new Graphic(currentLocation, startSymbol, attr);
                pointSource = "geoLocation";
                map.graphics.add(currentGraphic);
                map.centerAndZoom(currentLocation, 16);
            } else {
               currentGraphic.setGeometry(currentLocation);
            }
      }
  }, function(error) {
      registry.byId('locationDiv').innerHTML = 'Unable to approximate address for your current location';
      });
  }
  function geoLocationError(error){
    if (watchProcess !== null) {
      navigator.geolocation.clearWatch(watchProcess);
      watchProcess = null;
    }
    switch (error.code) {
      case error.PERMISSION_DENIED:
        alert("Geolocation access denied or disabled. To enable geolocation on your iPhone, go to Settings > General > Location Services");
        
        break;
        
      case error.POSITION_UNAVAILABLE:
        alert("Location information not available");
        break;
        
      case error.TIMEOUT:
        alert("Request to get located timed out.");
        break;
        
      default:
        alert("unknown error");
        break;
    }
  }
//
  function emptyContainer (container) {
    var itemChildren = container.getChildren();
    if (itemChildren.length > 0) {    
       arrayUtils.forEach(itemChildren, function(widget){
          widget.destroyRecursive(); 
       });
     } 
  }
   function generateInfoContent(graphic){
    var formatString = "";   
    var disclaimerTest = graphic.attributes.HOURS_OF_OPERATION_DISCLAIMER;
    locTest = graphic.attributes.LOC_CODE; 
    formatString = "<b>"+graphic.attributes.FACILITY +"</b><br/>" +graphic.attributes.ADDRESS+"<br/>" 
    + graphic.attributes.CITY+", " + graphic.attributes.STATE + "</br>"
    + "Phone: " + graphic.attributes.PHONE + "<br/>"
    + "Hours: " + graphic.attributes.HOURS_OF_OPERATION;
   if (disclaimerTest){
     formatString = formatString + "<br/>" + graphic.attributes.HOURS_OF_OPERATION_DISCLAIMER;
   }
    switch (locTest){
      case "CENT":                  
       formatString = formatString + "</br></br>  ** Location Approximate ** ";
       break;
       default:
       }                       
    return formatString;  
  } 
//search functions -------------------------------
  function queryFeatures() {
   itemList = registry.byId('searchResults');
   emptyContainer(itemList);
    var bufferParams = new BufferParameters();
    bufferParams.geometries = [currentGraphic.geometry];
    bufferParams.distances = [currentBufferDist];
    bufferParams.unit = GeometryService.UNIT_STATUTE_MILE;
    bufferParams.outSpatialReference = map.spatialReference;
     geomService.buffer(bufferParams, function(geometries) {
        var bufferGeometry = geometries[0];
        var geometryExtent = bufferGeometry.getExtent();
        query.geometry = geometryExtent;
        query.outSpatialReference = map.spatialReference;
        siteFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
            if (features.length === 0) {//If no results are found, suggest increasing search distance
                var noResults = new ListItem({
                    label : "No Results"
                });
                noResults.set("class", "mblVariableHeight");
                noResults.domNode.innerHTML = "No results found.  Try a larger search distance using the settings option.";
                itemList.addChild(noResults);
                return;
            }
  //format returned distance to something more readable
            arrayUtils.forEach(features, function(feature) {
                feature.distance = Math.round((mathUtils.getLength(feature.geometry, currentGraphic.geometry) / 1609.344) * 100) / 100;
            });
    
  //sorts the returned features so closest features are at the top
            var sortedFeatures = features.sort(function(a, b) {
                return a.distance - b.distance;
            });
  //create the formatted string to populate the listitem, add a map button that solves the route between the current location and site
            arrayUtils.forEach(sortedFeatures, function(result) {          
              var formatString = result.attributes.FACILITY + "<br />" + result.attributes.ADDRESS 
              + " - " + result.attributes.CITY + "<br />"
              + result.attributes.PHONE + " -- " 
              + result.distance + " miles<br/>"
         
                var resultItem = new ListItem({
                    label : result.attributes.FACILITY
                });
              resultItem.set("variableHeight", true);
              resultItem.domNode.innerHTML = formatString; 
                var button = new Button({
                    label : 'Map It',
                    moveTo : 'mapView'
                }).placeAt(resultItem.domNode);
    
              var locationDetails = function(result) {
                 mapResults(result);
              };
              on(button, 'click', function (){
                locationDetails(result)
              });
                itemList.addChild(resultItem);
           });
         }, function(error) {
                alert(error.message);
          });
    
        }, function(error) {
            alert(error.message);
        });
}
//Routing functions ------------------------------------------
  function mapResults(feature) {
     var att;
     var widget = registry.byId('resultsView');
      widget.performTransition('mapView', 1, "slide", null);
      routeGraphicLayer.clear();
      segmentGraphicsLayer.clear();
      routeParams.stops.features.length = 0;
      var  startLoc = new Graphic(currentLocation, locSymbol, {'name':startAddr});
      var endLoc = new Graphic(feature.geometry, locSymbol, {'name':feature.attributes.FACILITY});
      routeParams.outSpatialReference = map.spatialReference;
      routeParams.stops.features.push(startLoc);
      routeParams.stops.features.push(endLoc); 
      on(routeTask,'solve-complete', showRoute);  
      on(routeTask, 'error', routeError);
      routeTask.solve(routeParams);
   }
//  adds the route graphics to the graphicsLayer and populates the directions list
  function showRoute(solveResult) {
    var dirLi;
    var directions = solveResult.result.routeResults[0].directions;
    directionFeatures = directions.features;
    var dirView = registry.byId('routeDirections');
    emptyContainer(dirView);
    var dirList = new RoundRectList();
    dirView.addChild(dirList);
      arrayUtils.forEach(directions.features, function(feature, index) {
        routeGraphicLayer.add(new Graphic(feature.geometry, routePolylineSymbol));
           dirLi = new ListItem({
             label:feature.attributes.text
           });
          if (index === 0 || index === directions.features.length - 1) {//first and list entries don't use a click event
              dirList.addChild(dirLi);
          }else{
            dirLi.set("clickable", true);
            dirLi.set("rightText", "Map");
            on (dirLi, 'click', function () {
              zoomToSegment(index);
            });
           dirList.addChild(dirLi);
          }
      });
    map.setExtent(directions.extent, true);
  }
  function routeError(error) {
   alert("Problem finding route \n" + error.message ); 
   registry.byId("directions").domNode.innerHTML = "<b>Problem finding route</b> " ;
  }


//Zoom to the appropriate segment afer clicking a hyperlink in the directions list
  function zoomToSegment(index) {
    var segment = directionFeatures[index];
    segmentGraphicsLayer.clear();
    var segmentGraphic = new Graphic(segment.geometry);
    segmentGraphicsLayer.add(segmentGraphic);
    var adjExtent =segment.geometry.getExtent().expand(3);
    map.setExtent(adjExtent);
    var widget = registry.byId('directionsView');
    widget.performTransition('mapView', -1, "fade", null);
}
// geocoding functions -----------------------------------------------
  function locate() {
    map.graphics.clear();
      var address = {
      "SingleLine": dom.byId("txtAddress").value
    };
    locator.outSpatialReference = map.spatialReference;
    var options = {
      address: address,
      outFields: ["*"],
      searchExtent: startExtent
    };
    locator.addressToLocations(options);
  }
  function showGeocodeResults(evt){
    var geometry, candidate;
     var MOcandidates = arrayUtils.filter(evt.addresses, function(candidate){
      return candidate.attributes.Region == "Missouri";
    });
    candidate = MOcandidates[0];
    var attr = {
        "address": candidate.address                 
    };
    geometry = candidate.location;
    currentLocation = geometry;
    pointSource = "Geocode";
    var graphic = new Graphic(geometry, startSymbol, attr);
    map.graphics.add(graphic);
    currentGraphic = graphic;
    startAddr = candidate.address;
    registry.byId('locationDiv').domNode.innerHTML = candidate.address;
    registry.byId('accuracyDiv').domNode.innerHTML = "Not using geolocation, searching from address.";
  }
  
//event listeners  -----------------
  registry.byId('geoLocateItem').on("click", function() {
      if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(estimateAddressLocation, geoLocationError);
  } else {
    alert("No geolocation support. You must specify a starting address to begin your search.");
      registry.byId('locationDiv').innerHTML = "Your location not detected";
      registry.byId('accuracyDiv').innerHTML = "Use 'Enter my starting address' to set your current location."; 
      }
  });  
//function for changing search distance
       query(".distanceList").on("click", function(){   
       var dist = String(this.id);
       currentBufferDist = dist;
       console.log("search distance set to " + dist);
      });  


 on(registry.byId('centerItem'), 'click', function (){
   if (!currentGraphic) {
          alert("No geolocation support. You must specify a starting address to begin your search");
      } else {
          queryFeatures();
      }
 });


   on(registry.byId("btnGo"), 'click', function(){
     locate();
     var w = registry.byId('addressView');
     w.performTransition('mainView', -1, "slide");      
  });
    on(dom.byId("txtAddress"), "keydown", function(evt){
    switch (evt.keyCode){
        case keys.ENTER:
        var w = registry.byId('addressView');
        w.performTransition('mainView', -1, "slide");  
     // console.log("enter has been pressed");
      locate();
      break;
      default:
      //  console.log("some other key: " + evt.keyCode);
    }
  });
});//end main function
 </script>


 <script type="text/javascript">


  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12671191-9']);
  _gaq.push(['_trackPageview']);


  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();


</script>  
</head>
<body class="claro">
<div id="mainView" data-dojo-type="dojox/mobile/View" >
<h1 id="mainHeader" data-dojo-type="dojox/mobile/Heading"> Find a Warming Center </h1>
<ul data-dojo-type="dojox/mobile/EdgeToEdgeList" >
    <li id="centerItem" data-dojo-type="dojox/mobile/ListItem" 
    data-dojo-props="icon:'images/i_pin_red_sm.png', moveTo:'resultsView', variableHeight:true">
         Warming Centers
    </li> 
    <li id="AddressItem" data-dojo-type="dojox/mobile/ListItem" 
        data-dojo-props="icon:'images/mailbox.png', moveTo:'addressView',variableHeight:true" >
        Enter a starting address
    </li>
    <li id="geoLocateItem" data-dojo-type="dojox/mobile/ListItem" 
        data-dojo-props="icon:'images/crosshairs.png',variableHeight:true, clickable: true" >
        Use my current location
    </li>
    <li id="settingsItem" data-dojo-type="dojox/mobile/ListItem"
         data-dojo-props="icon:'images/settings.png', moveTo:'settingsView',variableHeight:true" > 
       Change Search Distance
    </li>
</ul>
<h2 data-dojo-type="dojox/mobile/RoundRectCategory">Current Location</h2>
<div id="locationDiv" data-dojo-type="dojox/mobile/RoundRect" ></div>
<div id="accuracyDiv" data-dojo-type="dojox/mobile/RoundRect" ></div>
</div>
<div id="resultsView" data-dojo-type="dojox/mobile/View" >
  <h2 id="resultsHeader" data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Search Results', variableHeight:'true'">
  <div  data-dojo-type="dojox/mobile/ToolBarButton" 
      data-dojo-props="label:'Home', moveTo:'mainView', transition:'slide',transitionDir:-1">
  </div>
  </h2>
  <ul id="searchResults" data-dojo-type="dojox/mobile/RoundRectList"></ul>
  </div>
  <div id="addressView" data-dojo-type="dojox/mobile/View">
      <div  data-dojo-type="dojox/mobile/ToolBarButton" 
      data-dojo-props="label:'Back', moveTo:'mainView', transition:'slide',transitionDir:-1">
        </div>
        <div id="addrPane" data-dojo-type="dojox/mobile/RoundRect">
       <h4> Enter address:</h4>
       <input id="txtAddress" class="textBox" type="text" placeHolder="Search by address or place" style="width:270px ">
       </input>
        <div id="btnGo" data-dojo-type="dojox/mobile/ToolBarButton"> GO </div>
  </div>
  </div>
 <div id="settingsView" data-dojo-type="dojox/mobile/View">
    <div data-dojo-type="dojox/mobile/ToolBarButton" 
      data-dojo-props="label:'Back', moveTo:'mainView', transition:'slide',transitionDir:-1">
    </div>
      <ul id="searchDistList" data-dojo-type="dojox/mobile/EdgeToEdgeList" 
        data-dojo-props="select:'single'" >
        <li id="5" class="distanceList" data-dojo-type="dojox/mobile/ListItem" 
           data-dojo-props="variableHeight:true, clickable: true">
        5 miles
        </li>
        <li id="10" class="distanceList" data-dojo-type="dojox/mobile/ListItem" 
           data-dojo-props="variableHeight:true, clickable: true">
        10 miles
        </li>
         <li id="25" class="distanceList" data-dojo-type="dojox/mobile/ListItem" 
           data-dojo-props="variableHeight:true, clickable: true, checked:true">
        25 miles
        </li>
        <li id="50" class="distanceList" data-dojo-type="dojox/mobile/ListItem" 
           data-dojo-props="variableHeight:true, clickable: true">
        50 miles
        </li>
    </ul>
  </div>
  <div id="directionsView" data-dojo-type="dojox/mobile/View">
           <h2 id="dirHeader" data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Directions', variableHeight:'true'">
          <div  data-dojo-type="dojox/mobile/ToolBarButton" 
             data-dojo-props="label:'Back', moveTo:'mapView', transition:'slide',transitionDir:-1">
          </div>
        </h2>
     <div id="routeDirections" data-dojo-type="dojox/mobile/RoundRect" ></div>
  </div>
  <div id="mapView" data-dojo-type="dojox/mobile/View">
       <h2 id="mapHeader" data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Map', variableHeight:'true'">
          <div  data-dojo-type="dojox/mobile/ToolBarButton" 
             data-dojo-props="label:'Search Results', moveTo:'resultsView', transition:'slide',transitionDir:-1">
                 </div>
          <div id="btnDirections" data-dojo-type="dojox/mobile/ToolBarButton" 
           data-dojo-props="label:'Directions', moveTo:'directionsView', transition:'slide',transitionDir:1" style="float:right;"> </div>
        </h2>      
        <div id="mapDiv"> </div>
    </div>
  </body>
</html>

Outcomes