Select to view content in your preferred language

Mobile question

799
1
Jump to solution
05-14-2014 10:28 AM
TimWitt
Deactivated User
Hey everybody,

I was wondering if there is a command I can use within a function that will switch to the map view.

This is the code I have so far:

<!doctype html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!-- On iOS, as part of optimizing your web application, have it use the     standalone mode to look more like a native application. When you use this     standalone mode, Safari is not used to display the web content???specifically,     there is no browser URL text field at the top of the screen or button bar     at the bottom of the screen. -->     <meta name="apple-mobile-web-app-capable" content="yes">     <!-- Controls the dimensions and scaling of the browser window in iOS,     Android, webOS, Opera Mini, Opera Mobile and Blackberry. width: controls     the width of the viewport initial-scale: controls the zoom level when the     page is first loaded maximum-scale: control how users are allowed to zoom     the page in or out user-scalable: control how users are allowed to zoom     the page in or out -->     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">     <!-- Sets the style of the status bar for a web application when in standalone     mode -->     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">     <title>Getting Started - Mobile</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">      <link rel="stylesheet" href="css/main.css">      <script>var dojoConfig = { mblAlwaysHideAddressBar: true };</script>     <script src="http://js.arcgis.com/3.9compact/"></script>     <script>     require(["esri/map", "dojox/mobile", "dojox/mobile/parser", "esri/sniff",              "dojox/mobile/deviceTheme", "dojo/dom", "dijit/registry", "dojo/on", "esri/dijit/Geocoder", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",              "esri/symbols/SimpleFillSymbol", "esri/Color", "esri/graphic", "dojo/on", "dojo/dom", "dijit/registry",             "dojox/mobile/ToolBarButton", "dojox/mobile/View", "dojox/mobile/ContentPane"],              function(Map, mobile, parser, has, dTheme, dom, registry, on, Geocoder, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, Graphic, on, dom, registry) {         parser.parse();         mobile.hideAddressBar();          var map = new esri.Map("map", {           basemap: "hybrid",           center: [-80.734, 28.800],           zoom: 10,           slider: false         });         map.on("load", mapLoadHandler);          var resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";         on(window, resizeEvt, resizeMap);          function mapLoadHandler(evt) {           resizeMap();           registry.byId('mapView').on('AfterTransitionIn', resizeMap);         }          function resizeMap() {           mobile.hideAddressBar();           adjustMapHeight();           map.resize();           map.reposition();         }          function adjustMapHeight() {           var availHeight = mobile.getScreenSize().h - registry.byId('header').domNode.clientHeight - 1;           if (has('iphone') || has('ipod')) {             availHeight += iphoneAdjustment();           }           dom.byId("map").style.height = availHeight + "px";         }          function iphoneAdjustment() {           var sz = mobile.getScreenSize();           if (sz.h > sz.w) { //portrait             //Need to add address bar height back to map              return screen.availHeight - window.innerHeight - 40; /* 40 = height of bottom safari toolbar */           } else { //landscape             //Need to react to full screen / bottom bar visible toggles             var _conn = on(window, 'resize', function() {               _conn.remove();               resizeMap();             });             return 0;           }         }                   geocoder = new Geocoder ({         arcgisGeocoder: false,         geocoders: [ {           url: "http://gis.brevardcounty.us/gissrv/rest/services/Geocode/Address_Locator_WKID2881/GeocodeServer",           name: "Brevard County",           placeholder: "Find a place",           outfields: "*"         }],         map:map         }, "geocodeDiv");         geocoder.startup();         geocoder.on("select", showLocation);         geocoder.on("find-results", showMap);         map.infoWindow.on("hide", doclear2);                  function showLocation(evt) {                        map.graphics.clear();             var point = evt.result.feature.geometry;             var symbol = new SimpleMarkerSymbol()               .setStyle("square")               .setColor(new Color([255,0,0,0.5]));             var graphic = new Graphic(point, symbol);             map.graphics.add(graphic);             map.infoWindow.setTitle("Search Result");             map.infoWindow.setContent(evt.result.name);             map.infoWindow.show(evt.result.feature.geometry);             map.infoWindow.resize(180, 100);         };        function showMap(){           moveTo:'mapView';         }         function doclear2(){           map.graphics.clear();           map.infoWindow.hide();         }       });     </script>   </head>   <body>     <div id="mapView" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">       <div id="header" data-dojo-type="dojox.mobile.Heading">                   <div id="aboutButton" data-dojo-type="dojox.mobile.ToolBarButton" style="float: right;" moveTo="aboutView">About</div>            <div id="addressButton" data-dojo-type="dojox.mobile.ToolBarButton" style="float: left;" moveTo="addressView">Search</div>        </div>       <div id="mapContainer" data-dojo-type="dojox.mobile.ContentPane">         <div id="map"></div>       </div>     </div>     <div id="aboutView" data-dojo-type="dojox.mobile.View">       <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Map', moveTo:'mapView'">About</h1>       <p style="padding: 5px;">This area can contain address information about your application.</p>            </div>      <div id="addressView" data-dojo-type="dojox.mobile.View">       <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'Map', moveTo:'mapView'">Address</h1>       <p style="padding: 5px;">Type in an Address</p>          <div id="geocodeDiv"></div>     </div>   </body> </html>


I want the showMap function to bring me back to the map view.

Any help is appreciated!

Thanks,

Tim
0 Kudos
1 Solution

Accepted Solutions
TimWitt
Deactivated User
Never mind, I figured it out.


        function showMap(){           dijit.registry.byId("addressView").performTransition("mapView", 1, "slide");         }

View solution in original post

0 Kudos
1 Reply
TimWitt
Deactivated User
Never mind, I figured it out.


        function showMap(){           dijit.registry.byId("addressView").performTransition("mapView", 1, "slide");         }
0 Kudos