nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Avoid Hightlight Graphic when infowindow shows

JulieBiju

Hai , Thank U...

Is it possible to avoid highliting the graphic in blue colour when the information windows shows.I am using picture marker symbol so for some of the images will give wrong information to users.

Eg : Extend Popup

var infoTemplate = new InfoTemplate();

infoTemplate.content = strhotspot;

var pointGraphic = new Graphic(geomPoint, symbol);

pointGraphic.setInfoTemplate(infoTemplate);

MyGraphicsLayerGL.add(pointGraphic);

Najděte více příspěvků označených jako

Accepted answers

RobertScheitlin__GISP

Julie,

Here is your app with the highlight gone:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior

    of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basemap Gallery - Bing Maps</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

  <style type="text/css">
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      z-index: -1;
      -moz-border-radius: 4px;
      overflow: hidden;
    }

    .claro .dijitButtonText {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: bold;
    }

    .claro td.dijitMenuItemLabel {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: 500;
    }

    .auto-style1 {}

    .auto-style2 {
      height: 20px;
    }

    .auto-style3 {
      height: 20px;
    }

    .auto-style6 {
      height: 2%;
      width: 279px;
    }

    .auto-style7 {
      width: 279px;
    }

    #TxtAltareeqEng {
      width: 55px;
    }

    #TxtAltareeqEng0 {
      width: 55px;
    }
  </style>

  <script>
    var dojoConfig = {
      parseOnLoad: false,
      async: true,
      tlmSiblingOfDojo: false,
      packages: [{
        name: "ncam",
        location: location.pathname.replace(/\/[^/]+$/, '') + "/ncam"
      }]
    };
  </script>

  <script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>
  <script type="text/javascript">
    window.onerror = function (msg, url, linenumber) {
      alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
      return true;
    }

    var map, basemapGallery, loading;
    require([
        "esri/map",
        "esri/graphic",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Extent",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/SpatialReference",
        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/dijit/Popup",
        "dojo/dom-construct",
        "esri/dijit/PopupTemplate",
        "esri/dijit/Basemap",
        "esri/dijit/BasemapGallery",
        "esri/dijit/BasemapLayer",
        "esri/graphicsUtils",
        "esri/domUtils",
        "dojo/_base/array",
        "dojo/parser",
        "dojo/dom",
        "dojo/_base/lang",
        "dojo/dom-style",
        "dijit/MenuItem",
        "dijit/registry",
        "ncam/DirectionalLineSymbol",
        "dijit/Menu",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dijit/form/RadioButton",
        "dijit/form/DropDownButton",
        "dojo/domReady!"
        ],
      function (
        Map,
        Graphic,
        ArcGISDynamicMapServiceLayer,
        GraphicsLayer,
        Extent,
        Point,
        Polyline,
        SpatialReference,
        PictureMarkerSymbol,
        SimpleLineSymbol,
        Popup,
        domConstruct,
        PopupTemplate,
        Basemap,
        BasemapGallery,
        BasemapLayer,
        graphicsUtils,
        domUtils,
        array,
        parser,
        dom,
        lang,
        domStyle,
        MenuItem,
        registry,
        DirectionalLineSymbol
      ) {
        parser.parse();

        var TareeqENG, TareeqARB;
        var graphicsLayer;
        var AltareeqArb, AltareeqEng;
        loading = dom.byId("loadingImg");  //loading image. id
        var popup = new Popup({
          highlight : false
        }, domConstruct.create("div"));
        map = new Map("mapDiv", {
          center: [6.389, 36.054],
          zoom: 4,
          basemap: 'topo',
          autoResize: false,
          infoWindow: popup
        });

        map.on("update-start", showLoading);
        map.on("update-end", hideLoading);

        map.on('load', function() {
          createBasemapGallery();
        });

        registry.byId("radioOne").on("change", function(isChecked){
          if(isChecked){
            registry.byId("LnkLastPosition").set("label", "LastPosition");
            registry.byId("LnkTracking").set("label", "Tracking");
          }
        }, true);

        registry.byId("radioTwo").on("change", function(isChecked){
          if(isChecked){
            registry.byId("LnkLastPosition").set("label", "الموقف الأخير");
            registry.byId("LnkTracking").set("label", "التتبع");
          }
        }, true);

        registry.byId("LnkLastPosition").on("click", LastPosClick);
        registry.byId("LnkTracking").on("click", LastPosClick);

        function showLoading() {
          domStyle.set(registry.byId("dropdownButton").domNode, "display", "none");
          domUtils.show(loading);
          map.disableMapNavigation();
          map.hideZoomSlider();
        }

        function hideLoading(error) {
          domStyle.set(registry.byId("dropdownButton").domNode, "display", "");
          domUtils.hide(loading);
          map.enableMapNavigation();
          map.showZoomSlider();
        }

        function createBasemapGallery() {
          AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
          AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";

          //Manually create a list of basemaps to display
          var basemaps = [];

          TareeqENG = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
            id: "TareeqENG",
            title: "Al-Tareeq(ENG)"
          });
          basemaps.push(TareeqENG);

          TareeqARB = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
            id: "TareeqARB",
            title: "Al-Tareeq(AR)"
          });
          basemaps.push(TareeqARB);

          BingMapsRoad = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsRoad"
            })],
            id: "bmRoad",
            title: "BingMaps-Road"
          });
          basemaps.push(BingMapsRoad);

          BingMapsAerial = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsAerial"
            })],
            id: "bmAerial",
            title: "BingMaps-Aerial"
          });
          basemaps.push(BingMapsAerial);

          BingMapsHybrid = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsHybrid"
            })],
            id: "bmHybrid",
            title: "BingMaps-Aerial-Labels"
          });
          basemaps.push(BingMapsHybrid);

          basemapGallery = new BasemapGallery({
            showArcGISBasemaps: false,
            basemaps: basemaps,
            bingMapsKey: "ApQMgAf0l5kH5_mfhDmDX1q9DOa1eqAw15N9knkX4sj1kbAoOYzJMNCln6w5t3bs",
            map: map
          });
          basemapGallery.startup();

          graphicsLayer = new GraphicsLayer();
          map.addLayer(graphicsLayer);

          graphicsLayer.on("mouse-over", function (event) {
            var graphic = event.graphic;
            map.infoWindow.highlight = false;
            map.infoWindow.setFeatures([graphic]);
            map.infoWindow.show(event.screenPoint);
          });

          graphicsLayer.on("mouse-out", function () {
            map.infoWindow.highlight = false;
            map.infoWindow.hide();
          });

          //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
          //we are going to create a custom user interface to display the basemaps, in this case a menu.
          array.forEach(basemapGallery.basemaps, function (basemap) {
            //Add a menu item for each basemap, when the menu items are selected
            registry.byId("bingMenu").addChild(new MenuItem({
              label: basemap.title,
              onClick: lang.hitch(this, function () {
                this.basemapGallery.select(basemap.id);
              })
            }));
          });
          /*Select that basemap that you want to be initially displayed*/
          basemapGallery.select(TareeqENG.id);
        }

        function LastPosClick() {
          map.infoWindow.hide();
          var colourstyle = "images/sphere-blue-dark-16x16.png"
          var Status = "status";
          var procname = "procname";
          var location = "location";
          var Driver = "Drv";
          var strhotspot = "strhotspot";
          var geomPoint1 = new Point(58.46236, 23.61581);
          var geomPoint2 = new Point(59.46236, 23.61581);
          var geomPoint3 = new Point(60.43362666666, 23.583081666666);
          var polyline = new Polyline(new SpatialReference(4326));
          polyline.addPath([geomPoint1,geomPoint2,geomPoint3]);
          var symbol = new PictureMarkerSymbol({
            "url": colourstyle,
            "height": 16,
            "width": 16,
            "type": "esriPMS"
          });

          //add a basic polyline
          var basicOptions = {
            style: SimpleLineSymbol.STYLE_SOLID,
            color: new dojo.Color([0, 0, 0]),
            width: 2,
            directionScale: 0.8,
            directionStyle: "arrow3",
            directionPixelBuffer: 80
          };
          var basicSymbol = new DirectionalLineSymbol(basicOptions);

          var popupTemplate = new PopupTemplate();
          popupTemplate.content = strhotspot;
          var pointGraphic = new Graphic(geomPoint1, symbol);
          var pointGraphic2 = new Graphic(geomPoint2, symbol);
          var pointGraphic3 = new Graphic(geomPoint3, symbol);
          var lineGraphic = new Graphic(polyline, basicSymbol);
          pointGraphic.setInfoTemplate(popupTemplate);
          pointGraphic2.setInfoTemplate(popupTemplate);
          pointGraphic3.setInfoTemplate(popupTemplate);
          graphicsLayer.add(pointGraphic);
          graphicsLayer.add(pointGraphic2);
          graphicsLayer.add(pointGraphic3);
          graphicsLayer.add(lineGraphic);
          setextent();
          var DivesriLogoImage = dom.byId('DivesriLogoImage');
          var mapDiv = dom.byId('mapDiv');
          mapDiv.style.visibility = "visible";
          DivesriLogoImage.style.visibility = "hidden";
        }

        function setextent() {
          var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
          map.setExtent(gextent);
        }
      });
  </script>
