lpads/lpadsjs/search.html
2021-11-24 20:07:07 +07:00

153 lines
No EOL
11 KiB
HTML

<html>
<head>
<title>MapAds search</title>
<script src="https://cdn.jsdelivr.net/openlocationcode/latest/openlocationcode.js"></script>
</head>
<body>
<noscript>Please enable the javascript for the search function 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>
<input type="checkbox" id="search5" value="exact">
<label for="exact" id="search6">Exact Matching</label>
<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")
const tips = [
"Search for NYC!",
"Dock in Search!",
"Find India!",
"\"City Of\" <i><b>only</b></i> in search should have many cities!",
"We have added many options to the search page!",
"With single mode, you can reverse geocode for example: 116,-32",
"There is Four Corners while in POI mode!",
"ADL on Search!",
"Type Colorado. You won't be mistaken!",
"Are Mount Everest exist on the search page?",
"13 Powell Crescent is a name on many localities!",
"Quetzi lives in Bury, so does the search!",
"Using 1 York Merredin as a search text, 4 towns in the Wheatbelt area appears, including the road end location!",
"Main roads like Heal Street are applied besides ADG! like: the street name applied in a suburb of the 3th largest city in AU!",
"This search is not powered with YotaLibrary!",
"Wanna go for flight? Go for JFK!",
"Great Barrier Reef should have located in the <b><i>Whitsunday</i></b> region!",
"Are phosphors were made by <i>Proserpine</i>?",
"This app is not made by Yoting!",
"What is VTR, It is located in Piscataway!",
"Are Story Bridge were made in Iowa?",
"Speaking of Nelson Mandela, find Soweto on the search!",
"So much stuffs in <i><b>Leeming!</b></i>",
"One town is a capital for a district, but not a capital for a county. Like the <i><b>Royal Leamington Spa</b></i>.",
"In MA, Somerville is not where East Cambridge was located!",
"There's many names that starts with Prospect. Try adding NS or S to make it look more specific!",
"Since Waila doesn't have an ads, type Why to get more ads!",
"Try searching for Wikimedia, the owner of Wikipedia!",
"<i>\"walt di\"</i> should show the results of a theme park!",
"With powerful search features, now, you can search ads for a places with unusual name! For example: Llanfairpwllgwyngyll (this place, while being the second longest in the world, may push LPAds to it's limits.)",
"You can now search by id. For example: locality.13899649970731870 or locality.13131003181470460 returns Waila!",
"Mapbox DC and Foursquare HQ were actually the headquarters for Mapbox and Foursquare respectively.",
"We have added support for GeoURI protocol. For example, type geo:35.335992,-79.038636 on search bar.",
"You can now copy coordinates and geoURI to clipboard!",
"We also had support for Maps PassiveAssist with seperate library. Visit: github.com/crawlerop/psassist right now!",
"Finally, after several hours, we have added the editor to make overriding ads much easier!",
"We are working on async support on LPAds!",
"Jewellery Quarter is full of Diamonds!",
"Somebody could have played Minecraft with Rocketts Landing mod (aka Advanced Rocketry) installed!",
"Large Cities (eg Tokyo) = So many ads!",
"Our next library awaits!",
//"Plus Codes! Try 5R4HCXQ3+J9R!"
"Plus Codes! Try 87G8P2J7+69R!"
]
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() {
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="mapads_marker.html?localads=true&lat=`+feature.center[1]+`&lng=`+feature.center[0]+`">`+feature.place_name+` (`+OpenLocationCode.encode(feature.center[1], feature.center[0], OpenLocationCode.CODE_PRECISION_EXTRA)+`) `+` - `+feature.center[1]+`, `+feature.center[0]+`</a> - <a href="mapads_marker.html?cors=true&localads=true&lat=`+feature.center[1]+`&lng=`+feature.center[0]+`">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)
</script>
</body>
</html>