Blogs

After updating bank part in asset map, I tried to fix Boundaries error.

It didn't work now, because of google update. 

Google map API changed last December Version2 to Version3.

I've never studied about java and google map API, so I had to study.

Actually, make a new function would be better... 

For that, I need only V3 information, but migrating v2 to v3..I must study both of them.

However, I couldn't make a new one. The codes are complexed and used in many functions and webpages.

Even if I change some tiny thing, It can make a big error. 

Fortunately, There are many sources in google. This isn't a new error. Many people had a same problem.

After studying, I want to test something, but because of wifi problem or my computer problem, 

I couldn't test them exactly. Wifi signal stopped too much, every that moment I had to reconnect to 

server computer. Also, I have to reconnect to our website. wait and reconnect and...

So I couldn't finish this. But I will try in Korea. This is what I did.

https://developers.google.com/maps/documentation/javascript/v2/v2tov3

this is the official page of google to explain their difference.

After reading that page, you will know about the difference approximately.

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=&sensor="></script>

This bootstrap didn't work so I found another one in here.

First, you have to change bootstrap line that is on top of the aspx file. 

This is a v2 bootstrap in asset-map.aspx.


Change that bootstrap. The example is in here. 

http://www.mywebexperiences.com/2013/03/05/migrate-google-maps-from-v2-to-v3/

In V3, API key isn't mandatory, but I recommend to use API key for V3.

You can get it in here with your google account.

https://code.google.com/apis/console

After that, you have to change programMap.js file.

It has a lot of functions for webpages.

If you read the first google official page, you will notice this.

GlatLng --> google.maps.LatLngGLatLngBounds() --> google.maps.LatLngBounds()

GPoint --> google.maps.Point

GMap2 --> google.maps.Map

GInfoWindow --> google.maps.InfoWindow

GMapOptions --> google.map.MapOptions

G_API_VERSION --> google.maps.version

GPolyStyleOptions --> google.maps.PolygonOptions or google.maps.PolylineOptions

Event.addListener --> google.maps.event.addListener

map.getInfoWindow().getPoint --> google.maps.getPosition()

markers[i].getPoint() --> markers[i].getPosition()

closeInfoWindow() --> map.InforWindow.Close();

map.getBoundsZoomLevel(bounds) --> map.fitBounds(bounds)

markers[i].setImage --> .setIcon

map.InfoWindow.close() --> create a function to close

find in maps for objects --> $('#id')[0] or $('#id').get(0) or document.getElementbyId

map.addOverlay(polyline) --> google.maps.Polyline()

Those codes can migrate simply. 

The problem is these.

Version3 doesn't support those codes anymore. 

So we have to change them. I mean, remove them and edit original code.

They didn't support those codes because their structure is changed.

For us, key point is polylines, custom control, GXml, GxmlHttp.

I tried to do some test for them but I didn't do that exactly.

Sometimes, while testing internet connection disconnected suddenly. 

So I couldn't see the right result.

Sometimes, while saving file disconnected suddenly.

So file didn't save or saved imperfectly.. Something is changed but other thing is not changed. 

In that condition, I couldn't do it exactly..I was in chaos;;

These links are useful for us. You can refer these pages.

https://developers.google.com/maps/documentation/javascript/v2/v2tov3

http://blog.brianjohnsondesign.com/google-maps-v3-sensor-parameter-error/

http://www.mywebexperiences.com/2013/03/05/migrate-google-maps-from-v2-to-v3/

http://mymonkeydo.com/converting-google-maps-v2-to-v3/

http://stackoverflow.com/questions/9973284/migrating-my-html-google-map-api-version-2-to-version-3

Stackoverflow is also good to ask something about cording.

If you're Korean, these are also good for you.

http://blog.naver.com/kdog07?Redirect=Log&logNo=10180360727

http://kyozzang.tistory.com/22

I used assetmap-test.aspx page. For that page, I made a ProgramMap_v3.js file.

You can test something with those files. If it works, you can apply to assetmap.aspx the original page.

Hi! My name is Sunjoong Yoo.
I had an internship opportunity during last 7 weeks. The name of my company is Tutor/Mentor connection, Tutor/Mentor Institute, LLC.    It is non-profit organization, so The size of my company is very small. And the number of officer was only 3 or 5. So the atmosphere of our company is just like a family. Our owner, Daniel is really smart and friendly guy. He always try to talk about some various topic with us.

