Sunday 9 October 2011

Geo-location & Printing with HTML 5

Geo-location Example - http://merged.ca/iphone/html5-geolocation

This is a great example as it works on Firefox, Safari, Chrome and the iphone. It works by first calling JavaScript object navigator.geolocation. (Html5).

        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(
                 function (position) {  
                mapServiceProvider(position.coords.latitude,position.coords.longitude);    },

Next we need to declare our mapping server this is done by -
        function mapServiceProvider(latitude,longitude)
        {
            // querystring function from prettycode.org:
            // http://prettycode.org/2009/04/21/javascript-query-string/
        
            if (window.location.querystring['serviceProvider']=='Yahoo')
            {
                mapThisYahoo(latitude,longitude);
            }
            else
            {
                mapThisGoogle(latitude,longitude);
            }
        }

The provider could be most any search engine with mapping.

        // be sure to include the script to initialize Google or Yahoo! Maps
        function mapThisGoogle(latitude,longitude)
        {
            var mapCenter = new GLatLng(latitude,longitude);
            map = new GMap2(document.getElementById("map"));
            map.setCenter(mapCenter, 15);
            map.addOverlay(new GMarker(mapCenter));
        
            // Start up a new reverse geocoder for addresses?
            geocoder = new GClientGeocoder();
            geocoder.getLocations(latitude+','+longitude, addAddressToMap);
        }
Update>
We have decided not too use geo location in our project...

_________________________________________________________________________________

Printing in HTML5

Focus on having a CSS rules- setup for printing

 TBC