topic Re: Popup Mobile for dynamic map service layer in ArcGIS JavaScript Maps SDK Questions

Popup Mobile for dynamic map service layer

francescodi_vito — Wed, 09 Oct 2013 12:23:53 GMT

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

Re: Popup Mobile for dynamic map service layer

francescodi_vito — Thu, 10 Oct 2013 09:27:20 GMT

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

Re: Popup Mobile for dynamic map service layer

JonathanUihlein — Sun, 12 Dec 2021 00:38:54 GMT

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/

Re: Popup Mobile for dynamic map service layer

JustinFultz — Tue, 25 Mar 2014 12:22:54 GMT

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