topic Re: Mobile Javascript how to set extent for webmap? in ArcGIS JavaScript Maps SDK Questions

Mobile Javascript how to set extent for webmap?

francescodi_vito — Tue, 20 Aug 2013 11:18:59 GMT

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

Re: Mobile Javascript how to set extent for webmap?

JasonZou — Tue, 20 Aug 2013 12:36:19 GMT

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

Re: Mobile Javascript how to set extent for webmap?

francescodi_vito — Tue, 20 Aug 2013 13:22:20 GMT

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

Re: Mobile Javascript how to set extent for webmap?

JasonZou — Tue, 20 Aug 2013 13:24:28 GMT

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.

Re: Mobile Javascript how to set extent for webmap?

francescodi_vito — Sat, 11 Dec 2021 10:40:55 GMT

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

Re: Mobile Javascript how to set extent for webmap?

JohnGravois — Sat, 11 Dec 2021 10:40:58 GMT

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.

Re: Mobile Javascript how to set extent for webmap?

francescodi_vito — Sun, 12 Dec 2021 16:11:54 GMT

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.

Re: Mobile Javascript how to set extent for webmap?

JasonZou — Sat, 11 Dec 2021 10:41:00 GMT

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);       
});

Re: Mobile Javascript how to set extent for webmap?

francescodi_vito — Tue, 20 Aug 2013 19:44:40 GMT

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

Re: Mobile Javascript how to set extent for webmap?

francescodi_vito — Tue, 20 Aug 2013 19:55:21 GMT

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

Re: Mobile Javascript how to set extent for webmap?

JasonZou — Tue, 20 Aug 2013 20:09:45 GMT

Glad to help. If you think my post answered your question, please mark it as answered. Thanks.