Select to view content in your preferred language

converting selected map service layer as graphics using esri js api

577
2
Jump to solution
04-17-2022 09:37 PM
JayakumarPD
Occasional Contributor

Hi, am I thinking in a right way, kindly guide.

Challenge: selecting a map service(polyline) by using click event and adding that selected map service(polyline) as graphics.

// defined a map 
map = new Map("map", {
      basemap: "topo-vector",
      center: [-146.87045, 63.227787],
      zoom: 7,
      logo: false,
    });
// added the layer
  var featureLayerSample = new FeatureLayer(
"https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/0",
      {
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
      }
    );
   map.addLayer(featureLayerSample);
// on click function
map.on("click", showRoadName);
// function definition
function showRoadName(evt) {
      console.log(evt);
// here i am getting the information about the map service
      document.getElementById("distName").innerHTML = evt.graphic.attributes.ROUTE;
     // here i am getting the path array
      var mypaths = evt.graphic.geometry.paths[0];
      var mypathsLenth = evt.graphic.geometry.paths[0].length;
// simple custom symbology
var symbol = new SimpleLineSymbol({color:[100, 200, 0], width:4});
// I passed the, array stright to new graphic. Thinking that, it will understand and add it as graphic, but failed
map.graphics.add(new Graphic(mypaths, symbol));
}
// second method, i created an object
     var myObject ={
        paths:[],
         spatialReference:{"wkid": 102100}
       }
// for the path pushed the array
 for(var i=0; i < mypathsLenth; i++){
         console.log(mypaths[i]);
         myObject.paths.push("["+mypaths[i]+"]");
      }
// defined the polyline
 var singlePathPolyline = new Polyline(myObject);
//trying to add, but still not able to add
 map.graphics.add(new Graphic(singlePathPolyline, symbol));

I am confused, do I am thinking properly to add. Or my way is wrong.  

Or is there any simple way, where I can convert the selected map service as graphics.  Pls help.

 for first method, not giving any error, but for second --> polyline is not a constructor.  error is coming.

0 Kudos
1 Solution

Accepted Solutions
JayakumarPD
Occasional Contributor

I realised, I was on a wrong way.  This worked for me 🙂

let graphicJson = evt.graphic.geometry.toJson();
let highLevelGeometry = esri.geometry.fromJson(graphicJson);
var symbol = new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_DASH,
          new Color([0,0,250]),
          3
        );
map.graphics.add(new Graphic(highLevelGeometry, symbol));

 

View solution in original post

0 Kudos
2 Replies
JayakumarPD
Occasional Contributor

I understood, graphic is a high level geometry and I am passing low level geometry to it(i.e., paths).

Even I tried with 

new Graphic(evt.graphic.toJson())

new Polyline( evt.graphic.geometry.toJson())

breakpoint shows the proper json construction, but Graphic and Polyline not able to understand this high level geometry.  Can any body help. 

0 Kudos
JayakumarPD
Occasional Contributor

I realised, I was on a wrong way.  This worked for me 🙂

let graphicJson = evt.graphic.geometry.toJson();
let highLevelGeometry = esri.geometry.fromJson(graphicJson);
var symbol = new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_DASH,
          new Color([0,0,250]),
          3
        );
map.graphics.add(new Graphic(highLevelGeometry, symbol));

 

0 Kudos