Nishinippori, Yanaka, Ueno (OMapRoute)

1. 35.73181243063871,139.76773381233215
2. 35.73159469950271,139.76796984672546
3. 35.73110697959805,139.76728320121765
4. 35.73105472371683,139.76728320121765
5. 35.7309589211789,139.76736903190613
6. 35.73074118770954,139.76744413375854
7. 35.73072376900629,139.7672939300537
8. 35.730654094155135,139.76715445518494
9. 35.73061054734222,139.76714372634888
10. 35.73047990676059,139.76713299751282
11. 35.73003572718027,139.76725101470947
12. 35.729887666769706,139.76730465888977
13. 35.72968299457243,139.7666609287262
14. 35.729543642988254,139.7660332918167
15. 35.72952622402308,139.7660118341446
16. 35.72961331881083,139.76596891880035
17. 35.72977444391705,139.76588308811188
18. 35.729900730934645,139.76580262184143
19. 35.73008798373007,139.76567924022675
20. 35.73030136428586,139.76555049419403
21. 35.73044071454433,139.76542174816132
22. 35.730270881384314,139.7650784254074
23. 35.7300836290189,139.76470828056335
24. 35.72986153843338,139.7643381357193
25. 35.7295958998609,139.76386070251465
26. 35.72930413188329,139.76402163505554
27. 35.72905155575603,139.7642308473587
28. 35.728759785784426,139.7643917798996
29. 35.72852462711903,139.7644829750061
30. 35.72820672633805,139.76458489894867
31. 35.727880114625265,139.76474583148956
32. 35.72764930820728,139.76482629776
33. 35.72769721148111,139.76527154445648
34. 35.727714630846265,139.765545129776
35. 35.727714630846265,139.76577579975128
36. 35.72771898568695,139.76614594459534
37. 35.72769721148111,139.76644098758698
38. 35.72768850179709,139.7667896747589
39. 35.72764930820728,139.76735830307007
40. 35.72763624367306,139.76781964302063
41. 35.72765801789557,139.76829171180725
42. 35.727745114726126,139.7683882713318
43. 35.727858340463435,139.768425822258
44. 35.72820672633805,139.76850628852844
45. 35.728202371524034,139.76872086524963
46. 35.72819801670976,139.76849555969238
47. 35.72784963079705,139.768425822258
48. 35.727723340527405,139.76840436458588
49. 35.72758834036257,139.76833999156952
50. 35.72755785642272,139.76832389831543
51. 35.72744027540257,139.7683024406433
52. 35.72711366054701,139.7683024406433
53. 35.72676091499879,139.76828634738922
54. 35.72638639332434,139.76827561855316
55. 35.72614687272565,139.76830780506134
56. 35.72582025256678,139.7684097290039
57. 35.72519313810766,139.76863503456116
58. 35.725280237633314,139.76942896842957
59. 35.72515829827074,139.77050185203552
60. 35.723886633795125,139.7702980041504
61. 35.72343370729855,139.7702443599701
62. 35.72284141491769,139.77016925811768
63. 35.72234493114705,139.77036237716675
64. 35.72139550619839,139.77070569992065
65. 35.7206638315463,139.7709846496582
66. 35.71996699229742,139.77116703987122
67. 35.719871176424085,139.77115631103516
68. 35.71901753901206,139.77254033088684
69. 35.71859942755517,139.77324843406677
70. 35.71792870251043,139.77257251739502
71. 35.71769351187206,139.77247595787048
72. 35.71691824892649,139.77229356765747
73. 35.716508837361346,139.77301239967346
74. 35.71620395504214,139.77328062057495
75. 35.71582938373882,139.77306604385376
76. 35.715602897910564,139.7727334499359
77. 35.71548094373643,139.7727334499359
78. 35.71519347958753,139.77291584014893
79. 35.714792770255876,139.77313041687012
80. 35.714540148119966,139.77333426475525
81. 35.71413072433697,139.77318406105042
82. 35.71369516481194,139.77307677268982
83. 35.71341640546667,139.77304458618164
84. 35.71299826462054,139.77304458618164
85. 35.712423317374984,139.77314114570618
86. 35.71199645991899,139.7732377052307
87. 35.711465062748665,139.7733771800995
88. 35.711412793983136,139.7736668586731
89. 35.711412793983136,139.77407455444336
90. 35.71153475438269,139.77428913116455
91. 35.71169156033647,139.7745680809021
92. 35.71185707739743,139.7748899459839

