smcshinsky

Adding custom icons to the draw tool

Discussion created by smcshinsky Champion on Jun 11, 2015
Latest reply on Jun 11, 2015 by csergent08

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.png"
   },
   {  
      "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-MAN.png"
   }
]

 

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

Outcomes