topic PictureMarkerSymbol - Assign border, or css styling in ArcGIS JavaScript Maps SDK Questions

PictureMarkerSymbol - Assign border, or css styling

MartinSirkovsky — Wed, 19 Feb 2014 07:14:24 GMT

Hi.

I have created a map which shows properties for sale. Map can be seen here: http://fastognir.kort.fo

When I zoom in on map, the symbols which identify the location of the property change to images of the properties. I define the image by PictureMarkerSymbol.

When zoomed out I use different colors to differentiate between property types, such as terraced, semi terraced, apartment, bungalow, etc.... I would like to propagate this colors unto the images. So my questions are:

Is there a way to add a border around the PictureMarkerSymbol, preferably border on right side, 15px wide.

Is there a way to change the properties of the image by css. I tried and I have successfully added a custom css style by using jquery selectors on the fly once the images are generated by using event listner (on map update end), but the sytling didn't show on the map.

Currently I solved the problem by adding a new grapahic layer, which adds borders, but this is not optimal, especially in areas where images are overlapping. Also I do not like the idea of using multiple graphics layers if not necessary.

Attached images show the zoom in and zoom out state of the map.

[ATTACH=CONFIG]31570[/ATTACH]
[ATTACH=CONFIG]31571[/ATTACH]

Thanks,
Martin

Re: PictureMarkerSymbol - Assign border, or css styling

Anonymous User — Wed, 19 Feb 2014 09:50:43 GMT

Original User: pepatosp

Hi.

I have created a map which shows properties for sale. Map can be seen here: http://fastognir.kort.fo

When I zoom in on map, the symbols which identify the location of the property change to images of the properties. I define the image by PictureMarkerSymbol.

When zoomed out I use different colors to differentiate between property types, such as terraced, semi terraced, apartment, bungalow, etc.... I would like to propagate this colors unto the images. So my questions are:

Is there a way to add a border around the PictureMarkerSymbol, preferably border on right side, 15px wide.

Is there a way to change the properties of the image by css. I tried and I have successfully added a custom css style by using jquery selectors on the fly once the images are generated by using event listner (on map update end), but the sytling didn't show on the map.

Currently I solved the problem by adding a new grapahic layer, which adds borders, but this is not optimal, especially in areas where images are overlapping. Also I do not like the idea of using multiple graphics layers if not necessary.

Attached images show the zoom in and zoom out state of the map.

[ATTACH=CONFIG]31570[/ATTACH]
[ATTACH=CONFIG]31571[/ATTACH]

Thanks,
Martin

What if you use a PictureFillSymbol and work the outline property instead of using PictureMarkerSymbol? Is this feasible?

Re: PictureMarkerSymbol - Assign border, or css styling

MartinSirkovsky — Wed, 19 Feb 2014 12:01:30 GMT

That's a good idea and I will give it a try.

But I am not sure that you can define a border just on one side of the feature by using PictureFillSymbol.

-------
Martin

Re: PictureMarkerSymbol - Assign border, or css styling

Anonymous User — Wed, 19 Feb 2014 12:24:03 GMT

Original User: pepatosp

That's a good idea and I will give it a try.

But I am not sure that you can define a border just on one side of the feature by using PictureFillSymbol.

-------
Martin

I think you're right. Using the API standard approach, you'll probably end with a border around the whole picture. What you can do is to control the type, color and size of this border.