Nishinippori, Yanaka, Ueno (OMapPhotoList)

• 
• 
• 
• 
• 
• 
• 
• 
• 

Nishinippori, Yanaka, Ueno (OMapPhotoList, OMapFramePH, OMapPhotoPH)

• 
• 
• 
• 
• 
• 
• 
• 
• 

Nishinippori, Yanaka, Ueno (OMapMarkerWorkArea)

After taking a rest at a cafe in Nishinippori, we climbed up a slope, to Suwa Jinja Shrine, where Kokontei Shinsho was training his Rakugo in secret. After praying there, we came up to the top of Fujimizaka.

At Yuyeke Dan Dan, we met four cats enjoying the sunlight.

There are holes, which are told to be by bullets during a civil war ending the Edo era.

Passing an antic cafe and a building of Tokyo Geidai, we reached Ueno.

OMap 1.1

Download

Save the following files in your PC and upload them to your site:

	Blogger Beta	TypePad
JavaScript file	OMapInit.js	OMapInit.js
CSS file	OMap.css	OMap.css

Installation

Update your HTML templates to include the Google Maps API JavaScript file, the JavaScript file, and the CSS file as follows:

<html>
<head>
          ....
  <script src='http://maps.google.com/maps?file=api&amp;v=2.x&key=your API key' type='text/javascript'></script>
  <script src='http://your site/OMapInit.js' type='text/javascript'></script>
  <link href='http://your site/OMap.css' rel='stylesheet' type='text/css'/>
          ....
</head>
<body>
          ....
          ....
          ....
  <script type='text/javascript'>
  //<![CDATA[
          window.onunload = GUnload ;
          OMapInit();
  //]]>
  </script>
</body>
</html>

Options

There are two options about how maps are displayed in the page:

TopMapDisplay

In order to display a map whose markers point to posts containing maps, "TopMapDisplay = true" has to be specified. Because the default value is "false" and the map on the top of the page is not shown.

PostMapFloat

When "PostMapFloat = true" is specified, a map in the post is aligned to the left or right depend on CSS class specification, postMapFloat. By default, which is "false", the map is shown at the end of the post.

These options can be specfied immediately before calling OMapInt() like this:

  <script type='text/javascript'>
  //<![CDATA[
          window.onunload = GUnload ;
          // OMap option parameters:
          TopMapDisplay = true;
             // to display the big map on the top of page
          PostMapFloat  = true;
             // to float a map in the post
          OMapInit();
  //]]>
  </script>
</body>
</html>

Customizing CSS

In OMap.css there are several classes defined. The following classes are what you might want to customize to fit maps to your blog:

topMap

When you specify "TopMapDisplay = true", you can also modify this class by specfying width, height and so on.

postMap

By default ("PostMapFloat = false"), this class is used for the area (div tag) containing a map in the post. You can change width and height of that area.

postMapFloat

When you specify "PostMapFloat = true", you can also modify this class by specfying float:right or float:left as well as width and height

postMapLarge

When you specify "PostMapFloat = true", you can also modify this class by specfying float:right or float:left as well as width and height. This class is used when double clicking a floated map with "PostMapFloat = true".

Beyond OMap 1.x, the rise of OMap 2.0

I am still working to clean up code of OMap 1.1. However I think it is time to see the horizon OMap 1.x can reach and what are there beyond it. If OMap 1.x can be defined as challenges about what DOM scripting using Google Maps API can help bloggers, I can also say that it has its own limitations by what only JavaScipt programs on web browser can do. It is because OMap 1.x can work only with data in the web page where OMap is called. If OMap is going to work with external information outside the web page, collaboration with server side programs will be required for the following processes:

