JS Only Input Mask For Geo Information – coords

Preview:

Description:

coords.js is a pure JavaScript input mask library that allows the user to quickly type or paste geographic information (coordinates, latitude, longitude) in an input field.

How to use it:

Put the coords’ JavaScript and CSS files in the html page.

<link href="coords.css" rel="stylesheet">
<script src="coords.js"></script>

Create your own input fields as these:

<input type="coords" id="latitude"  name="latitude"  class="coords w2">
<input type="coords" id="longitude" value="41 25N" name="longitude" class="coords w2">

Initialize the coords library and done.

coords.init( 'input[type="coords"]' );

Set the format:

coords.setSaveFormat({showCompassDirection:false, showSign:true, seconds:false})

Possible options with default values:

coords.init( 'input[type="coords"]',{
  //Spaces between parts
  'spaces'                : true,  
  //Show degrees. Always true
  'degrees'               : true,  
  //Show minutes.
  'minutes'               : true,  
  //Show seconds. False if minutes is false too
  'seconds'               : true,  
  //Degree component indicator
  'degreeIndicator'       : '°',   
  //Minute component indicator
  'minuteIndicator'       : "'",   
  //Second component indicator
  'secondIndicator'       : '"',   
  //Configure to show sign at start
  'showSign'              : false, 
  //Configure to show compass direction at end
  'showCompassDirection'  : true,  
  //Last component's decimal separator
  'decimalSeparator'      : '.',   
  'decimalPlaces'         : 5, 
  //Recalculate widths
  'recalculateWidth'      : true,
  'pixelsBychars'         : 8,
  'saveFormatOptions'     : null,
  //Messages
  'pasteErrorMessage'    : 'The pasted texto isn\'t a valid coordinate',
  
} );