geocoding-services.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="generator" content="Hugo 0.36" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="/assets/css/theme.css">
  8. <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="Pleasant Programmer">
  9. <script type="text/javascript" src="//use.typekit.net/iwm5axp.js"></script>
  10. <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  11. <title>Geocoding Services - Pleasant Programmer</title>
  12. </head>
  13. <body>
  14. <header id="header" role="banner">
  15. <div id="thomas">
  16. <img src="/assets/img/thomas.gif" alt="DJ THOMAS IN DA HAUS">
  17. <img src="/assets/img/thomas.png" alt="Pleasant Programmer">
  18. </div>
  19. <h1 class="site-title"><a href="/">Pleasant Programmer</a></h1>
  20. <nav id="menu" role="navigation">
  21. <ul>
  22. <li class="twitter">
  23. <a href="http://twitter.com/pleasantprog">@pleasantprog</a>
  24. </li>
  25. <li><a href="/pages/projects.html">projects</a></li>
  26. <li><a href="/posts.html">archives</a></li>
  27. <li><a href="/tags.html">tags</a></li>
  28. <li><a href="/rss.xml">rss</a></li>
  29. </ul>
  30. </nav>
  31. </header>
  32. <div id="container">
  33. <main id="content" role="main">
  34. <article itemscope itemtype="http://schema.org/BlogPosting">
  35. <h1 class="p-name entry-title" itemprop="headline name">
  36. <a href="/posts/geocoding-services.html">Geocoding Services</a></h1>
  37. <small>
  38. <span class="dateline">Posted: <time itemprop="datePublished" datetime="2013-09-25">2013-09-25</time></span>
  39. | More posts about
  40. <a class="tag p-category" href="/tags/philippine-transit-app.html" rel="tag">
  41. philippine-transit-app
  42. </a>
  43. <a class="tag p-category" href="/tags/programming.html" rel="tag">
  44. programming
  45. </a>
  46. </small>
  47. <div class="e-content entry-content" itemprop="entry-text">
  48. <p>A key component for any routing service is being able to do geocoding. Most people who are looking for routes most probably don&rsquo;t know exactly where their start and end points are on the map. Even then, manually looking for a location on a map is a time-consuming task.</p>
  49. <p>The gold standard for doing geocoding right now is Google Maps. It&rsquo;s hard to find a better location search experience. If they actually provided routing for jeeps here in the Philippines, I imagine there wouldn&rsquo;t be <em>that</em> much you could do for the competition.</p>
  50. <p>When the competition started though, I took it as a challenge to avoid Google Maps as much as possible. I wanted to see how much is currently possible with other options such as OpenStreetMap. In fact, OSM does have a geocoding service called <a href="http://nominatim.openstreetmap.org">Nominatim</a>.</p>
  51. <p>Sadly, for a mapping app, what you want to do is not simply just geocoding. With geocoding, you take an address and turn it into coordinates. When you want to search for a place in a mapping app, you take part of an address, infer the rest of it, and give the user options to choose from.</p>
  52. <p>Given a typical mapping app, you might type in &ldquo;ateneo&rdquo; and expect it to give you Ateneo de Manila University. With typical geocoding services like Nominatim or even Google&rsquo;s <a href="https://developers.google.com/maps/documentation/javascript/geocoding">geocoding API</a>, you probably won&rsquo;t get any result for this. What you want to use is the <a href="https://developers.google.com/maps/documentation/javascript/places">Places API</a> which provides an autocomplete search box. Using it, when you type in &ldquo;ateneo&rdquo;, it automatically suggests in the dropdown, &ldquo;Ateneo de Manila University&rdquo;.</p>
  53. <p>A downside to using the Places API is that it&rsquo;s against the terms of service to use it with something that isn&rsquo;t Google Maps, which means no OpenStreetMap. If there were more time, writing your own autocompletion engine using OpenStreetMap&rsquo;s data will probably be a better long term solution.</p>
  54. <p>For now, since the competition&rsquo;s deadline is just a few days away, I&rsquo;ll be using Google Maps.</p>
  55. </div>
  56. <aside class="postpromonav">
  57. <nav>
  58. <ul class="pager clearfix">
  59. <li class="previous">
  60. <a href="/posts/jeep-and-bus-schedules.html" rel="prev" title="Jeep and Bus Schedules">&larr; Previous post</a>
  61. </li>
  62. <li class="next">
  63. <a href="/posts/console-keymap-switching.html" rel="next" title="Console Keymap Switching">Next post &rarr;</a>
  64. </li>
  65. </ul>
  66. </nav>
  67. </aside>
  68. <section class="comments">
  69. <script
  70. data-isso="https://isso.pleasantprogrammer.com/"
  71. data-isso-require-author="true"
  72. data-isso-vote="false"
  73. src="https://isso.pleasantprogrammer.com/js/embed.min.js">
  74. </script>
  75. <section id="isso-thread"></section>
  76. </section>
  77. </article>
  78. </main>
  79. <footer id="footer" role="contentinfo">
  80. <p>
  81. <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">
  82. <img alt="CC-BY-SA" style="border-width:0" src="https://licensebuttons.net/l/by-sa/3.0/80x15.png">
  83. </a> &copy; 2018 Thomas Dy - Powered by <a href="http://gohugo.io">Hugo</a></p>
  84. </footer>
  85. </div>
  86. <script src="/assets/js/konami.js"></script>
  87. <script>
  88. var easter_egg = new Konami();
  89. easter_egg.code = function() {
  90. var el = document.getElementById('thomas');
  91. if(el.className == "whoa") {
  92. el.className = "";
  93. }
  94. else {
  95. el.className = "whoa";
  96. }
  97. document.body.scrollTop = document.documentElement.scrollTop = 0;
  98. }
  99. easter_egg.load();
  100. </script>
  101. </body>
  102. </html>