1. Collecting information in the Web, such as photos on Flickr having place information and taken in the map area OMap shows
2. Storing information in files or database, in order to enable asynchronous collecting process by server side programs
3. Publishing information, which OMap subscribes and receives to put markers on the map

The biggest challenge among above items is 3 if OMap makes use of Comet's style of communication with server side programs. Besides if Comet can be exploited by OMap, it can provide a sort of chat on the map, though it might be beyond OMap just as a set of helper functions to blogging. But it must be fun. Lastly I summarize what I mus accomplish by OMap 1.x, because OMap 1.x should be the base for any enhancements by OMap 2.0. The following items will be implemented by OMap 1.x:

1. Writing a post from the map
2. Using of Geocoding API to locate a place in the map by keywords
3. Using of GPlolyline to connect selected markers on the map
4. Standardizing info windows on the marker with multiple tabs
5. Refining code base for OMap 2.x extensions

It is also important before ending this post to summarize what OMap 1.1 has accomplished so far.

1. Basic use of Google Maps API services, such as showing maps and putting markers and info windows there
2. Map based navigation to blog posts as the map on the top of page, an example of this can be seen at OMap: Walking.
3. Separation of layout information from JavaScript code to an external CSS file

Why DID NOT OMap work by IE?

I found today the reason why my old OMap DID NOT work at Internet Explore. The reason was so simple that I fixed it and now OMap works by IE too. OMap finds out div tags containing blog posts by searching all div tags in the page and checking their class attributes. OMap did it by getAttribute("class"). This works at Firefox, but it doesn't at IE. The solution is getting class attributes by node.className. This works for both Firefox and IE. I found this during testing OMap 1.1. I will announce OMap 1.1 in another post. But before that I have to clean up the new code.

walkTheDOM

I have just learned an interesting recursive function, called walkTheDOM. It is explained by Douglas Crockford in the video. After about 28 minutes, this function is explained.This simple recursive function shows what hierarchic structure is. He gave in the video, another function, getElementsByClassName using the walkTheDOM. I would like use this smart function for OMap to find out div elements which contain blog post. I found by Google the .ppt file used by him and the link Google gave me is here. His video can be seen at Yahoo! Video. I learned this from Video Presentation: Douglas Crockford on the “Theory of the DOM”.

Another SPE to OMap 1.0

I couldn't stop adding another function to OMap 1.0 even after having posted, Small programming enhancements to OMap 1.0ff. It is a navigation map which can be seen at the top of page, if the page contains at least two posts and at least one post which has a map link. You can click on a marker on the navigation map and you will see an infoWindow which contains the title of the post and the link to it. With this extension, I have to say goodbye to blog neutrality. In other words, this new extension works only Blogger.com. This is because the structure of document of Blogger.com is different from other blogs, such as TypePad. If you want to use this extension, you have to link three JavaScript files in header in your blog HTML template:

<script src='http://... /OyajiMapper.js' type='text/javascript'></script> <script src='http://... /OyajiMapperExtensions.js' type='text/javascript'></script> <script src='http://... /OyajiMapperExtForBloggerCom.js' type='text/javascript'></script>

If you have a TypePad pro account, you can use another extension for TypePad, by linking the following three files in header in blog HTML templates:

<script src='http://... /OyajiMapper.js' type='text/javascript'></script> <script src='http://... /OyajiMapperExtensions.js' type='text/javascript'></script> <script src='http://.../ OyajiMapperExtForTypepad.js' type='text/javascript'></script>

I am still willing to solve a very big known issue, that is IE cannot understand OMap. But at the point of writing, I have no good solution at all. Any advice is highly appreciated. I have one more thing to do, that is code cleanup of OMap 1.0, putting together three JavaScript files into one file. The result will be OMap 1.1. I had tried it a few days ago, I realized that it is very difficult to re-write code with the same level of excitement as I had had at the first time.

