Scribd Logo
Upload

Welcome to Scribd!

  • 60 views

    Doctype HTML

    Uploaded by

    api-240843386

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Doctype HTML

    Uploaded by

    api-240843386
    60 views5 pages

    Original Title

    doctype html

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    60 views5 pages

    Doctype HTML

    Uploaded by

    api-240843386

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    <!

    DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimumscale=1,user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>ESRI Maps</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact"></script> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; width: 100%; } .esriSimpleSlider div { height: 30px !important; width: 30px !important; } .page-map, #mapcontent.ui-content { width: 100%; padding: 0; overflow: hidden; } </style> <script type="text/javascript"> dojo.require("esri.map"); var mapStreet, mapAerial, mapTopo;

    function init() {

    //onorientationchange doesn't always fire in a timely manner in Android so check for both orientationchange and resize var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resizeMap"; window.addEventListener(orientationEvent, function () { orientationChanged(); }, false); var initialExtent = new esri.geometry.Extent({ "xmin": -8765800, "ymin": 4266710, "xmax": -8753600, "ymax": 4273680, "spatialReference": { "wkid": 102100 //WGS 1984 Web Mercator (Auxiliary Sphere) } });

    //street map mapStreet = new esri.Map("mapStreet", { extent: initialExtent }); var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Str eet_Map/MapServer"); mapStreet.addLayer(streetMapLayer); //aerial map mapAerial = new esri.Map("mapAerial", { extent: initialExtent }); var imageryMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Im agery/MapServer"); mapAerial.addLayer(imageryMapLayer); //topo map mapTopo = new esri.Map("mapTopo", { extent: initialExtent });

    var topoMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_To po_Map/MapServer"); mapTopo.addLayer(topoMapLayer); }

    function orientationChanged() { resizeMap(); } function resizeMap() { if (mapStreet) { $('#mapStreet').css("height", screen.height); $('#mapStreet').css("width", "auto"); mapStreet.reposition(); mapStreet.resize(); } if (mapAerial) { $('#mapAerial').css("height", screen.height); $('#mapAerial').css("width", "auto"); mapAerial.reposition(); mapAerial.resize(); } if (mapTopo) { $('#mapTopo').css("height", screen.height); $('#mapTopo').css("width", "auto"); mapTopo.reposition(); mapTopo.resize(); } } dojo.addOnLoad(init); </script> </head> <body> <!--Start of Main page 1--> <div data-role="page" id="mainPage"> <div data-role="header" data-theme="b"> <h1>Display Maps</h1> </div><!-- /header -->

    <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-driver" data-theme="e">ESRI Maps</li> <li><a href="#esriStreets"> <img src="icons/streets.png"/> <h3>Street Map</h3> </a></li> <li><a href="#esriAerial"> <img src="icons/imagery.png"/> <h3>Aerial Map</h3> </a></li> <li><a href="#esriTopo"> <img src="icons/topo.png" /> <h3>Topographic Map</h3> </a></li> </ul> </div><!-- /content -->

    </div><!-- /page --> <!--Start of page 2--> <div data-role="page" id="esriStreets"> <div data-role="header" data-position="inline" data-theme="b"> <a href="#mainPage" data-role="button">Home</a> <h1>Street Maps</h1> </div><!-- /header --> <div data-role="mapcontent"> <div id="mapStreet"></div> <ul data-role="listview" data-inset="true"> <li data-role="list-driver">ESRI Maps</li> <li><a href="#esriStreets">Street Map</a></li> <li><a href="#esriAerial">Aerial Map</a></li> <li><a href="#esriTopo">Topographic Map</a></li> </ul> </div><!-- /content --> </div><!-- /page --> <!--Start of page 3--> <div data-role="page" id="esriAerial"> <div data-role="header" data-position="inline" data-theme="b"> <a href="#mainPage" data-role="button" data-icon="home">Home</a> <h1>Aerial Maps</h1>

    </div><!-- /header --> <div data-role="mapcontent"> <div id="mapAerial"></div> <ul data-role="listview" data-inset="true"> <li data-role="list-driver">ESRI Maps</li> <li><a href="#esriStreets">Street Map</a></li> <li><a href="#esriAerial">Aerial Map</a></li> <li><a href="#esriTopo">Topographic Map</a></li> </ul> </div><!-- /content --> </div><!-- /page --> <!--Start of page 4--> <div data-role="page" id="esriTopo"> <div data-role="header" data-position="inline" data-theme="b"> <a href="#mainPage" data-role="button" data-icon="home" dataiconpos="notext">Home</a> <h1>Topo Maps</h1> </div><!-- /header --> <div data-role="mapcontent"> <div id="mapTopo"></div> <ul data-role="listview" data-inset="true"> <li data-role="list-driver">ESRI Maps</li> <li><a href="#esriStreets">Street Map</a></li> <li><a href="#esriAerial">Aerial Map</a></li> <li><a href="#esriTopo">Topographic Map</a></li> </ul> </div><!-- /content --> </div><!-- /page --> </body> </html>

    You might also like