369 lines
No EOL
16 KiB
HTML
369 lines
No EOL
16 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Geolocation</title>
|
||
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
|
||
|
||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||
|
||
<meta charset="utf-8" />
|
||
|
||
<script src="geolib.js"></script>
|
||
|
||
<script>
|
||
$(function() {
|
||
|
||
var cities = {
|
||
"Berlin": {latitude: 52.518611, longitude: 13.408056},
|
||
"Boston": {latitude: 42.357778, longitude: "71° 3' 34\" W"},
|
||
"Dortmund": {latitude: "51° 31' 10.11\" N", longitude: "7° 28' 01\" E"},
|
||
"Las Vegas": {latitude: 36.1168, longitude: -115.173798},
|
||
"London": {latitude: "51° 31' N", longitude: "0° 7' W"},
|
||
"Manchester": {latitude: "53° 29' N", longitude: "2° 14' W"},
|
||
"New York City": {latitude: 40.715517, longitude: -73.9991},
|
||
"San Francisco": {latitude: 37.774514, longitude: -122.418079},
|
||
"Moscow": {latitude: 55.751667, longitude: 37.617778}
|
||
}
|
||
|
||
// var cities = [{latitude: 51, longitude: 7}, {latitude: 51.3, longitude: 7.1}, {latitude: 20, longitude: 13}];
|
||
|
||
console.log(geolib.findNearest({latitude: "51° 31' 9\" N", longitude: 7.475}, cities));
|
||
|
||
var options;
|
||
$.each(cities, function(key, value) {
|
||
option = $('<option />').val(key).text(key);
|
||
$('select[name^="city"]').append(option);
|
||
});
|
||
|
||
function showDistance() {
|
||
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()]);
|
||
$('section#distance p:first-child').html('› Distance from <strong>' + $('[name="city1"] option:selected').text() + '</strong> to <strong>' + $('[name="city2"] option:selected').text() + '</strong> is <strong>' + converted + ' ' + $('[name="unit"]').val() + '</strong> (Compass direction is ' + direction.rough + '/' + direction.exact + ')' );
|
||
} catch (e) {
|
||
alert(e);
|
||
}
|
||
}
|
||
|
||
function showNearest() {
|
||
|
||
try {
|
||
var nearest = geolib.findNearest(cities[$('[name="city3"]').val()], cities, 1);
|
||
$('section#nearest p:first-child').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() + ')');
|
||
} catch (e) {
|
||
alert(e);
|
||
}
|
||
|
||
|
||
}
|
||
|
||
$('select[name="city1"], select[name="city2"], select[name="unit"]').bind('change', function() {
|
||
showDistance();
|
||
});
|
||
|
||
$('select[name="city3"], select[name="unit"]').bind('change', function() {
|
||
showNearest();
|
||
});
|
||
|
||
|
||
var bound = [
|
||
|
||
{latitude: 51.39956977979301,longitude: 6.205305755138397},
|
||
{latitude: 51.40510669616655,longitude: 6.207011640071869},
|
||
{latitude: 51.405635420720316,longitude: 6.207051873207092},
|
||
{latitude: 51.40605705743887,longitude: 6.207167208194733},
|
||
{latitude: 51.40655398143764,longitude: 6.207306683063507},
|
||
{latitude: 51.40701576455533,longitude: 6.207430064678192},
|
||
{latitude: 51.407604698576826,longitude: 6.207593679428101},
|
||
{latitude: 51.4128880344048,longitude: 6.209036707878113},
|
||
{latitude: 51.41826108602189,longitude: 6.210506558418274},
|
||
{latitude: 51.42026160017377,longitude: 6.211085915565491},
|
||
{latitude: 51.422897595483434,longitude: 6.211794018745422},
|
||
{latitude: 51.424770799229485,longitude: 6.212319731712341},
|
||
{latitude: 51.42645661695307,longitude: 6.212770342826843},
|
||
{latitude: 51.428042031634405,longitude: 6.213199496269226},
|
||
{latitude: 51.42952036453825,longitude: 6.21360719203949},
|
||
{latitude: 51.43110567291838,longitude: 6.214047074317932},
|
||
{latitude: 51.432710992437954,longitude: 6.214519143104553},
|
||
{latitude: 51.43407546967954,longitude: 6.214808821678162},
|
||
{latitude: 51.435593737136735,longitude: 6.214722990989685},
|
||
{latitude: 51.4377406283358,longitude: 6.214583516120911},
|
||
{latitude: 51.43959984821472,longitude: 6.214465498924255},
|
||
{latitude: 51.44173317634243,longitude: 6.214315295219421},
|
||
{latitude: 51.443612295060376,longitude: 6.214197278022766},
|
||
{latitude: 51.44527735699839,longitude: 6.21408998966217},
|
||
{latitude: 51.446347244276794,longitude: 6.214014887809753},
|
||
{latitude: 51.44678187882339,longitude: 6.214272379875183},
|
||
{latitude: 51.44675513220151,longitude: 6.217651963233948},
|
||
{latitude: 51.4466615189016,longitude: 6.220645308494568},
|
||
{latitude: 51.44696241811119,longitude: 6.220677495002747},
|
||
{latitude: 51.450111710851615,longitude: 6.2204307317733765},
|
||
{latitude: 51.452852956562566,longitude: 6.220259070396423},
|
||
{latitude: 51.455112689012275,longitude: 6.22008740901947},
|
||
{latitude: 51.46024681318612,longitude: 6.22184693813324},
|
||
{latitude: 51.460915276445654,longitude: 6.222061514854431},
|
||
{latitude: 51.46594180651441,longitude: 6.222319006919861},
|
||
{latitude: 51.46763947216309,longitude: 6.223048567771912},
|
||
{latitude: 51.4686019002292,longitude: 6.223692297935486},
|
||
{latitude: 51.46873556918834,longitude: 6.223649382591248},
|
||
{latitude: 51.469403908110124,longitude: 6.2228769063949585},
|
||
{latitude: 51.473520659972934,longitude: 6.223563551902771},
|
||
{latitude: 51.47507102866032,longitude: 6.223563551902771},
|
||
{latitude: 51.480710718511006,longitude: 6.220988631248474},
|
||
{latitude: 51.48498679571018,longitude: 6.21910035610199},
|
||
{latitude: 51.484318685077895,longitude: 6.21858537197113},
|
||
{latitude: 51.48749880409006,longitude: 6.21583878993988},
|
||
{latitude: 51.49140015973414,longitude: 6.212877631187439},
|
||
{latitude: 51.49361790485878,longitude: 6.212877631187439},
|
||
{latitude: 51.503155650834344,longitude: 6.214422583580017},
|
||
{latitude: 51.51351934119988,longitude: 6.212019324302673},
|
||
{latitude: 51.527298328943296,longitude: 6.200174689292908},
|
||
{latitude: 51.5386174778502,longitude: 6.176828742027283},
|
||
{latitude: 51.55676495361217,longitude: 6.164297461509705},
|
||
{latitude: 51.56348835641265,longitude: 6.159490942955017},
|
||
{latitude: 51.56658292203231,longitude: 6.157087683677673},
|
||
{latitude: 51.570957638201186,longitude: 6.1462730169296265},
|
||
{latitude: 51.580879214541554,longitude: 6.130823493003845},
|
||
{latitude: 51.58599918077726,longitude: 6.126360297203064},
|
||
{latitude: 51.58674579431969,longitude: 6.124643683433533},
|
||
{latitude: 51.587705707989315,longitude: 6.125158667564392},
|
||
{latitude: 51.5909052737474,longitude: 6.122412085533142},
|
||
{latitude: 51.59165180666677,longitude: 6.122412085533142},
|
||
{latitude: 51.59314483570029,longitude: 6.120523810386658},
|
||
{latitude: 51.59389133181459,longitude: 6.11846387386322},
|
||
{latitude: 51.59378469026367,longitude: 6.116403937339783},
|
||
{latitude: 51.60604682748665,longitude: 6.091169714927673},
|
||
{latitude: 51.6151080183365,longitude: 6.09425961971283},
|
||
{latitude: 51.62203594392298,longitude: 6.09374463558197},
|
||
{latitude: 51.62107675576844,longitude: 6.09700620174408},
|
||
{latitude: 51.6238476884512,longitude: 6.100267767906189},
|
||
{latitude: 51.641961155228614,longitude: 6.1078208684921265},
|
||
{latitude: 51.64494385597105,longitude: 6.111769080162048},
|
||
{latitude: 51.646861202837535,longitude: 6.1091941595077515},
|
||
{latitude: 51.65101517621613,longitude: 6.117090582847595},
|
||
{latitude: 51.65314527132351,longitude: 6.115373969078064},
|
||
{latitude: 51.65570125332056,longitude: 6.118292212486267},
|
||
{latitude: 51.656553215288106,longitude: 6.116747260093689},
|
||
{latitude: 51.659002516733615,longitude: 6.108164191246033},
|
||
{latitude: 51.65921549321202,longitude: 6.105760931968689},
|
||
{latitude: 51.66059981592362,longitude: 6.10249936580658},
|
||
{latitude: 51.65825709117668,longitude: 6.09975278377533},
|
||
{latitude: 51.659641443165995,longitude: 6.094946265220642},
|
||
{latitude: 51.65985441664157,longitude: 6.087736487388611},
|
||
{latitude: 51.661025752865335,longitude: 6.087393164634705},
|
||
{latitude: 51.66283594020113,longitude: 6.086363196372986},
|
||
{latitude: 51.66283594020113,longitude: 6.084303259849548},
|
||
{latitude: 51.66177113287937,longitude: 6.082929968833923},
|
||
{latitude: 51.66155816841225,longitude: 6.080183386802673},
|
||
{latitude: 51.66198409634559,longitude: 6.0789817571640015},
|
||
{latitude: 51.66368776804199,longitude: 6.079840064048767},
|
||
{latitude: 51.66347481258316,longitude: 6.078466773033142},
|
||
{latitude: 51.66422015231011,longitude: 6.076063513755798},
|
||
{latitude: 51.66475253032254,longitude: 6.075891852378845},
|
||
{latitude: 51.66368776804199,longitude: 6.07228696346283},
|
||
{latitude: 51.67263099351099,longitude: 6.036238074302673},
|
||
{latitude: 51.67816639119471,longitude: 6.029371619224548},
|
||
{latitude: 51.67923081318687,longitude: 6.030229926109314},
|
||
{latitude: 51.68306252519806,longitude: 6.030229926109314},
|
||
{latitude: 51.68423326141632,longitude: 6.032633185386658},
|
||
{latitude: 51.68923515698586,longitude: 6.0281699895858765},
|
||
{latitude: 51.68987365706748,longitude: 6.030401587486267},
|
||
{latitude: 51.692533977132406,longitude: 6.031946539878845},
|
||
{latitude: 51.69859892224253,longitude: 6.03057324886322},
|
||
{latitude: 51.69966286389715,longitude: 6.027655005455017},
|
||
{latitude: 51.703067309089796,longitude: 6.02782666683197},
|
||
{latitude: 51.70391838036425,longitude: 6.0267966985702515},
|
||
{latitude: 51.70551409585399,longitude: 6.027483344078064},
|
||
{latitude: 51.707216130341365,longitude: 6.0267966985702515},
|
||
{latitude: 51.70870535798884,longitude: 6.026110053062439},
|
||
{latitude: 51.70955632320409,longitude: 6.026453375816345},
|
||
{latitude: 51.71051363993608,longitude: 6.02782666683197},
|
||
{latitude: 51.71200275902593,longitude: 6.028856635093689},
|
||
{latitude: 51.7123218495955,longitude: 6.030401587486267},
|
||
{latitude: 51.7132791077973,longitude: 6.033148169517517},
|
||
{latitude: 51.712747300186436,longitude: 6.035208106040955},
|
||
{latitude: 51.712747300186436,longitude: 6.037611365318298},
|
||
{latitude: 51.7137045493837,longitude: 6.037954688072205},
|
||
{latitude: 51.7137045493837,longitude: 6.040014624595642},
|
||
{latitude: 51.7132791077973,longitude: 6.042246222496033},
|
||
{latitude: 51.71540627570968,longitude: 6.043447852134705},
|
||
{latitude: 51.71721428977219,longitude: 6.044992804527283},
|
||
{latitude: 51.72029838222786,longitude: 6.0377830266952515},
|
||
{latitude: 51.71827779369014,longitude: 6.038298010826111},
|
||
{latitude: 51.718065094907466,longitude: 6.035551428794861},
|
||
{latitude: 51.72125547160012,longitude: 6.034693121910095},
|
||
{latitude: 51.72168083815164,longitude: 6.034521460533142},
|
||
{latitude: 51.72093644406037,longitude: 6.033491492271423},
|
||
{latitude: 51.721468155376115,longitude: 6.032633185386658},
|
||
{latitude: 51.72402028265455,longitude: 6.0322898626327515},
|
||
{latitude: 51.72699758240485,longitude: 6.024908423423767},
|
||
{latitude: 51.729124104965564,longitude: 6.016668677330017},
|
||
{latitude: 51.73358947687538,longitude: 6.002935767173767},
|
||
{latitude: 51.73847961613352,longitude: 5.993322730064392},
|
||
{latitude: 51.738054407639225,longitude: 5.955213904380798},
|
||
{latitude: 51.74336922623825,longitude: 5.951780676841736},
|
||
{latitude: 51.74889597441643,longitude: 5.952467322349548},
|
||
{latitude: 51.75229671414827,longitude: 5.956243872642517},
|
||
{latitude: 51.75144655321978,longitude: 5.958647131919861},
|
||
{latitude: 51.76589711270231,longitude: 5.990576148033142},
|
||
{latitude: 51.77078375534808,longitude: 5.99263608455658},
|
||
{latitude: 51.76972148673102,longitude: 5.990232825279236},
|
||
{latitude: 51.773757974473924,longitude: 5.982336401939392},
|
||
{latitude: 51.77970582473402,longitude: 5.983366370201111},
|
||
{latitude: 51.784166197955734,longitude: 5.98988950252533},
|
||
{latitude: 51.785440509311655,longitude: 5.976499915122986},
|
||
{latitude: 51.7973323461996,longitude: 5.975469946861267},
|
||
{latitude: 51.79796932040531,longitude: 5.97890317440033},
|
||
{latitude: 51.81049465122969,longitude: 5.955557227134705},
|
||
{latitude: 51.81134370023646,longitude: 5.949034094810486},
|
||
{latitude: 51.815376464591175,longitude: 5.946287512779236},
|
||
{latitude: 51.816437658389646,longitude: 5.949377417564392},
|
||
{latitude: 51.81792328772294,longitude: 5.961393713951111},
|
||
{latitude: 51.822592089608314,longitude: 5.94869077205658},
|
||
{latitude: 51.82428971579762,longitude: 5.94594419002533},
|
||
{latitude: 51.83701987316322,longitude: 5.962080359458923},
|
||
{latitude: 51.83362551635823,longitude: 5.972380042076111},
|
||
{latitude: 51.83107958084081,longitude: 5.989202857017517},
|
||
{latitude: 51.83404982495155,longitude: 6.00636899471283},
|
||
{latitude: 51.838080557192825,longitude: 6.015638709068298},
|
||
{latitude: 51.84147457818093,longitude: 6.016668677330017},
|
||
{latitude: 51.84529254596986,longitude: 6.029028296470642},
|
||
{latitude: 51.84253515726973,longitude: 6.035551428794861},
|
||
{latitude: 51.852291312604386,longitude: 6.055464148521423},
|
||
{latitude: 51.856532459703665,longitude: 6.051344275474548},
|
||
{latitude: 51.8567445065659,longitude: 6.058897376060486},
|
||
{latitude: 51.86480154687295,longitude: 6.063360571861267},
|
||
{latitude: 51.84868602328138,longitude: 6.101126074790955},
|
||
{latitude: 51.84741349927076,longitude: 6.12996518611908},
|
||
{latitude: 51.84105033954946,longitude: 6.166357398033142},
|
||
{latitude: 51.851655106062985,longitude: 6.16567075252533},
|
||
{latitude: 51.85356369870537,longitude: 6.162580847740173},
|
||
{latitude: 51.86119725983969,longitude: 6.168074011802673},
|
||
{latitude: 51.86946548966225,longitude: 6.145071387290955},
|
||
{latitude: 51.88599739014017,longitude: 6.137174963951111},
|
||
{latitude: 51.889387797904554,longitude: 6.126875281333923},
|
||
{latitude: 51.89193043589319,longitude: 6.112799048423767},
|
||
{latitude: 51.89235419490533,longitude: 6.104559302330017},
|
||
{latitude: 51.894472930027014,longitude: 6.109365820884705},
|
||
{latitude: 51.896167846198466,longitude: 6.110395789146423},
|
||
{latitude: 51.898921948620035,longitude: 6.112112402915955},
|
||
{latitude: 51.897862698436754,longitude: 6.115202307701111},
|
||
{latitude: 51.901675882222165,longitude: 6.117948889732361},
|
||
{latitude: 51.89828640150688,longitude: 6.126531958580017},
|
||
{latitude: 51.904641468077024,longitude: 6.158117651939392},
|
||
{latitude: 51.89955748674281,longitude: 6.166357398033142},
|
||
{latitude: 51.9012522111176,longitude: 6.170477271080017},
|
||
{latitude: 51.8915066728851,longitude: 6.190733313560486},
|
||
{latitude: 51.887904525977014,longitude: 6.190733313560486},
|
||
{latitude: 51.88536166021186,longitude: 6.180090308189392},
|
||
{latitude: 51.87264517338036,longitude: 6.202062964439392},
|
||
{latitude: 51.86861753603537,longitude: 6.212705969810486},
|
||
{latitude: 51.8703134273022,longitude: 6.233648657798767},
|
||
{latitude: 51.86840554513067,longitude: 6.261457800865173},
|
||
{latitude: 51.87455287570193,longitude: 6.270727515220642},
|
||
{latitude: 51.92243086984239,longitude: 6.700224280357361},
|
||
{latitude: 51.905488740223774,longitude: 7.958158850669861},
|
||
{latitude: 51.0122116029334,longitude: 7.15591275691986},
|
||
{latitude: 51.38396441644611,longitude: 6.200346350669861}
|
||
];
|
||
|
||
console.log(geolib.isPointInside({latitude: 51.44750068842029, longitude: 6.2688446044921875}, bound));
|
||
|
||
$('#geolocation').bind('click', function() {
|
||
navigator.geolocation.getCurrentPosition(
|
||
function(position) {
|
||
var nearme = geolib.findNearest(position.coords, cities);
|
||
|
||
$('#nearme').html('› Nearest city to you (from the selectbox above) is <strong>' + nearme.key + '</strong> (' + geolib.convertUnit($('[name="unit"]').val(), nearme.distance) + ' ' + $('[name="unit"]').val() + ')');
|
||
}, function() {
|
||
$('#nearme').html('Could not determine your position.');
|
||
}, {enableHighAccuracy: true}
|
||
);
|
||
});
|
||
|
||
});
|
||
</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: 1em 0 0 0;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 130%;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 110%;
|
||
font-style: italic;
|
||
}
|
||
|
||
p {
|
||
margin: 0.75em 0;
|
||
}
|
||
|
||
#wrapper {
|
||
padding: 16px;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div id="wrapper">
|
||
|
||
<!--
|
||
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: left; margin-right: 15px; margin-bottom: 400px;" />
|
||
|
||
<h1>geolib.js</h1>
|
||
<h2>Settings</h2>
|
||
<p>Show all distances in <select name="unit">
|
||
<option value="km">Kilometer</option><option value="m">Meter</option><option value="cm">Centimeter</option><option value="mm">Millimeter</option><option value="mi">Miles</option><option value="sm">Seamiles</option><option value="ft">Feet</option><option value="in">Inch</option><option value="yd">Yards</option>
|
||
</select>.
|
||
</p>
|
||
|
||
<h2>Distance calculation</h2>
|
||
<p>Calculate distance from <select name="city1"></select> to <select name="city2"></select>.</p>
|
||
|
||
|
||
<section id="distance"><p> </p></section>
|
||
|
||
<h2>What's near?</h2>
|
||
<h3>Static example</h3>
|
||
<p>
|
||
Show what's the nearest to <select name="city3"></select>
|
||
</p>
|
||
|
||
<section id="nearest"><p> </p></section>
|
||
|
||
<h3>Geolocation example</h3>
|
||
<p>What's nearest from my position (uses W3C Geolocation API) <button id="geolocation">click!</button></p>
|
||
<section id="nearme"><p> </p></section>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html> |