About program locator - change bank tap on assetmap

[Byungkwan Jang]

a)     What coding skills and/or software did you need to know in order to do the update on the Program Locator?

-       Language : Java script, aspx

-       Program : dreamweaver(not mandatory)

But, I didn’t know about anything. I just learned C, C++, Linux, SQL(Oracle). Most important thing is to have an eye for reading and understanding code. To know what they said and what should I do with this codes and information.

 

b)    What steps did you follow in doing the update?

 

1. 1.     Back up file in Server, bring files that you need in your computer.

 

 In start menu, excute ‘mstsc’ and access to server(Dan knows address, ID and PW to log on). Find program locator and back up that folder. If you want to modify something, bring that files on your computer. The way is easy.

 

When you access, click option button.

 Click local resource, check clip board. Then you can bring the file from server or vice versa.

 Bring files, make back up files, and do what you want on your computer. After that, you can adjust that file on server. If it didn’t work, use a backup file.

1. 2.     Check the code -> Find a related part for something what you want

(Find a bank part of assetMap)

 

(especially,

C:\Inetpub\wwwroot\Programlocator -> AssetMap.aspx, and

C:\Inetpub\wwwroot\Programlocator -> AssetMap-test.aspx,

C:\Inetpub\wwwroot\Programlocator\JavaScript -> ProgramMap.js

In server)

Aim of aspx files is to show webpage. In that process, they call some functions those are in ProgramMap.js. For test, we can use Assetmap-test page. If you change codes in Assetmap-test,

http://www.tutormentorprogramlocator.net/AssetMap-test.aspx

this page will be changed.

http://www.tutormentorprogramlocator.net/AssetMap.aspx?map=Banks  

If it makes sense, you can apply to this page by changing AssetMap.aspx file. I usually copy that files and after backup, fix them on my computer. When I finished, copy my file to server and see what happened.

 

 At the first time, I didn’t know about anything. Didn’t know about java, aspx, and still I don’t know exactly. After looking Program locator, I noticed some information was too old. Their latest data was 2008’s. Dan asked me could u update bank information in asset map. So, I searched keyword ‘bank’ in server computer and I found it was in AssetMap.aspx and ProgramMap.js. AssetMap.aspx is about AssetMap page in the program locator. From 258 line to 347 line,

1. 3.     Look the code carefully1 -> Study that part(AssetMap.aspx)

(learn codes to change or to update checkbox and marks on the assetMap)

 

 This code is related to show Bank of America checkbox. If you want to add checkbox on bank tap on AssetMap page, copy this code and change bank name. It will work.

Look at the onclick = “DisplayBankofAmerica()”. This means function to display Bank of America on AssetMap webpage with small marks.

 

 Src = ”Image/BankofAmericaimg.png.ashx” means bring image file from Image folder in checkbox. Folder address is C:\Inetpub\wwwroot\Programlocator\Images in server. Put an image for your new checkbox in there. For chkbox, image size should be 17*17 and a PNG form. Be careful about name of file. It should be a bankname+img. For instance, ‘BankofAmericaimg.png’ is a PNG file to show Bank of America.

 

 

1. 4.     Make images for chkbox

 

 Make image files are easy. Search on google, and get(capture or download) some logos of banks. By Adobe photoshop, you can make different size files.    

 Open the file on photoshop and click ‘File’ menu. Click ‘save a file for web or dev’ (I’m not sure this menu name is exact. My photoshop language is Korean.) Look at right bottom side. W:, H: means size of the picture(pixel). If you click to break small chain that on the right of ‘pixel’ and change those numbers, you can change size of the picture. W:17, H:17 mean 17*17 file. Don’t forget to change their forms to PNG.

 This is 17*17 PNG file. You can make 10*10 in same way.

With these processes, I tried to delete Park National Bank(At least, it doesn’t exist anymore in Chicago)and to add WintrustBank chkbox. I succeeded, so I added other bank chkboxes. If you can use illustrator, you can draw logos, too.

1. 5.     Look the code carefully2 -> Study that part(ProgramMap.js)

(To show Bank mark on the map)

 

First step is searching. Search one of a bank name. End of the ProgramMap.js file line is 10718. You cannot read every line and understand everything in short time. Search keyword and try to find the flow of codes. For instance, I searched ‘MBFinancial’.

 

Line: 63

It has a long sing line but I entered in front of “MBFinancial”:[ ], to show an example. This means to define a variable for MBFinancial in markerGroups. If you want to add some bank, add that bank in here. For example, “WintrustBank”:[], like this.

 

Line: 2477

Before I said, this function is to display marker on the map.

If you want to display bank marker, copy and paste these codes and just change every bank name in this function.

Look var banks = “XML/BanksXML/”+chkMBFinancial.name+”.xml”;

XML has coordinates and other information of bank branches. I will tell you in next step.

 

Line: 4596

Another variable define for chkbox. Add bank name in same form.

 

Line: 5030

This code is checking chkbox and if it is checked, call displayMBFinancial() function. Add bank name in same form. You have to avoid case name duplication. If case name, I mean “NMB” is used for other place, an error will occur.

 

Line: 5428

Another variable define for chkbox. Add bank name in same form.

I think we define this before but I don’t want to damage an original code so I follow them.

 

Line: 5656

I don’t know exactly about this code. But I know this is related to chkbox. Copy, paste and change bank name and case name(“NMB”).

 

This is not over, yet. In last step, you must add these codes in AssetMap.aspx file.

 

Line: 1542

Add these codes with other bank name. To bring some values, we must have span id to identify them.

 

1. 6.     Make XML file(have information about coordinates and others)

These files have information about ID, longitude, latitude, bankname, address, city, state, zip. I searched Wintrust bank locations on google. Made an excel file and xml file. I searched their address on their website or www.city-data.com. Usually, banks have 40-50 branches in Chicago, some huge banks have 200-300. Take their information, but cannot get longitude and latitude. On this site, http://itouchmap.com/latlong.html enter the address, city and state, you can get longitude and latitude. Based on these information, make excel file first.

And make a xml file by notepad. But I wrote code on MS word first, because it is easier to change and to check something than notepad.

 

c)     Did you paste the code in a word document so you could read it? If so, can you send me that file?

 

 You don’t need to do this. XML file can be opened by notepad. Just open them by notepad and copy to other word processor. I just used this for convenient. I can send you XML files and excel files if you want.

 

d)    What advice would you give to the next person who works to update the program locator?

It isn't difficult but take much time. Be patient. 

[Daniel Bassill]

Thank you for doing this work and sharing the "how" you did it. I posted this on our Google document so it is archived for future workers.  If you are able to do anything with the boundaries, please write an outline of steps taken, just as you have done here.

For others reading, this shows the learning that is possible when an intern is involved in a real-world project like offered by the Tutor/Mentor Institute, LLC.