freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
ffffng/app/bower_components/geolib/index.html

499 lines
27 KiB
HTML
Raw Normal View History

Detection whether position is within community borders.
2014-08-10 11:37:05 +02:00
<!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>
Lots of updates
2016-05-16 13:33:49 +02:00
<script src="dist/geolib.isPointInsideRobust.js"></script>
Detection whether position is within community borders.
2014-08-10 11:37:05 +02:00
<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&quot;">
<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>
Reference in a new issue Copy permalink