498 lines
26 KiB
HTML
498 lines
26 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Geolocation</title>
|
||
|
|
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
|
||
|
|
<script>
|
||
|
|
if(typeof $ == 'undefined') {
|
||
|
|
document.write('<scri'+'pt src="jquery.min.js"></scri'+'pt>');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||
|
|
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
|
||
|
|
<script src="dist/geolib.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: white;
|
||
|
|
color: #333;
|
||
|
|
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
|
||
|
|
font-size: 15px;
|
||
|
|
line-height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3 {
|
||
|
|
font-family: "Georgia", serif;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2, h3 {
|
||
|
|
margin: 0 0 0.5em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin-bottom: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 130%;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
font-size: 110%;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0.75em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul {
|
||
|
|
margin-left: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
select, input {
|
||
|
|
padding: 4px;
|
||
|
|
margin: 2px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
padding: 4px 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#wrapper {
|
||
|
|
padding: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
float: left;
|
||
|
|
min-width: 280px;
|
||
|
|
width: 25%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box .inner {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 310px;
|
||
|
|
padding: 10px;
|
||
|
|
/*margin: 4px;*/
|
||
|
|
overflow: auto;
|
||
|
|
/*width: 360px;*/
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.highlight {
|
||
|
|
background: #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small {
|
||
|
|
width: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error {
|
||
|
|
color: #C00;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media all and (max-width: 1144px) {
|
||
|
|
.box {
|
||
|
|
width: 33.3%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media all and (max-width: 864px) {
|
||
|
|
.box {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media all and (max-width: 584px) {
|
||
|
|
.box {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<a href="https://github.com/manuelbieh/geolib"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
|
||
|
|
|
||
|
|
<div id="wrapper">
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<div class="inner highlight">
|
||
|
|
<!--
|
||
|
|
earth icon licensed under http://creativecommons.org/licenses/by-nc-nd/3.0/
|
||
|
|
Limpa (Björn Lindberg) - http://www.limpa.net
|
||
|
|
-->
|
||
|
|
<img src="earth.png" alt="" title="Björn Lindberg, CC BY-NC-ND 3.0" style="float: right; margin-left: 5px; " />
|
||
|
|
|
||
|
|
<h1>geolib.js</h1>
|
||
|
|
<h2>Settings</h2>
|
||
|
|
|
||
|
|
<p>Show all distances in
|
||
|
|
<select name="unit">
|
||
|
|
<option value="km">Kilometers (km)</option><option value="m">Meters (m)</option><option value="cm">Centimeter (cm)</option><option value="mm">Millimeters (mm)</option><option value="mi">Miles (mi)</option><option value="sm">Seamiles (sm)</option><option value="ft">Feet (ft)</option><option value="in">Inches (in)</option><option value="yd">Yards (yd)</option>
|
||
|
|
</select>.
|
||
|
|
</p>
|
||
|
|
<br>
|
||
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=manuelbieh&repo=geolib&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="152" height="30"></iframe>
|
||
|
|
<p><a href="https://github.com/manuelbieh/Geolib/blob/master/README.md">Documentation</a></p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box" id="distance">
|
||
|
|
<div class="inner">
|
||
|
|
<h2>Distance calculation</h2>
|
||
|
|
<p>Calculate distance from<br> <select name="city1"><option></option></select> to<br> <select name="city2"><option></option></select>.</p>
|
||
|
|
<p class="result"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box" id="custom">
|
||
|
|
<div class="inner">
|
||
|
|
<h2>Custom distance calculation</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Calculate distance from<br>
|
||
|
|
<input name="lat1" placeholder="Start latitude" class="small">
|
||
|
|
<input name="lng1" placeholder="Start longitude" class="small"> <br>
|
||
|
|
to <br>
|
||
|
|
<input name="lat2" placeholder="End latitude" class="small">
|
||
|
|
<input name="lng2" placeholder="End longitude" class="small">.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<button>Calculate</button>
|
||
|
|
|
||
|
|
<p class="result"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<div class="inner">
|
||
|
|
<h2>What's near?</h2>
|
||
|
|
<h3>Static example</h3>
|
||
|
|
<p>
|
||
|
|
Show what's the nearest to <select name="city3"><option></option></select>
|
||
|
|
</p>
|
||
|
|
<p id="nearest"></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box" id="geolocation">
|
||
|
|
<div class="inner">
|
||
|
|
<h2>Geolocation example</h2>
|
||
|
|
<p>Show me some cities near me (uses W3C Geolocation API)<br>
|
||
|
|
<button>click!</button></p>
|
||
|
|
<div class="result"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box" id="conversion">
|
||
|
|
<div class="inner">
|
||
|
|
<h2>Format conversion</h2>
|
||
|
|
<p data-method="sexagesimal2decimal" data-validation="isSexagesimal">
|
||
|
|
Convert sexagesimal to decimal<br>
|
||
|
|
<input class="in" placeholder="Sexagesimal input" value="51° 31' 10.11"">
|
||
|
|
<span class="out"></span><br>
|
||
|
|
<button>convert!</button>
|
||
|
|
</p>
|
||
|
|
<p data-method="decimal2sexagesimal" data-validation="isDecimal">
|
||
|
|
Convert decimal to sexagesimal<br>
|
||
|
|
<input class="in" placeholder="Decimal input" value="51.51947500">
|
||
|
|
<span class="out"></span><br>
|
||
|
|
<button>convert!</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
var cities = {
|
||
|
|
"Adelaide, Australia": {latitude: -34.916667, longitude: 138.6},
|
||
|
|
"Berlin, Germany": {latitude: 52.518611, longitude: 13.408056},
|
||
|
|
"Boston, MA": {latitude: 42.357778, longitude: "71° 3' 34\" W"},
|
||
|
|
"Cologne, Germany": {latitude: 50.938056, longitude: 6.956944},
|
||
|
|
"Chicago, IL": {latitude: 41.881944, longitude: -87.627778},
|
||
|
|
"Dallas, TX": {latitude: 32.783056, longitude: -96.806667},
|
||
|
|
"Denver, CO": {latitude: 39.778889, longitude: -104.9825},
|
||
|
|
"Dortmund, Germany": {latitude: "51° 31' 10.11\" N", longitude: "7° 28' 01\" E"},
|
||
|
|
"Hamburg, Germany": {latitude: 53.550556, longitude: 9.993333},
|
||
|
|
"Las Vegas, NV": {latitude: 36.1168, longitude: -115.173798},
|
||
|
|
"Los Angeles, CA": {latitude: 34.052222, longitude: -118.243611},
|
||
|
|
"London, United Kingdom": {latitude: "51° 31' N", longitude: "0° 7' W"},
|
||
|
|
"Manchester, United Kingdom": {latitude: "53° 29' N", longitude: "2° 14' W"},
|
||
|
|
"Melbourne, Australia": {latitude: -37.8, longitude: 144.95},
|
||
|
|
"Mexico City, Mexico": {latitude: 19.419444, longitude: -99.145556},
|
||
|
|
"Moscow, Russia": {latitude: 55.751667, longitude: 37.617778},
|
||
|
|
"Munich, Germany": {latitude: 48.137222, longitude: 11.575556},
|
||
|
|
"New York City, NY": {latitude: 40.715517, longitude: -73.9991},
|
||
|
|
"Oslo, Norway": {latitude: 59.91, longitude: 10.75},
|
||
|
|
"Phoenix, AZ": {latitude: 33.448083, longitude: -112.073083},
|
||
|
|
"San Francisco, CA": {latitude: 37.774514, longitude: -122.418079},
|
||
|
|
"Stockholm, Sweden": {latitude: 59.325, longitude: 18.05},
|
||
|
|
"Sydney, Australia": {latitude: -33.85, longitude: 151.2},
|
||
|
|
"Toronto, Canada": {latitude: 43.66135, longitude: -79.383087},
|
||
|
|
"Vancouver, Canada": {latitude: 49.28098, longitude: -123.12244},
|
||
|
|
"Washington, D.C.": {latitude: 38.895, longitude: -77.036667},
|
||
|
|
//"": {latitude: , longitude: },
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log(geolib.useDecimal({ dortmund: cities['Dortmund, Germany']}));
|
||
|
|
|
||
|
|
// Data taken from GADM.org
|
||
|
|
var colorado = [{lng:-104.139907836914,lat:41.0018997192384},{lng:-104.052841186523,lat:41.0017013549806},{lng:-103.574760437012,lat:41.0030288696292},{lng:-103.384948730469,lat:41.003002166748},{lng:-102.999816894531,lat:41.0029411315919},{lng:-102.985305786133,lat:41.0029220581055},{lng:-102.653793334961,lat:41.0032005310059},{lng:-102.620483398437,lat:41.0031394958497},{lng:-102.050422668457,lat:41.0018692016602},{lng:-102.050201416016,lat:40.7492408752442},{lng:-102.050132751465,lat:40.6983299255372},{lng:-102.049446105957,lat:40.4400901794435},{lng:-102.049263000488,lat:40.3494987487794},{lng:-102.048545837402,lat:40.0039100646972},{lng:-102.047561645508,lat:39.5737419128419},{lng:-102.047546386719,lat:39.5688591003418},{lng:-102.046348571777,lat:39.1338996887208},{lng:-102.046096801758,lat:39.0456314086914},{lng:-102.045455932617,lat:38.6953315734865},{lng:-102.045379638672,lat:38.6137504577639},{lng:-102.044311523438,lat:38.26762008667},{lng:-102.044296264648,lat:38.2626991271972},{lng:-102.043243408203,lat:37.7384109497071},{lng:-102.043037414551,lat:37.6428909301759},{lng:-102.042526245117,lat:37.388240814209},{lng:-102.042266845703,lat:37.2562484741212},{lng:-102.042251586914,lat:37.2439994812012},{lng:-102.042190551758,lat:37.212688446045},{lng:-102.042167663574,lat:37.1999893188478},{lng:-102.042106628418,lat:37.1705093383789},{lng:-102.04207611084,lat:37.1560020446778},{lng:-102.041976928711,lat:37.1101684570314},{lng:-102.042266845703,lat:36.9922294616699},{lng:-102.324737548828,lat:36.9948387145997},{lng:-102.351013183594,lat:36.9950599670411},{lng:-102.393112182617,lat:36.9954605102541},{lng:-102.457733154297,lat:36.9960594177246},{lng:-102.477516174316,lat:36.9962501525879},{lng:-102.503410339355,lat:36.996280670166},{lng:-102.537162780762,lat:36.9963188171389},{lng:-102.562683105469,lat:36.9961891174318},{lng:-102.675659179688,lat:36.9956207275391},{lng:-102.694297790527,lat:36.9957389831545},{lng:-102.701568603516,lat:36.9957809448242},{lng:-102.780769348144,lat:36.9986190795898},{lng:-102.785926818848,lat:36.9988021850586},{lng:-102.797340393066,lat:36.9988098144531},{lng:-103.000869750977,lat:36.9989891052248},{lng:-103.086166381836,lat:36.998790740967},{lng:-104.006790161133,lat:36.9966316223145},{lng:-104.18489074707,lat:36.9958496093752},{lng:-104.331336975098,lat:36.9929695129394},{lng:-105.032600402832,lat:36.9933700561526},{lng:-105.065986633301,lat:36.9954490661621},{lng:-105.101142883301,lat:36.9956817626954},{lng:-105.143196105957,lat:36.9958305358886},{lng:-105.219833374023,lat:36.9960899353027},{lng:-105.718818664551,lat:36.9969215393068},{lng:-105.757423400879,lat:36.9969902038574},{lng:-105.855377197266,lat:36.9971504211429},{lng:-105.874389648437,lat:36.9971809387207},{lng:-106,lat:36.9967193603516},{lng:-106.006797790527,lat:36.9966697692872},{lng:-106.015556335449,lat:36.9966011047363},{lng:-106.072029113769,lat:36.9960289001464},{lng:-106.108901977539,lat:36.9956588745119},{lng:-106.127326965332,lat:36.9954719543457},{lng:-106.142890930176,lat:36.9953117370607},{lng:-106.160758972168,lat:36.9951515197754},{lng:-106.202239990234,lat:36.9948005676272},{lng:-106.475921630859,lat:36.9935913085939},{lng:-106.492630004883,lat:36.9935188293458},{lng:-106.600936889648,lat:36.9933815002441},{lng:-106.617652893066,lat:36.993320465088},{lng:-106.81413269043,lat:36.9926719665528},{lng:-106.819313049316,lat:36.9926490783691},{lng:-106.837753295898,lat:36.9925193786622},{lng:-106.871742248535,lat:36.9922790527345},{lng:-106.87523651123,lat:36.9954299926758},{lng:-106.87873840332,lat:36.9990386962891},{lng:-106.946731567383,lat:36.9989395141603},{lng:-106.96573638916,lat:36.999050140381},{lng:-106.980728149414,lat:36.9991302490236},{lng:-107.00032043457,lat:36.9990005493164},{lng:-107.034317016602,lat:36.9990119934083},{lng:-107.190483093262,lat:36.9990806579589},{lng:-107.371437072754,lat:36.9994201660156},{lng:-107.399085998535,lat:36.9990806579589},{lng:-107.408317565918,lat:36.9992408752443},{lng:-107.414657592773,lat:36.999351501465},{lng:-107.418685913086,lat:36.9993286132814},{lng:-107.478
|
||
|
|
|
||
|
|
console.log('Is Denver (' + JSON.stringify(cities['Denver, CO']) + ') in Colorado?', geolib.isPointInside(cities['Denver, CO'], colorado));
|
||
|
|
|
||
|
|
var unitLabels = {
|
||
|
|
"m" : "Meters",
|
||
|
|
"km": "Kilometers",
|
||
|
|
"cm": "Centimeters",
|
||
|
|
"mm": "Millimeters",
|
||
|
|
"mi": "Miles",
|
||
|
|
"sm": "Seamiles",
|
||
|
|
"ft": "Feet",
|
||
|
|
"in": "Inches",
|
||
|
|
"yd": "Yards"
|
||
|
|
};
|
||
|
|
|
||
|
|
var option;
|
||
|
|
$.each(cities, function(key, value) {
|
||
|
|
option = $('<option />').val(key).text(key);
|
||
|
|
$('select[name^="city"]').append(option);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('select[name="city1"], select[name="city2"], select[name="unit"]').on('change', function() {
|
||
|
|
|
||
|
|
if($('select[name="city1"]').val() && $('select[name="city2"]').val()) {
|
||
|
|
|
||
|
|
try {
|
||
|
|
|
||
|
|
var distance = geolib.getDistance(
|
||
|
|
cities[$('[name="city1"]').val()],
|
||
|
|
cities[$('[name="city2"]').val()]
|
||
|
|
);
|
||
|
|
|
||
|
|
var converted = geolib.convertUnit(
|
||
|
|
$('[name="unit"]').val(), distance
|
||
|
|
);
|
||
|
|
|
||
|
|
var direction = geolib.getCompassDirection(
|
||
|
|
cities[$('[name="city1"]').val()],
|
||
|
|
cities[$('[name="city2"]').val()]
|
||
|
|
);
|
||
|
|
|
||
|
|
$('#distance').find('.result').html(
|
||
|
|
'Distance from <br><strong>'
|
||
|
|
+ $('[name="city1"] option:selected').text()
|
||
|
|
+ '</strong> ('
|
||
|
|
+ geolib.latitude(cities[$('[name="city1"] option:selected').text()])
|
||
|
|
+ ', '
|
||
|
|
+ geolib.longitude(cities[$('[name="city1"] option:selected').text()])
|
||
|
|
+ ') to <br><strong>'
|
||
|
|
+ $('[name="city2"] option:selected').text()
|
||
|
|
+ '</strong> ('
|
||
|
|
+ geolib.latitude(cities[$('[name="city2"] option:selected').text()])
|
||
|
|
+ ', '
|
||
|
|
+ geolib.longitude(cities[$('[name="city2"] option:selected').text()])
|
||
|
|
+') is <strong style="text-decoration: underline">'
|
||
|
|
+ converted + ' '
|
||
|
|
+ $('[name="unit"]').val()
|
||
|
|
+ '</strong>.<br> Compass direction is <strong>'
|
||
|
|
+ direction.rough
|
||
|
|
+ '/'
|
||
|
|
+ direction.exact
|
||
|
|
+ '</strong>'
|
||
|
|
);
|
||
|
|
} catch (e) {
|
||
|
|
|
||
|
|
alert(e);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('select[name="city1"]').on('change', function() {
|
||
|
|
|
||
|
|
var val = $('select[name="city1"]').val();
|
||
|
|
|
||
|
|
$('select[name="city2"]').find('option').removeAttr('disabled');
|
||
|
|
$('select[name="city2"]').find('option[value="'+val+'"]').attr('disabled', 'disabled');
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('select[name="city2"]').on('change', function() {
|
||
|
|
|
||
|
|
var val = $('select[name="city2"]').val();
|
||
|
|
|
||
|
|
$('select[name="city1"]').find('option').removeAttr('disabled');
|
||
|
|
$('select[name="city1"]').find('option[value="'+val+'"]').attr('disabled', 'disabled');
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('select[name="city3"], select[name="unit"]').on('change', function() {
|
||
|
|
|
||
|
|
if($('[name="city3"]').val() == '') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var nearest = geolib.findNearest(
|
||
|
|
cities[$('[name="city3"]').val()],
|
||
|
|
cities,
|
||
|
|
1
|
||
|
|
);
|
||
|
|
|
||
|
|
$('#nearest').html(
|
||
|
|
'Nearest city from <strong>'
|
||
|
|
+ $('[name="city3"] option:selected').text()
|
||
|
|
+ '</strong> is <strong>'
|
||
|
|
+ nearest.key
|
||
|
|
+ '</strong> ('
|
||
|
|
+ geolib.convertUnit($('[name="unit"]').val(), nearest.distance)
|
||
|
|
+ ' '
|
||
|
|
+ $('[name="unit"]').val()
|
||
|
|
+ ')'
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('#geolocation').find('button').on('click', function() {
|
||
|
|
|
||
|
|
navigator.geolocation.getCurrentPosition(
|
||
|
|
|
||
|
|
function(position) {
|
||
|
|
|
||
|
|
var nearme = geolib.findNearest(position.coords, cities, 0, 5);
|
||
|
|
|
||
|
|
if(nearme.length === 0) {
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
var result = 'Some cities near you might be:<ul>';
|
||
|
|
var unit = $('[name="unit"]').val();
|
||
|
|
|
||
|
|
nearme.forEach(function(val) {
|
||
|
|
result += '<li><strong>' + val.key + '</strong> (' + geolib.convertUnit(unit, val.distance) + unit +')</li>';
|
||
|
|
});
|
||
|
|
result += '</ul>';
|
||
|
|
|
||
|
|
$('#geolocation').find('.result').html(result);
|
||
|
|
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
var nearme = geolib.findNearest(position.coords, cities);
|
||
|
|
|
||
|
|
$('#nearme').html('A city near you might be <strong>' + nearme.key + '</strong> (' + geolib.convertUnit($('[name="unit"]').val(), nearme.distance) + ' ' + $('[name="unit"]').val() + ')');
|
||
|
|
*/
|
||
|
|
|
||
|
|
}, function() {
|
||
|
|
|
||
|
|
$('#nearme').html('Could not determine your position.');
|
||
|
|
|
||
|
|
}, {enableHighAccuracy: true}
|
||
|
|
|
||
|
|
);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
window.cities = cities;
|
||
|
|
|
||
|
|
$('#custom').find('button').on('click', function() {
|
||
|
|
|
||
|
|
var box = $('#custom');
|
||
|
|
|
||
|
|
box.find('.result').removeClass('error').text('');
|
||
|
|
|
||
|
|
var start = {
|
||
|
|
lat: box.find('[name="lat1"]').val() || undefined,
|
||
|
|
lng: box.find('[name="lng1"]').val() || undefined
|
||
|
|
};
|
||
|
|
|
||
|
|
var end = {
|
||
|
|
lat: box.find('[name="lat2"]').val() || undefined,
|
||
|
|
lng: box.find('[name="lng2"]').val() || undefined
|
||
|
|
};
|
||
|
|
|
||
|
|
if(geolib.validate(start) && geolib.validate(end)) {
|
||
|
|
|
||
|
|
var distance = geolib.getDistance(start, end);
|
||
|
|
var unit = $('[name="unit"]').val();
|
||
|
|
|
||
|
|
box.find('.result').text(
|
||
|
|
'Distance from '
|
||
|
|
+ geolib.latitude(start).toFixed(6) + ', ' + geolib.longitude(start).toFixed(6)
|
||
|
|
+ ' to '
|
||
|
|
+ geolib.latitude(end).toFixed(6) + ', ' + geolib.longitude(end).toFixed(6)
|
||
|
|
+ ' is '
|
||
|
|
+ geolib.convertUnit(unit, distance)
|
||
|
|
+ unit
|
||
|
|
);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
box.find('.result').addClass('error').text('Please enter valid latitudes and longitudes in the according fields.');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#conversion').find('button').on('click', function() {
|
||
|
|
|
||
|
|
var button = $(this);
|
||
|
|
var p = button.closest('p[data-method]');
|
||
|
|
var method = p.data('method');
|
||
|
|
var input = p.find('.in').val();
|
||
|
|
var validation = p.data('validation');
|
||
|
|
|
||
|
|
if(geolib[validation](input) == true) {
|
||
|
|
|
||
|
|
var result = geolib[method](input);
|
||
|
|
p.find('.out').text(result);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
p.find('.out').text('Invalid data');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|