How to highlight a point feature in a map service using ArcGIS JavaScript API 3.18?

ThomasPuthusserry · ‎10-09-2016

It was possible (still possible) to highlight (a crosshair) a point feature in a mapservice using ArcGIS JavaScript api 3.13, however this is no longer available in 3.18. It seems this is only possible if the layer is called as feature layer. Is there any workaround on this?

RobertScheitlin__GISP · ‎10-09-2016

Thomas,

Here is a sample of how it works fine with points and ArcGISDynamicMapService

<!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">
    <title>Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
      }

      /* Change color of icons to match bar chart and selection symbol */
      .esriPopup.dark div.titleButton,
      .esriPopup.dark div.titlePane .title,
      .esriPopup.dark div.actionsPane .action {
        color: #A4CE67;
      }
      /* Additional customizations */
      .esriPopup.dark .esriPopupWrapper {
        border: none;
      }
      .esriPopup .contentPane {
        text-align: center;
      }
      .esriViewPopup .gallery {
        margin: 0 auto;
      }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/dom-class", "dojo/dom-construct", "dojo/on",
        "dojo/domReady!"
      ], function(
        Map,
        Popup, PopupTemplate,
        ArcGISDynamicMapServiceLayer,
        domClass, domConstruct, on
      ) {

        var popup = new Popup({
            titleInBody: false
        }, domConstruct.create("div"));
        //Add the dark theme which is customized further in the <style> tag at the top of this page
        domClass.add(popup.domNode, "dark");

        map = new Map("map", {
          basemap: "gray",
          center: [-98.57, 39.82],
          zoom: 4,
          infoWindow: popup
        });

        var template = new PopupTemplate({
          title: "Incident Info",
          description: "Address:{address}:  in {district} with a status of: {status}",
          fieldInfos: [{ //define field infos so we can specify an alias
            fieldName: "address",
            label: "Address"
          },{
            fieldName: "district",
            label: "District"
          },{
            fieldName: "status",
            label: "Status"
          }]
        });

        var dynLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/MapServer",{
          outFields: ["*"],
          infoTemplates: {0: {infoTemplate: template}}
        });
        map.addLayer(dynLayer);
      });
    </script>
  </head>

  <body class="claro">
    <div id="map"></div>
  </body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎10-09-2016

Thomas,

Here is a sample of how it works fine with points and ArcGISDynamicMapService

<!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">
    <title>Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
      }

      /* Change color of icons to match bar chart and selection symbol */
      .esriPopup.dark div.titleButton,
      .esriPopup.dark div.titlePane .title,
      .esriPopup.dark div.actionsPane .action {
        color: #A4CE67;
      }
      /* Additional customizations */
      .esriPopup.dark .esriPopupWrapper {
        border: none;
      }
      .esriPopup .contentPane {
        text-align: center;
      }
      .esriViewPopup .gallery {
        margin: 0 auto;
      }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/dom-class", "dojo/dom-construct", "dojo/on",
        "dojo/domReady!"
      ], function(
        Map,
        Popup, PopupTemplate,
        ArcGISDynamicMapServiceLayer,
        domClass, domConstruct, on
      ) {

        var popup = new Popup({
            titleInBody: false
        }, domConstruct.create("div"));
        //Add the dark theme which is customized further in the <style> tag at the top of this page
        domClass.add(popup.domNode, "dark");

        map = new Map("map", {
          basemap: "gray",
          center: [-98.57, 39.82],
          zoom: 4,
          infoWindow: popup
        });

        var template = new PopupTemplate({
          title: "Incident Info",
          description: "Address:{address}:  in {district} with a status of: {status}",
          fieldInfos: [{ //define field infos so we can specify an alias
            fieldName: "address",
            label: "Address"
          },{
            fieldName: "district",
            label: "District"
          },{
            fieldName: "status",
            label: "Status"
          }]
        });

        var dynLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/MapServer",{
          outFields: ["*"],
          infoTemplates: {0: {infoTemplate: template}}
        });
        map.addLayer(dynLayer);
      });
    </script>
  </head>

  <body class="claro">
    <div id="map"></div>
  </body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ThomasPuthusserry · ‎10-14-2016

Thanks Rob, very useful tips