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.
Solved! Go to Solution.
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));
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.
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));