cordova-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From normesta <...@git.apache.org>
Subject [GitHub] cordova-plugin-geolocation pull request: New PR for sample content...
Date Thu, 14 Apr 2016 21:15:18 GMT
Github user normesta commented on a diff in the pull request:

    https://github.com/apache/cordova-plugin-geolocation/pull/75#discussion_r59793230
  
    --- Diff: README.md ---
    @@ -296,3 +311,436 @@ callback function when an error occurs with navigator.geolocation.
       - Returned when the device is unable to retrieve a position. In general, this means
the device is not connected to a network or can't get a satellite fix.
     - `PositionError.TIMEOUT`
       - Returned when the device is unable to retrieve a position within the time specified
by the `timeout` included in `geolocationOptions`. When used with `navigator.geolocation.watchPosition`,
this error could be repeatedly passed to the `geolocationError` callback every `timeout` milliseconds.
    +
    +
    +## Sample: Get the weather, find stores, and see photos of things nearby with Geolocation
##
    +
    +Use this plugin to help users find things near them such as Groupon deals, houses for
sale, movies playing, sports and entertainment events and more.
    +
    +Here's a "cookbook" of ideas to get you started. In the snippets below, we'll show you
some basic ways to add these features to your app.
    +
    +* Get your coordinates.
    +* Get the weather forecast.
    +* Receive updated weather forecasts as you drive around.
    +* See where you are on a map.
    +* Find stores near you.
    +* See pictures of things around you.
    +
    +## Get your geolocation coordinates
    +
    +```javascript
    +
    +function getWeatherLocation() {
    +
    +    navigator.geolocation.getCurrentPosition
    +    (onWeatherSuccess, onWeatherError, { enableHighAccuracy: true });
    +}
    +
    +```
    +## Get the weather forecast
    +
    +```javascript
    +
    +// Success callback for get geo coordinates
    +
    +var onWeatherSuccess = function (position) {
    +
    +    // We declared Latitude and Longitude as global variables
    +    Latitude = position.coords.latitude;
    +    Longitude = position.coords.longitude;
    +
    +    getWeather(Latitude, Longitude);
    +}
    +
    +// Get weather by using coordinates
    +
    +function getWeather(latitude, longitude) {
    +
    +    var queryString =
    +        "http://gws2.maps.yahoo.com/findlocation?pf=1&locale=en_US&offset=15&flags=&q="
    +        + latitude + "%2c" + longitude + "&gflags=R&start=0&format=json";
    +
    +    $.getJSON(queryString, function (results) {
    +
    +        if (results.Found > 0) {
    +            var zipCode = results.Result.uzip;
    +            var queryString = "https://query.yahooapis.com/v1/public/yql?q="
    +              + "select+*+from+weather.forecast+where+location="
    +              + zipCode + "&format=json";
    +
    +            $.getJSON(queryString, function (results) {
    +
    +                if (results.query.count > 0) {
    +                    var weather = results.query.results.channel;
    +
    +                    $('#description').text(weather.description);
    +                    $('#temp').text(weather.wind.chill);
    +                    $('#wind').text(weather.wind.speed);
    +                    $('#humidity').text(weather.atmosphere.humidity);
    +                    $('#visibility').text(weather.atmosphere.visibility);
    +                    $('#sunrise').text(weather.astronomy.sunrise);
    +                    $('#sunset').text(weather.astronomy.sunset);
    +                }
    +            });
    +        }
    +    }).fail(function () {
    +        console.log("error getting location");
    +    });
    +}
    +
    +// Error callback
    +
    +function onWeatherError(error) {
    +    console.log('code: ' + error.code + '\n' +
    +        'message: ' + error.message + '\n');
    +}
    +
    +```
    +
    +## Receive updated weather forecasts as you drive around
    +
    +```javascript
    +
    +// Watch your changing position
    +
    +function watchWeatherPosition() {
    +
    +    return navigator.geolocation.watchPosition
    +    (onWeatherWatchSuccess, onWeatherError, { enableHighAccuracy: true });
    +}
    +
    +// Success callback for watching your changing position
    +
    +var onWeatherWatchSuccess = function (position) {
    +
    +    var updatedLatitude = position.coords.latitude;
    +    var updatedLongitude = position.coords.longitude;
    +
    +    if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
    +
    +        Latitude = updatedLatitude;
    +        Longitude = updatedLongitude;
    +
    +        // Calls function we defined earlier.
    +        getWeather(updatedLatitude, updatedLongitude);
    +    }
    +}
    +
    +```
    +
    +## See where you are on a map
    +
    +Both Bing and Google have map services. We'll use Google's. You'll need a key but it's
