1

I have implemented a world map, onLoad of the page I query the feature layer and highlight some countries based on some criteria. I have to define onClick events for the highlighted countries. When I click on highlighted countries, I do an ajax call get data from my backend and show data in popup

Am I defining onlCick and onHover events correctly?

Does onClick functionality change for graphics which are highlighted by using querytask and the normal feature layer , I know graphics I highlighted are part of feature layer. Below is the code where I define onClick and onHover events.

    require(["dojo/on", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/InfoTemplate", "esri/layers/FeatureLayer",
                   "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic",
                   "dojo/parser","dojo/_base/connect","dojox/collections/ArrayList","esri/lang","dijit/TooltipDialog", "dijit/popup","dojo/dom-style","dojo/query","dijit/Tooltip",
                   "esri/tasks/QueryTask","dojo/domReady!"
          ], function(
            on,Map, ArcGISDynamicMapServiceLayer, InfoTemplate, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic,  
            parser,connect,arrayList,esriLang,TooltipDialog, dijitPopup,domStyle,dojoQuery,Tooltip,QueryTask
          ) {
            parser.parse();

    var initExtent = new esri.geometry.Extent({"xmin": -202.44653682638065,"ymin":-69.45199181559316,"xmax":193.60142342238083,"ymax":92.53081401212116 ,"spatialReference":{"wkid":4326}});
            //var initExtent = new esri.geometry.Extent({"xmin": -175.3328239872642,"ymin":-58.16381503447429,"xmax":184.71077623888237,"ymax":103.81899079323993 ,"spatialReference":{"wkid":4326}}); 
            map = new Map("mapDiv", { 
              extent: initExtent
            });
    var WorldCountries = new ArcGISDynamicMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_VD_Look_v2/MapServer");
            WorldCountries.setDisableClientCaching(true);
            WorldCountries.setOpacity(0.75);
     map.addLayer(WorldCountries);
     map.on("load", initOperationalLayer);
requestData();
    function initOperationalLayer() {
             featureLayer = new FeatureLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_VD_Look_v2/MapServer/0",{
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                 outFields: ["*"],
                 opacity: 0.75
              });


              map.addLayer(featureLayer);

               dialog = new TooltipDialog({
                  id: "tooltipDialog",
                  style:"border:1px solid #348AED;padding:0px !important;margin:0px !important "

              });
              dialog.startup();

              function closeDialog(){
                  dijitPopup.close(dialog);
              }

              featureLayer.on("mouse-over", function(evt){
                  console.log(" test");
                  var countryName = "${CNTRY_NAME}";
                  var content="<div class='countryTooltips'><img src='/kx/images/blue.png'/><span >"+ esriLang.substitute(evt.graphic.attributes, countryName) +"&nbsp;&nbsp;<span></div>";  
                  dialog.setContent(content);
                  dijitPopup.open({
                      popup: dialog,
                      x: evt.pageX,
                      y: evt.pageY
                  });
              });

              dojo.connect(map.graphics, "onMouseMove", function(evt){
                  var countryName = "${CNTRY_NAME}";
                  var content="<div class='countryTooltips'><img src='/kx/images/blue.png'/><span >"+ esriLang.substitute(evt.graphic.attributes, countryName) +"&nbsp;&nbsp;<span></div>";
                  dialog.setContent(content);
                  dijitPopup.open({
                      popup: dialog,
                      x: evt.pageX,
                      y: evt.pageY
                  });
              });

              dojo.connect(map.graphics, "onMouseOut", function(evt){
                  closeDialog();
              });

              featureLayer.on("mouse-out", closeDialog);

              on(map,"click", function(evt){
                  if (pageUniqueName == "com.aig.kx.private.html.internal.alerts.home") {
                      getData(evt);
                  } else if (pageUniqueName == "com.aig.kx.private.html.internal.contacts") {
                           publishCountryName(evt);
                  } else if (pageUniqueName.indexOf("com.aig.kx.private.html.internal.reports")!=-1) {
                          choseIOCountry(evt);
                  }
              });
            }

