183 lines
12 KiB
HTML
183 lines
12 KiB
HTML
<html>
|
|
<head>
|
|
<title>PassiveAssists Demo</title>
|
|
<script src="./passiveassist.js" crossorigin=""></script>
|
|
<script src="https://cdn.jsdelivr.net/openlocationcode/latest/openlocationcode.js"></script>
|
|
</head>
|
|
<body>
|
|
<noscript>Please enable the javascript for PassiveAssist.js to work!</noscript>
|
|
<div id="searchtop">
|
|
<form action="" id="searchbar">
|
|
<label for="search" id="search1">Search for:</label>
|
|
<input type="text" id="search2" name="search">
|
|
<select id="search4" name="types">
|
|
<option value="default">Default</option>
|
|
<option value="single">Single</option>
|
|
<option value="country">Country</option>
|
|
<option value="region">Region</option>
|
|
<option value="postcode">Postcode</option>
|
|
<option value="district">District</option>
|
|
<option value="place">Place</option>
|
|
<option value="locality">Locality</option>
|
|
<option value="neighborhood">Neighborhood</option>
|
|
<option value="address">Address</option>
|
|
<option value="poi">Point of Interest</option>
|
|
</select>
|
|
<label for="exact" id="search6">Exact Matching?</label>
|
|
<input type="checkbox" id="search5" value="exact">
|
|
<label for="dist" id="search7">Distance:</label>
|
|
<input type="number" id="search8" name="distance" size="12" value="3500">
|
|
<button type="button" id="search3">Search</button>
|
|
</form>
|
|
<style>
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: larger;
|
|
}
|
|
</style>
|
|
</div>
|
|
<div id="tip"></div>
|
|
<br>
|
|
<div id="results"></div>
|
|
<script>
|
|
var xhr = new XMLHttpRequest()
|
|
var res = document.getElementById("results")
|
|
var cors = false
|
|
var stopped = false
|
|
|
|
const tips = [
|
|
"PassiveAssist on SF!",
|
|
"San Jose on PassiveAssist!",
|
|
"Boor on search for city of M*V capital!",
|
|
"It has a same features as MapAd search!",
|
|
"BetterFPS mod in Minecraft were not made by the people from Bettendorf!",
|
|
"The PassiveAssist data will update every 5 seconds. Please Enjoy!",
|
|
"If you want to fetch LPAds, please visit https://github.com/crawlerop/lpads right now!",
|
|
"Can you tell the difference between 55.85557,-3.967789 and 51.2859,-114.0106?",
|
|
"We have implemented the support of Wikimedia's GeoHack!",
|
|
"We boosted the performance of this app by using async XHR!",
|
|
"Two of coordinates like -33.798516,150.919461 and -34.873554,138.584368 returns the same thing!",
|
|
"Can you compare the 2 iconic places: 34.1028,-118.33 and 26.0112,-80.1495"
|
|
]
|
|
|
|
const urls = {
|
|
"single": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1",
|
|
"default": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000",
|
|
"country": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=country",
|
|
"region": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=region",
|
|
"postcode": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=postcode",
|
|
"district": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=district",
|
|
"place": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=place",
|
|
"locality": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=locality",
|
|
"neighborhood": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=neighborhood",
|
|
"address": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=address",
|
|
"poi": "https://api.mapbox.com/geocoding/v5/mapbox.places/(query).json?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw&limit=1000&types=poi",
|
|
}
|
|
|
|
document.getElementById("tip").innerHTML = "<b>Tip: </b>" + tips[Math.floor(Math.random() * tips.length)]
|
|
|
|
setInterval(function(){
|
|
document.getElementById("tip").innerHTML = "<b>Tip: </b>" + tips[Math.floor(Math.random() * tips.length)]
|
|
}, 5000)
|
|
|
|
document.getElementById("search3").onclick = function() {
|
|
stopped = true
|
|
if (document.getElementById("search2").value != "") {
|
|
let seq = document.getElementById("search2").value;
|
|
|
|
if (document.getElementById("search2").value.indexOf("+") != -1) {
|
|
let res = OpenLocationCode.decode(document.getElementById("search2").value);
|
|
seq = `geo:${res.latitudeCenter},${res.longitudeCenter}`;
|
|
}
|
|
|
|
if (seq.startsWith("geo:")) { // geo:35.335992,-79.038636
|
|
lval = seq
|
|
lpos = lval.split(":")[1]
|
|
ll = lpos.split(",")
|
|
xhr.open("GET",urls[document.getElementById("search4").value].replace("(query)", ll[1]+","+ll[0]) + (document.getElementById("search5").checked ? "&fuzzyMatch=false" : ""))
|
|
} else {
|
|
xhr.open("GET",urls[document.getElementById("search4").value].replace("(query)", seq) + (document.getElementById("search5").checked ? "&fuzzyMatch=false" : ""))
|
|
}
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status <= 399) {
|
|
o = ""
|
|
rs = JSON.parse(this.responseText)
|
|
rs.features.forEach(function(feature){
|
|
o += `<a href="getmaplace.html?lat=`+feature.center[1]+`&lng=`+feature.center[0]+`&q=`+encodeURIComponent(document.getElementById("search2").value)+`&type=`+document.getElementById("search4").value+`&exact=`+document.getElementById('search5').checked+`&dist=`+document.getElementById('search8').value+`">`+feature.place_name+` (`+OpenLocationCode.encode(feature.center[1], feature.center[0], OpenLocationCode.CODE_PRECISION_EXTRA)+`) `+` - `+feature.center[1]+`, `+feature.center[0]+`</a> - <a href="getmaplace.html?cors=true&lat=`+feature.center[1]+`&lng=`+feature.center[0]+`&q=`+document.getElementById("search2").value+`&type=`+document.getElementById("search4").value+`&exact=`+document.getElementById('search5').checked+`&dist=`+document.getElementById('search8').value+`">CORS</a> - <button onclick="navigator.clipboard.writeText('`+feature.center[1]+", "+feature.center[0]+`')">Copy Coords</button> - <button onclick="navigator.clipboard.writeText('geo:`+feature.center[1]+","+feature.center[0]+`')">Copy geoURI</button><br>`
|
|
})
|
|
res.innerHTML = o
|
|
//console.log(res.innerHTML)
|
|
}
|
|
}
|
|
xhr.send()
|
|
}
|
|
res.innerHTML = ""
|
|
}
|
|
|
|
window.addEventListener('keydown', function(e) {
|
|
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
|
|
if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
|
|
e.preventDefault()
|
|
document.getElementById("search3").onclick()
|
|
return false
|
|
}
|
|
}
|
|
}, true)
|
|
|
|
function updatePassiveAssist(lat,lng,dist,cors) {
|
|
getAssistAsync(lat, lng, dist, 3, cors, function(resp){
|
|
if (!stopped) {
|
|
p = "Place Name: " + resp.placeName + "<br>"
|
|
if (resp.weather != null) {
|
|
p += "Weather: " + resp.weather.status + "<br>"
|
|
if (resp.weather.currentTemprature != "") {
|
|
p += "Temprature: " + resp.weather.currentTemprature + "<br>"
|
|
}
|
|
}
|
|
p += "<br>"
|
|
p += `<a href="https://crawlerop.github.io/lpads/lpadsjs/mapads_marker.html?localads=true&lat=`+lat+`&lng=`+lng+`">LPAds nearby</a> `
|
|
p += `<a href="https://crawlerop.github.io/lpads/lpadsjs/mapads_marker.html?cors=true&localads=true&lat=`+lat+`&lng=`+lng+`">(CORS)</a> `
|
|
p += `<a href="https://virtualglobetrotting.com/ll/`+lat+`,`+lng+`">VirtualGlobeTrotting</a> `
|
|
p += `<a href="https://www.google.com/maps/place/`+lat+`,`+lng+`/@`+lat+`,`+lng+`,15z/?hl=en&gl=US">Google Maps</a> `
|
|
p += `<a href="https://www.google.com/maps/@`+lat+`,`+lng+`,15z/?hl=en&gl=US">Google Maps (NoPin)</a> `
|
|
p += `<a href="https://geohack.toolforge.org/geohack.php?language=en¶ms=`+lat+`;`+lng+`_type:gh_region:gh_scale:40000&pagename=`+resp.placeName+`">GeoHack</a>`
|
|
p += ` <button onclick="navigator.clipboard.writeText('${lat}, ${lng}')">Copy Coords</button> <button onclick="navigator.clipboard.writeText('geo:${lat},${lng}')">Copy geoURI</button>`
|
|
p += "<br><b>The data will update every 5 seconds.</b>"
|
|
res.innerHTML = p
|
|
if (!stopped) {
|
|
setTimeout(function(){
|
|
if (!stopped) {
|
|
res.innerHTML = res.innerHTML.replace("The data will update every 5 seconds.", "Updating...");
|
|
updatePassiveAssist(lat,lng,dist,cors)
|
|
}
|
|
}, 5000)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
try {
|
|
up = new URLSearchParams(window.location.search)
|
|
if (up.get('q') != null) {
|
|
document.getElementById("search2").value = up.get('q')
|
|
}
|
|
if (up.get('type') != null) {
|
|
document.getElementById("search4").value = up.get('type')
|
|
}
|
|
if (up.get('dist') != null) {
|
|
document.getElementById("search8").value = up.get('dist')
|
|
}
|
|
|
|
if (up.get('exact') == "true") {
|
|
document.getElementById("search5").checked = true
|
|
}
|
|
if (up.get('lat') != null && up.get('lng') != null) {
|
|
updatePassiveAssist(up.get('lat'), up.get('lng'), document.getElementById("search8").value, up.get('cors') == "true")
|
|
}
|
|
} catch (e) {
|
|
//console.log(e)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|