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

1836
2
Jump to solution
10-09-2016 06:43 AM
ThomasPuthusserry
New Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

ThomasPuthusserry
New Contributor III

Thanks Rob, very useful tips

0 Kudos