OTMap Widget Docs

Click here for live example

OTMap is a JS widget that creates a minimal, domain agnostic map in a given <div>, which can select/highlight/display Zip codes and/or carrier routes.

Contents

  1. Basic Usage
  2. Constants
    1. Font Weight Constants
    2. Font Variant Constants
    3. Font Style Constants
    4. Trigger Constants
    5. Slider Orientation Constants
    6. Slider Position Constants
    7. Slider Style Constants
    8. Map Style Constants
  3. Interface Methods
    1. Constructor
    2. Events
      1. onSelectionChange(cb)
      2. onClick(callback)
      3. load(cb)
      4. onError(cb)
    3. Getters
      1. getSelected()
      2. getZipAt(lat, lng, callback)
      3. isLoaded()
    4. Setters
      1. setHighlightColor(r,g,b,a)
      2. addZipAt(options)
      3. addZip(options)
      4. addMarker(options)
      5. addMarkerAt(options)
      6. addZipConvexHull(options)
      7. addZipsInRadius(options)
      8. addRoutesInRadius(options)
      9. addRoute(options)
      10. addLabel(options)
      11. addImage(options)
      12. addImageAt(options)
      13. addCircle(options)
      14. setMapStyle(mapStyle)
    5. Utilities
      1. deSelectGraphic(lat, lng, callback)
      2. clearGraphics()
      3. deSelectGraphic(zipOrRoute, callback)
      4. selectGraphic(lat, lng, CallCBStack)
      5. selectGraphic(zipOrRoute, CallCBStack)
      6. distance(lat1, lng1, lat2, lng2)
      7. showLoader()
      8. hideLoader()
      9. center()
      10. throw(error)
      11. removeGraphic(lat, lng)
      12. removeGraphic(zipOrRoute)
      13. makeSelectable()
      14. makeSelectable(lat, lng)
      15. makeSelectable(zipOrRoute)
      16. makeNotSelectable()
      17. makeNotSelectable(lat, lng)
      18. makeNotSelectable(zipOrRoute)
      19. getStaticURL()
      20. getImage(callback)
      21. getExtent()
      22. setExtent(extent)
      23. exportMapState()
      24. importMapState(state)
  4. Code Example

Basic Usage

  1. Obtain an API key from Our Town's IT dept.
  2. Include the OTMap Widget JS: <script src="https://mercury.ourtownamerica.com/basemap/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 OTMap by passing the id of the div to the OTMap constructor: <script> var otmap = new OTMap({id: 'otmap'}); </script>

Constants

Interface Methods

Events

Getters

Setters

Utilities

Complete Example Code


<!DOCTYPE html>
<html>
	<head>
		<title>OTMap Widget Example</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			body{
				margin: 1em 5em;
			}
			#output{
				border:1px solid black;
				height: 75vh;
			}
		</style>
	</head>
	<body>
		<center>
			<h1>OTMap Widget Example</h1>
			<a href="https://mercury.ourtownamerica.com/basemap/docs.html">Click here for documentation</a>
		</center>
		<div id="output"></div>
		
		<script src="https://mercury.ourtownamerica.com/basemap/widget.js?key={my key}"></script>
		<script>
			new OTMap({id: "output"}).addRoute({
				route: '34683-C077', 
				selectable: true, 
				callback: function(){ console.log('Added Route'); }
			});
		</script>
	</body>
</html>