andygup/jquery-mbile

## jquery-mbile
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>Basic jQuery Mobile Map</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <style type="text/css">
        html,body, div[data-role ="page"] {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
        .ui-header{
            margin: 0px !important;
            padding: 0px !important;
            float: left;
        }
        .ui-content{
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
        #mapDiv {
            position: absolute;
            background-color: #EEEEDD;
            height: 100%;
            width: 100%;
            padding: 0px;
            z-index: 0;
            left: 0px;

        }
    </style>
</head>

<body>
    <div data-role="page" id="home">

        <div data-theme="a" data-role="header" data-position="fixed">
            <h3>HTML5 Geolocation</h3>
        </div>

        <div data-role="content">
            <div id="mapDiv"></div>
        </div>

        <script type="text/javascript">
            $( '#home' ).on( 'pageinit',function(event){
                init();
            });
        </script>

    </div>

    <!-- Load the library and CSS references for ArcGIS API for JavaScript -->
    <script type="text/javascript" src="http://js.arcgis.com/3.7compact"></script>

    <script>

        function init(){

            require(["esri/map","esri/symbols/PictureMarkerSymbol","dojo/ready"],
                    function(Map,PictureMarkerSymbol,ready) {
                        ready(function(){

                            // Create map
                            var map = new Map("mapDiv",{
                                basemap: "topo",
                                center: [-122.45,37.75],
                                zoom: 2
                            });

                            // Wait until map has loaded before starting geolocation
                            map.on("load",startGeolocation);

                            // Create the marker symbol
                            var markerSymbol = new PictureMarkerSymbol({
                                "angle":0,
                                "xoffset":0,
                                "yoffset":0,
                                "type":"esriPMS",
                                "url":"images/green-pin.png",
                                "width":35,
                                "height":35
                            })

                            function startGeolocation(){
                                map.reposition();
                                map.resize();
                                navigator.geolocation.getCurrentPosition(locationSuccess,locationError,{setHighAccuracy:true});
                            }

                            // Handle location success
                            function locationSuccess(position){
                                if(position.coords.latitude != null || position.coords.longitude != null){
                                    console.log("ps " + position.coords.longitude + ", " + position.coords.latitude)
                                    var wgsPt = new esri.geometry.Point(position.coords.longitude,position.coords.latitude);
                                    map.graphics.add(new esri.Graphic(wgsPt, markerSymbol));
                                    map.centerAt(wgsPt);

                                    setTimeout((function(){
                                        console.log("rotate timer complete");
                                         map.centerAndZoom(14);

                                    }).bind(this),2000);

                                    //map.centerAndZoom(wgsPt, 20);
                                }
                            }

                            function locationError(err){
                                console.log("locationError: " + err.message);
                            }

                        })
                    }
            );

        }

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
	<title>Basic jQuery Mobile Map</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
	<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
	<style type="text/css">
	html,body, div[data-role ="page"] {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	}
	.ui-header{
	margin: 0px !important;
	padding: 0px !important;
	float: left;
	}
	.ui-content{
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	}
	#mapDiv {
	position: absolute;
	background-color: #EEEEDD;
	height: 100%;
	width: 100%;
	padding: 0px;
	z-index: 0;
	left: 0px;

	}
	</style>
	</head>

	<body>
	<div data-role="page" id="home">

	<div data-theme="a" data-role="header" data-position="fixed">
	<h3>HTML5 Geolocation</h3>
	</div>

	<div data-role="content">
	<div id="mapDiv"></div>
	</div>

	<script type="text/javascript">
	$( '#home' ).on( 'pageinit',function(event){
	init();
	});
	</script>

	</div>

	<!-- Load the library and CSS references for ArcGIS API for JavaScript -->
	<script type="text/javascript" src="http://js.arcgis.com/3.7compact"></script>

	<script>

	function init(){

	require(["esri/map","esri/symbols/PictureMarkerSymbol","dojo/ready"],
	function(Map,PictureMarkerSymbol,ready) {
	ready(function(){

	// Create map
	var map = new Map("mapDiv",{
	basemap: "topo",
	center: [-122.45,37.75],
	zoom: 2
	});

	// Wait until map has loaded before starting geolocation
	map.on("load",startGeolocation);

	// Create the marker symbol
	var markerSymbol = new PictureMarkerSymbol({
	"angle":0,
	"xoffset":0,
	"yoffset":0,
	"type":"esriPMS",
	"url":"images/green-pin.png",
	"width":35,
	"height":35
	})

	function startGeolocation(){
	map.reposition();
	map.resize();
	navigator.geolocation.getCurrentPosition(locationSuccess,locationError,{setHighAccuracy:true});
	}

	// Handle location success
	function locationSuccess(position){
	if(position.coords.latitude != null \|\| position.coords.longitude != null){
	console.log("ps " + position.coords.longitude + ", " + position.coords.latitude)
	var wgsPt = new esri.geometry.Point(position.coords.longitude,position.coords.latitude);
	map.graphics.add(new esri.Graphic(wgsPt, markerSymbol));
	map.centerAt(wgsPt);

	setTimeout((function(){
	console.log("rotate timer complete");
	map.centerAndZoom(14);

	}).bind(this),2000);

	//map.centerAndZoom(wgsPt, 20);
	}
	}

	function locationError(err){
	console.log("locationError: " + err.message);
	}

	})
	}
	);

	}

	</script>
	</body>
	</html>