Technology

Bing Maps AJAX & HTML5 GeoLocation API

Anthony Marshall
Anthony Marshall
23 Jun 2011
blog post featured image
<p>In the second in our <a href="http://www.earthware.co.uk/blog/index.php/category/mobile/">series on mobile mapping</a> with <a href="http://www.microsoft.com/maps/developers/web.aspx">Bing Maps AJAX V7</a> we are going to show you one of the great features of HTML5 that you can start using right now on mobile devices. Where the desktop may take years before all users have access to the features of HTML5 the vast majority of smartphone users already have HTML5 compatible browsers.</p> <h3>HTML5 GeoLocation API</h3> <p>HTML5’s geolocation API allows you to request a users location by prompting the user to optionally share their location information with your website. It is currently supported on:</p> <p><a href="http://earthware-website.azurewebsites.net/Content/images/wp-images/2011/06/image4.png"><img style="display: inline" title="image" alt="image" src="http://earthware-website.azurewebsites.net/Content/images/wp-images/2011/06/image_thumb4.png" width="400" height="226" /></a></p> <p>With WP7 hopefully coming soon. Rather than repeat the <a href="http://diveintohtml5.org/geolocation.html">entire documentation</a> for the geolocation API lets show you how to use it in a code example. Here is an example JavaScript method we have written that we can call to get the user location.</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4d48bc07-2c7d-44e1-8de0-cc00078f131a" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #fff; max-height: 500px; overflow: auto"> <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;"> <li><span style="color:#0000ff">function</span> GetLocation() {</li> <li style="background: #f3f3f3">    <span style="color:#006400">//check if location api supported</span></li> <li>    <span style="color:#0000ff">if</span> (!!navigator.geolocation) {</li> <li style="background: #f3f3f3">        </li> <li>        <span style="color:#006400">//request current location</span></li> <li style="background: #f3f3f3">        navigator.geolocation.getCurrentPosition(UpdateLocation,HandleErrors);</li> <li>    }</li> <li style="background: #f3f3f3">}</li> </ol> </div> </div> </div> <p>&#160;</p> <p>Notice the line “!!navigator.geolocation” this is checking that the browser supports the geolocation api, you should of course in a real application show some kind of message if they do not. Once we have checked if the browser has support we simply call the <em>“navigator.geolocation.getCurrentPosition”</em> method passing in two method names (we will write those in a moment) the first to handle the location response and the second to handle any errors.</p> <p>The first of the two methods which handles a valid location response looks like this:</p> <p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:11e1b8e0-d81f-48da-97f5-c8596e169c2c" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #fff; max-height: 500px; overflow: auto"> <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px; white-space: nowrap"> <li><span style="color:#0000ff">function</span> UpdateLocation(position) {</li> <li style="background: #f3f3f3">    <span style="color:#0000ff">var</span> latitude = position.coords.latitude;</li> <li>    <span style="color:#0000ff">var</span> longitude = position.coords.longitude;</li> <li style="background: #f3f3f3">&nbsp;</li> <li>    <span style="color:#006400">//move map to new location and zoom in</span></li> <li style="background: #f3f3f3">    map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial });</li> <li>}</li> </ol> </div> </div> </div> <br /> <br />As you can see it accepts a position parameter from which we can get the user latitude and longitude. We the set our Bing Map to the new location, and in this example zoom the map in on that location.</p> <p>The next method handles any errors that might occur, this is a very basic example which you would want to expand upon in production:</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:dcb16932-8cc0-498a-bc7c-0dbc0866e222" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #fff; max-height: 300px; overflow: auto"> <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px; white-space: nowrap"> <li><span style="color:#0000ff">function</span> HandleErrors(error) {</li> <li style="background: #f3f3f3">    <span style="color:#006400">//handle geolocation errors and alert user</span></li> <li>    <span style="color:#0000ff">switch</span> (error.code) {</li> <li style="background: #f3f3f3">        <span style="color:#0000ff">case</span> error.PERMISSION_DENIED: alert(<span style="color:#800000">&quot;user did not share geolocation data&quot;</span>);</li> <li>            <span style="color:#0000ff">break</span>;</li> <li style="background: #f3f3f3">&nbsp;</li> <li>        <span style="color:#0000ff">case</span> error.POSITION_UNAVAILABLE: alert(<span style="color:#800000">&quot;could not detect current position&quot;</span>);</li> <li style="background: #f3f3f3">            <span style="color:#0000ff">break</span>;</li> <li>&nbsp;</li> <li style="background: #f3f3f3">        <span style="color:#0000ff">case</span> error.TIMEOUT: alert(<span style="color:#800000">&quot;retrieving position timed out&quot;</span>);</li> <li>            <span style="color:#0000ff">break</span>;</li> <li style="background: #f3f3f3">&nbsp;</li> <li>        <span style="color:#0000ff">default</span>: alert(<span style="color:#800000">&quot;unknown error&quot;</span>);</li> <li style="background: #f3f3f3">            <span style="color:#0000ff">break</span>;</li> <li>    }  </li> <li style="background: #f3f3f3">}</li> </ol> </div> </div> </div> <p> <br />As you can see it shows a relevant JavaScript alert informing the user of what the error was. Note that one of these errors is simply that the user has not decided to share their location with you website.</p> <p>Finally here is the entire complete code so you can see how these methods are called, and how the basic Bing Map is setup for mobile display:</p> <p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ba4ac854-bd89-4ead-ad22-c2f7491f2e5a" class="wlWriterEditableSmartContent"> <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"> <div style="background: #fff; max-height: 300px; overflow: auto"> <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px; white-space: nowrap"> <li><span style="color:#0000ff">&lt;!</span><span style="color:#800000">DOCTYPE</span> <span style="color:#ff0000">html</span> <span style="color:#ff0000">PUBLIC</span> <span style="color:#0000ff">&quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;</span> <span style="color:#0000ff">&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span></li> <li style="background: #f3f3f3"><span style="color:#0000ff">&lt;</span><span style="color:#800000">html</span><span style="color:#0000ff">&gt;</span></li> <li><span style="color:#0000ff">&lt;</span><span style="color:#800000">head</span><span style="color:#0000ff">&gt;</span></li> <li style="background: #f3f3f3">    <span style="color:#0000ff">&lt;</span><span style="color:#800000">title</span><span style="color:#0000ff">&gt;</span>Geolocation default<span style="color:#0000ff">&lt;/</span><span style="color:#800000">title</span><span style="color:#0000ff">&gt;</span></li> <li>    <span style="color:#0000ff">&lt;</span><span style="color:#800000">meta</span> <span style="color:#ff0000">http-equiv</span><span style="color:#0000ff">=&quot;Content-Type&quot;</span> <span style="color:#ff0000">content</span><span style="color:#0000ff">=&quot;text/html; charset=utf-8&quot;</span> <span style="color:#0000ff">/&gt;</span></li> <li style="background: #f3f3f3">    <span style="color:#0000ff">&lt;</span><span style="color:#800000">meta</span> <span style="color:#ff0000">name</span><span style="color:#0000ff">=&quot;viewport&quot;</span> <span style="color:#ff0000">content</span><span style="color:#0000ff">=&quot;width=device-width, minimum-scale=1, maximum-scale=1&quot;</span> <span style="color:#0000ff">/&gt;</span> </li> <li>    <span style="color:#0000ff">&lt;</span><span style="color:#800000">script</span> <span style="color:#ff0000">type</span><span style="color:#0000ff">=&quot;text/javascript&quot;</span> <span style="color:#ff0000">src</span><span style="color:#0000ff">=&quot;http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&quot;&gt;&lt;/</span><span style="color:#800000">script</span><span style="color:#0000ff">&gt;</span></li> <li style="background: #f3f3f3">    <span style="color:#0000ff">&lt;</span><span style="color:#800000">script</span> <span style="color:#ff0000">type</span><span style="color:#0000ff">=&quot;text/javascript&quot;&gt;</span></li> <li>        <span style="color:#0000ff">var</span> map = <span style="color:#0000ff">null</span>;</li> <li style="background: #f3f3f3">&nbsp;</li> <li>        <span style="color:#0000ff">function</span> GetMap() {</li> <li style="background: #f3f3f3">            map = <span style="color:#0000ff">new</span> Microsoft.Maps.Map(document.getElementById(<span style="color:#800000">&#39;myMap&#39;</span>), { credentials: <span style="color:#800000">&#39;YOURBINGMAPSKEY&#39;</span> });</li> <li>            GetLocation();</li> <li style="background: #f3f3f3">        }</li> <li>&nbsp;</li> <li style="background: #f3f3f3">        <span style="color:#0000ff">function</span> GetLocation() {</li> <li>            <span style="color:#006400">//check if location api supported</span></li> <li style="background: #f3f3f3">            <span style="color:#0000ff">if</span> (!!navigator.geolocation) {</li> <li>                </li> <li style="background: #f3f3f3">                <span style="color:#006400">//request current location</span></li> <li>                navigator.geolocation.getCurrentPosition(UpdateLocation,HandleErrors);</li> <li style="background: #f3f3f3">            }</li> <li>        }</li> <li style="background: #f3f3f3">&nbsp;</li> <li>        <span style="color:#0000ff">function</span> UpdateLocation(position) {</li> <li style="background: #f3f3f3">            <span style="color:#0000ff">var</span> latitude = position.coords.latitude;</li> <li>            <span style="color:#0000ff">var</span> longitude = position.coords.longitude;</li> <li style="background: #f3f3f3">&nbsp;</li> <li>            <span style="color:#006400">//move map to new location and zoom in</span></li> <li style="background: #f3f3f3">            map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial });</li> <li>        }</li> <li style="background: #f3f3f3">&nbsp;</li> <li>        <span style="color:#0000ff">function</span> HandleErrors(error) {</li> <li style="background: #f3f3f3">            <span style="color:#006400">//handle geolocation errors and alert user</span></li> <li>            <span style="color:#0000ff">switch</span> (error.code) {</li> <li style="background: #f3f3f3">                <span style="color:#0000ff">case</span> error.PERMISSION_DENIED: alert(<span style="color:#800000">&quot;user did not share geolocation data&quot;</span>);</li> <li>                    <span style="color:#0000ff">break</span>;</li> <li style="background: #f3f3f3">&nbsp;</li> <li>                <span style="color:#0000ff">case</span> error.POSITION_UNAVAILABLE: alert(<span style="color:#800000">&quot;could not detect current position&quot;</span>);</li> <li style="background: #f3f3f3">                    <span style="color:#0000ff">break</span>;</li> <li>&nbsp;</li> <li style="background: #f3f3f3">                <span style="color:#0000ff">case</span> error.TIMEOUT: alert(<span style="color:#800000">&quot;retrieving position timed out&quot;</span>);</li> <li>                    <span style="color:#0000ff">break</span>;</li> <li style="background: #f3f3f3">&nbsp;</li> <li>                <span style="color:#0000ff">default</span>: alert(<span style="color:#800000">&quot;unknown error&quot;</span>);</li> <li style="background: #f3f3f3">                    <span style="color:#0000ff">break</span>;</li> <li>            }  </li> <li style="background: #f3f3f3">        }</li> <li>&nbsp;</li> <li style="background: #f3f3f3">    <span style="color:#0000ff">&lt;/</span><span style="color:#800000">script</span><span style="color:#0000ff">&gt;</span></li> <li>    </li> <li style="background: #f3f3f3"><span style="color:#0000ff">&lt;/</span><span style="color:#800000">head</span><span style="color:#0000ff">&gt;</span></li> <li><span style="color:#0000ff">&lt;</span><span style="color:#800000">body</span> <span style="color:#ff0000">onload</span><span style="color:#0000ff">=&quot;GetMap();&quot;</span> <span style="color:#ff0000">style</span><span style="color:#0000ff">=&quot;</span><span style="color:#ff0000">padding</span><span style="color:#0000ff">:0;</span><span style="color:#ff0000">margin</span><span style="color:#0000ff">:0;&quot;&gt;</span></li> <li style="background: #f3f3f3">&nbsp;</li> <li>    <span style="color:#0000ff">&lt;</span><span style="color:#800000">div</span> <span style="color:#ff0000">id</span><span style="color:#0000ff">=&quot;myMap&quot;</span> <span style="color:#ff0000">style</span><span style="color:#0000ff">=&quot;</span><span style="color:#ff0000">position</span><span style="color:#0000ff">: absolute; </span><span style="color:#ff0000">width</span><span style="color:#0000ff">: 100%; </span><span style="color:#ff0000">height</span><span style="color:#0000ff">: 100%;&quot;&gt;</span></li> <li style="background: #f3f3f3">    <span style="color:#0000ff">&lt;/</span><span style="color:#800000">div</span><span style="color:#0000ff">&gt;</span></li> <li>&nbsp;</li> <li style="background: #f3f3f3"><span style="color:#0000ff">&lt;/</span><span style="color:#800000">body</span><span style="color:#0000ff">&gt;</span></li> <li><span style="color:#0000ff">&lt;/</span><span style="color:#800000">html</span><span style="color:#0000ff">&gt;</span></li> </ol> </div> </div> </div> </p> <p><font size="3"><strong>You can see a live demo at </strong></font><a title="http://bit.ly/j6dT0S" href="http://bit.ly/j6dT0S"><font size="3"><strong>http://bit.ly/j6dT0S</strong></font></a><font size="3"><strong> which will work on your mobile device, or HTML5 enabled desktop browser.</strong></font></p>
Close chatbot
Open chatbot
Open chatbot