</head>

<body class="claro">
  <form id="form1" >
    <div style="width: 100%; height: 100%">
      <table id="Tablecontrols0" style="font-size: 15px; z-index: 101; background-color: #5B748B; width: 100%; height: 100%;">
        <tr style="font-family: Times New Roman">
          <td style="border-style: none; background-color: #496277; " valign="top" class="auto-style6">
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br />
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label>
          </td>
          <td align="left" style="border-style: none; background-color: #496277; height: 2%;" valign="top" class="auto-style3">
          </td>
        </tr>
        <tr style="font-family: Times New Roman">
          <td style="border-style: none;" valign="top" bgcolor="#496277" class="auto-style7">
            <table id="Tablecontrols" style="border-color: #F2F0EE; font-size: 15px; z-index: 101;
            background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left">
              <tr style="font-family: Times New Roman">
                <td rowspan="1" valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2">
                  <button dojotype="dijit/form/Button" id="LnkLastPosition" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Last Position</button>
                </td>
                <td style="border-style: none; text-align: center;" valign="top" class="auto-style3">
                  <button dojotype="dijit/form/Button" id="LnkTracking" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Tracking</button>
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold;  position: static;
                    height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left">
                  <div id="Something"></div>
                  <div style="width: 300px; height: 356px; overflow: scroll"></div>
                </td>
              </tr>
            </table>
          </td>
          <td style="border-style: none; background-color: white;  width: 100%; height:100%;" valign="top" id="td11">
            <div id="mapDiv"  dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: visible; height: 100%;">
              <img id="loadingImg" src="images/loading.gif"
                   style="position:absolute; right:512px; top:277px; z-index:100; width: 40px; height: 40px;" />
              <div style="position:absolute; right:50px; top:100px; z-Index:99;">
                <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton" style="display: none;">
                  <div data-dojo-type="dijit/Menu" id="bingMenu">
                    <!--The menu items are dynamically created using the basemap gallery layers-->
                  </div>
                </button>
              </div>
            </div>
            <div id="DivesriLogoImage"
                 style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">
            </div>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>

