0

I have looked at examples showing how to create a moveable infowindow but all of them that I have seen require a Map ID. My application is not on Portal or ArcGIS Online and does not have a Map ID. I am sure there is a simple go-around but I have not been able to think of it.

I have been modifying this code but have been unsuccessful:

    require:([
'esri/arcgis/utils',
'dojo/dnd/Moveable',
'dojo/query',
'dojo/on',
'dojo/dom-class'

], function (arcgisUtils, Moveable, query, on, domClass){
    var webMapItemID = featureLayer10;
    arcgisUtils.createMap(webMapItemID, "map", {}).then(function(response) {
        var map = response.map;
        var handle = query(".title", map.infoWindow.domNode)[0];
        var dnd = new Moveable(map.infoWindow.domNode, {
            handle: handle
        });

        // when the infoWindow is moved, hide the arrow:
        on(dnd, 'FirstMove', function() {
            // hide pointer and outerpointer (used depending on where the pointer is shown)
            var arrowNode =  query(".outerPointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");

            var arrowNode =  query(".pointer", map.infoWindow.domNode)[0];
            domClass.add(arrowNode, "hidden");
        }.bind(this));
    });
}),

I have tried using a featureLayer, serviceLayer, url for app and the name for the file. My application is built in ASP.NET and is using Javascript, HTML and CSS. The layers are hosted on an ArcGIS Server 10.5. I am using Visual Studio Professional 2013.

1

This is an example that is based on this sample.

Here's the JSBin for it: https://jsbin.com/vigata/edit?html,output

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<meta name="description" content="[Formatter Function]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the widget_formatInfoWindow sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/3/jssamples/widget_formatInfoWindow.html
-->
<title>Moveable info window</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dojox/layout/resources/ExpandoPane.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .esriPopupWrapper .title {
        cursor: move;
    }

    .esriPopup .hidden {
        display: none !important;
    }
</style>

<script src="https://js.arcgis.com/3.20/"></script>
<script>
    // infotemplate formatting functions need to be in the global scope to work
    var map, compare, compare2;

    require([
      "esri/map",
      "esri/InfoTemplate",
      "esri/layers/FeatureLayer",
      "esri/renderers/SimpleRenderer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "dojo/dom",
      "dojo/number",
      "dojo/on",
      "dojo/parser",
      "esri/Color",
      "dojo/dnd/Moveable",
      "dojo/query",
      "dojo/dom-class",

      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dojox/layout/ExpandoPane",
      "dojo/domReady!"
    ],
      function (
        Map, InfoTemplate, FeatureLayer, SimpleRenderer, SimpleFillSymbol,
        SimpleLineSymbol, dom, number, on, parser, Color, Moveable, query, domClass
    ) {

          parser.parse();

          map = new Map("mapDiv", {
              basemap: "streets",
              center: [-86.796, 47.13],
              zoom: 7
          });

          var infoTemplate = new InfoTemplate();
          infoTemplate.setTitle("Population in ${NAME}");
          infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" +
                                  "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
                                  "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
                                  "<b>2000 density: </b>${POP00_SQMI:NumberFormat}");

          var counties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
              mode: FeatureLayer.MODE_SNAPSHOT,
              infoTemplate: infoTemplate,
              outFields: [
                "NAME", "POP2000", "POP2007", "POP00_SQMI",
                "POP07_SQMI"
              ]
          });
          var handle = query(".title", map.infoWindow.domNode)[0];
          var dnd = new Moveable(map.infoWindow.domNode, {
              handle: handle
          });

          // when the infoWindow is moved, hide the arrow:
          on(dnd, 'FirstMove', function () {
              // hide pointer and outerpointer (used depending on where the pointer is shown)
              var arrowNode = query(".outerPointer", map.infoWindow.domNode)[0];
              domClass.add(arrowNode, "hidden");

              var arrowNode = query(".pointer", map.infoWindow.domNode)[0];
              domClass.add(arrowNode, "hidden");
          });

          counties.setDefinitionExpression("STATE_NAME = 'Michigan'");

          //apply a renderer
          var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 255, 255, 0.35]), 1),
            new Color([109, 146, 155, 0.35]));
          counties.setRenderer(new SimpleRenderer(symbol));

          map.addLayer(counties);

          on(dom.byId("chkT1"), "click", changeInfoTemplate);
          on(dom.byId("chkT2"), "click", changeInfoTemplate);

          dom.byId("chkT1").checked = true;

          compare = function (value, key, data) {
              var result = "", diff, pctChange;

              switch (key) {
                  case "POP2007":
                      result = value > data.POP2000 ? "images/up.png" : "images/down.png";
                      diff = data.POP2007 - data.POP2000;
                      pctChange = (diff * 100) / data.POP2000;
                      break;

                  case "POP07_SQMI":
                      result = value > data.POP00_SQMI ? "images/up.png" : "images/down.png";
                      diff = data.POP07_SQMI - data.POP00_SQMI;
                      pctChange = (diff * 100) / data.POP00_SQMI;
                      break;
              }

              return number.format(value) +
                     "&nbsp;&nbsp; <img src='" + result + "'/>" +
                     "&nbsp;&nbsp;<span style='color: " +
                     (pctChange < 0 ? "red" : "green") + ";'>"
                       + number.format(pctChange, { places: 3 }) +
                     "%</span>";
          };

          compare2 = function (value, key, data) {
              var diff = data.POP2007 - data.POP2000;
              var result = diff > 0 ? "images/up.png" : "images/down.png";
              var pctChange = (diff * 100) / data.POP2000;

              return "<img src='" + result + "'/>" +
                     "&nbsp;&nbsp;<span style='color: " +
                     (pctChange < 0 ? "red" : "green") + ";'>"
                       + number.format(pctChange, { places: 3 }) +
                     "%</span>";
          };

          function changeInfoTemplate() {
              console.log("changed");
              map.infoWindow.hide();

              var t1Checked = dom.byId("chkT1").checked;
              var t2Checked = dom.byId("chkT2").checked;
              var templateContent = "";

              if (t1Checked) {
                  templateContent = "<b>2007: </b>${POP2007:compare}<br/>" +
                                    "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
                                    "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
                                    "<b>2000 density: </b>${POP00_SQMI:NumberFormat}";
              }
              else if (t2Checked) {
                  templateContent = "<b>2007: </b>${POP2007}<br/>" +
                                    "<b>2007 density: </b>${POP07_SQMI}<br/><br/>" +
                                    "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
                                    "<b>2000 density: </b>${POP00_SQMI:NumberFormat}<br/><br/>" +
                                    "Diff: ${DIFF:compare2}";
              }

              counties.infoTemplate.setContent(templateContent);
          }
      });
</script>
</head>
<body class="soria">
<div data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

    <div data-dojo-type="dojox/layout/ExpandoPane"
         data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"
         style="width:220px;">
        <p>
            Click a county to view the population change between 2000 and 2007.<br /> <br />
            <b>Change the info template:</b> Template 1 displays the percentage growth (or decline) in population. The values are color-coded green for population increase and red for decline in population. Template 2 creates a new calculated field called diff that displays the population difference. <br />
            <input id="chkT1" name="template" type="radio" />
            <label for="chkT1">Template 1</label>
            <br />
            <input id="chkT2" name="template" type="radio" />
            <label for="chkT2">Template 2</label>
        </p>
    </div>
    <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>

</html>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.