Monday, January 15, 2007

A simple tool for drawing a polyline

The bottom of the page of this log, you will find "Let's play with Google Map". This is a "HTML/JavaScript" page element with source as follows:

<div style="border-style:none;" class="post-body">
   <div style="height:450px;" class="OMapFramePH"></div>
   <p style="display:none;">Start by clicking
   <a href="http://maps.google.com/maps?ll=25.101747,121.548840">here</a>.</p>
   <div class="OMapMarkerWorkArea"></div>
</div>

If you click on the map, a marker appears. If you click again at another place, you will see a line on the map. And you can see the ordered list bellow the map. If you are using Firefox, please select this ordered list, make a right click to select "view selection source", you will see the html source for the line you draw by clicking on the map.

If you want to undo the last click, click the marker.

Testing fixed html source

This entry is also for the problem determination.

  1. 22.986401,120.20004
  2. 22.986402,120.199989
  3. 22.986394,120.199911
  4. 22.987431,120.197523
  5. 22.987576,120.197076
  6. 22.987516,120.197327
  7. 22.987511,120.197362
  8. 22.987511,120.19738
  9. 22.987518,120.197392
  10. 22.987519,120.197402
  11. 22.98723,120.197443
  12. 22.987217,120.197549
  13. 22.987214,120.197602
  14. 22.98716,120.197617
  15. 22.987184,120.197614
  16. 22.987221,120.197597
  17. 22.987255,120.197584
  18. 22.987286,120.197578
  19. 22.987311,120.197573
  20. 22.987331,120.197563
  21. 22.987344,120.197558
  22. 22.987355,120.197559
  23. 22.987388,120.19757
  24. 22.987959,120.19784
  25. 22.987978,120.197893
  26. 22.98797,120.19793
  27. 22.987952,120.19796
  28. 22.987416,120.198118
  29. 22.987308,120.198171
  30. 22.987409,120.198142
  31. 22.987437,120.19811
  32. 22.987493,120.198079
  33. 22.987573,120.198073
  34. 22.987635,120.19806
  35. 22.987685,120.198058
  36. 22.987716,120.198065
  37. 22.987735,120.198063
  38. 22.987748,120.198055
  39. 22.987752,120.198044
  40. 22.987753,120.198042
  41. 22.987755,120.198043
  42. 22.987762,120.198043
  43. 22.98777,120.198045
  44. 22.987776,120.19804
  45. 22.987781,120.198038
  46. 22.987794,120.198032
  47. 22.987817,120.198023
  48. 22.988435,120.197652
  49. 22.988458,120.197624
  50. 22.988459,120.197637
  51. 22.988441,120.197694
  52. 22.988422,120.197767
  53. 22.988396,120.197845
  54. 22.988372,120.197924
  55. 22.988133,120.198657
  56. 22.988133,120.19877
  57. 22.988118,120.19879
  58. 22.988118,120.198802
  59. 22.988117,120.198806
  60. 22.988129,120.198804
  61. 22.988139,120.198793
  62. 22.988148,120.198787
  63. 22.988147,120.198803
  64. 22.988146,120.198838
  65. 22.98814,120.198885
  66. 22.98812,120.198928
  67. 22.988094,120.198954
  68. 22.988074,120.198964
  69. 22.988057,120.198974
  70. 22.988043,120.198982
  71. 22.988028,120.198991
  72. 22.988015,120.199
  73. 22.988006,120.199008
  74. 22.987998,120.199014
  75. 22.987992,120.199018
  76. 22.987985,120.199024
  77. 22.987979,120.199028
  78. 22.987972,120.199032
  79. 22.987968,120.199036
  80. 22.987964,120.19904
  81. 22.98796,120.199041
  82. 22.987957,120.199043
  83. 22.987953,120.199045
  84. 22.987949,120.199048
  85. 22.987948,120.199055
  86. 22.987951,120.199067
  87. 22.987959,120.19908
  88. 22.988326,120.199697
  89. 22.98832,120.199808
  90. 22.988314,120.199913
  91. 22.98828,120.199997
  92. 22.988215,120.200042
  93. 22.988141,120.20007
  94. 22.988059,120.200084
  95. 22.987978,120.200094
  96. 22.987259,120.20025
  97. 22.987224,120.200267
  98. 22.98724,120.200243
  99. 22.987232,120.20019
  100. 22.987194,120.200139
  101. 22.987169,120.200101
  102. 22.987134,120.200087
  103. 22.987092,120.200072
  104. 22.987055,120.200058
  1. 22.9866217,120.2001333
  2. 22.9866067,120.20015
  3. 22.9867117,120.2001617
  4. 22.9866733,120.2001683
  5. 22.9866567,120.2001983
  6. 22.9866633,120.2001867
  7. 22.9866167,120.20009
  8. 22.9866667,120.20009
  9. 22.9867967,120.20006
  10. 22.9868067,120.2000183
  11. 22.9866983,120.2000317
  12. 22.9866183,120.1999483
  13. 22.9867883,120.1998633
  14. 22.9868383,120.2000267
  15. 22.9866467,120.1999833
  16. 22.9866217,120.2000067
  17. 22.98673,120.2001733
  18. 22.9866617,120.2001483
  19. 22.9864533,120.2001583
  20. 22.9864833,120.1999933
  21. 22.98638,120.2002133
  22. 22.986335,120.2002
  23. 22.9862533,120.199285
  24. 22.986365,120.20003
  25. 22.9863767,120.1998633
  26. 22.9863917,120.1996817
  27. 22.986275,120.1995917
  28. 22.9863217,120.1994683
  29. 22.9863067,120.19939
  30. 22.9862967,120.1993133
  31. 22.986295,120.199245
  32. 22.9863667,120.1990683
  33. 22.9861117,120.1989183
  34. 22.9862117,120.198735
  35. 22.9860467,120.198565
  36. 22.9860233,120.1985017
  37. 22.9862,120.19819
  38. 22.9860217,120.1978233
  39. 22.98756,120.1978483
  40. 22.9875217,120.1981733
  41. 22.9874667,120.1977567
  42. 22.98756,120.1976433
  43. 22.98768,120.1971367
  44. 22.98747,120.197395
  45. 22.9873983,120.19748
  46. 22.987365,120.19767
  47. 22.9874467,120.197625
  48. 22.9874033,120.1976283
  49. 22.9874217,120.19758
  50. 22.9873717,120.1976233
  51. 22.98722,120.19769
  52. 22.987435,120.1974033
  53. 22.98722,120.19774
  54. 22.9873933,120.19753
  55. 22.9874283,120.1975
  56. 22.9873367,120.19751
  57. 22.9873983,120.1975133
  58. 22.9874183,120.197475
  59. 22.98739,120.1974383
  60. 22.98729,120.197965
  61. 22.9877067,120.198075
  62. 22.9886267,120.1969667
  63. 22.9883933,120.1975367
  64. 22.9888233,120.1962267
  65. 22.9883633,120.1973483
  66. 22.98854,120.1977367
  67. 22.9881817,120.19803
  68. 22.9893917,120.1962033
  69. 22.9887267,120.1976233
  70. 22.9891617,120.1968517
  71. 22.9894233,120.196525
  72. 22.9895017,120.1961233
  73. 22.9884717,120.197015
  74. 22.9884783,120.197055
  75. 22.9885183,120.1970867
  76. 22.988565,120.1974967
  77. 22.98856,120.197615
  78. 22.988715,120.197525
  79. 22.9887233,120.1975933
  80. 22.98855,120.1973883
  81. 22.988765,120.19726
  82. 22.9884,120.19757
  83. 22.98812,120.1979167
  84. 22.9881233,120.198145
  85. 22.9880367,120.198325
  86. 22.987905,120.1984933
  87. 22.9881067,120.1988117
  88. 22.9880667,120.198755
  89. 22.9880367,120.1987617
  90. 22.9880233,120.1987567
  91. 22.9880217,120.198755
  92. 22.9880083,120.19875
  93. 22.9880117,120.1987433
  94. 22.987945,120.198855
  95. 22.98796,120.1990367
  96. 22.987885,120.19922
  97. 22.98773,120.1993283
  98. 22.9876583,120.1992017
  99. 22.9877067,120.19907
  100. 22.98768,120.199185
  101. 22.9877033,120.19918
  102. 22.987705,120.19918
  103. 22.9876667,120.1991483
  104. 22.9876917,120.1991183
  105. 22.98767,120.199125
  106. 22.9876667,120.1991033
  107. 22.987695,120.1991267
  108. 22.987695,120.1991183
  109. 22.9876967,120.199095
  110. 22.987685,120.1990683
  111. 22.9876917,120.1990467
  112. 22.987715,120.19906
  113. 22.9877267,120.19905
  114. 22.98774,120.19905
  115. 22.9877133,120.1990483
  116. 22.9877233,120.1991683
  117. 22.9877883,120.199235
  118. 22.987945,120.199385
  119. 22.9881133,120.19958
  120. 22.9881133,120.199785
  121. 22.988205,120.200035
  122. 22.9880517,120.2001467
  123. 22.9878683,120.2001733
  124. 22.987685,120.2002
  125. 22.9875,120.2001817
  126. 22.9873233,120.2001233
  127. 22.987275,120.2002517
  128. 22.9872883,120.2001617
  129. 22.98732,120.2001283
  130. 22.98715,120.20004
  131. 22.9871867,120.1998467
  132. 22.986975,120.199975
  133. 22.987265,120.1999067
  134. 22.9868317,120.199745
  135. 22.98669,120.1996783