All comments

JulieBiju

U R Really Gr8...

RobertScheitlin__GISP

Julie,

Here is your app with the highlight gone:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior

    of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basemap Gallery - Bing Maps</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

  <style type="text/css">
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      z-index: -1;
      -moz-border-radius: 4px;
      overflow: hidden;
    }

    .claro .dijitButtonText {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: bold;
    }

    .claro td.dijitMenuItemLabel {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: 500;
    }

    .auto-style1 {}

    .auto-style2 {
      height: 20px;
    }

    .auto-style3 {
      height: 20px;
    }

    .auto-style6 {
      height: 2%;
      width: 279px;
    }

    .auto-style7 {
      width: 279px;
    }

    #TxtAltareeqEng {
      width: 55px;
    }

    #TxtAltareeqEng0 {
      width: 55px;
    }
  </style>

  <script>
    var dojoConfig = {
      parseOnLoad: false,
      async: true,
      tlmSiblingOfDojo: false,
      packages: [{
        name: "ncam",
        location: location.pathname.replace(/\/[^/]+$/, '') + "/ncam"
      }]
    };
  </script>

  <script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>
  <script type="text/javascript">
    window.onerror = function (msg, url, linenumber) {
      alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
      return true;
    }

    var map, basemapGallery, loading;
    require([
        "esri/map",
        "esri/graphic",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Extent",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/SpatialReference",
        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/dijit/Popup",
        "dojo/dom-construct",
        "esri/dijit/PopupTemplate",
        "esri/dijit/Basemap",
        "esri/dijit/BasemapGallery",
        "esri/dijit/BasemapLayer",
        "esri/graphicsUtils",
        "esri/domUtils",
        "dojo/_base/array",
        "dojo/parser",
        "dojo/dom",
        "dojo/_base/lang",
        "dojo/dom-style",
        "dijit/MenuItem",
        "dijit/registry",
        "ncam/DirectionalLineSymbol",
        "dijit/Menu",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dijit/form/RadioButton",
        "dijit/form/DropDownButton",
        "dojo/domReady!"
        ],
      function (
        Map,
        Graphic,
        ArcGISDynamicMapServiceLayer,
        GraphicsLayer,
        Extent,
        Point,
        Polyline,
        SpatialReference,
        PictureMarkerSymbol,
        SimpleLineSymbol,
        Popup,
        domConstruct,
        PopupTemplate,
        Basemap,
        BasemapGallery,
        BasemapLayer,
        graphicsUtils,
        domUtils,
        array,
        parser,
        dom,
        lang,
        domStyle,
        MenuItem,
        registry,
        DirectionalLineSymbol
      ) {
        parser.parse();

        var TareeqENG, TareeqARB;
        var graphicsLayer;
        var AltareeqArb, AltareeqEng;
        loading = dom.byId("loadingImg");  //loading image. id
        var popup = new Popup({
          highlight : false
        }, domConstruct.create("div"));
        map = new Map("mapDiv", {
          center: [6.389, 36.054],
          zoom: 4,
          basemap: 'topo',
          autoResize: false,
          infoWindow: popup
        });

        map.on("update-start", showLoading);
        map.on("update-end", hideLoading);

        map.on('load', function() {
          createBasemapGallery();
        });

        registry.byId("radioOne").on("change", function(isChecked){
          if(isChecked){
            registry.byId("LnkLastPosition").set("label", "LastPosition");
            registry.byId("LnkTracking").set("label", "Tracking");
          }
        }, true);

        registry.byId("radioTwo").on("change", function(isChecked){
          if(isChecked){
            registry.byId("LnkLastPosition").set("label", "الموقف الأخير");
            registry.byId("LnkTracking").set("label", "التتبع");
          }
        }, true);

        registry.byId("LnkLastPosition").on("click", LastPosClick);
        registry.byId("LnkTracking").on("click", LastPosClick);

        function showLoading() {
          domStyle.set(registry.byId("dropdownButton").domNode, "display", "none");
          domUtils.show(loading);
          map.disableMapNavigation();
          map.hideZoomSlider();
        }

        function hideLoading(error) {
          domStyle.set(registry.byId("dropdownButton").domNode, "display", "");
          domUtils.hide(loading);
          map.enableMapNavigation();
          map.showZoomSlider();
        }

        function createBasemapGallery() {
          AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
          AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";

          //Manually create a list of basemaps to display
          var basemaps = [];

          TareeqENG = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
            id: "TareeqENG",
            title: "Al-Tareeq(ENG)"
          });
          basemaps.push(TareeqENG);

          TareeqARB = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
            id: "TareeqARB",
            title: "Al-Tareeq(AR)"
          });
          basemaps.push(TareeqARB);

          BingMapsRoad = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsRoad"
            })],
            id: "bmRoad",
            title: "BingMaps-Road"
          });
          basemaps.push(BingMapsRoad);

          BingMapsAerial = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsAerial"
            })],
            id: "bmAerial",
            title: "BingMaps-Aerial"
          });
          basemaps.push(BingMapsAerial);

          BingMapsHybrid = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsHybrid"
            })],
            id: "bmHybrid",
            title: "BingMaps-Aerial-Labels"
          });
          basemaps.push(BingMapsHybrid);

          basemapGallery = new BasemapGallery({
            showArcGISBasemaps: false,
            basemaps: basemaps,
            bingMapsKey: "ApQMgAf0l5kH5_mfhDmDX1q9DOa1eqAw15N9knkX4sj1kbAoOYzJMNCln6w5t3bs",
            map: map
          });
          basemapGallery.startup();

          graphicsLayer = new GraphicsLayer();
          map.addLayer(graphicsLayer);

          graphicsLayer.on("mouse-over", function (event) {
            var graphic = event.graphic;
            map.infoWindow.highlight = false;
            map.infoWindow.setFeatures([graphic]);
            map.infoWindow.show(event.screenPoint);
          });

          graphicsLayer.on("mouse-out", function () {
            map.infoWindow.highlight = false;
            map.infoWindow.hide();
          });

          //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
          //we are going to create a custom user interface to display the basemaps, in this case a menu.
          array.forEach(basemapGallery.basemaps, function (basemap) {
            //Add a menu item for each basemap, when the menu items are selected
            registry.byId("bingMenu").addChild(new MenuItem({
              label: basemap.title,
              onClick: lang.hitch(this, function () {
                this.basemapGallery.select(basemap.id);
              })
            }));
          });
          /*Select that basemap that you want to be initially displayed*/
          basemapGallery.select(TareeqENG.id);
        }

        function LastPosClick() {
          map.infoWindow.hide();
          var colourstyle = "images/sphere-blue-dark-16x16.png"
          var Status = "status";
          var procname = "procname";
          var location = "location";
          var Driver = "Drv";
          var strhotspot = "strhotspot";
          var geomPoint1 = new Point(58.46236, 23.61581);
          var geomPoint2 = new Point(59.46236, 23.61581);
          var geomPoint3 = new Point(60.43362666666, 23.583081666666);
          var polyline = new Polyline(new SpatialReference(4326));
          polyline.addPath([geomPoint1,geomPoint2,geomPoint3]);
          var symbol = new PictureMarkerSymbol({
            "url": colourstyle,
            "height": 16,
            "width": 16,
            "type": "esriPMS"
          });

          //add a basic polyline
          var basicOptions = {
            style: SimpleLineSymbol.STYLE_SOLID,
            color: new dojo.Color([0, 0, 0]),
            width: 2,
            directionScale: 0.8,
            directionStyle: "arrow3",
            directionPixelBuffer: 80
          };
          var basicSymbol = new DirectionalLineSymbol(basicOptions);

          var popupTemplate = new PopupTemplate();
          popupTemplate.content = strhotspot;
          var pointGraphic = new Graphic(geomPoint1, symbol);
          var pointGraphic2 = new Graphic(geomPoint2, symbol);
          var pointGraphic3 = new Graphic(geomPoint3, symbol);
          var lineGraphic = new Graphic(polyline, basicSymbol);
          pointGraphic.setInfoTemplate(popupTemplate);
          pointGraphic2.setInfoTemplate(popupTemplate);
          pointGraphic3.setInfoTemplate(popupTemplate);
          graphicsLayer.add(pointGraphic);
          graphicsLayer.add(pointGraphic2);
          graphicsLayer.add(pointGraphic3);
          graphicsLayer.add(lineGraphic);
          setextent();
          var DivesriLogoImage = dom.byId('DivesriLogoImage');
          var mapDiv = dom.byId('mapDiv');
          mapDiv.style.visibility = "visible";
          DivesriLogoImage.style.visibility = "hidden";
        }

        function setextent() {
          var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
          map.setExtent(gextent);
        }
      });
  </script>
