topic Re: Custom marker symbols in ArcGIS JavaScript Maps SDK Questions

Custom marker symbols

GrantCarroll — Mon, 27 Feb 2012 02:17:12 GMT

Hi all

I'm trying to find examples or get advice on how to create a custom marker symbol. Some background, I have a georss feed that provides my site with Hydrological information. What I want to be able to do is display on the map the current value at a monitoring site, along with an image that denotes what type of site that is, eg River flow, Water Temperature etc, The colour of the symbol will change based on a custom parameter in the georss feed which indicates what level of alert the site is in, eg Blue, Green ,Red etc. I can't seem to find any info on how to do this. I'm quite new to the javascript api, but I've done the same thing before in Silverlight, but obviously js is a very different beast.
Any advice or tips on where to find advice would be greatly appreciated.

Thanks

Re: Custom marker symbols

EdSaunders — Mon, 27 Feb 2012 09:33:35 GMT

Hi Grant,

I haven't worked with GeoRSS before but there are a few things I think you need to do - retrieve the feed, add it to your map and then symbolise the data based on unique values. If you're familiar with jQuery you could use this blog post to find out how to retrieve and add the feed. Once you have the data in your map you could use a renderer to symbolise it. The sample [URL="http://help.arcgis.com/en/webapi/javascript/arcgis/demos/renderer/renderer_unique_value.html]here[/URL] shows how to render data based on unique values in a feature layer. Obviously you'd be symbolising the graphics added from the rss feed and you'd want to use a markersymbol instead.

Re: Custom marker symbols

GrantCarroll — Mon, 27 Feb 2012 16:52:30 GMT

Thanks Ed.

I don't have an issue with retriving or parsing the information, I have that bit all sorted. What I want to do is create my own marker symbol that will consist of an image and a value from the rss feed, eg a river flow icon with some text stating the current flow rate in the river. (see example here in Silverlight here. Is it just a matter of extending the base class of the marker symbol ? If so does anyone have any examples of that ?

Thanks

Re: Custom marker symbols

derekswingley1 — Mon, 27 Feb 2012 18:23:54 GMT

I see a couple of options. The first would be to use a PictureMarkerSymbol and a TextSymbol for each point. Yes, it's two symbols per point but this is probably the simplest solution. One other way to do this would be to modify Sathya Prasad's infoTip sample. I think this would get you closer to duplicating the functionality shown in the silverlight example.

Re: Custom marker symbols

GrantCarroll — Mon, 27 Feb 2012 19:53:43 GMT

Thanks Derek

I think I will go down the route of two symbols per site, its not too many sites that would be shown at any one time. I might try and see if I can be tricky and modify my image so that text appears over the top. Will update the post with what I come up with.

Cheers

Re: Custom marker symbols

GrantCarroll — Tue, 28 Feb 2012 03:09:35 GMT

Ok, so I solved this by creating two symbols, a picture symbol and a text symbol. The picture symbol is a long rectangular symbol and I've used offsets so that it looks like the text is part of the picture symbol. I have also implemented the sample as well to provide the name of the site on mouse over of the site.

Thanks for the help and advice.

Re: Custom marker symbols

derekswingley1 — Tue, 28 Feb 2012 14:15:15 GMT

Glad to help!

Re: Custom marker symbols

ChristopherPollard — Fri, 04 May 2012 10:33:17 GMT

Grant,
Anyway that you could supple a link to your working sample?
I have a future project that will have the same functionality as what you described and it would be great to get an idea of how to structure some of the code.

I also have a few Google Maps API projects I need to migrate to the AGJscript API and they use custom icons for point features and I really need to use those icons
in the web mapping application. I tried creating or using the custom icons in my map services but they just look horrible. So any sample that I can view that uses custom icons would be helpful.

Thanks,
Chris

http://www.dvrpc.org/Mapping/webmaps.htm

Re: Custom marker symbols

hcgis — Thu, 16 Aug 2012 08:53:56 GMT

Hi Carroll,
how did you assign two symbols per graphic , the setSymbol(symbol) method require only one symbol ?
thanks

Re: Custom marker symbols

hcgis — Thu, 16 Aug 2012 18:43:27 GMT

I see a couple of options. The first would be to use a PictureMarkerSymbol and a TextSymbol for each point. Yes, it's two symbols per point but this is probably the simplest solution. One other way to do this would be to modify Sathya Prasad's infoTip sample. I think this would get you closer to duplicating the functionality shown in the silverlight example.

Hi derek,
please can you tell me how to add a PictureMarkerSymbol and a TextSymbol to one graphic

Re: Custom marker symbols

ReneRubalcava — Thu, 16 Aug 2012 18:58:39 GMT

You wouldn't.
You'd add two graphics to the map, one with the target symbol and one with the text symbol.

Check out the "Find Address" example to see how it's done there.
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples/locator_address.html

Re: Custom marker symbols

derekswingley1 — Thu, 16 Aug 2012 19:07:36 GMT

You wouldn't.
You'd add two graphics to the map, one with the target symbol and one with the text symbol.

Check out the "Find Address" example to see how it's done there.
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples/locator_address.html

Yep, you use the same geometry for each graphic, as shown in the sample.

Re: Custom marker symbols

hcgis — Thu, 16 Aug 2012 22:30:39 GMT

You wouldn't.
You'd add two graphics to the map, one with the target symbol and one with the text symbol.

Check out the "Find Address" example to see how it's done there.
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples/locator_address.html

Many thanks Rene and Derek, it helps a lot