topic Re: SimpleMarkerSymbol and text symbol at same geometry. in ArcGIS JavaScript Maps SDK Questions

SimpleMarkerSymbol and text symbol at same geometry.

ADITYAKUMAR1 — Wed, 15 Aug 2018 12:59:29 GMT

Hi Developers,

I want to have a Circle marker followed by a value geometry location. Right now I am using the below code. But its giving me either of the functionality. Not both at the same time.

var CircleSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CICRLE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2),
new Color([0, 255, 0, 0.25]));
textSymbol = new TextSymbol(stop.attributes.OBJECTID);
textSymbol.setFont(font);
textSymbol.setColor(new Color([255, 255, 255]));

stop.setSymbol(CircleSymbol);
stop.setSymbol(textSymbol);

While I am looking for a style like below.

In case you have any suggestion or solution please share.

Thanks in advance.

Kumar

Re: SimpleMarkerSymbol and text symbol at same geometry.

RobertScheitlin__GISP — Wed, 15 Aug 2018 13:15:32 GMT

Kumar,

You need to clone the stop graphic and add it again with the second symbol.

Re: SimpleMarkerSymbol and text symbol at same geometry.

ADITYAKUMAR1 — Fri, 31 Aug 2018 12:04:36 GMT

Hi Robert,

I tried like this

for (var i = 1; i <= stops.length; i++) {
array.forEach(stops, function (stop) {

if (stop.attributes.OBJECTID == i) {
routeParams.stops.features.push(stop);

textSymbol = new TextSymbol(stop.attributes.OBJECTID);
textSymbol.setFont(font);
textSymbol.setColor(new Color([255, 255, 255]));
stop.setSymbol(textSymbol);
}

var circle = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 205, 1]), 1), new Color([0, 0, 205, 0.5]));
var newGraphic = new Graphic(stop.toJson());
newGraphic.setSymbol(circle);
});
}

But i am not getting the Circle marker. Only the text symbol is coming.

Thanks

Aditya

Re: SimpleMarkerSymbol and text symbol at same geometry.

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:45:35 GMT

Aditya,

You do not add the newGraphic to the map anywhere in your code:

for (var i = 1; i <= stops.length; i++) {
  array.forEach(stops, function (stop) {
    if (stop.attributes.OBJECTID == i) {
      routeParams.stops.features.push(stop);
      textSymbol = new TextSymbol(stop.attributes.OBJECTID);
      textSymbol.setFont(font);
      textSymbol.setColor(new Color([255, 255, 255]));
      stop.setSymbol(textSymbol); 
    } 

    var circle = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 205, 1]), 1), new Color([0, 0, 205, 0.5]));
    var newGraphic = new Graphic(stop.toJson());
    newGraphic.setSymbol(circle);
    map.graphics.add(newGraphic);
  });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: SimpleMarkerSymbol and text symbol at same geometry.

ADITYAKUMAR1 — Fri, 31 Aug 2018 14:35:40 GMT

Thanks Robert,

I missed to add it to the map. I have one small issue over the ordering.

The text Symbol is coming under the Marker Symbol. Is there a way we can have Marker symbol and on top the Text Symbol.

Thanks

Aditya

Re: SimpleMarkerSymbol and text symbol at same geometry.

RobertScheitlin__GISP — Fri, 31 Aug 2018 15:18:32 GMT

Aditya,

Reverse your code. Meaning right now you are setting the stops symbol as the text and then adding the circle. Instead add the circle as the stop symbol and then add the text after.

Re: SimpleMarkerSymbol and text symbol at same geometry.

ADITYAKUMAR1 — Sat, 01 Sep 2018 10:34:06 GMT

Hi Robert,

Thanks for the response.

The desired result has been achieved. But I see a strange behavior here. I am dragging the textSymbol out of extent. And when i bring the textSymbol back to extent,the textSymbol goes missing.

Please share if you have any idea on this.

Thanks

Aditya Kumar

Re: SimpleMarkerSymbol and text symbol at same geometry.

RobertScheitlin__GISP — Sat, 01 Sep 2018 12:35:07 GMT

Can you share your code so I can review it?

Re: SimpleMarkerSymbol and text symbol at same geometry.

ADITYAKUMAR1 — Mon, 03 Sep 2018 07:38:35 GMT

if (routeResult.stops) {

for (var i = 1; i <= stops.length; i++) {
array.forEach(stops, function (stop) {
if (stop.attributes.OBJECTID == i) {
var circle = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 205, 1]), 1), new Color([0, 0, 205, 1]));
var newGraphic = new Graphic(stop.toJson());
newGraphic.setSymbol(circle);
graphics.add(newGraphic);
textSymbol = new TextSymbol(stop.attributes.OBJECTID);
textSymbol.setFont(font);
textSymbol.setColor(new Color([255, 255, 255]));
stop.setSymbol(textSymbol);
}
});
}
}

Thanks

Aditya

Re: SimpleMarkerSymbol and text symbol at same geometry.

RobertScheitlin__GISP — Mon, 03 Sep 2018 12:47:03 GMT

Aditya,

That little bit of code does not help. Are you using a RouteTask or the directions widget...? I need to see more.

Re: SimpleMarkerSymbol and text symbol at same geometry.

ADITYAKUMAR1 — Wed, 05 Sep 2018 13:28:55 GMT

Hi Robert, We are using Routetask. To my surprise the code is working perfectly now.

Thanks

Aditya Kumar

Re: SimpleMarkerSymbol and text symbol at same geometry.

RobertScheitlin__GISP — Wed, 05 Sep 2018 13:57:54 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: SimpleMarkerSymbol and text symbol at same geometry.

ADITYAKUMAR1 — Mon, 10 Sep 2018 14:59:49 GMT

Hi Robert,

This the routing result i am getting. Once I grad the 2 stops out of the map extent and bring them back, you can see the text symbol changes its position.

i am using the route task here,

function showRoute(evt) {

routes = [];
if (evt.result && evt.result.routeResults) {

//**//*** To plot the route with route symbol **//
array.forEach(evt.result.routeResults, function (routeResult, i) {

routes.push(graphics.add(routeResult.route.setSymbol(routeSymbol)));
//routes.push(graphics.add(routeResult.stops.setSymbol(circle)));
if (routeResult.stops) {
for (var i = 1; i <= stops.length; i++) {
array.forEach(stops, function (stop) {
if (stop.attributes.OBJECTID == i) {
var symbol = new PictureMarkerSymbol(xxxxx+ "Images/marker/inspection-map-markers-no-status.png", 20, 20).setOffset(0, 0);
var newGraphic = new Graphic(stop.toJson());
newGraphic.setSymbol(symbol);
graphics.add(newGraphic);

textSymbol = new TextSymbol(stop.attributes.OBJECTID);
textSymbol.setFont(font);
textSymbol.setColor(new Color([255, 0, 0]));
//textSymbol.setAlign(TextSymbol.ALIGN_START);
// textSymbol.setAngle(360);
textSymbol.setOffset(5, 5)
stop.setSymbol(textSymbol);

}
});
}
}

Any suggestion why its performing in this way.Please share.

Thanks

Aditya Kumar

Re: SimpleMarkerSymbol and text symbol at same geometry.

RobertScheitlin__GISP — Mon, 10 Sep 2018 15:35:03 GMT

Aditya,

Same thing I said before. Right now you are adding the circles then setting the stops symbol as the text. Instead add the circle as the stop symbol and then add the text after.