</head>

<body class="claro">
  <form id="form1" >
    <div style="width: 100%; height: 100%">
      <table id="Tablecontrols0" style="font-size: 15px; z-index: 101; background-color: #5B748B; width: 100%; height: 100%;">
        <tr style="font-family: Times New Roman">
          <td style="border-style: none; background-color: #496277; " valign="top" class="auto-style6">
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br />
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label>
          </td>
          <td align="left" style="border-style: none; background-color: #496277; height: 2%;" valign="top" class="auto-style3">
          </td>
        </tr>
        <tr style="font-family: Times New Roman">
          <td style="border-style: none;" valign="top" bgcolor="#496277" class="auto-style7">
            <table id="Tablecontrols" style="border-color: #F2F0EE; font-size: 15px; z-index: 101;
            background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left">
              <tr style="font-family: Times New Roman">
                <td rowspan="1" valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2">
                  <button dojotype="dijit/form/Button" id="LnkLastPosition" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Last Position</button>
                </td>
                <td style="border-style: none; text-align: center;" valign="top" class="auto-style3">
                  <button dojotype="dijit/form/Button" id="LnkTracking" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Tracking</button>
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold;  position: static;
                    height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left">
                  <div id="Something"></div>
                  <div style="width: 300px; height: 356px; overflow: scroll"></div>
                </td>
              </tr>
            </table>
          </td>
          <td style="border-style: none; background-color: white;  width: 100%; height:100%;" valign="top" id="td11">
            <div id="mapDiv"  dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: visible; height: 100%;">
              <img id="loadingImg" src="images/loading.gif"
                   style="position:absolute; right:512px; top:277px; z-index:100; width: 40px; height: 40px;" />
              <div style="position:absolute; right:50px; top:100px; z-Index:99;">
                <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton" style="display: none;">
                  <div data-dojo-type="dijit/Menu" id="bingMenu">
                    <!--The menu items are dynamically created using the basemap gallery layers-->
                  </div>
                </button>
              </div>
            </div>
            <div id="DivesriLogoImage"
                 style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">
            </div>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>

JulieBiju

Hi Robert,

I tried in the following way.But not success.

graphicsLayer.on("mouse-over", function (event) {
        map.graphics.clear(); //use the maps graphics layer as the highlight layer
        var graphic = event.graphic;
        map.infoWindow.setFeatures([graphic]);
        /*map.infoWindow.setContent(graphic.getContent());
        map.infoWindow.setTitle(graphic.getTitle());*/
        var highlightGraphic = new Graphic(graphic.geometry, graphic);
        map.graphics.add(highlightGraphic);
        map.infoWindow.highlight = false;
        map.infoWindow.show(event.screenPoint, InfoTemplate());

    });

thejuskambi

The Popup class has a highlight propertry which can be used to highlight the features or not.

RobertScheitlin__GISP

Julie,

Just use this code:

map.infoWindow.highlight = false;

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.