<!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>
Solved! Go to Solution.
function showMap(){ dijit.registry.byId("addressView").performTransition("mapView", 1, "slide"); }
function showMap(){ dijit.registry.byId("addressView").performTransition("mapView", 1, "slide"); }