Internet Explorer 7 Release Candidate 1

In order to be fair to Microsoft, I have installed IE7 RC1. But still I can not see any maps on this site by IE.

OMap on Blogger

For IE visitors, this is what OMap looks like on Blogger by Firefox.

OMap on TypePad

This is a sample screen shot of how OMap is working at a TypePad bog .

Let's put a map in your blog post

With OMap, You can easily put maps in your blog posts at Blogger.com or TypePad.

Q. How can I put maps in my post?
A. It 's simple. If you just makes links to Google Maps pages in your post, OMap puts a map in your post. For example, this link creates a map in this post.

Q. What is a "link to Google Maps page" ?
A. You can get it by "Link to this page" button at the top right of each page of Google Maps site, www.google.com/maps.

Q. What I need to do for using OMap?
A. You need to change your own blog templates to let OMap to read your blog pages. Please read Setup for more details.

Q. Can I put a map in my post of other blog site?
A. Yes, you can as far as you can edit your blog templates by yourself. But you might have to change my JavaScript, because structure of blogs varies.

Firefox 2 Release Candidate 2

I have just installed Firefox 2 Release Candidate 2. I have confirmed OMap 1.0ff works on this environment. Hereafter I am going to develop OMap at Firefox 2 RC2 on Windows XP. I appreciate your feedback about OMap on Firefox 2 RC2 or other environments.

We Didn't Start The Fire

by Billy Joel

Harry Truman, Doris Day, Red China, Johnnie Ray South Pacific, Walter Winchell, Joe DiMaggio Joe McCarthy, Richard Nixon, Studebaker, television North Korea, South Korea, Marilyn Monroe Rosenbergs, H-Bomb, Sugar Ray, Panmunjom Brando, "The King and I", and "The Catcher in the Rye" Eisenhower, vaccine, England's got a new queen Marciano, Liberace, Santayana goodbye

www.teacheroz.com/fire.htm did a nice job on the Billy's lylics. I am going to give another flavor to his lylics by Google Maps. You will see this post updated in a few days.

Small prgramming enhancements to OMap 1.0ff

I have just made tiny programming enhancements to OMap 1.0ff since its release, last Thursday. I would like to call the current release of OyajiMapper as OMap 1.0ff from now on. ff means Firefox. I will never make another release like OMap 1.0ie. When it works also on Microsfot's Internet Explore. I will just remove ff. The enhancements I made are very small thing such as:

• Display small indicators like "display map" and "hide map" at the right bottom corner of the posts where any links OMap will handle exist
• Give more sign also to img tags which are between a tags whose href contain Google Maps URL

The code of these enhancements is seperated from the main JavaScript file of OMap, OyajiMapper.js. You don't see any code there. You will see only some dummy functions as entry points to enhancement code such as:

• function OMapCreateMessageAreaExtension(div_post) { }
• function OMapCreateGmapExtension(map_area, lng, lat) { }
• function OMapDisplayMapExtension(anchor, map_area, map) { }
• function OMapInitExtensionImgTagCheck(anchor) { }

(I would like to add, if possible, another function here to find out the zoom level from the URL, which seems to me &z=, and use it the zoom level when the map is dissplayed by the first click in the post.) These functions are implemented in another JavaScript file, OyajiMapperExtensions.js. This separation makes the current main JavaScript file, OyajiMapper.js more independent of its enhancemnts. This site doesn't link the extnsions JavaScript file. So you can only experience behaviors the main JavaScript file gives to the pages. You can see the enhanced behaviors at the other site, koichiwb.typepad.com/ogcv2r0/ whose author requested these enhancements. I will put two JavaScript files together into one file after tuning the current main JavaScript code . I know the enhacement code is not beautifull, so I need to rewrite it, as well. I will release OMap 1.1ff in a few weeks, whose code will include the enhancemnt and have more abstraction level for futher enhancements.

Santa Teresa

