Mobile Javascript how to set extent for webmap?

francescodi_vito · ‎08-20-2013

Hi guys,
i develop a sample code for mobile with javascript and i load into it a webmap id that is on my arcgis online account.
Is it possible to set a custom extent for the webmap?
This is my cod

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Applicazione Web jQuery Mobile</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
  <script>var dojoConfig = { parseOnLoad:true };</script>
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4compact/"></script>
  <script>
    dojo.require("esri.map");
    dojo.require("esri.arcgis.utils");
    dojo.require("esri.dijit.Legend");

    var map;
  
    function init(){
      var webmapid = "6eb589248e684df282db5bcd993d1ebe";
      esri.arcgis.utils.createMap(webmapid, "mapDiv").then(function(response){
        map = response.map;

        var legend = new esri.dijit.Legend({
          map:map,
          layerInfos:(esri.arcgis.utils.getLegendLayers(response))
        },"legendDiv");
        legend.startup(); 


      });
    }

    dojo.ready(init);
  </script>

</head> 
<body> 

<div data-role="page" id="page">
 <div data-role="header">
  <h1>Pagina uno</h1>
 </div>
 <div data-role="content"> 
  <div id="mapDiv" style="height:380px"></div>  
 </div>
 <div data-role="footer" data-position="fixed">
  <h4>Piè di pagina</h4>
 </div>
</div>
</body>
</html>

Any help please?
Thanks

JasonZou · ‎08-20-2013

esri.arcgis.utils.createMap(webmapid, "mapDiv", {
    mapOptions: {
          extent: new Extent({
               xmin:-20098296,
               ymin:-2804413,
               xmax:5920428,
               ymax:15813776,
               spatialReference:{wkid:54032}
          })
     }
})

francescodi_vito · ‎08-20-2013

hi,
thanks for the replay but i try your code but the webmap is not load.
Any idea?
thanks

JasonZou · ‎08-20-2013

The extent in my code is just an example. You will need to replace with your extent with the spatial reference used in your web map.

francescodi_vito · ‎08-20-2013

Yes i know.
I use your example code with my value of spatial reference
this is the code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9, IE=10">
<!-- Sets whether a web application runs in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Sets the style of the status bar for a web application. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Mobile Gallery</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />
<link rel="stylesheet" href="vendors/appcropolis/app-reset.css" />
<link rel="stylesheet" href="resources/css/custom-buttons.css" />

<style>
  html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    width: 100%;
  }

  .ui-content {
    padding: 0 !important;
  }

  #map {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
  }

</style>

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5compact/"></script>
<script>var dojoConfig = { parseOnLoad:true };</script>
  <script>
    dojo.require("esri.map");
    dojo.require("esri.arcgis.utils");
    dojo.require("esri.dijit.Legend");
 dojo.require("esri.geometry.Extent");

    var map;
  
    function init(){
      var webmapid = "6eb589248e684df282db5bcd993d1ebe";
      esri.arcgis.utils.createMap(webmapid, "map",{
mapOptions: {
extent: new Extent({
xmin:1577660.2638056062,
ymin::5056615.1691762265,
xmax::1604566.0977619751,
ymax:5120210.7767094625,
spatialReference:{wkid:102100}
})
}
}).then(function(response){
        map = response.map;
  
       
      });
   
   
    }

    dojo.ready(init);
  </script>
 
</head>

<body>
<div data-role="page" id="page">
  <!-- header -->
  <div data-theme="a" data-role="header" data-position="fixed">
    <h3>Mappa</h3>
    <a href="#featureDialog" data-role="button" data-theme="reset" class="ios black">Layer</a>
  </div>

  <!-- content -->
  <div data-role="content">
    <div id="map"></div>
  </div>
</div>

<div data-role="page" id="featureDialog">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Layer</h1>
<a href="#page" data-role="button" data-theme="reset" class="ios black">Mappa</a>
</div>
<form>
    <fieldset data-role="controlgroup"  data-inset="true">
        <legend></legend>
        <input type="checkbox" id="checkbox-v-2a" class ="custom" value="0" data-mini="true" onchange="updateOPPLLayerVisibility()">
        <label for="checkbox-v-2a">Geologia</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" data-mini="true" onchange="updateOPPLLayerVisibility()">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" data-mini="true">
        <label for="checkbox-v-2c">Three</label>
    </fieldset>
</form>
</div>

</body>
</html>

but don't work.
In your opinion is there any error?
Thanks

JohnGravois · ‎08-20-2013

Jason's example uses the AMD technique of loading a module and then defining a variable (ex. "Extent") to refer to it afterward. if you are using the legacy dojo.require(), you would need to mention the fully qualified name when instantiating your extent object.

example:

mapOptions: {  
  extent: new esri.geometry.Extent({...
  xmin:1577660.2638056062,
  ...

the best way to check for the cause of errors like this is to look in the console of your browser developer tools. they usually mention that 'Extent' or similar is not defined.

francescodi_vito · ‎08-20-2013

hi,
thanks for replay.
I set the code as on example

function init(){
      var webmapid = "6eb589248e684df282db5bcd993d1ebe";
      esri.arcgis.utils.createMap(webmapid, "map",{
mapOptions: {
extent: new esri.geometry.Extent({
xmin:1577660.2638056062,
ymin::5056615.1691762265,
xmax::1604566.0977619751,
ymax:5120210.7767094625,
spatialReference:{wkid:102100}
})
}
}).then(function(response){
        map = response.map;
  
       
      });

but the map don't load.
If i see the chrome's debug tool i have also a one generic error.

JasonZou · ‎08-20-2013

Ok. Try this then:

function init(){
      var webmapid = "6eb589248e684df282db5bcd993d1ebe";
      esri.arcgis.utils.createMap(webmapid, "map").then(function(response){
        map = response.map;
        var initExtent = new esri.geometry.Extent({
             xmin:1577660.2638056062,
             ymin::5056615.1691762265,
             xmax::1604566.0977619751,
             ymax:5120210.7767094625,
             spatialReference:{wkid:102100}
        });
        map.setExtent(initExtent);       
});

francescodi_vito · ‎08-20-2013

Hi zj,
i tried your code but the map don't load, i have a syntax error.
Any idea?
Thanks

francescodi_vito · ‎08-20-2013

thanks zj,
now the map load correctly.
The error is in the doble "::" in the sample code.
Thanks very much for your help.
Bye