nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Custom marker symbols

GrantCarroll

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

Find more posts tagged with

Accepted answers

All comments

hcgis

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

derekswingley1

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.

ReneRubalcava

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

hcgis

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

hcgis

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

ChristopherPollard

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

derekswingley1

Glad to help!

mpboyle_1-1765291434915.png

GrantCarroll

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.

GrantCarroll

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

derekswingley1

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.

GrantCarroll

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

EdSaunders

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.