EDDM Lite Widget Docs

Click here for live example

EDDM Lite is a JS widget that creates a minimal, domain agnostic EDDM Tool in a given <div>.

Basic Usage

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

Interface Methods

Complete Example Code


<!DOCTYPE html>
<html>
	<head>
		<title>EDDM 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>EDDM Widget Example</h1>
			<a href="https://mercury.ourtownamerica.com/eddm-widget/docs.html">Click here for documentation</a>
			<br><br>

			<div><b>Enter a location and radius:</b></div>
			<div>
				<form id="newlocform">
				<input id="newloc" placeholder="Enter a lcoation" style=width:6em; />
				<input id="newradi" placeholder="Radius" style='width:2em;' />
				<button type=submit>Add Location</button>
				</form>
			</div>
			
			<div id="eddm-widget" style="width:80%; border:1px solid black; margin:1em auto;"></div>
			<button id="getRoutes">Click to get selected routes</button>
		</center>
		<div id="output"></div>
		
		<script src="https://mercury.ourtownamerica.com/eddm-widget/widget.js?key={MY API KEY}"></script>
		<script>
			var eddm = false;

			// retrieve selected routes info
			document.getElementById('getRoutes').onclick = function () {
				if(!eddm) return alert("Enter a location and select some routes first.");
				var routes = eddm.getRoutes();
				
				// Draw some HTML to show the output
				var htmlBuffer = [];
				for(var i=routes.length; i--;){
					htmlBuffer.push("<ul>");
					for(var item in routes[i])
						if(routes[i].hasOwnProperty(item) && typeof routes[i][item] === "string") 
							htmlBuffer.push("<li>"+item+": "+routes[i][item]+"</li>");
					htmlBuffer.push("</ul>");
				}
				document.getElementById('output').innerHTML = htmlBuffer.join('');
			};
			
			// handle user inputted locations
			document.getElementById('newlocform').onsubmit = function(e){
				e.preventDefault();
				
				// If the eddm object has not been instantiated yet...
				if(!eddm){
					// Instantiate the widget
					eddm = new EDDM({id: "eddm-widget"});
					// Tell it we want to set residential addresses only to start
					eddm.addrTypes(['R']);
				}
				
				// Get the location and radius
				var locInput=document.getElementById('newloc'),
					loc = locInput.value,
					radiInput = document.getElementById('newradi'),
					radi = radiInput.value;
				radi = (radi && radi !== "" && parseFloat(radi)) ? parseFloat(radi) : undefined;
				
				// reset and disable inputs
				radiInput.value = "";
				locInput.value = "";
				radiInput.setAttribute('disabled', true);
				locInput.setAttribute('disabled', true);
				var buttons = document.getElementsByTagName('button');
				for(var i=buttons.length; i--;) buttons[i].setAttribute("disabled", true);
				
				// add the location and then enable inputs again
				eddm.addLocation(loc, radi).then(function(){
					radiInput.removeAttribute('disabled');
					locInput.removeAttribute('disabled');
					for(var i=buttons.length; i--;) buttons[i].removeAttribute("disabled");
				});
				return false;
			};
		</script>
	</body>
</html>