nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Mobile Javascript how to set extent for webmap?

francescodi_vito

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

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

JasonZou

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

francescodi_vito

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

francescodi_vito

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

JasonZou

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

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.

JohnGravois

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

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

JasonZou

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

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

JasonZou

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.