LocPicker Widget Docs

Click here for live example

LocPicker is a JS widget that creates a minimal, domain agnostic Location Picker in a given <div>.

Contents

  1. Basic Usage
  2. Interface Methods
    1. Constructor
    2. Events
      1. load(cb)
      2. onFinished(cb)
    3. Getters
      1. getLocations()
    4. Setters
      1. addLocation(location)
      2. setButtonText(text)
    5. Utilities
      1. collapsePanel()
      2. showPanel()
  3. Code Example

Basic Usage

  1. Obtain an API key from Our Town's IT dept.
  2. Include the LocPicker Widget JS: <script src="https://mercury.ourtownamerica.com/LocPicker/widget.js?key={my API key}"></script>
  3. Create a div with an ID to put the widget in: <div id='otmap'></div>
  4. Initiate the LocPicker by passing the id of the div to the LocPicker constructor: <script> var otmap = new LocPicker({id: 'otmap'}); </script>

Interface Methods

Events

Getters

Getters

Utilities

Complete Example Code


<!DOCTYPE html>
<html>
	<head>
		<title>LocPicker Widget Example</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			body{
				margin: 1em 5em;
			}
		</style>
	</head>
	<body>
		<center>
			<h1>LocPicker Widget Example</h1>
			<a href="https://mercury.ourtownamerica.com/LocPicker/docs.html">Click here for documentation</a>
		</center>
		<div id="output"></div>
		<div id="results"></div>
		<script src="https://mercury.ourtownamerica.com/LocPicker/widget.js?key={My key}"></script>
		<script>
			var lp = new LocPicker({id: "output"}).onFinished(function(){
				var locations = lp.getLocations();
				var htmlbuffer = [];
				htmlbuffer.push("<h1>Chosen Locations</h1><hr>");
				if(!locations.length){
					htmlbuffer.push("No locations chosen.<hr>");
				}else{
					for(var i=0; i<locations.length; i++){
						if(locations.corrupt) continue;
						htmlbuffer.push("<b>Inputted location: </b>"+locations[i].orig+"<br>");
						htmlbuffer.push("<b>Formatted location: </b>"+locations[i].formatted+"<br>");
						htmlbuffer.push("<b>Zip code: </b>"+locations[i].zipOrRoute+"<br>");
						htmlbuffer.push("<b>Geolocation: </b>"+locations[i].lat+", "+locations[i].lng+"<br>");
						htmlbuffer.push("<hr>");
					}
				}
				document.getElementById("results").innerHTML = htmlbuffer.join('');
			});
		</script>
	</body>
</html>