Below is the code where I highight some counties onLoad of the page

function requestData(){
          try {
              console.log(" request data");
              dojo.xhrGet({
                  url: dojo.byId('countryUrl').value,
                  handleAs: 'json',
                  load: function(data){
                      console.log(" data for world Map " + data);
                      var bottomString = "";
                      var queryStart = "CNTRY_NAME IN (";
                      var queryChunk = "";
                      dojo.forEach(data.countryName, function(country){
                          queryChunk += "'" + country + "',";
                          if (!alertNBulletinList.contains(country)) {
                              alertNBulletinList.add(country);
                          }
                      });
                      alertNBulletinList.sort();
                      var it = alertNBulletinList.getIterator();
                      while (!it.atEnd()) {
                          var country = it.get();
                          bottomString += createAnchorTag(country) + "<font color='#C51230 !important'>,</font>";
                      }
                      queryChunk = queryChunk.slice(0, queryChunk.length - 1);
                      bottomString = bottomString.slice(0, bottomString.length - 1);
                      var queryEnd = ")"
                      var finalQuery = queryStart + queryChunk + queryEnd;
                      console.log(" bottomString " + bottomString);
                      dojo.byId('mapBottom').innerHTML = "Countries: <label> " + bottomString + "</label>";
                      var color = "#c51230";
                      console.log(" about to execute query");
                      executeQuery(finalQuery, color);
                      console.log(" completing query");
                  },
                  error: dojo.hitch(this, "failure")
              });
          } 
          catch (e) {
              console.log(e);
          }
      }

Below is the code where onClick I highlight my application in the backend and display popup

function getData(evt){
          try {
              var query = new esri.tasks.Query();
              query.geometry = evt.mapPoint;
              featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(features){
                  countryName = features[0].attributes.CNTRY_NAME;
                  if (ofacCountries.contains(countryName)) {
                      map.infoWindow.setTitle(countryName);
                      map.infoWindow.setContent('American International Group, Inc. (AIG) is a U.S. domiciled company and as such complies with all applicable laws, including the economic and trade sanctions administered and enforced by the Office of Foreign Assets Control (OFAC). Therefore, this tool cannot be used to assist you and/or cannot provide analysis related to this country');
                      map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
                  }
                  else 
                      if (alertNBulletinList.contains(countryName)) {
                          console.log(" got countryName" + countryName);
                          var alertDetailUrl='';
                          if(filterDate){
                            alertDetailUrl=dojo.byId('countryDateSpecificAlertsNbulletinUrl').value + "?countryName=" + countryName+"&fromDate=" + dojo.byId('fromDate').value + "&toDate=" + dojo.byId('toDate').value;
                          }else if (existingProgram){
                            alertDetailUrl=dojo.byId('countryDateSpecificAlertsNbulletinUrl').value + "?countryName=" + countryName+"&fromDate=" + dojo.byId('exstFromDate').value + "&toDate=" + dojo.byId('exstToDate').value
                          }else{
                            alertDetailUrl=dojo.byId('getdataUrl').value + "?countryName=" + countryName;
                          }
                          dojo.xhrGet({
                              url: alertDetailUrl,
                              handleAs: 'json',
                              load: function(data){
                                  console.log("data ");
                                  var popUpData = getPopUpContent(data);
                                  map.infoWindow.setTitle(countryName);
                                  map.infoWindow.setContent(popUpData);
                                  map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
                                  console.log(" end ");
                              },
                              error: dojo.hitch(this, "failure")
                          });
                      }
              });

          } 
          catch (e) {
              console.log("error occured " + e);
          }
      }

I also have defined onHover functionality on map , i.e when I hover a country I have to display country name in tooltip.

Now when I click on highlight country it does not work unless and until I click it two three times. On hover does work but the tooltip keeps flickering.

  • 2
    I have attempted to make the question a little clearer. please refine the question title and the punctuation in the post to clarify questions with ? question marks. – Brad Nesom Oct 7 '13 at 16:20

Your Answer

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

Browse other questions tagged or ask your own question.