Adding custom icons to the draw tool

5762
3
06-11-2015 11:01 AM
StanMcShinsky
Occasional Contributor III

I have found a way to add custom icons to the draw tool. This is for when you draw point features. It was actually easier then I thought after a lot of digging.

[app number]\jimu.js\dijit\SymbolsInfo -  add a new file like 11.json with the following: (you will not be disappointed)

[  
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Autobot",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://img3.wikia.nocookie.net/__cb20140626131150/transformers-legends/images/6/6b/Autobot_symbol.pn..."
   },
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Iron Man",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://www.veryicon.com/icon/png/Movie%20%26%20TV/Ironman/Ironman%20M%20III.png"
   },
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Batman",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://fc07.deviantart.net/fs14/f/2007/089/8/a/Batman_Icon_by_barkerbaggies.png"
   },
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Hulk",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://icons.iconarchive.com/icons/mattahan/ultrabuuf/512/Comics-Hulk-Fist-icon.png"
   },
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Superman",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://dwightmusic.com/MarchingTrojans/2011_images/Superman_Logo2.gif"
   },
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Captain America",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://fc07.deviantart.net/fs70/f/2010/150/3/a/Captain_America_icon_by_MediaTiger.png"
   },
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Thor",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://www.sireasgallery.com/iconset/avengers/Thor_256x256_32.png"
   },
   {  
      "height":24,
   "width":24,
      "xoffset":0,
      "yoffset":0,
      "name":"Spiderman",
      "contentType":"image/png",
      "type":"esriPMS",
      "angle":0,
      "url":"http://3.bp.blogspot.com/-pBqLK0sRB7Y/T8rbkT3vHrI/AAAAAAAACPg/hC8qhJ8N8cI/s1600/THE+AMAZING+SPIDER-M..."
   }
]

In [app number]\jimu.js\dijit\templates\SymbolChooser.html - add the following:

<select data-dojo-attach-point="pointSymClassSelect" data-dojo-type="dijit/form/Select"
  style="width:100%;height:30px;">
  <option value='0'>${nls.basic}</option>//Removed this to be selected first
  <option value='1'>A-Z</option>
  <option value='2'>${nls.arrows}</option>
  <option value='3'>${nls.business}</option>
  <option value='4'>${nls.cartographic}</option>
  <option value='5'>${nls.nationalParkService}</option>
  <option value='6'>${nls.outdoorRecreation}</option>
  <option value='7'>${nls.peoplePlaces}</option>
  <option value='8'>${nls.safetyHealth}</option>
  <option value='9'>${nls.shapes}</option>
  <option value='10'>${nls.transportation}</option>
  <option value='11' selected="selected">Heros</option>//ADDED THIS
</select>

The value='11' refers to the json file you created above. You could go further with this and add other language support by adding the text value to the nls files, but for ease and simplicity I went with straight text.

I am sure you could also add this to the stem app so you can have it for all your applications.

You can also limit the icon choices here by removing options in the SymbolChooser.html file.

Because this is happening in the jimu folder. it will update for any draw tool you are using in your app. Like the eDraw, AdvDraw or the default Draw tool.

Hope this helps some people to get more out of the draw tool.

-Stan

0 Kudos
3 Replies
StanMcShinsky
Occasional Contributor III

Here is what it looks like. enjoy

heros.png

-Stan

RebeccaStrauch__GISP
MVP Emeritus

Stan, I added this thread to the resource list.

(I like the hero symbols btw)

0 Kudos
ChrisSergent
Regular Contributor III

Pretty cool.

0 Kudos