Tech Blog

Geolocation in AEK 2

Among the other, better-known client tools like Image Picker and Location Picker, we also have HTML5 geolocation support for the AEK. This was recently complemented by the addition of the GPS client tool.

The GPS client tool is native-only, but offers higher accuracy and a smoother user experience (due to no prompting for permission, as it works within the native app itself). If that fits your use case, we definitely recommend you use it. Otherwise you can fall back to the older Geolocation client tool. As it relies on HTML5, it does prompt from permission from either your browser, or the native app’s webview, but functions exactly as you’d expect any HTML5 implement for geolocation to work.

Example snippets can be found below. These will need work to integrate with any project you have – they’re not intended to be run as they are.

React16

The file the code is meant to be associated with is the default screen.js created under /src/client. Modifications to this path will result in changes to the Screen export.

import Geolocation from "@ombiel/aek-lib/lib/client-tools/geolocation";
let geolocation = new Geolocation({ watch:true });


export default class Screen extends React.Component {
    componentDidMount() { 
        geolocation.on("error", (err) => { 
            console.error(err); 
        });

        geolocation.on("update", (pos) => { 
            console.log(pos.coords); 
        }); 
    }

    componentWillUnmount() {
        geolocation.stop();
    }
}

React15 (for legacy projects)

const Geolocation = require("-aek/client-tools/geolocation");
let geolocation = new Geolocation({ watch:true });

let Screen = React.createClass({
    componentDidMount:function() {
        geolocation.on("error", (err) => {
            console.error(err);
        });

        geolocation.on("update", (pos) => {
            console.log(pos.coords);
        });
    }

    componentWillUnmount:function() {
        geolocation.stop();
    }
});

 

Leave any questions or comments with the form below.

Leave a Reply