The aim of our company is give an opportunity of education to student who lives in high concentration of poverty. So, the support of other people (for example: donors, volunteers) is really important. My job is to make some various contents that give a motivation to that kind of people. During my internship period, I made an 6 video presentation. To make my own video presentation, I had to study about some
various strategies about social problems or poverty problem. It was really worth.

At first and second week of my internship periods, I had to look some various contents that done by past interns. During 2005 to 2013, there were so many interns and they made huge amount of contents.

And next 3rd to 7th week, I had to make my own contents. There were one big main projects and 1 or 2 sub-projects. To make my own presentation, I had to read some articles about real facts about poverty problem of big cities like Chicago. Or other articles about how to overcome those poverty problem.

During that period, I had to spend more than 2 hours to read that kind of articles.
It was really helpful to improve one’s reading skills and I could get some interesting information. It is also really helpful to improve one’s back-ground knowledge. I think.

And also during my whole internship period, I could improve my back-ground knowledge about
some various strategies that how to overcome poverty by education. It will become a really precious opportunity in my life.

I'm little bit sad now, Because Today is the last day in my Chicago life.
After I go back to Korea, I'll promise that do this kind of work (to encourage people to participate in this kind of organization).

I really recommend my company for your future internship!
Thank you for your reading.

Thank you Daniel.
Thank you!

Hi! My name is Sunjoong Yoo.

And I'm an intern of T/MC, 2014.

Today, I just finished my final project.

This prezi presentation introduces some visual contents that done by past interns.

If you want to watch my project, then please visit this below link.

http://prezi.com/acdlg_nxjxy2/interns-can-make-an-difference/#

Thank you for your watching!

Today, I created one visual presentation.

It made by special software: Prezi.

This is my last project.

I didn't finish it yet. But I can finish this project within this week.

This prezi project introduces some various contents that done by past interns.

Thank you!

Hi! my name is Sunjoong Yoo. I'm an intern of T/MC.

Yesterday, I finished my final project.

If you didn't see my video yet, then please visit this below link.

http://youtu.be/s-vTuuGZc7s

From now on, I will make an short visual material.

It will be made by prezi.

Here are some examples that similar to my future content.

<Created by Kyungryul Kim, Intern of T/MC, 2013 (Video)>

https://www.youtube.com/watch?v=8ZwZ0FeYRM0

<Created by byeonghui Kim, Intern of T/MC, 2013 (Prezi)>

http://prezi.com/-xqad_0eakip/meet-interns-making-a-difference/

The aim of these two presentations is to introduce some other contents that done by past interns.

This kind of work is very worth.

So I will make another visual presentation within next week.

And it will be my last work.

Thank you.

http://youtu.be/s-vTuuGZc7s

This video introduces a short blog article.

If you want to read that article, then please click these below links.
http://tutormentor.blogspot.com/2014/01/creating-super-bowl-of-attention.html
http://tutormentor.blogspot.com/2014/01/creating-super-bowl-of-attention.html

Thank you for your watching.

Example of Program Locator with zoom featureThe Interactive Chicago Tutor/Mentor Program Locator was created with layers of information that could be turned on and off by map-users so they could create a map-story that shows where tutor/mentor programs are needed, and who should be helping.  The map shown here is one where the community area boundaries are turned "on" and where poverty levels are also turned "on".  

In this animation, click on the "boundaries" tab and see how the Program Locator was intended to work.  Since late 2013 all features that had boundaries, such as zip code, community area, cities, political districts, etc. do not work. This was caused by an upgrade by Google to a newer version.  

Below are notes posted by Byungkwan Jang, a Jan-Feb Intern from IIT and South Korea, who has been looking at the code to see if he can make these features work properly again.  If you are reading this and understand how this works, and can volunteer to help, please introduce yourself.

The Now, I'm trying to fix boundaries part.

It has 3 boundaries. County, Community Areas, Zipcode.

I don't know what happened when it works.

D. Bassill NOTE: There aren't many screenshots.  This one shows the North section of the city when the community area layer is turned "on". 