Recreating the problem

This entry is only for the problem determination.


  1. 22.986401,120.20004

  2. 22.986402,120.199989

  3. 22.986394,120.199911

  4. 22.987431,120.197523

  5. 22.987576,120.197076

  6. 22.987516,120.197327

  7. 22.987511,120.197362

  8. 22.987511,120.19738

  9. 22.987518,120.197392

  10. 22.987519,120.197402

  11. 22.98723,120.197443

  12. 22.987217,120.197549

  13. 22.987214,120.197602

  14. 22.98716,120.197617

  15. 22.987184,120.197614

  16. 22.987221,120.197597

  17. 22.987255,120.197584

  18. 22.987286,120.197578

  19. 22.987311,120.197573

  20. 22.987331,120.197563

  21. 22.987344,120.197558

  22. 22.987355,120.197559

  23. 22.987388,120.19757

  24. 22.987959,120.19784

  25. 22.987978,120.197893

  26. 22.98797,120.19793

  27. 22.987952,120.19796

  28. 22.987416,120.198118

  29. 22.987308,120.198171

  30. 22.987409,120.198142

  31. 22.987437,120.19811

  32. 22.987493,120.198079

  33. 22.987573,120.198073

  34. 22.987635,120.19806

  35. 22.987685,120.198058

  36. 22.987716,120.198065

  37. 22.987735,120.198063

  38. 22.987748,120.198055

  39. 22.987752,120.198044

  40. 22.987753,120.198042

  41. 22.987755,120.198043

  42. 22.987762,120.198043

  43. 22.98777,120.198045

  44. 22.987776,120.19804

  45. 22.987781,120.198038

  46. 22.987794,120.198032

  47. 22.987817,120.198023

  48. 22.988435,120.197652

  49. 22.988458,120.197624

  50. 22.988459,120.197637

  51. 22.988441,120.197694

  52. 22.988422,120.197767

  53. 22.988396,120.197845

  54. 22.988372,120.197924

  55. 22.988133,120.198657

  56. 22.988133,120.19877

  57. 22.988118,120.19879

  58. 22.988118,120.198802

  59. 22.988117,120.198806

  60. 22.988129,120.198804

  61. 22.988139,120.198793

  62. 22.988148,120.198787

  63. 22.988147,120.198803

  64. 22.988146,120.198838

  65. 22.98814,120.198885

  66. 22.98812,120.198928

  67. 22.988094,120.198954

  68. 22.988074,120.198964

  69. 22.988057,120.198974

  70. 22.988043,120.198982

  71. 22.988028,120.198991

  72. 22.988015,120.199

  73. 22.988006,120.199008

  74. 22.987998,120.199014

  75. 22.987992,120.199018

  76. 22.987985,120.199024

  77. 22.987979,120.199028

  78. 22.987972,120.199032

  79. 22.987968,120.199036

  80. 22.987964,120.19904

  81. 22.98796,120.199041

  82. 22.987957,120.199043

  83. 22.987953,120.199045

  84. 22.987949,120.199048

  85. 22.987948,120.199055

  86. 22.987951,120.199067

  87. 22.987959,120.19908

  88. 22.988326,120.199697

  89. 22.98832,120.199808

  90. 22.988314,120.199913

  91. 22.98828,120.199997

  92. 22.988215,120.200042

  93. 22.988141,120.20007

  94. 22.988059,120.200084

  95. 22.987978,120.200094

  96. 22.987259,120.20025

  97. 22.987224,120.200267

  98. 22.98724,120.200243

  99. 22.987232,120.20019

  100. 22.987194,120.200139

  101. 22.987169,120.200101

  102. 22.987134,120.200087

  103. 22.987092,120.200072

  104. 22.987055,120.200058


  1. 22.9866217,120.2001333

  2. 22.9866067,120.20015

  3. 22.9867117,120.2001617

  4. 22.9866733,120.2001683

  5. 22.9866567,120.2001983

  6. 22.9866633,120.2001867

  7. 22.9866167,120.20009

  8. 22.9866667,120.20009

  9. 22.9867967,120.20006

  10. 22.9868067,120.2000183

  11. 22.9866983,120.2000317

  12. 22.9866183,120.1999483

  13. 22.9867883,120.1998633

  14. 22.9868383,120.2000267

  15. 22.9866467,120.1999833

  16. 22.9866217,120.2000067

  17. 22.98673,120.2001733

  18. 22.9866617,120.2001483

  19. 22.9864533,120.2001583

  20. 22.9864833,120.1999933

  21. 22.98638,120.2002133

  22. 22.986335,120.2002

  23. 22.9862533,120.199285

  24. 22.986365,120.20003

  25. 22.9863767,120.1998633

  26. 22.9863917,120.1996817

  27. 22.986275,120.1995917

  28. 22.9863217,120.1994683

  29. 22.9863067,120.19939

  30. 22.9862967,120.1993133

  31. 22.986295,120.199245

  32. 22.9863667,120.1990683

  33. 22.9861117,120.1989183

  34. 22.9862117,120.198735

  35. 22.9860467,120.198565

  36. 22.9860233,120.1985017

  37. 22.9862,120.19819

  38. 22.9860217,120.1978233

  39. 22.98756,120.1978483

  40. 22.9875217,120.1981733

  41. 22.9874667,120.1977567

  42. 22.98756,120.1976433

  43. 22.98768,120.1971367

  44. 22.98747,120.197395

  45. 22.9873983,120.19748

  46. 22.987365,120.19767

  47. 22.9874467,120.197625

  48. 22.9874033,120.1976283

  49. 22.9874217,120.19758

  50. 22.9873717,120.1976233

  51. 22.98722,120.19769

  52. 22.987435,120.1974033

  53. 22.98722,120.19774

  54. 22.9873933,120.19753

  55. 22.9874283,120.1975

  56. 22.9873367,120.19751

  57. 22.9873983,120.1975133

  58. 22.9874183,120.197475

  59. 22.98739,120.1974383

  60. 22.98729,120.197965

  61. 22.9877067,120.198075

  62. 22.9886267,120.1969667

  63. 22.9883933,120.1975367

  64. 22.9888233,120.1962267

  65. 22.9883633,120.1973483

  66. 22.98854,120.1977367

  67. 22.9881817,120.19803

  68. 22.9893917,120.1962033

  69. 22.9887267,120.1976233

  70. 22.9891617,120.1968517

  71. 22.9894233,120.196525

  72. 22.9895017,120.1961233

  73. 22.9884717,120.197015

  74. 22.9884783,120.197055

  75. 22.9885183,120.1970867

  76. 22.988565,120.1974967

  77. 22.98856,120.197615

  78. 22.988715,120.197525

  79. 22.9887233,120.1975933

  80. 22.98855,120.1973883

  81. 22.988765,120.19726

  82. 22.9884,120.19757

  83. 22.98812,120.1979167

  84. 22.9881233,120.198145

  85. 22.9880367,120.198325

  86. 22.987905,120.1984933

  87. 22.9881067,120.1988117

  88. 22.9880667,120.198755

  89. 22.9880367,120.1987617

  90. 22.9880233,120.1987567

  91. 22.9880217,120.198755

  92. 22.9880083,120.19875

  93. 22.9880117,120.1987433

  94. 22.987945,120.198855

  95. 22.98796,120.1990367

  96. 22.987885,120.19922

  97. 22.98773,120.1993283

  98. 22.9876583,120.1992017

  99. 22.9877067,120.19907

  100. 22.98768,120.199185

  101. 22.9877033,120.19918

  102. 22.987705,120.19918

  103. 22.9876667,120.1991483

  104. 22.9876917,120.1991183

  105. 22.98767,120.199125

  106. 22.9876667,120.1991033

  107. 22.987695,120.1991267

  108. 22.987695,120.1991183

  109. 22.9876967,120.199095

  110. 22.987685,120.1990683

  111. 22.9876917,120.1990467

  112. 22.987715,120.19906

  113. 22.9877267,120.19905

  114. 22.98774,120.19905

  115. 22.9877133,120.1990483

  116. 22.9877233,120.1991683

  117. 22.9877883,120.199235

  118. 22.987945,120.199385

  119. 22.9881133,120.19958

  120. 22.9881133,120.199785

  121. 22.988205,120.200035

  122. 22.9880517,120.2001467

  123. 22.9878683,120.2001733

  124. 22.987685,120.2002

  125. 22.9875,120.2001817

  126. 22.9873233,120.2001233

  127. 22.987275,120.2002517

  128. 22.9872883,120.2001617

  129. 22.98732,120.2001283

  130. 22.98715,120.20004

  131. 22.9871867,120.1998467

  132. 22.986975,120.199975

  133. 22.987265,120.1999067

  134. 22.9868317,120.199745

  135. 22.98669,120.1996783

