Location Capture Widget

The ARDC 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).

Usage

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

Note: From 16th of July 2018 you must include your API key when using the google map API

Otherwise the Map will display a "This page can't load Google Maps correctly." pop up message,

and the overlay of "For development purposes only" is added to the map tiles.

XML

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOUR_API_KEY&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.edu.au/apps/assets/location_capture_widget/js/location_capture_widget_v2.js"></script>
<link rel="stylesheet" type="text/css" href="//researchdata.edu.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:

JS

<script type="text/javascript">
  $(document).ready(function() {
	$("#mapContainer").ands_location_widget({target:'coordinates'});
  });
</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 ARDC Location Capture widget plugin supports the following functions

init
Intialise the plugin against a jQuery Object, use a jQuery selector to define the object

JS

$("#mapContainer").ands_location_widget('init');

googlemap
Once initialised, call the plugin on the jQuery object again to access the underlying google map object

JS

var map = $("#mapContainer").ands_location_widget('googlemap');

Configurations

The ARDC 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 `coords`dialogue. Eg CODE `$("#mapContainer").ands_location_widget('init', {mode:'search'});`
`zoom`	`3`	The initial zoom level of the map. Eg CODE `$("#mapContainer").ands_location_widget('init', {zoom:7});`
`start`	`133,-27`	The initial map view, given as a string of “longitude, latitude”. Eg CODE `$("#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 CODE `$("#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 CODE `$("#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 CODE `$("#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 CODE `$("#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 CODE `$("#mapContainer").ands_location_widget('init', {gasset_protocol:'https://'});`