There are three sections to the Program Locator (shown in tabs across the top of the page. From left to right these are Interactive Map, Asset Map and Government Map. 

In each section, layers need to be turned on to create a map view. Thus in the map below from the Government Map section, Illinois Legislative districts are shown.

In the drop down menu for each of the boundary sections, a drop down menu, listing all community areas, all zip codes, all political districts, etc. enables the map-user to choose a single area. When that is done the map zooms into that featured area.  This is not working now.

I think, if I edit xml files of  community areas, then it can make sense.

If we click county box, 3 boxes appear.  Is it county, right? 

Or is it wrong outlines for county?

Zipcode, it didn't work. But, drawing line principle would be similar.

If I can fix community areas part or county part, maybe I can also fix zipcode part.

I looked the code.

function displayChicago().

There are checkboxChicago, chkElgin, chkAurora, chkWaukegan.

However, on the website, I cannot see those checkboxes.

If those checkbox were checked, function hide other polygroups.

so we can only see what we checked. 

settimeout() function request to server in set time. So it can show us 4 or 5 groups.

loadChicago() means load chicago information. These are important functions in displaychicago().

After looking this, I focused on trying to find part of showing community area part in Assetmap.

On assetmap page, it appear automatically, but assetmap-test page, I cannot see it automatically.

So I tried to comparison those 2 codes. Every codes were almost same and finished same line. I read 

more than 3 times until 1751 line(end line) but cannot find.. I will try that again tomorrow then I can

get a clue, I think..

Dbassill Note: Another feature that was working up until about 3 months ago was a zoom feature. Note the magnifying glass in the upper left corner. We were able to drag that over a section of the map and get an enlarged version of that section of the map.

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. 

 Since January 20, 2014 Byungkwan Jang, an intern from Illinois Institute of Technology and South Korea has been attempting to update the Asset Map pages of the Tutor/Mentor Program locator, which is a map based directory showing tutor/mentor programs in Chicago, and assets that could be supporting them.

Below is progress through Feb. 3, 2014

This is a first chkbox.

 I erased Park National Bank and added Wintrust Bank. 

After that, I searched every important bank in Chicago,

check their address, latitude, longitude, and so on...

Made them excel files and xml files.

You can see what I did in here.

https://tutormentorconnection.ning.com/profiles/blogs/3rd-week-wendsday?xg_source=activity

So, this is a final chkbox. It's related to AssetMap.aspx file.

This is an original map.

I added wintrust banks on the map.

This is a final map. At the first time, I thought to show something on the map, it is only related to 

ProgramMap.js file but it is also related to AssetMap.aspx, too.

In that file, around 1600 lines, if we want to show something on the map, we have to add these codes.

This is an example for showing 53bank on the assetmap.

</span><span id="imgpnl53Bank" style="width: 110px; display: none; padding-left: 3px;">
<img id="imgpnl53Bank1" src="Images/53Bankimg.png.ashx" runat="server" />
<%-- <input type="image" src="images/53Bank.png.ashx"
id="imgpnl53Bank1" />--%>
<a id="inp53Bank">53Bank</a><br />

Today, I made this document.

On the basis of this document, I'll create short video within next week.

It will be 3 minutes long. Thank you.

http://tutormentor.blogspot.com/2014/01/creating-super-bowl-of-attention.html

FinalProjectProposal.pdf

FinalProjectProposal.doc

<Shoppers guide for choosing a Tutor Mentor Program to support>

<Planning-Cycle-War-on-Poverty>

<Problem-Solving-Strategy-Explanation-and-Overview>

<Virtual-Corporate-Office-Strategy-for-Helping-Youth-Tutor-Mentor-Programs

-Reach-Youth-in-More-Places>

Today, I created those 4 short videos.

Those 4 videos introduce these below links.

http://www.scribd.com/doc/156999178/Shoppers-Guide-for-Choosing-a-Tutor-Mentor-Program-to-Support

http://www.scribd.com/doc/93233051/Planning-Cycle-War-on-Poverty
http://www.scribd.com/doc/86904421/Problem-Solving-Strategy-Explanation-and-Overview
http://www.scribd.com/doc/158130787/Virtual-Corporate-Office-Strategy-for-Helping-Youth-Tutor-Mentor-Programs-Reach-Youth-in-More-Places

Thank you!