Saturday, January 13, 2007

OMap 1.3

How to write a blog post with OMap

OMap searchs links to Google Maps pages in your blog post. So you can simple give a link to your words in your blog post.

OMap: Nishinippori, Yanaka, Ueno is a sample blog post.

<p>After taking a rest at
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&ie=UTF8&z=18&ll=35.732244,139.76746&spn=0.00219,0.003433&om=1">a cafe</a>
in Nishinippori, we climbed up
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&amp;amp;amp;ie=UTF8&z=19&amp;ll=35.730807,139.767447&spn=0.001095,0.001717&amp;amp;amp;amp;amp;amp;amp;amp;om=1">a slope</a>,
to
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&ie=UTF8&z=19&ll=35.730837,139.76709&spn=0.001095,0.001717&om=1">Suwa Jinja Shrine</a>,
where Kokontei Shinsho was training his Rakugo in secret. After praying there, we came up to the top of
<a href="http://maps.google.com/maps?key=ABQIAAAAkS41J6-HBoJpLyLJXqmzTxTqk2QfI72xHMsR7rgFOegqpKgRnxQMU-pwEWbFdN96JlccciIb1p9Xzw&amp;amp;amp;ie=UTF8&z=19&amp;ll=35.72984,139.767254&spn=0.001095,0.001717&amp;amp;amp;amp;amp;amp;amp;amp;om=1">Fujimizaka</a>.</p>

