topic Re: show related points onclick on another point in ArcGIS JavaScript Maps SDK Questions

show related points onclick on another point

HushamHassan — Wed, 11 Jan 2017 05:45:58 GMT

I have 2 points feature class, stores, Customers and polyline feature(spider diagram- link each customer to its store), sotreID is a field in all 3 layers attribute tables.

I am trying to create the functionality so that when a user clicks on any store, it's related point feature from customers to be shown on my web app map as well as the spider diagram to be displayed on the map I don't need to show related table on related info in popup info, There is a similar example here Feature layer query multiple , but it's not exactly what I'm looking for because its showing only related tables.

I am wondering how to accomplish this tasks. I have 2 ideas

1- onclick pass the storeID to definition query on the customer feature and show the results in the map or.

2- use relationshipquery.

Any hints or sample Code.

Re: show related points onclick on another point

FC_Basson — Wed, 11 Jan 2017 06:30:52 GMT

I think you're on the right track and both options will work. I would go for the definition expression option (FeatureLayer | API Reference | ArcGIS API for JavaScript 3.19 ).

Re: show related points onclick on another point

HushamHassan — Thu, 12 Jan 2017 05:14:51 GMT

Thank you Bsson, do you have any snippets code for the definition expression

Re: show related points onclick on another point

FC_Basson — Thu, 12 Jan 2017 06:16:36 GMT

See the example in the link I provided.

Re: show related points onclick on another point

HushamHassan — Fri, 10 Dec 2021 22:06:43 GMT

This is the code i have so far.. Still need help fixing the code.

<script src="https://js.arcgis.com/3.19/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer", 
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic","esri/lang", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/number", "dojo/dom-style",
        "dijit/TooltipDialog", "dijit/popup", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        Query, Circle,
        Graphic,esriLang, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, number,domStyle,ToolTipDialog,dijitPopup, dom
      ) {
          map = new Map("mapDiv", { 
          basemap: "streets",
         center: [-96.685226,  33.167420],
          zoom: 14,
          });
          
          var featureLayer = new FeatureLayer("ELECTION_STATS_HM_Test/MapServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        //  opacity: 0.5
        });
           var featureLayer2 = new FeatureLayer("ELECTION_STATS_HM_Test/MapServer/2",{
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
          //opacity: 0.5
        });
               featureLayer.on("mouse-over", showTooltip);
              //  featureLayer.on("click", showVotes);
               featureLayer.on("mouse-out", closeDialog);
          
       featureLayer.setDefinitionExpression("ED='ED'");
      
          
      
   
     
    
        map.addLayer(featureLayer2);
        map.addLayer(featureLayer);
   
          
      });
        
        //roster
        function showVotes(evt){
           // var vsite = evt.graphic.attributes.SiteID; 
         //   console.log(vsite);
           //   featureLayer2.setDefinitionExpression("siteID=vsite");   
            
        }
        
        //tooltip
        function showTooltip(evt){
        closeDialog();
        var tipContent = "<b>Poll Place</b>: " + " <font color='green'>"+ evt.graphic.attributes.POLLPLACE +  "</font> " +
          "<br><b>ED Count</b>: " +  " <font color='green'>" + evt.graphic.attributes.ED_Count + "</font> " + "<br><b>Site ID</b>: " +  " <font color='green'>" + evt.graphic.attributes.SiteID + "</font> "   ;
        
         var site= evt.graphic.attributes.SiteID;
           console.log(site);
            
        var dialog = new dijit.TooltipDialog({
          id: "tooltipDialog",
          content: tipContent,
          style: "position: absolute; width: 250px; font: normal normal bold 6pt Tahoma;z-index:100"
        });
        dialog.startup();

        dojo.style(dialog.domNode, "opacity", 0.85);
        dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
       
          
      }

      function closeDialog() {
        var widget = dijit.byId("tooltipDialog");
        if (widget) {
          widget.destroy();
        }
      }
        
        
      </script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: show related points onclick on another point

HushamHassan — Fri, 10 Dec 2021 22:06:45 GMT

I solved it. its my bad with Javascript

    featureLayer.setDefinitionExpression("ED='ED'");
 map.addLayer(featureLayer);

 featureLayer.on("mouse-out", closeDialog);
 /////////////////////////
 fld="SiteID";
 featureLayer.on("Click", function(events){
 var testval=events.graphic.attributes[fld];
 //alert( testval);
 featureLayer2.setDefinitionExpression('siteID = ' + testval);
 featureLayer3.setDefinitionExpression('siteID = ' + testval);

 map.addLayer(featureLayer3);
 map.addLayer(featureLayer2);

 });