498 lines
No EOL
26 KiB
HTML
498 lines
No EOL
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.478042602539,lat:36.9990806579589},{lng:-107.522987365723,lat:36.9989395141603},{lng:-107.686080932617,lat:36.9986190795898},{lng:-107.703941345215,lat:36.9983711242676},{lng:-107.859527587891,lat:36.9978904724122},{lng:-107.877388000488,lat:36.9976119995118},{lng:-107.947128295898,lat:36.9974098205568},{lng:-107.964981079101,lat:36.9971199035646},{lng:-108.000709533691,lat:36.9972610473632},{lng:-108.037612915039,lat:36.9974098205568},{lng:-108.090621948242,lat:36.9976196289064},{lng:-108.126373291016,lat:36.9977607727051},{lng:-108.159233093262,lat:36.9978904724122},{lng:-108.250877380371,lat:36.9980010986329},{lng:-108.379989624023,lat:36.9983100891113},{lng:-108.53621673584,lat:36.9983787536621},{lng:-109.044876098633,lat:36.9986305236817},{lng:-109.044708251953,lat:37.2373390197754},{lng:-109.044692993164,lat:37.2668304443359},{lng:-109.044662475586,lat:37.2958602905276},{lng:-109.044639587402,lat:37.3235321044924},{lng:-109.044616699219,lat:37.3385009765625},{lng:-109.044609069824,lat:37.3599586486816},{lng:-109.044540405273,lat:37.3876113891604},{lng:-109.044502258301,lat:37.4016914367677},{lng:-109.04434967041,lat:37.4642715454102},{lng:-109.044326782227,lat:37.4704895019531},{lng:-109.04434967041,lat:37.477279663086},{lng:-109.044403076172,lat:37.507350921631},{lng:-109.044296264648,lat:37.5277595520021},{lng:-109.043968200683,lat:37.5926017761232},{lng:-109.043907165527,lat:37.6038322448731},{lng:-109.043930053711,lat:37.6062088012696},{lng:-109.043891906738,lat:37.6193618774416},{lng:-109.043846130371,lat:37.6310501098634},{lng:-109.043487548828,lat:37.6760406494142},{lng:-109.043449401855,lat:37.6804809570312},{lng:-109.043502807617,lat:37.6922721862793},{lng:-109.043746948242,lat:37.7535896301271},{lng:-109.043663024902,lat:37.7694587707519},{lng:-109.04305267334,lat:37.8800201416016},{lng:-109.042633056641,lat:37.9453887939456},{lng:-109.042526245117,lat:37.9517021179201},{lng:-109.04248046875,lat:37.9603500366211},{lng:-109.042381286621,lat:37.9807205200195},{lng:-109.042022705078,lat:38.0247306823731},{lng:-109.04190826416,lat:38.03923034668},{lng:-109.040992736816,lat:38.1531105041504},{lng:-109.040946960449,lat:38.1602897644043},{lng:-109.060676574707,lat:38.276840209961},{lng:-109.060768127441,lat:38.3303604125978},{lng:-109.060806274414,lat:38.3521194458008},{lng:-109.060737609863,lat:38.3779602050782},{lng:-109.060661315918,lat:38.4051818847659},{lng:-109.060600280762,lat:38.4196701049807},{lng:-109.060440063477,lat:38.4554901123047},{lng:-109.060401916504,lat:38.4636611938477},{lng:-109.060249328613,lat:38.498119354248},{lng:-109.060241699219,lat:38.4990501403809},{lng:-109.060386657715,lat:38.5362091064455},{lng:-109.060356140137,lat:38.5466690063477},{lng:-109.060195922852,lat:38.5611801147462},{lng:-109.059722900391,lat:38.6047210693361},{lng:-109.059661865234,lat:38.6096496582034},{lng:-109.0595703125,lat:38.6727409362794},{lng:-109.055023193359,lat:38.9283103942872},{lng:-109.054786682129,lat:38.9410095214845},{lng:-109.054710388184,lat:38.9453887939454},{lng:-109.054588317871,lat:38.9546089172364},{lng:-109.05428314209,lat:38.9608306884767},{lng:-109.05436706543,lat:38.969108581543},{lng:-109.053817749023,lat:39.0007514953616},{lng:-109.053756713867,lat:39.0135307312014},{lng:-109.0537109375,lat:39.0280418395997},{lng:-109.053413391113,lat:39.1010513305667},{lng:-109.053359985352,lat:39.1151084899902},{lng:-109.053100585937,lat:39.181251525879},{lng:-109.053092956543,lat:39.1880989074708},{lng:-109.053092956543,lat:39.2026100158693},{lng:-109.053039550781,lat:39.2751693725587},{lng:-109.053031921387,lat:39.2896804809571},{lng:-109.052986145019,lat:39.3626518249513},{lng:-109.052978515625,lat:39.3666687011721},{lng:-109.052856445312,lat:39.4502220153809},{lng:-109.05281829834,lat:39.4756011962891},{lng:-109.052780151367,lat:39.4975509643556},{lng:-109.052749633789,lat:39.5164184570313},{lng:-109.052642822266,lat:39.5812606811526},{lng:-109.052612304687,lat:39.5957717895508},{lng:-109.052452087402,lat:39.6692619323731},{lng:-109.052337646484,lat:39.7218704223634},{lng:-109.052352905273,lat:39.7282218933108},{lng:-109.052230834961,lat:39.7790107727052},{lng:-109.05216217041,lat:39.8084907531739},{lng:-109.052116394043,lat:39.8234596252444},{lng:-109.051780700683,lat:39.9686393737793},{lng:-109.051750183105,lat:39.9812889099122},{lng:-109.051696777344,lat:40.0398101806642},{lng:-109.051658630371,lat:40.0879516601562},{lng:-109.051628112793,lat:40.1174316406251},{lng:-109.051620483398,lat:40.1282691955566},{lng:-109.051658630371,lat:40.1319503784181},{lng:-109.05103302002,lat:40.2227706909181},{lng:-109.051422119141,lat:40.2607917785646},{lng:-109.051399230957,lat:40.2752990722656},{lng:-109.051376342773,lat:40.2843818664551},{lng:-109.051338195801,lat:40.2920303344727},{lng:-109.051162719727,lat:40.3205986022949},{lng:-109.050926208496,lat:40.3583488464357},{lng:-109.050903320312,lat:40.3873901367187},{lng:-109.050880432129,lat:40.4040718078613},{lng:-109.050819396973,lat:40.4190406799317},{lng:-109.050682067871,lat:40.4491004943848},{lng:-109.050750732422,lat:40.4636192321777},{lng:-109.050788879394,lat:40.4713287353516},{lng:-109.050819396973,lat:40.4766693115234},{lng:-109.050491333008,lat:40.4931106567383},{lng:-109.050315856934,lat:40.5316886901855},{lng:-109.050132751465,lat:40.5773811340333},{lng:-109.050109863281,lat:40.579341888428},{lng:-109.050109863281,lat:40.5932617187501},{lng:-109.050109863281,lat:40.6096000671389},{lng:-109.050102233887,lat:40.6514892578126},{lng:-109.050117492676,lat:40.6545219421387},{lng:-109.049926757812,lat:40.6660118103027},{lng:-109.050086975098,lat:40.6949005126955},{lng:-109.049911499023,lat:40.7516288757324},{lng:-109.049858093262,lat:40.7693214416505},{lng:-109.049812316895,lat:40.7833900451661},{lng:-109.049682617187,lat:40.8239593505862},{lng:-109.04931640625,lat:40.8432922363283},{lng:-109.049278259277,lat:40.84529876709},{lng:-109.049186706543,lat:40.8587188720703},{lng:-109.048812866211,lat:40.8866004943849},{lng:-109.048896789551,lat:40.9036407470704},{lng:-109.048728942871,lat:40.9106597900391},{lng:-109.049011230469,lat:40.9267921447756},{lng:-109.048828125,lat:40.9478797912598},{lng:-109.049011230469,lat:41.0000305175781},{lng:-108.972908020019,lat:41.0001792907715},{lng:-108.931510925293,lat:41.0001296997073},{lng:-108.912033081055,lat:41.000099182129},{lng:-108.765525817871,lat:41.0001907348634},{lng:-108.746017456055,lat:41.0001602172853},{lng:-108.651626586914,lat:41.0005187988284},{lng:-108.632141113281,lat:41.0004806518555},{lng:-108.569877624512,lat:41.0002899169922},{lng:-108.37809753418,lat:40.9997100830078},{lng:-108.374496459961,lat:40.9997291564943},{lng:-108.311798095703,lat:41.0000419616701},{lng:-108.292297363281,lat:41.0001411437988},{lng:-108.263031005859,lat:41.0002899169922},{lng:-108.218597412109,lat:41.0006599426271},{lng:-108.180847167969,lat:41.0009803771975},{lng:-108.000686645508,lat:41.0024909973145},{lng:-107.965980529785,lat:41.0027694702149},{lng:-107.915397644043,lat:41.0029487609864},{lng:-107.888046264648,lat:41.0029411315919},{lng:-107.880088806152,lat:41.0028800964356},{lng:-107.852111816406,lat:41.0028610229493},{lng:-107.839141845703,lat:41.0028495788574},{lng:-107.832626342773,lat:41.0028419494631},{lng:-107.820602416992,lat:41.0028305053712},{lng:-107.813140869141,lat:41.0028305053712},{lng:-107.78450012207,lat:41.0028305053712},{lng:-107.707786560059,lat:41.0028190612793},{lng:-107.676742553711,lat:41.0028114318848},{lng:-107.604888916016,lat:41.0027999877932},{lng:-107.528778076172,lat:41.0025596618653},{lng:-107.513580322266,lat:41.0026206970215},{lng:-107.50927734375,lat:41.0026206970215},{lng:-107.49471282959,lat:41.0026397705079},{lng:-107.457527160644,lat:41.0026588439941},{lng:-107.413696289062,lat:41.0029106140137},{lng:-107.394828796387,lat:41.003028869629},{lng:-107.367446899414,lat:41.0031890869143},{lng:-107.343711853027,lat:41.0033187866213},{lng:-107.31812286377,lat:41.0034599304201},{lng:-107.305961608887,lat:41.0034103393556},{lng:-107.229850769043,lat:41.0035209655763},{lng:-107.135482788086,lat:41.0036506652834},{lng:-107.025856018066,lat:41.004280090332},{lng:-107.002113342285,lat:41.0044212341311},{lng:-106.863906860352,lat:41.0041007995607},{lng:-106.59114074707,lat:41.0034599304201},{lng:-106.582008361816,lat:41.0037498474121},{lng:-106.572257995605,lat:41.0037689208985},{lng:-106.543647766113,lat:41.0038108825684},{lng:-106.486419677734,lat:41.0032806396484},{lng:-106.45597076416,lat:41.0034713745117},{lng:-106.448051452637,lat:41.0035209655763},{lng:-106.379257202148,lat:41.0026397705079},{lng:-106.351860046387,lat:41.0024604797365},{lng:-106.33177947998,lat:41.0025100708007},{lng:-106.326301574707,lat:41.0025291442872},{lng:-106.325736999512,lat:41.0023498535156},{lng:-106.321479797363,lat:41.0009803771975},{lng:-106.317138671875,lat:40.999382019043},{lng:-106.20329284668,lat:40.9988899230959},{lng:-106.196685791016,lat:40.9988594055176},{lng:-106.195976257324,lat:40.9988594055176},{lng:-106.087013244629,lat:40.9979820251466},{lng:-106.068138122559,lat:40.9978294372558},{lng:-106.060317993164,lat:40.9977722167969},{lng:-106.02855682373,lat:40.9976615905762},{lng:-106.023788452148,lat:40.9976501464846},{lng:-105.996353149414,lat:40.9984512329103},{lng:-105.971961975098,lat:40.9991607666016},{lng:-105.9384765625,lat:40.999938964844},{lng:-105.926292419434,lat:41.0000305175781},{lng:-105.900100708008,lat:40.9998588562012},{lng:-105.880630493164,lat:40.9997215270999},{lng:-105.697959899902,lat:40.9998016357423},{lng:-105.690032958984,lat:40.9998016357423},{lng:-105.671195983887,lat:40.9998016357423},{lng:-105.520729064941,lat:40.9996604919436},{lng:-105.476997375488,lat:40.9995307922366},{lng:-105.355087280273,lat:40.9992904663086},{lng:-105.289489746094,lat:40.9991989135743},{lng:-105.276306152344,lat:40.9998016357423},{lng:-105.110862731934,lat:40.9993209838867},{lng:-104.942459106445,lat:40.9994812011719},{lng:-104.9384765625,lat:40.9994812011719},{lng:-104.834091186523,lat:40.9995613098146},{lng:-104.830032348633,lat:40.9995689392092},{lng:-104.701347351074,lat:41.0035209655763},{lng:-104.683662414551,lat:41.0040702819827},{lng:-104.664756774902,lat:41.0046501159671},{lng:-104.633659362793,lat:41.0056114196778},{lng:-104.613418579102,lat:41.0047607421876},{lng:-104.608688354492,lat:41.0045585632326},{lng:-104.567947387695,lat:41.0028495788574},{lng:-104.560646057129,lat:41.0028419494631},{lng:-104.487548828125,lat:41.0027122497561},{lng:-104.472496032715,lat:41.002681732178},{lng:-104.139907836914,lat:41.0018997192384}];
|
|
|
|
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> |