The above is part of HTML source of the sample blog post. You can see long long URLs as specfied by href. But you cannot find any JavaScript code for Google Maps API. Because OMap takes care of these URLs and call Google Maps APIs to display a map in the post.

For advanced use of OMap, please read OMap: New Functions by OMap 1.3.

Download

OMap 1.3 consists of the following two files:

  1. OMapInit.js
  2. OMap.css

OMapInit.js is a JavaScript file which define OMapInit function, which is executed at onload event of html page. OMap.css is a sample CSS definition file. You can change the layouts of a map created by OMapInit.

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[
  OMapInit("post-body");
//]]>
</script>
</body>
</html>

If you want to draw polylines in a map, you need to change your html template to add xmlns:v='urn:schemas-microsoft-com:vml' to html tag.

This is a sample about how this site's html tag is modified.

<html xmlns='http://www.w3.org/1999/xhtml' 
   xmlns:b='http://www.google.com/2005/gml/b'
   xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'
  xmlns:v='urn:schemas-microsoft-com:vml'>

Please read this about how to draw a polyline by OMap.

Options

You can specify three arguments to OMapInit function as

OMapInit({
 "postBodyClass":postBodyClass,
 "flickrUserId":flickrUserId,
 "deferMap":deferMap,
 "forceZoomLevel":forceZoomLevel,
 "defaultMapType":defaultMapType
 });
postBodyClass
The name of class used for blog post container, which varies by blog sites such as "post-body" for Blogger.com, "entry-body" for Typepad and so on.
flickrUserId
An optional parameter. If you want to let OMap create a link to your Flickr photo page from the photo in the post, please specify your Flickr userid. If you are not sure about your userid, you can make sure by flickr.activity.userPhotos.
deferMap
An optional parameter. If you want to defer OMap process until clicking links, specfiy boolean value, true.
forceZoomLevel
An optional parameter. If you want to set zoom level of all maps in your blog, specfify the number of zoom level.
defaultMapType
An optional parameter. If you want to set default map type other than normal map, specify "k" for satellite, "h" for hybrid..

Here are samples about how to specify parameters of OMapInit:

OMapInit({"postBodyClass":"post-body"});
OMapInit({
   "postBodyClass":"post-body",
   "defaultMapType":"k"
   });

The first sample specfies only postBody. The second one spefies also an optional parameter, defalutMapType.

The following example specifies all parameters.

OMapInit({
   "postBodyClass":"post-body",
   "flickrUserId":"71295300@N00",
   "deferMap":false,
   "forceZoomLevel":15,
   "defaultMapType":"h"
   });

Friday, January 05, 2007