Community

Popups help

322
0
11-06-2013 02:51 PM
DavidAshton
by
Occasional Contributor III
‎11-06-2013 02:51 PM
I'm trying to get the popup/mobile popup working.  https://developers.arcgis.com/en/javascript/jssamples/widget_mobilepopup.html

For my code the pop works, but I need it to be more like the sample and allow me to select more than one feature at a time, when this happens the popup states (ex. 1 of 3) and allows the users to scroll throw the selections. 

What am I missing.  I can get the sample to work but I can't use a web map I need to use my own service.  Can someone show me a sample with popup mobile using just a restend point instead of a web map.

Or can you tell me what I'm missing.  Do I need query the featurelayer somehow; lost and confused!

Thanks D-


<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map</title>
  <link rel="shortcut icon" href="https://community.esri.com/favicon.gif" />
  <link rel="stylesheet" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.7/js/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
   width:100%
    }
 
  
  
 popup = new esri.dijit.PopupMobile(null, dojo.create("div"));
 
  </style>
  <script src="https://js.arcgis.com/3.7/"></script>
  <script>
  
  
        
var map;
var popup;
var tasks;
var initExtent;
    require([
      "esri/map", 
      "esri/layers/FeatureLayer",
      "esri/tasks/query", 
      "esri/tasks/QueryTask", 
      "esri/tasks/GeometryService",
      "esri/graphic",
        "esri/dijit/PopupMobile",
   "esri/dijit/PopupTemplate",
    "esri/request",
        "esri/geometry/Point",
        "esri/graphic",
   "esri/tasks/IdentifyParameters",
   "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol", 
      "esri/renderers/SimpleRenderer", 
      "esri/graphic", "esri/lang",
      "dojo/_base/Color", "dojo/number", "dojo/dom-style", 
      "dojo/dom-construct", "dojo/on", "dojo/_base/array", "dojo/domReady!"

          ], 
    
 
  
  
    function(
        Map, FeatureLayer, Query, QueryTask,
        GeometryService, Graphic, PopMobile, 
        PopupTemplate,
        esriRequest,
        Point,
        Graphic,
        IdentifyParameters, SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle, domConstruct, on, array, dom
        )  {
        
         // use a proxy page if a URL generated by this page is greater than 2000 characters
         // if proxyUrl is null or undefined the featureLayer.selectFeatures call will not work
        esri.config.defaults.io.proxyUrl = "https://myserver/proxypage_net/proxy.ashx";


      map = new Map("map", {
        center: [-117.075,33.134],
        zoom: 13,
        basemap: "streets",
        infoWindow: popup

      });
      
      //hide the popup if its outside the map's extent
        map.on("mouse-drag", function(evt) {
          if (map.infoWindow.isShowing) {
            var loc = map.infoWindow.getSelectedFeature().geometry;
            if (!map.extent.contains(loc)) {
              map.infoWindow.hide();
            }
          }
        });

           
      
       popup = new esri.dijit.PopupMobile(null, dojo.create("div"));       
       
       var layer = new esri.layers.ArcGISDynamicMapServiceLayer("https://myserver/pubgis/rest/services/my/MapServer");
       map.addLayer(layer);
       var resizeTimer;        
        
        
        
        
         //Set info Template          
       var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("CIO ${DISTRICT}");
        infoTemplate.setContent( "<b>DISTRICT: </b>${DISTRICT}<br/>"
                             + "<b>POPULATION: </b>${POPULATION}<br/><br/>");
                             
          
  //Add Featuerlayer                   
         var PolyFeatures = new esri.layers.FeatureLayer("https://myserver/rest/services/my/FeatureServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate:infoTemplate,
          outFields:["DISTRICT", "POPULATION"]
        });
   

  
         PolyFeatures.on("click", function(evt) {
            map.infoWindow.setFeatures([evt.graphic]);
            map.infoWindow.show(evt.mapPoint);
        })
        map.addLayers([PolyFeatures]);
     
   
    });
  
  
    dojo.ready(init);
 
  </script>
</head>
<body class="claro">
  <div id="map" class="map">
      </div>
</body>
</html>
0 Kudos
0 Replies