Creating a layer for Training Map

2049
14
Jump to solution
09-01-2016 07:14 PM
ChrisPolley
New Contributor III

I'm looking to create a layer that will be used to place points( icons such as emergency responders will be placed) on a map for a table top scenario. When scenario is done and we are to refresh the browser or close the browser and reopen I don't want these points (Emergency icons ) saved. I thought I handle this before but I'm drawing a blank on how to create this.

Thank you.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Chris,

   If you would like to have a draw widget symbololgy set that are specific to you and your needs then several files need some edits/creation.

The symbols that are available in the draw widget come from 10 json files that specify the symbols in json format

[install dir]\server\apps\[app#]\jimu.js\dijit\SymbolsInfo.

The json files then contain (minified) symbols:

[{
    "imageData": "iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAEM5JREFUeF7tWglUlFey7m56gabZN6GbpaGRBgOCkmecYwyJJsYzeU8d44tLnERj4uRNjM84ahaj5o0xiQuJuMcVg1EwwQ0UQRTFBQUlKGLiqIwi4gYIskPzvaq/uxEYVEQz58jhnlOnl///773fd6vqVtX9RaKu1sVAFwNdDHQx0MVAZ2TAgkB1J7HvjODEBIoBttX86M+PSU6T1JJcIenT2UhgAiQk/GluDvTle5JKEvj4+GDkyJGQy+Wg3z92NgJa42EyUhl4v379sG7dOpSVleHQoUOwsLBgAhZ3dgL+zODHjx+P5m3w4MEMvooksDMTICVwv9ra2uLGjRtN+O/evQtXV1cmIL0zg2ds/8ur//nnn7dY/aysLAbf6dXfi52ek5MTbt++3YKAVatWmQkY3ek0QBeqcrFzlA8jYNt5lefMmdMCPP+YMGECE2AgCeoUBLz8Zoi1VCGZJJKL02gDLCMRVrit1W9sbERYWBhfzydRPA4BbvRwb5KBJK+bJPRxOuzgs2JLa+keBmwnscCLShsEyhQCAW2tfkFBAZRKJV+P78h4HD5+QXKCpNzkSMz2xJ+NJOxZe3Sk8448Y2eneJHnMZCA79D4YqfGD2ra3+3bsH1W/6SkJPN8P3iU8Tzp5uUkvG/C09MTQ4cOxZQpU7Bo4UIsX76CZDmGD3/d3PkdF3flK48yQEfv7eat+pPYQoTnrVRI8PTDe/ZOwhxmt2H7TMDcuXPNc1xA92nbM+6f6Kbr3ClHUps3bxYiqfu1pSvXwErlLAzi4auKbM8A7b1nNoQQt0Ub8pa3vUwhOcbjuVhIIaNP3vdbe36eb01tLSIGDGiusRwax5L0u98cXhA6dnERQsjWrbH2DmqK0lBxbinu5sxAZc4koOAzHNwwAN11ljxdOHSz2v/Hcf6+7QX5sPscdY62zhpVf4lMNIbujZErJLkSibiC58nSTaNGbGxs01TZ6R0/fhzTPv4YXgHdQV4PwXJL/JfKFj0VVs3J2N4WERtlMhmOHj3aAnt9aR7KT85C8b4XcSvBH9c2+eDiQm/kTvfCL3/1RP5nehyaEIC+dtbCAJa2soKwFzxGPgxcW9d1/bq5OLpbDbN1ki2i6+y4bprB8tzM34OCghAZGYmrV6+ivLwcycnJmDZtGvR6fdM9Qyzk+MrJDevdPBHn4Y2tHj6Y6+yO56yM8zTJZvrsZZ7LVoVCgWvXrgkEGGjFyzJnEuhg3Njmg39+G4CTo/TYH+qPBLUv4h21+MnBB1vsfRDvosV2tRYjbRyEjiWWFnD1tpnyMBI89DZOKtrHFUoxm08aSZl5co6OjoiIiBCA7dy5EwkJCULfYrEYHNuPHj0agYGBzcHA0dEVE/46DTFvvYE4BzesddPge5IN3TyxmUjYTY5zn6cOi+m/P9wjop76ncdzHccDDBw4ENdvUDR1eQWKYl1wZUUPZA4ORIpah90Ofkh080WCB3tgXwH0zySxxC6zvIu+f0KTsBNT5iUTw81btXdG3EC7ZkTIpJbS/vSbyeEVvm0G7ObmhkGvDBIcV0pKyr/YNav3kCFDzFmdQIRWq8WgQYMwa/YcpB7IQEVFKS3dz9i7IhRjyFGudtFgi7s3Nrl7CXPcRvPbTc7zmE93ZPoEYDkR09OyyTSEwsIynpCfTo/kFRGo3hKMI2RLKQ46pGh0SCb29lAHicIWdI+AOOp8CxGwiQbbpvbBUlc1epPNUZIOuZU0hfocQRJDcs4MWK1W47XXXsM338xHenr6A51tc5s8c+YMzp07h5KSEjQ0NDS7dBaoGoOYRbZQqowq7k8xwhQHF0H9k2jLTKA5J9H893v54zgRcCegJz5x7mbWoqZ1mkTf6uQKEf4eocZJjR7p3kSC18MJiCECWBN+pgHH2Tm2UE/OyFh15883AmbbfSKt/iZQSglQQRDmTbU1j8nVH7ZvrgRBL1dgJvmDZALPK39aG4gcrR5zXNxhQwEV3VPS2lw54OBOMNzGHoe8/XGESNj7EA3Y4aHFElr9EBqQn3V3ccQH7/8FiYmJKC4ufiJ4m3fSULoZuBmBW5kajHjVxuQjLK7S2Oa4/xn6vppEqA4FKSwxlUz0U1r1UEshQmQpIhnQmgD+zQHRAb6pF9nJzxotMoiE+5kAO5j/o47tTR528OtjcPD0hUcGXdXQiINXK/FV5i3crm6u4ve6MlRmwFA4BijU4WCMFwK8aRumcVU2tqmhoX382wCjp//WkDSPaHk7XWvC2RZ+4T+KNYSoEG5SKb5z1eAYk9DMB8STY9lL9jWdmJUzeLEEquEz4bc2H67LfkXIyjM4VVTRLiLSCyvhveocRF9nQ/RlFn4rrm7xXGNdAeqKPgXyg4A8HRZ+pIbcQkzgxXBwcGpPIOZNWIaTcD7zSPHK+/RAnYw872RHFxwkJ8KasJPAp9Dnh+Ro2OGJFNawGfsdbL77ByTzf4FoUQ5Es45jcMw5NLZBQc6tamzIK0WtwXj1cMFdiL44DvHMI5BMT0NmQaXxKcNdNBQvQ+2FPsAFX1zZHYihz9sbVV4iK/Dw6Fjccd9lN12wanVDBP0Wtq0/UmTF28l+8gnvmuJxkaUdHN9eBadvcqGaexyK+acgjSQC5mVBH5WNmnqDgKWkxoBvsm7hD7EXIYk8A2lULkprjKpeUlUPt5mH4DAtDWOj81F4pwaG8jjU5g9CQ54PkP0M4r/0g8bZGBSxyoeHhz/SSj4MtPn61/Qln+QHEi4zm1sIfdlEUsmhZR8KM3kiMns3OI/fAOW0Y7CafgB2XxyF9ZcnoPwqE+I5Gei1NBt1ZNvcNuSWkFacIBU/KZBjs+AULpbUCNf4ltiT5ThbSDtEdRIaC0eg+gwBP6VH8a4QTB4q1PZIpKBVb4/Ktxdvi/vYiQj1dONgIs6/WzdOkYXrI0eNwtnzl5B9vQFRqfno/+0JWEzdD+vPD8OeiBDPOIgR0blNBjB5Tz5Enx6G5awjEE07CMVn6cgpqjVdJwbq9wI3RqP2rC9qjvsDB8KQPM8fYb7GgEVupbzo5eX1UoeQtfOhcB6ICwyTJk0yk/Ce6Vn2pqwB6NOnj5Bvt251DQZEpV2Gw4z9sJlxALLJKfj+cIHRlCma6xNJq/9+EnREzsTYf2LfP+pRV3cHhrJY1F0ZjupcX1Qc1cGwPwxXo0MwdagbLMRMtgWcnV1ihg0bpmknjg7fZk1PXuI4+8KFi0I9gH4XkGwjqbO2thaCmfr6+gd69p05N2D74V64fJSMwlKjNy+jbW1izG+IzijDzXK2+1+BuwtRn/8Sqk9rUZGhQ/m+nri6KQTLJnrBz80YT8jkvOpazgj/bY0rQVQP2IJVq75viui4RpCdnf1A4M0v/pR1DYv35Tf9ZfQCpUDdduD6ONT+9gyqsr1ReSwQJYk9cfHbZ3DinQC8FXQvirSxsbn0xhtjuTr1b228X1aFhz+Li5fy2eEI1dV6kydvNwPNbjRUZaHhxmzUX+pPau6D6lM6VKQHU3odgqy/6RHfX4vV7hosV6mxzF6Nt20dYW8MUxsUSmUWzYHrkR1t9ztAfWB/0awFmzZtppLTF3hn/FuPjLux7jIaStai7vLrqDmnR3WON6qzglCa1BPnI3sg+b/9sN7fE4tVHlhio8YqZw3WUP4eTVka5xMrKG19WakyaiAFYjZ2djE6na4jPqD54Wm7SeQ4uuq5vn2RnHIA3l5qbF39CpGQ80AiGhvKaO/ejfrCD1B7PhxVp71RddIflRkhuL41GCemBiCurw+WOanxrdIDS+09sJIiTM7bGfw6As/5e3Q3TmG9sYOCrb9TiB1gqv4SEQWUOnPC9rs3LoXfYPZ3JSTi6LEsBAf5YG+0O9lwYksSDNUwVBxB/fXZqL1IDo22sMpTWpQfCSI1D0XR5mAceNsf63Se+M7aA4ttPLDMWY3llDjdA69pAf4HyuE5vd5MIhRgKNGaSEGXYBYSCWSWlqn/EeL0u26HX0tooAULFoCLEdxWrtmKD8ZIgGuBqCucTuq9iUDPQe2lV1GT111Y7YpMPcoOhaA4KQSlu3oi55NArPPzRKSVO5bQajNos6yk78aV12Atrfp608o3B89awPUGLmbso+hzIxEyyNqY+YnkIjg7WUSNGebYEbN4qAYlqVSqFoWKJct/wEfjrMiDh6I6jwKVPK3g0Kp+CcDd48EoS+uJMrLvyoRQ1O3qhasrghHlQbZN9s1qvYqAtga/msGT6rcG/yMB5SILg/+JhJMuJoELGmlUm1hI5AXKjJGohUJSQMXcJ24W87nsxAVILjuNefNNzF+4Av3CVTBcCgEuhqEul4CeDEVjRhga08JQszsMBRuCsW9Od8wa7o5n/ZSwp4OL5yj3/h9S38UuHogmsBtIGHhr8BtJ7WNIWoPnshuD30Ep+S7KRLkixTWKfUTEZErEBLOgYEkql6c+ySjRhthdL6iaSdav34iIF1/Bhi9dUJ0Ziut7gnEmOhDxc3wx7201hj1nD19T8GJ6pkgkFh+h73X824nIeIGKkR/RpLlgyfU61gyWjeT0moPnGh6XsprAEwEMnstanIixJqR6+gsVnm3kI16zNFeDxLBUKqOCg4OfmFlwtWQIg3iTtGDjDz8Kqa+/RgEvVzmUCkkTQXQPV3XTKGyNpHdyhtFqCIkUfddLpFIuhNI1IxlaqZy0wllY7TiSJrsntb8H3mj7vBNwDbI5eK5PCnVKFx0Ou3ZHTqAem17Wom9gU6WngA5NJr333mzlQ429nTccoKgMxzIyoA/swaBrSLYS2Dip3GqK3MpqGPkMl4f1xWRYyGRR5MmFMhVnlYvINLiizA5vS9PKG+2eK89N4Knwwiuf5EHiSBpAJpD5aiDOfxaEwrU6VO30Q8n2Hoj6Wzg81e7GMFomO08L8UTC6AjqsHHevHlCosQEEGBOjjrUnJ2d/QUiaJJWVEV6h4qowkqT/ESV5dbgEwk8F2F2O/kKBdrs0YG4skyPm9u1uM07Tvoo3D27BIbiTNqvaoXXZPhMwXQ6zETwy1PBHZosP9S7d28qCIkv+/pqERMTI7x2JpVKp3e4Q9OD9PbWS+TAcpmIZ8lZriF/wNsdk8EnwGant4cI2E2rfuylAFxeFkQHNloUp7yAu6cXoK6ESuL3aWfPnhXOOrh/k4lyTaNjzdLS8g3uaAAdOjo4OMBKqeSa/2M3d3eRkkjgAoewa3B9cT+t8l4iQrB7Ap9IK589NohWvDtu7+mFitwoGKpvtSs8NxgMePfdd4XDFBpj9+NOeIOJTVBq/ETfu6HobiTtGpx641VrW8EBptN2l+jsi5OjedX96YzyPx+44g9ihA9jqO+2CjyPxgmp7QhSfz7ieuLNyspKQyTwoQa8pDIsclQjO0yPW7GBBJ5qg5XX27XqrW9KTU0Fn31Svzue+KR/jw7Jx/C2Wclb7ofhruTd/egQZFeHwOfl5cHdXdgVbpHwqz5PRyPP3UMslQoO8vlga/yWm/7IBPBZoqmqBdq1+Dzg6Wq0+ygtLGSCg3R0csH69evbTUJ8fDzVEY1vsBCZY58u5K1mSw6XX7oQHOQoqkQXFRW1SURVVRUYeLOtr8D07FONX5g8vTShoa2Mj9mh0Wgwffp0REdHIy4uDmvXrsXEiRPh5+dn3vM50owSnGpna6TOHNo2vWvAhJiE84w0kikUtrd1SNp5qODIlOy7P2/JhGoE7RojHic07zzMdCHpYqCLgS4GOsjAv7yb28F+nrbH+NhM/P9LfyqVJs3YVQAAAABJRU5ErkJggg==",
    "height": 24,
    "xoffset": 0,
    "yoffset": 0,
    "width": 24,
    "name": "Airplane",
    "contentType": "image/png",
    "type": "esriPMS",
    "angle": 0,
    "url": "http://static.arcgis.com/images/Symbols/Transportation/Airplane.png"
}, {

The imageData above is the Base64 encoded string of the image file (online utility website for that Base64 Decode and Encode - Online )

So you would create a new 11.json file and add symbol code like above in an array (so you will need your images you will be using to be hosted on a web server).

Then in the [install dir]\server\apps\[app#]\jimu.js\dijit\templates\SymbolChooser.html you would add your new 11.json to the list (line 31 below):

<div style="width:320px;">
     <div class="symbol-section point-symbol-section" data-dojo-attach-point="pointSection">
          <table class="symbol-set-table" cellspacing="0">
               <colgroup>
                    <col width="130px"></col>
                    <col width="auto"></col>
               </colgroup>
               <tbody>
                    <tr>
                         <td>
                              <span>${nls.preview}:</span>
                         </td>
                         <td>
                              <div data-dojo-attach-point="pointSymPreview" style="width:100%;"></div>
                         </td>
                    </tr>
                    <tr class="point-sym-class-select-tr">
                         <td colspan="2">
                              <select class="restrict-select-width" data-dojo-attach-point="pointSymClassSelect" data-dojo-type="dijit/form/Select" style="width:100%;height:30px;">
                                    <option value='0' selected="selected">${nls.basic}</option>
                                    <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'>my custom symbols</option>
                              </select>
                         </td>
                    </tr>

That's it now you have a custom symbol set in your apps draw widget that you can use.

View solution in original post

14 Replies
RobertScheitlin__GISP
MVP Emeritus

Chris,

   Are developing this map using the JS API or some other API?

0 Kudos
ChrisPolley
New Contributor III

I would like something for WAB or even Flex 3.7 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Chris,

   You could just use the WAB otb draw widget. If that does not meet your needs then developing a custom widget that use a graphics layer would be the route to go.

0 Kudos
ChrisPolley
New Contributor III

Yes, this is what I was coming to but I'm having difficulties on how to dig into the draw widget.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Chris,

  What specifics do you need help with?

0 Kudos
ChrisPolley
New Contributor III

I suppose the source code and folders that hold the icons is what I need, I will need as point icons Emergency Respondes (Police, Fire, Ambulance) Excavators (backhoe, Augars) Resources (Buses, Barricades)

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Chris,

   If you would like to have a draw widget symbololgy set that are specific to you and your needs then several files need some edits/creation.

The symbols that are available in the draw widget come from 10 json files that specify the symbols in json format

[install dir]\server\apps\[app#]\jimu.js\dijit\SymbolsInfo.

The json files then contain (minified) symbols:

[{
    "imageData": "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",
    "height": 24,
    "xoffset": 0,
    "yoffset": 0,
    "width": 24,
    "name": "Airplane",
    "contentType": "image/png",
    "type": "esriPMS",
    "angle": 0,
    "url": "http://static.arcgis.com/images/Symbols/Transportation/Airplane.png"
}, {

The imageData above is the Base64 encoded string of the image file (online utility website for that Base64 Decode and Encode - Online )

So you would create a new 11.json file and add symbol code like above in an array (so you will need your images you will be using to be hosted on a web server).

Then in the [install dir]\server\apps\[app#]\jimu.js\dijit\templates\SymbolChooser.html you would add your new 11.json to the list (line 31 below):

<div style="width:320px;">
     <div class="symbol-section point-symbol-section" data-dojo-attach-point="pointSection">
          <table class="symbol-set-table" cellspacing="0">
               <colgroup>
                    <col width="130px"></col>
                    <col width="auto"></col>
               </colgroup>
               <tbody>
                    <tr>
                         <td>
                              <span>${nls.preview}:</span>
                         </td>
                         <td>
                              <div data-dojo-attach-point="pointSymPreview" style="width:100%;"></div>
                         </td>
                    </tr>
                    <tr class="point-sym-class-select-tr">
                         <td colspan="2">
                              <select class="restrict-select-width" data-dojo-attach-point="pointSymClassSelect" data-dojo-type="dijit/form/Select" style="width:100%;height:30px;">
                                    <option value='0' selected="selected">${nls.basic}</option>
                                    <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'>my custom symbols</option>
                              </select>
                         </td>
                    </tr>

That's it now you have a custom symbol set in your apps draw widget that you can use.

ChrisPolley
New Contributor III

Nice! Thank you Robert.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

don't forget to mark the question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

0 Kudos