Esri picture marker symbol generator for JavaScript developers

The ArcGIS.com map viewer provides a nice collection of picture marker symbols that can be used to symbolize features on your map. If you’re a developer, you might wonder how you can use these symbols in your applications. You could potentially use tools like Firebug or Chrome Developer tools to inspect ArcGIS.com and discover the image URL, but to make things easier, we’ve created a sample that allows you to select a symbol and generate the JavaScript Object Notation (JSON) needed to draw the symbol:

When using this sample, just click a symbol and copy the JSON. Then, in your JavaScript code, create a new PictureMarkerSymbol and paste the JSON in the constructor.

var infoSymbol = new esri.symbol.PictureMarkerSymbol({
"angle": 0,
"xoffset": 0,
"yoffset": 12,
"type": "esriPMS",
"url": "http://static.arcgis.com/images/Symbols/Basic/YellowStickpin.png",
"contentType": "image/png",
"width": 24,
"height": 24
});

The application provides two options for generating the image: You can reference the image directly through a URL, or you can embed a string representation of the image (Base64 option in the sample app includes this information). When using the latter option, the image is stored within the document instead of as an external resource, so no HTTP requests need to be made to display the image.

Some browsers, notably Internet Explorer prior to version 8, do not support using Base64 data URIs. In these cases, the image URL is used instead.The snippets from the utility above always include a URL in case one is needed.

Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team