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.