{"id":178041,"date":"2012-02-03T23:25:34","date_gmt":"2012-02-03T23:25:34","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=178041"},"modified":"2018-12-18T10:30:52","modified_gmt":"2018-12-18T18:30:52","slug":"esri-picture-marker-symbol-generator-for-javascript-developers","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers","title":{"rendered":"Esri picture marker symbol generator for JavaScript developers"},"author":4781,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[28621,24921],"industry":[],"product":[36571,36831,36551,36601],"class_list":["post-178041","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-feature-layers","tag-javascript","product-arcgis-enterprise","product-js-api-arcgis","product-arcgis-online","product-developers"],"acf":{"short_description":"The ArcGIS.com map viewer provides a nice collection of picture marker symbols that can be used to symbolize features on your map.","flexible_content":[{"acf_fc_layout":"content","content":"<p>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\u2019re 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\u2019ve created a sample that allows you to select a symbol and generate the JavaScript Object Notation (JSON) needed to draw the symbol:<\/p>\n<p><iframe loading=\"lazy\" class=\"iframe-class\" src=\"http:\/\/servicesbeta.esri.com\/demos\/generatemarker.html\" width=\"700\" height=\"500\" frameborder=\"0\" scrolling=\"no\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p>When using this sample, just click a symbol and\u00a0<span id=\"more-6693\"><\/span>copy the JSON. Then, in your JavaScript code, create a new PictureMarkerSymbol and paste the JSON in the constructor.<\/p>\n<p><code>var infoSymbol = new esri.symbol.PictureMarkerSymbol({<br \/>\n\"angle\": 0,<br \/>\n\"xoffset\": 0,<br \/>\n\"yoffset\": 12,<br \/>\n\"type\": \"esriPMS\",<br \/>\n\"url\": \"http:\/\/static.arcgis.com\/images\/Symbols\/Basic\/YellowStickpin.png\",<br \/>\n\"contentType\": \"image\/png\",<br \/>\n\"width\": 24,<br \/>\n\"height\": 24<br \/>\n});<\/code><\/p>\n<p>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 (<a href=\"http:\/\/en.wikipedia.org\/wiki\/Base64\">Base64<\/a>\u00a0option 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.<\/p>\n<p>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.<\/p>\n<p><em>Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team<\/em><\/p>\n"}],"authors":[{"ID":4781,"user_firstname":"","user_lastname":"","nickname":"sterlingdq","user_nicename":"sterlingdq","display_name":"ArcGIS Server Development Team","user_email":"squinn@esri.com","user_url":"","user_registered":"2018-03-02 00:16:25","user_description":"","user_avatar":"<img alt='' src='https:\/\/secure.gravatar.com\/avatar\/ddafe5cd459e188305f7aa49a19793b8e89621b99b1a99c9979eb3f2073a7603?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/ddafe5cd459e188305f7aa49a19793b8e89621b99b1a99c9979eb3f2073a7603?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'\/>"}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Esri picture marker symbol generator for JavaScript developers<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Esri picture marker symbol generator for JavaScript developers\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-18T18:30:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers\"},\"author\":{\"name\":\"ArcGIS Server Development Team\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/073e71df29bffd1221469a9a683443df\"},\"headline\":\"Esri picture marker symbol generator for JavaScript developers\",\"datePublished\":\"2012-02-03T23:25:34+00:00\",\"dateModified\":\"2018-12-18T18:30:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"feature layers\",\"JavaScript\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers\",\"name\":\"Esri picture marker symbol generator for JavaScript developers\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2012-02-03T23:25:34+00:00\",\"dateModified\":\"2018-12-18T18:30:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Esri picture marker symbol generator for JavaScript developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/073e71df29bffd1221469a9a683443df\",\"name\":\"ArcGIS Server Development Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ddafe5cd459e188305f7aa49a19793b8e89621b99b1a99c9979eb3f2073a7603?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ddafe5cd459e188305f7aa49a19793b8e89621b99b1a99c9979eb3f2073a7603?s=96&d=blank&r=g\",\"caption\":\"ArcGIS Server Development Team\"},\"url\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Esri picture marker symbol generator for JavaScript developers","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers","og_locale":"en_US","og_type":"article","og_title":"Esri picture marker symbol generator for JavaScript developers","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-12-18T18:30:52+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers"},"author":{"name":"ArcGIS Server Development Team","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/073e71df29bffd1221469a9a683443df"},"headline":"Esri picture marker symbol generator for JavaScript developers","datePublished":"2012-02-03T23:25:34+00:00","dateModified":"2018-12-18T18:30:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers"},"wordCount":8,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["feature layers","JavaScript"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers","name":"Esri picture marker symbol generator for JavaScript developers","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2012-02-03T23:25:34+00:00","dateModified":"2018-12-18T18:30:52+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/esri-picture-marker-symbol-generator-for-javascript-developers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Esri picture marker symbol generator for JavaScript developers"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/073e71df29bffd1221469a9a683443df","name":"ArcGIS Server Development Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ddafe5cd459e188305f7aa49a19793b8e89621b99b1a99c9979eb3f2073a7603?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ddafe5cd459e188305f7aa49a19793b8e89621b99b1a99c9979eb3f2073a7603?s=96&d=blank&r=g","caption":"ArcGIS Server Development Team"},"url":""}]}},"text_date":"February 3, 2012","author_name":"ArcGIS Server Development Team","author_page":false,"custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":28621,"name":"feature layers","slug":"feature-layers","term_group":0,"term_taxonomy_id":28621,"taxonomy":"post_tag","description":"","parent":0,"count":21,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":36571,"name":"ArcGIS Enterprise","slug":"arcgis-enterprise","term_group":0,"term_taxonomy_id":36571,"taxonomy":"product","description":"","parent":0,"count":972,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"},{"term_id":36551,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":36551,"taxonomy":"product","description":"","parent":0,"count":2424,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/178041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/4781"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=178041"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/178041\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=178041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=178041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=178041"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=178041"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=178041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}