I was told by a friend of mine yesterday that Picasa is cool and I found an article about Picasa and Blogger beta, Blogger Buzz: Post to the Blogger beta from Picasa today. So I wrote this from my Picasa with a picture it found out after I installed it an hour ago. When I visited there at the first time, it was called Santa Teresa. It was in 1989 that I participated in a project and wrote some parts of a technical book. It was an interesting and challenging job for me to write something in English and to be reviewed by a technical editor who my company employed. She told me a lot of things including use of unodered list or ordered list. What I am most proud of during my six week stay is that the other participants received much more red comments manually written by her even they speak English as their native language but I had a few. I think it was due to the way how I have been learning English. My vocabulary and style of writing is limit ted because I had read only books in English as part of my job. Products manuals were only books I had read seriously during those days. So it was only because my English writing is more technical than theirs. 

OMap 1.0 for Firefox

I am very happy to announce on my 44th birthday that the first release of OyajiMapper, OMap 1.0 for Firefox works on this site. To be honest, I didn't intend to write OMap only for Firefox. But it doesn't work by Internet Explorer at all. What I can say at this moment is just "I don't know why, please tell me what I should do for fixing the problem". I want to work hard to make it available for a lot of vistors using IE. If you would kindly look at my code, OyajiMapper.js, any advise or sugesstions are highly appreciated. If you visit this site by Firefox, you can enjoy how OMap serves you at my two posts, Walking in Ueno and Walking in Tokyo. On either post, you find pink colored links. If you click one of them, a map appears at the bottom of the post. If you are nice to know how this works, please browse the page source. But you can only find usual a tags whose hrefs are URLs of pages in Google Maps such as:

http://maps.google.com/maps?ll=35.686634,139.786273

One of OMap functions reads the whole page to find out those a tags. It changes the color and background color of them using the Document Object Model (DOM) methods. It also adds onlick attributes to them. Another OMap function is called at onclick event. It also uses some DOM methods and Google Maps API to display a map. If you want to use my JavaScript, please copy OyajiMapper.js to your blog site and link to your OyajiMapper.js by a script tag in html head like:

<script src='http://your blog site/OyajiMapper.js' type='text/javascript'></script>

You have to specify OMapInit function as a function executed at onload event by changing your HTML template. I did it myself by placing the following code immediately before body end tag:

<script type='text/javascript'> //<![CDATA[ OMapInit(); //]]> </script> </body>

In order to use OMap, you need to have your own Google Maps API key. If you are not familar with it, please read my post, Getting an API key. If you blog site is TypePad, you need change OMAP_TARGET_CLASS variable in OyajiMapper.js as:

var OMAP_TARGET_CLASS = "entry-body" ;

The default value of OMAP_TARGET_CLASS is "post-body", whichi is the class attribute value of a div tag containing a post of Blogger. If you have any question or if you kindly give me any feedback, please leave your comment on this post or send an e-mail to me. Tasuke Isshin / tasuke.isshin@gmail.com

Walking in Ueno

Last Sutuday I went to a museum in Ueno, where Salvador Dali's pictures are being shown.After enjoying Dali, a friend of mine and I walked around in Ueno. And finally, of course, we went to another Soba restaurant, Rengyokuan to be served Kamonanban Soba. That was delicious too.

Walking in Tokyo

I went to Suidobashi station on the JR Sobu line to get together. Our distination was Kaneyasu. And we had supper at a Soba restaurant in Hamacho.

My programming life

There are two things bother me about my programming life.

1. When I start writing code in the night, I cannot stop writing until seeing the morning sun.
2. There are some nights when many interesting ideas about programing come up to my mind in the bed. Then it becomes difficult for me to sleep unless I start writing code.

They are the reasons why I am always sleepy. So I have made up mind to follow my two rules:

1. write code in the early morning, say, 4 am
2. not think about programming before going to bed

Though my notebook has been filled with sketches and code fragments of OyajiMapper, I would like to follow the above rules. So I will close my notebook PC right now.

Good night.

About OyajiMapper.js

