AnsweredAssumed Answered

How to add different color  and adding InfoTemplate in every route

Question asked by ozaquisba22 on Nov 15, 2016

Would you help me?

What I need :

- when i click radio3 , then it show 2 routes with a different colours and each route have their infoTemplate

 

This is my Code

        var jalanLayer = new esri.layers.GraphicsLayer({ id: "jalan" });

        map.addLayer(jalanLayer);
        
        //setup the route parameters
        routeParams = new RouteParameters();
        routeParams.stops = new FeatureSet();
        
        
        routeParams.outSpatialReference = {
          "wkid" : 102100
        };
        
        
        routeTask.on("solve-complete", showRoute);
        routeTask.on("error", errorHandler);
        
        
        //define the symbology used to display the route
        stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
        stopSymbol.outline.setWidth(4);
        routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(5);
        
        //Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.

 

                
        function addStop() {
          $("#loader").show();
          var gl = map.getLayer("jalan");
          gl.clear();

 

          routeParams.stops = new FeatureSet();
          var stop1 = new esri.Graphic(
          new esri.geometry.Point(longSt,  latSt), stopSymbol);
          
          stop1.attributes = new Object();
          stop1.attributes.Name = "A";
          var stop2 = new esri.Graphic(
          new esri.geometry.Point(longEnd, latEnd ), stopSymbol);
          stop2.attributes = new Object();
          stop2.attributes.Name = "B";
          
          
          routeParams.stops.features.push(stop1);
          routeParams.stops.features.push(stop2);
          
          if (routeParams.stops.features.length >= 2) {
            routeTask.solve(routeParams);
            lastStop = routeParams.stops.features.splice(0, 1)[0];
            
          }
          map.centerAndZoom(new esri.geometry.Point(longSt,  latSt),12);
        }
        
        
        //Adds the solved route to the map as a graphic
        function showRoute(evt) {
          jalanLayer.add(evt.result.routeResults[0].route.setSymbol(routeSymbol));
          $("#loader").hide();
        }

 

        // Wire UI Events

        $("#radio3").on("click", function() {
            routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(5);
            longSt='106.9935517';
            latSt='-6.2337483';
            longEnd='106.994956';
            latEnd='-6.2592437';

          addStop();
            routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0, 255, 255, 0.5])).setWidth(5);
            longSt = '106.9705696';
            latSt = '-6.1916444';
            longEnd = '106.9738868';
            latEnd = '-6.219634';
          addStop();
        });      

Outcomes