Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/opsdashboard
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: PictureMarkerSymbol
[ AMD Module Require | Legacy Module Require ]
require(["esri/symbols/PictureMarkerSymbol"], function(PictureMarkerSymbol) { /* code goes here */ });
Description
(Added at v1.0)
Marker symbols are used to draw points and multipoints on the graphics layer. PictureMarkerSymbol uses an image as a marker.
Explore the PictureMarkerSymbol in the ArcGIS Symbol Playground. This is a place to explore and learn how to work with various properties and methods before implementing it into custom code. Try out new features, customize them, and copy the generated code into your own application. This sample provides a starting point so as to allow use of these features as quickly as possible.Samples
Search for samples that use this class.Class hierarchy
esri/symbols/Symbol |_esri/symbols/MarkerSymbol |_esri/symbols/PictureMarkerSymbol
Constructors
| Name | Summary |
|---|---|
| new PictureMarkerSymbol(url, width, height) | Creates a new PictureMarkerSymbol object. |
| new PictureMarkerSymbol(json) | Creates a new PictureMarkerSymbol object using a JSON object. |
Properties
| Name | Type | Summary |
|---|---|---|
| angle | Number | The angle of the marker. |
| color | Color | Symbol color. |
| height | Number | Height of the image in pixels. |
| type | String | The type of symbol. |
| url | String | URL of the image. |
| width | Number | Width of the image in pixels. |
| xoffset | Number | The offset on the x-axis in pixels. |
| yoffset | Number | The offset on the y-axis in pixels. |
Methods
| Name | Return type | Summary |
|---|---|---|
| setAngle(angle) | MarkerSymbol | Rotates the symbol clockwise around its center by the specified angle. |
| setColor(color) | Symbol | Sets the symbol color. |
| setHeight(height) | PictureMarkerSymbol | Sets the height of the image for display. |
| setOffset(x, y) | MarkerSymbol | Sets the x and y offset of a marker in screen units. |
| setUrl(url) | PictureMarkerSymbol | Sets the URL where the image is located. |
| setWidth(width) | PictureMarkerSymbol | Sets the width of the image for display. |
| toJson() | Object | Converts object to its ArcGIS Server JSON representation. |
Constructor Details
Creates a new PictureMarkerSymbol object.
Parameters:
< |
Required | URL of the image. |
< |
Required | Width of the image in pixels. The default value is the actual width of the image. |
< |
Required | Height of the image in pixels. The default value is the actual height of the image. |
Sample:
Example 1
require([
"esri/symbols/PictureMarkerSymbol", ...
], function(PictureMarkerSymbol, ... ) {
var pictureMarkerSymbol = new PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 51);
...
});
Example 2
require([
"esri/symbols/PictureMarkerSymbol", ...
], function(PictureMarkerSymbol, ... ) {
var pictureMarkerSymbol = new PictureMarkerSymbol('/images/diamond.png', 25, 25);
...
});
Creates a new PictureMarkerSymbol object using a JSON object.
When you create a MarkerSymbol, SimpleMarkerSymbol or PictureMarkerSymbol from a JSON object, you may specify a property angle to rotate the symbol. Be aware that the angle in the JSON is different from MarkerSymbol.angle. The angle in the JSON follows the traditional ArcGIS specification and is rotated counter-clockwise, whereas the angle in the symbol is rotated clockwise.
For example, the following code with angle=-30 in the JSON will create a symbol rotated -30 degrees counter-clockwise; that is, 30 degrees clockwise, which symbol.angle=30 would also produce.
When you create a MarkerSymbol, SimpleMarkerSymbol or PictureMarkerSymbol from a JSON object, you may specify a property angle to rotate the symbol. Be aware that the angle in the JSON is different from MarkerSymbol.angle. The angle in the JSON follows the traditional ArcGIS specification and is rotated counter-clockwise, whereas the angle in the symbol is rotated clockwise.
For example, the following code with angle=-30 in the JSON will create a symbol rotated -30 degrees counter-clockwise; that is, 30 degrees clockwise, which symbol.angle=30 would also produce.
Parameters:
< |
Required | JSON object representing the PictureMarkerSymbol. View the Symbol Objects (Common data types in ArcGIS) for details on creating a JSON symbol. Note that when specifying symbol width and height using JSON the values should be entered in points, the JavaScript API then converts the point values to pixels. |
Sample:
require([
"esri/symbols/PictureMarkerSymbol", ...
], function(PictureMarkerSymbol, ... ) {
//Height and Width are specified in points
var symbol = new PictureMarkerSymbol({
"url":"graphics/redArrow2.png",
"height":20,
"width":20,
"type":"esriPMS"
"angle": -30,
});
});Property Details
<Color
ColorSymbol color.
<Number
NumberHeight of the image in pixels.
<String
StringThe type of symbol.
Known values:
simplemarkersymbol | picturemarkersymbol | simplelinesymbol | cartographiclinesymbol | simplefillsymbol | picturefillsymbol | textsymbol<String
StringURL of the image.
<Number
NumberWidth of the image in pixels.
Method Details
Rotates the symbol clockwise around its center by the specified angle.
Return type:
MarkerSymbolParameters:
< |
Required | The angle value. 0 is pointing right and values progress clockwise. |
Sets the symbol color.
Return type:
SymbolParameters:
< |
Required | Symbol color. |
Sample:
require([
"esri/Color", ...
], function(Color, ... ) {
symbol.setColor(new Color([255,255,0,0.5]));
...
});
Sets the height of the image for display. The height can be larger or smaller than the actual width of the image. As the image gets larger, it will become more pixilated.
Return type:
PictureMarkerSymbolParameters:
< |
Required | Height of marker in pixels. |
Sets the x and y offset of a marker in screen units.
Return type:
MarkerSymbolSets the URL where the image is located.
Return type:
PictureMarkerSymbolParameters:
< |
Required | URL location of marker image. |
Sets the width of the image for display. The width can be larger or smaller than the actual width of the image. As the image gets larger, it will become more pixilated.
Return type:
PictureMarkerSymbolParameters:
< |
Required | Width of marker in pixels. |
Converts object to its ArcGIS Server JSON representation.
Be aware that the angle in the JSON is different from MarkerSymbol.angle. The angle in the JSON follows the traditional ArcGIS specification and is rotated counter-clockwise, whereas the angle in the symbol is rotated clockwise. For example, if your MarkerSymbol has angle=30 (clockwise), this method will return a JSON object where angle=-30 (counter-clockwise):
Be aware that the angle in the JSON is different from MarkerSymbol.angle. The angle in the JSON follows the traditional ArcGIS specification and is rotated counter-clockwise, whereas the angle in the symbol is rotated clockwise. For example, if your MarkerSymbol has angle=30 (clockwise), this method will return a JSON object where angle=-30 (counter-clockwise):
{
"color": [255,255,255,64],
"size": 12,
"angle": -30,
"xoffset": 0,
"yoffset": 0,
"type": "esriSMS",
"style": "esriSMSCross",
"outline": {"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}
}Return type:
Object