free if you're just trying things out.
    +
    +Add a reference to the **maps** service.
    +
    +```HTML
    +
    + <script src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key"></script>
    +
    +```
    +Then, add code to use it.
    +
    +```javascript
    +
    +var Latitude = undefined;
    +var Longitude = undefined;
    +
    +// Get geo coordinates
    +
    +function getMapLocation() {
    +
    +    navigator.geolocation.getCurrentPosition
    +    (onMapSuccess, onMapError, { enableHighAccuracy: true });
    +}
    +
    +// Success callback for get geo coordinates
    +
    +var onMapSuccess = function (position) {
    +
    +    Latitude = position.coords.latitude;
    +    Longitude = position.coords.longitude;
    +
    +    getMap(Latitude, Longitude);
    +
    +}
    +
    +// Get map by using coordinates
    +
    +function getMap(latitude, longitude) {
    +
    +    var mapOptions = {
    +        center: new google.maps.LatLng(0, 0),
    +        zoom: 1,
    +        mapTypeId: google.maps.MapTypeId.ROADMAP
    +    };
    +
    +    map = new google.maps.Map
    +    (document.getElementById("map"), mapOptions);
    +
    +
    +    var latLong = new google.maps.LatLng(latitude, longitude);
    +
    +    var marker = new google.maps.Marker({
    +        position: latLong
    +    });
    +
    +    marker.setMap(map);
    +    map.setZoom(15);
    +    map.setCenter(marker.getPosition());
    +}
    +
    +// Success callback for watching your changing position
    +
    +var onMapWatchSuccess = function (position) {
    +
    +    var updatedLatitude = position.coords.latitude;
    +    var updatedLongitude = position.coords.longitude;
    +
    +    if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
    +
    +        Latitude = updatedLatitude;
    +        Longitude = updatedLongitude;
    +
    +        getMap(updatedLatitude, updatedLongitude);
    +    }
    +}
    +
    +// Error callback
    +
    +function onMapError(error) {
    +    console.log('code: ' + error.code + '\n' +
    +        'message: ' + error.message + '\n');
    +}
    +
    +// Watch your changing position
    +
    +function watchMapPosition() {
    +
    +    return navigator.geolocation.watchPosition
    +    (onMapWatchSuccess, onMapError, { enableHighAccuracy: true });  
    +}
    +
    +```
    +
    +## Find stores near you
    +
    +You can use the same Google key for this.
    +
    +Add a reference to the **places** service.
    +
    +```HTML
    +
    +<script src=
    +"https://maps.googleapis.com/maps/api/js?key=Your_API_Key&libraries=places">
    +</script>
    +
    +```
    +
    +Then, add code to use it.
    +
    +```javascript
    +
    +var Map;
    +var Infowindow;
    +var Latitude = undefined;
    +var Longitude = undefined;
    +
    +// Get geo coordinates
    +
    +function getPlacesLocation() {
    +    navigator.geolocation.getCurrentPosition
    +    (onPlacesSuccess, onPlacesError, { enableHighAccuracy: true });
    +}
    +
    +// Success callback for get geo coordinates
    +
    +var onPlacesSuccess = function (position) {
    +
    +    Latitude = position.coords.latitude;
    +    Longitude = position.coords.longitude;
    +
    +    getPlaces(Latitude, Longitude);
    +
    +}
    +
    +// Get places by using coordinates
    +
    +function getPlaces(latitude, longitude) {
    +
    +    var latLong = new google.maps.LatLng(latitude, longitude);
    +
    +    var mapOptions = {
    +
    +        center: new google.maps.LatLng(latitude, longitude),
    +        zoom: 15,
    +        mapTypeId: google.maps.MapTypeId.ROADMAP
    +
    +    };
    +
    +    Map = new google.maps.Map(document.getElementById("places"), mapOptions);
    +
    +    Infowindow = new google.maps.InfoWindow();
    +
    +    var service = new google.maps.places.PlacesService(Map);
    +    service.nearbySearch({
    +
    +        location: latLong,
    +        radius: 500,
    +        type: ['store']
    +    }, foundStoresCallback);
    +
    +}
    +
    +// Success callback for watching your changing position
    +
    +var onPlacesWatchSuccess = function (position) {
    +
    +    var updatedLatitude = position.coords.latitude;
    +    var updatedLongitude = position.coords.longitude;
    +
    +    if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
    +
    +        Latitude = updatedLatitude;
    +        Longitude = updatedLongitude;
    +
    +        getPlaces(updatedLatitude, updatedLongitude);
    +    }
    +}
    +
    +// Success callback for locating stores in the area
    +
    +function foundStoresCallback(results, status) {
    +
    +    if (status === google.maps.places.PlacesServiceStatus.OK) {
    +
    +        for (var i = 0; i < results.length; i++) {
    +
    +            createMarker(results[i]);
    +
    +        }
    +    }
    +}
    +
    +// Place a pin for each store on the map
    +
    +function createMarker(place) {
    +
    +    var placeLoc = place.geometry.location;
    +
    +    var marker = new google.maps.Marker({
    +        map: Map,
    +        position: place.geometry.location
    +    });
    +
    +    google.maps.event.addListener(marker, 'click', function () {
    +
    +        Infowindow.setContent(place.name);
    +        Infowindow.open(Map, this);
    +
    +    });
    +}
    +
    +// Error callback
    +
    +function onPlacesError(error) {
    +    console.log('code: ' + error.code + '\n' +
    +        'message: ' + error.message + '\n');
    +}
    +
    +// Watch your changing position
    +
    +function watchPlacesPosition() {
    +
    +    return navigator.geolocation.watchPosition
    +    (onPlacesWatchSuccess, onPlacesError, { enableHighAccuracy: true });
    +}
    +
    +```
    +
    +## See pictures of things around you
    +
    +Digital photos can contain geo coordinates that identify where the picture was taken.
    +
    +Use Flickr API's to find pictures that folks have taken near you. Like Google services,
you'll need a key, but it's free if you just want to try things out.
    +
    +```javascript
    +
    +var Latitude = undefined;
    --- End diff --
    
    Hi rakayal - not sure how i'd do that. The watchPosition event  handler is a polling mechanism
unfortunately. This is just how the APi works. Therefore, the handler has to have some way
of knowing what the previous cords were so that it knows whether to perform certain functions.
Without that information, the functions performed in that handler would occur at every poll.
This would cause a lot of unnecessary service calls and performance problems. 


---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@cordova.apache.org
For additional commands, e-mail: dev-help@cordova.apache.org


Mime
View raw message