OyajiMapper.js is a single JavaScript file which contains a set of functions to display maps using Google Maps API. I would like to call OyajiMapper as OMap for saving transmitted data in the Internet. This single JavaScript file takes care of everything OMap can do. So if you like OMap you can use it by saving the file and copying it to your website where you want to use functions of OMap. At the point of writing this entry, there are no OMap functions implemented. OyajiMapper.js is an almost empty file with only a few comments. My objective of this entry is to explain why I want to write OMap and what OMap functions will be implemented. This is an overview of OMap. I have posted entries using Google Maps API to include maps in my entries. One of such entries is this entry in TypePad. Since I don't like to see any logic or code in an blog entry which should contain only data, I implemented some functions that read position information in the HTML document and call Google Maps API to display the map. If you browse the HTML source of that entry, you will find out a div tag having id="map-35.701915,139.75498". One of my functions checks all div tags in the page using DOM. If any div tags whose IDs contains "map-", the function treat them as the places replaced by maps. The latter part of the ID is the latitude and the longitude of the place. Another function of mine calls Google Maps API to display the map. I was successfull in a sense that I could remove any JavaScript code in a blog entry. But I am not satisfied about IDs. My brief is that IDs or keys are only for machine or computer and they are never for human beings. If a program needs an ID, it should take care of itself and a blogger has not to help it. As a matter of fact, it is difficult to assign an ID to her blog entry. Because the ID should be unique in all the possible pages which contains her entry such an index page, an archive page, category pages and an individual page. And if you want two maps in your entry, you need two different IDs. Another thing I don't like is that it is not semantic. Why should part of the ID be latitude or longitude? No one can imagine the meaning of ID or a fragment of his blog entry without knowledge of the JavaScript functions implemented. Those are the reasons why I want to write another set of JavaScript functions, OMap. Let me summarize them as follows:

1. Any JavaScript codes should be separated from a blog entry.
2. IDs for identifying the div elements for maps should be taken care by outside JavaScript functions which need IDs. So a blogger doesn't have to write IDs in his blog entries.
3. Only things a blogger write in her entries are place information such as latitude, longitude, name of the place and its description. And the data written in a blog entry should be written semantically.

I have written too much in a single entry. So I would like to write in another entry about what what functions will be implemented in OyajiMapper.js.

Getting an API key

This site is the official site of OyajiMapper. At the same time this site is where I am going to test my OyajiMapper. In order to do so, I need a Google Maps API key for this site. It is simple to get an API key from the Google Maps API site. It takes only a few clicks from its home page to get your own API key. Your key can be used only by your site, whose URL will be asked by the Google Maps API site before Google giving you a key. If you try to use a key of someone else, the Google Maps API doesn't work and prompts an error message such as:

The Google Maps API key used on this web site was registered for a different website. You can generate a new key for this web site at http://www.google.com/apis/map/ .

The next thing to do is to add a HTML link element in the HTML head in your pages. As I am going to test here, so what I have to do is to edit my blogger template. How the link element should be coded is documented at the Google Maps API site and you can copy and paste it to your pages or blog template(s). The last thing to do is to verify the configuration. The Google Maps API site's page provide a whole HTML document sample which includes a sample JavaScript to use Google Maps API, as well as the HTML link element in the head which is to read a JavaScript file from Google with the API key as one of its parameters. I made a slight different verification because I don't like the sample JavaScript to be executed by body tag's onload attribute. So instead of executing the sample when a HTML page load is completed, I write a HTML a element (anchor), such that the provided function, load() is called to display a Google Map bellow by clicking here.

It was such an easy task. Partly because I had done the same things three times for the other sites. But even at the first time it was that easy. So now this site is ready for testing my JavaScipt, OyajiMapper.js, but it has no data or function definitions at all when I write this post. I will be back when I start writing some codes.

Starting OMap

Hello, my name is Tasuke Isshin. I am working at support desk of the Oyaji Gyagu 2.0 web site. I am going to write entries about the development of OyajiMapper or OMap, which helps bloggers post entries with maps.