Popup Mobile for dynamic map service layer

francescodi_vito · ‎10-09-2013

Hy guys,
i have a question.
Is it possible to use the popup mobile for a ArcGISDynamicMapServiceLayer?
In the example it works with a webmap and i tryed with infowindow lite but with this i have some error; with infowindow lite the dynamicmapservicelayer don't load.
Thanks

francescodi_vito · ‎10-10-2013

hello guys,
I'm developing a mobile application with jQuery Mobile API and javascript. I have followed the example of the popup mobile but does not work on dynamic mapservice that i use.
Any thoughts on this? Can you give me some advice?
This is my code.
[HTML]
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<link rel="stylesheet" href="themes/geologia.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.7/"></script>
<link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css'/>

<style type="text/css">
html, body
      {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
      }
   #mapcontent, #map { width: 100%; height: 100%; padding: 0; position: absolute; z-index: 0;}
    </style>

<script>

var map;
var layer1;
var popup;

    require([
      "esri/map",
      "esri/dijit/BasemapToggle",
      "dojo/domReady!",
   "esri/layers/ArcGISDynamicMapServiceLayer",
   "esri/dijit/Popup",
   "esri/arcgis/utils",
       "esri/dijit/PopupMobile",
    "dojo/dom-construct",
    ], function(
      Map, ArcGISDynamicMapServiceLayer, arcgisUtils,
          Popup
    ) {
      popup= new esri.dijit.Popup(null,dojo.create("div"));
      map = new Map("map", {
        center: [12.785, 42.372],
        zoom: 6,
slider:false,
        basemap: "topo",
infoWindow: popup
      });




/*aggiungi layer*/
    layer1 = new esri.layers.ArcGISDynamicMapServiceLayer("http://www.pcn.minambiente.it/arcgis/rest/services/geologica/MapServer",
    {
    visible:false}
    )
map.addLayer(layer1)

    });
function updateLayerVisibility() {
var isChecked = $('#checkbox-v-2a').is(':checked');
if(isChecked == true){
layer1.show()
}
else{
layer1.hide()
};

      }



</script>

</head>
<body>

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

<div data-theme="a" data-role="header" data-position="fixed">
<a href="#toc" data-role="button" data-icon="star" data-iconpos="notext"></a>
    <h3>Geologia</h3>
</div>


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

</div>

<div data-role="page" id="toc">

<div data-theme="a" data-role="header" data-position="fixed">
<a href="#home" data-role="button" data-icon="back" data-iconpos="notext"></a>
    <h3>Layer</h3>
</div>


<div data-role="content">
    <form>
    <fieldset data-role="controlgroup">
        <legend>Vertical:</legend>
        <input type="checkbox" name="" id="checkbox-v-2a" onClick="updateLayerVisibility()">
        <label for="checkbox-v-2a">Carta Geologica 1M</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" onClick="updateLayerVisibility_1()">
        <label for="checkbox-v-2b">Carta Geologia 500K</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Operation Layer 3</label>
    </fieldset>
</form>
</div>

</div>
</body>
</html>
[/HTML]

Hello to all
thanks

JonathanUihlein · ‎10-10-2013

Hi,

First thing that I noticed is that your require statement is wrong.

 require([
      "esri/map", 
      "esri/dijit/BasemapToggle",
      "dojo/domReady!",
   "esri/layers/ArcGISDynamicMapServiceLayer",
   "esri/dijit/Popup",
   "esri/arcgis/utils",
       "esri/dijit/PopupMobile",
    "dojo/dom-construct",
    ], function(
      Map, ArcGISDynamicMapServiceLayer, arcgisUtils,
          Popup
    )  {

Should be something like:

require([
 "esri/map", 
 "esri/dijit/BasemapToggle",
 "esri/layers/ArcGISDynamicMapServiceLayer",
 "esri/dijit/Popup",
 "esri/arcgis/utils",
 "esri/dijit/PopupMobile",
 "dojo/dom-construct",
 "dojo/domReady!",
],function(
 Map, 
 BasemapToggle,
 ArcGISDynamicMapServiceLayer, 
 Popup,
 arcgisUtils,
 PopupMobile,
 domConstruct
)  {

The modules and their namespace declarations need to be invoked in the same order.

Your modules are being matched with the wrong namespace declarations. For example, you are matching ArcGISDynamicMapServiceLayer with "esri/dijit/BasemapToggle", and Popup with "esri/layers/ArcGISDynamicMapServiceLayer".

Please read this article for the 'Hows and Whys':
http://dojotoolkit.org/documentation/tutorials/1.9/modern_dojo/

JustinFultz · ‎03-25-2014

Could you please post your final working code. I am struggling with this same thing, and as someone completely new to JavaScript and with little programming experience in general, I could really use some sample code to work from. Unfortunately, the documentation for the mobile popup only includes an example of using an ArcGIS.com map service.

Thanks,

Justin