A Javascript Library For Handling Coordinates, Latitude, Longitude, And Conversion Between Formats

javascript-coordinates-latitude-longitude-conversion-input-mask

coords-formater library aims to make it easier to use coordinates, perform conversions between formats and prepare fields to receive this type of data effortlessly.

difference between input mask and validation rule, input mask validation, access input mask for height, javascript input mask

Accepted Input Formats

  • 41 25 01N
  • 41°25’01″N
  • S17 33 08.352
  • +17 33 08.352
  • -41°25’01”
  • 41 25N
  • 41°25’N
  • N41 25.117
  • -41 25.117
  • -41°25′
  • 41 N
  • 41°N
  • N41.092
  • 90S
  • -41°
  • +N41.092

How to make use of it:

1. Add your javascript and CSS files to your HTML page.

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

2. Create your input fields as follows:

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

3. Configure the coords library.

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

4. Set the format:

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

5. 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',
  
} );

JS Only Input Mask For Geo-Information, coords-formater Plugin/Github


See Demo And Download

Official Website(klawdyo): Click Here

This superior jQuery/javascript plugin is developed by klawdyo. For extra advanced usage, please go to the official website.