The index.html shown above is a HTML 5 file and it uses the HTML 5 doctype . The application uses Twitter Bootstrap, which is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. You can get all the related css,js files from project github repository.
Check GeoLocation Support
Because our application depends on the user's location, which we will be getting using GeoLocation API, it makes sense to check if the user browser supports GeoLocation API. To check that the user's browser supports GeoLocation API, add the following to document ready function as shown below. If the user's browser supports GeoLocation, then the navigator object will have geolocation object. You can also use an open source library like Modernizr to detect HTML5 features. If the browser does not support geolocation, then we disable the form submit button.
Find Jobs on Form Submission
Now that we know that the user's browser supports GeoLocation API, the next logical thing to do is to find jobs for skills specified by that user. This project uses Backbone.js to give structure to our client side code. If you are not aware of backbone.js then please refer to my previous blog, Building Single Page Web Applications with Backbone.js, JaxRS, MongoDB, and OpenShift where I talk about how to create an application using backbone.js. Please copy the app.js file to js folder under src/main/webapp. Below is the trimmed down version of app.js file. I have removed some parts for brevity.
Let's understand what this code does.
The code shown above creates an instance of a backbone router providing it the root DOM as the main div. Then when we hit the base url, the router calls the showHomePage function which renders the HomeView. The HomeView in its rendered function empties the div with id map-canvas.
In HomeView we have an event listener for form submissions. So when users press the submit button after entering skills, the findJobs function will be called.
The findJobs function is where everything happens.
3.1 First we get the value of input type with name skills. And then split them by comma, so that we have an array of skills.
3.2 Then we create a Google Map object providing it some default values.
3.3 Next we call the getCurrentPosition method on navigator.geolocation object. This method has only one required parameter -- success_callback and two optional parameters -- error_callback and PositionOptions object are optional.
3.4 If the getCurrentPosition call succeeds, then success_callback is called. This callback has one argument -- position. The position object holds the latitude and longitude of a user. Then the user location is plotted on the map.
3.5 After the users location is plotted, a get call is made using jQuery.
3.6 Finally all the results are iterated and shown on the map.
Push the Code
Now you can push the code to OpenShift and see your application running in cloud.
The application will be running at https://localjobs-domain-name.rhcloud.com/. Please replace domain-name with your own namespace.
Conclusion
In this blog post, we looked at how we can use the HTML 5 GeoLocation API and MongoDB Geo spatial indexing capabilities to build location aware applications.
What's Next?
Sign up for OpenShift Online
Get your own private Platform As a Service (PaaS)
by evaluating OpenShift Enterprise
Need Help? Ask the OpenShift Community your questions in the forums
Showcase your awesome app in the OpenShift Developer Spotlight.
Get in the OpenShift Application Gallery today.