Location Capture Widget V2

What is this widget?

The ANDS Location Capture Widget allows you to instantly enrich your data capture system, adding geospatial capabilities such as custom drawings and place name resolution (using the Australian Gazetteer Service and Google Maps API).

How does it work?

Before you start! While optional, ANDS recommends that you register for a free API key to be used with this widget. Registering will allow us to keep you informed of changes and planned outages to our services, as well monitor the system for quality purposes.

Note that if you have previously registered for an API key you do not need to register again. Your ANDS API key is reusable with any of our widgets and services.

Simply drop the following lines of HTML into your web form. You only need to specify the name of the form field and the widget will do the rest!

Step 1. Drop this code somewhere in the <head></head> of your web page

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&libraries=drawing&v=3"></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js'></script>
<script type="text/javascript" src="//researchdata.ands.org.au/apps/assets/location_capture_widget/js/location_capture_widget_v2.js"></script>
<link rel="stylesheet" type="text/css" href="//researchdata.ands.org.au/apps/assets/location_capture_widget/css/location_capture_widget_v2.css" />

Step 2. Invoke the plugin using this code towards the bottom of the page. This example invokes the plugin on an HTML element with id mapContainer, and stores the final coordinate data in the HTML element with id coordinates:

<script type="text/javascript">
$(document).ready(function() {
$("#mapContainer").ands_location_widget({target:'coordinates',
    api_key:'[your_api_key]'}); 
});
</script>

Step 3. Load the web page and see the new widget appear!
Once submitted, the coordinates of the location selected will be in the form value you chose for target

Demo

Functions

The ANDS Location Capture widget plugin supports the following functions:

init
Initialise the plugin against a jQuery object; use a jQuery selector to define the object.
example:
$("#mapContainer").ands_location_widget('init');
googlemap
Once initialised, call the plugin on the jQuery object again to access the underlying google map object.
example:
var map = $("#mapContainer").ands_location_widget('googlemap');

Configurations

The ANDS Location Capture widget plugin’s init function has the following options:

Property Defaults Description
mode Under normal operation, the widget opens in map view. Use this setting to open either in the search or coordsdialogue. Eg

$("#mapContainer").ands_location_widget('init', {mode:'search'});
api_key public Your pre registered api key which will uniquely identify the widget user
zoom 3 The initial zoom level of the map. Eg

$("#mapContainer").ands_location_widget('init', {zoom:7});
start 133,-27 The initial map view, given as a string of “longitude, latitude”. Eg

$("#mapContainer").ands_location_widget('init', {start:"130, -16"});
target geoLocation The HTML id attribute of the element to store the final coordinate data in. If no such element exists, it wil be created for you, and inserted immediately after the plugin element. Eg

$("#mapContainer").ands_location_widget('init', {target:'coordinate_data'});
lonLat Initial coordinate data to display on the map. Coordinates are specified as a comma-delimited string longitude, latitude. Coordinate data can be a single point, or an array of points representing a region. Regions should be closed (that is, the first and last points should be the same). Eg

$("#mapContainer").ands_location_widget('init', {lonLat:'133, -27'});
jumpToPoint true When entering “point” mode, jumpToPoint defines whether the map view should jump to the existing point, or stay at the current map view. Eg

$("#mapContainer").ands_location_widget('init', {jumpToPoint:false});
endpoint services.ands.org.au/api/resolver/ The ANDS resolver service to use. Change this when you want to use your own resolver service. Eg

$("#mapContainer").ands_location_widget('init', {endpoint:'http://localhost.localdomain/myresolver/'});
gasset_protocol (the current window's protocol) The HTTP protocol to use for google asset (image) requests : choose http:// or https://. Eg

$("#mapContainer").ands_location_widget('init', {gasset_protocol:'https://'});
Yes! Ensure that all the <script> and <link> tags (from Step 1 & 2) are pointing to the securely-hosted version of the resource. In other words, the URL starts with https:// (such as https://maps.google.com/api…).
ANDS hosts a resolver proxy service that provides JSONP results based on the response from the Gazetteer service. An example of this script is included in the source code package. You can customise this proxy service yourself and change the location by passing endpoint (and optionally, protocol) options to the widget’s init function.
Full source code for this widget is available and licensed under Apache License, Version 2.0.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × four =