Victor's Blog

Live as if you were to die tomorrow. Learn as if you were to live forever

NAVIGATION - SEARCH

Use Geolocation API with Angular.js

Today, I played a little with the Geolocation API. I am really surprised by how accurate it is for a normal laptop if you have the Wifi enabled. So I decided to write something to make it work with Angular.js. Here is what I did:

Prerequisites:
1. Angular.js
2. Google Maps Javascript API 3.x
3. Angular ui-map

Here is my html:

<body ng-app="geo">
    <div class="container main" ng-controller="mainController">
        <form>
            <div class="row">
                <div id="map_canvas" ui-map="model.myMap" class="map" ui-options="mapOptions">
                </div>
                <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]">
                </div>
            </div>
            <div class="row" ng-show="showResult()">
               Latitude: {{lat}} <br />
               Longitude: {{lng}} <br />
               Accuracy: {{accuracy}}
            </div>
            <div class="row" ng-show="!showResult()">
                Error : {{error}}
                Error Code: {{error.code}}
            </div>       
        </form>
    </div>
</body>

Here is my javascript:

var app = angular.module("geo", ["ui.map", "ui.event"])
    .controller("mainController", function ($scope) {
        $scope.lat = "0";
        $scope.lng = "0";
        $scope.accuracy = "0";
        $scope.error = "";
        $scope.model = { myMap: undefined };
        $scope.myMarkers = [];

        $scope.showResult = function () {
            return $scope.error == "";
        }

        $scope.mapOptions = {
            center: new google.maps.LatLng($scope.lat, $scope.lng),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        $scope.showPosition = function (position) {
            $scope.lat = position.coords.latitude;
            $scope.lng = position.coords.longitude;
            $scope.accuracy = position.coords.accuracy;
            $scope.$apply();

            var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
            $scope.model.myMap.setCenter(latlng);
            $scope.myMarkers.push(new google.maps.Marker({ map: $scope.model.myMap, position: latlng }));
        }

        $scope.showError = function (error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    $scope.error = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    $scope.error = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    $scope.error = "The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    $scope.error = "An unknown error occurred."
                    break;
            }
            $scope.$apply();
        }

        $scope.getLocation = function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition($scope.showPosition, $scope.showError);
            }
            else {
                $scope.error = "Geolocation is not supported by this browser.";
            }
        }

        $scope.getLocation();
    });

Here is a working example.

Note: If you run this on your desktop without Wifi, the Accuracy will probably quite big(the bigger the value, the less the accuracy). This is because if you don't have Wifi, the geolocation api can only use your IP address to determine your location. 

Hope you can have some fun with it.

How to make a div center in Bootstrap3?

There are two ways you can make the div center in Bootstrap3

  1. The first approach uses Bootstrap's own offset classes so it requires no change in your html and no extra CSS. It set an offset equal to half of the remaining size of the row. So for example, a column of size 6 would be centred by adding an offset of 3, that's (12-6)/2.
    So the HTML look like
    <div class="row">
       <div class="col-lg-6 col-lg-offset-3 text-center">center</div>
    </div>
    However this method only works for even column sizes. Also you can't use it for extra small devices(phone) because it does't have offset.
  2. You can center any column size by using the proven margin: 0 auto; technique. This can be used with or without the Bootstrap's grid system.
    With grid:
    CSS:
    .col-centered{
        float: none;
        margin: 0 auto;
    }

    HTML
    <div class="row">
        <div class="col-md-2 col-centered text-center">center</div>
    </div>

    Without grid:
    CSS:
    .centered{
        margin: 0 auto;
    }
    Html:
    <div class="container">
        <div class="centered text-center">
            center
        </div>
    </div>

Hope this helps.