API:Nearby places viewer

#!/usr/bin/python3
"""
 nearby.py
 MediaWiki Action API Code Samples
 Nearby places viewer app: Demo of geo search for wiki pages near a location using
 the Geolocation API and MediaWiki Action API's Geosearch module.
 MIT license
"""
fromflaskimport Flask, request, render_template, jsonify
importrequests
fromhaversineimport haversine
APP = Flask(__name__)
SESSION = requests.Session()
API_ENDPOINT = 'https://en.wikipedia.org/w/api.php'
@APP.route('/', methods=['GET', 'POST'])
defindex():
""" Displays the index page accessible at '/'
 """
 if request.method == "POST":
 data = request.get_json()
 latitude = data['latitude']
 longitude = data['longitude']
 results = fetch_places_nearby(latitude, longitude)
 return jsonify(results=results)
 return render_template('places.html')
deffetch_places_nearby(lat, lon):
""" Fetches nearby places via MediaWiki Action API's Geosearch module
 """
 params = {
 "action": "query",
 "prop": "coordinates|pageimages|description|info",
 "inprop": "url",
 "pithumbsize": 144,
 "generator": "geosearch",
 "ggsradius": 10000,
 "ggslimit": 10,
 "ggscoord": str(lat) + "|" + str(lon),
 "format": "json",
 }
 res = SESSION.get(url=API_ENDPOINT, params=params)
 data = res.json()
 places = data['query'] and data['query']['pages']
 results = []
 for k in places:
 title = places[k]['title']
 description = places[k]['description'] if "description" in places[k] else ''
 thumbnail = places[k]['thumbnail']['source'] if "thumbnail" in places[k] else ''
 article_url = places[k]['fullurl']
 cur_loc = (lat, lon)
 place_loc = (places[k]['coordinates'][0]['lat'], places[k]['coordinates'][0]['lon'])
 distance = round(haversine(cur_loc, place_loc, unit='mi'), 2)
 results.append({
 'title': title,
 'description': description,
 'thumbnail': thumbnail,
 'articleUrl': article_url,
 'distance': distance
 })
 return results
if __name__ == '__main__':
 APP.run(debug=True)

$(document).ready(function(){
varx=document.getElementById("places-list");

$(".btn-search").click(function(){
getLocation();
});
functiongetLocation(){
x.innerHTML="Searching your location..";
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(fetchPlaces);
}else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
functionfetchPlaces(position){
vardata={
"latitude":position.coords.latitude,
"longitude":position.coords.longitude
};
$.ajax({
url:"/",
type:"POST",
data:JSON.stringify(data),
contentType:"application/json",
dataType:"json",
success:function(response){
varplaces=response["results"],
no_thumb="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Gnome-image-missing.svg/200px-Gnome-image-missing.svg.png";
x.innerHTML="";

for(varpinplaces){
varthumbnail=places[p].thumbnail||no_thumb;
x.innerHTML+="<div class=\"item\"><div class=\"col-xs-8 no-padding\"><h5><a href=\""+
places[p]["articleUrl"]+"\" target=\"_blank\">"+
places[p]["title"]+"</a></h5><p>"+
places[p]["description"]+"</p><span>📍"+places[p]["distance"]+
" miles</p></div><div class=\"col-xs-4 no-padding\"><img src=\""+
thumbnail+" \"></div></div>";
}
},
error:function(){x.innerHTML="An error occurred while fetching places!";}
});
}
});

.places-container.no-padding{
padding:0;
}
.places-container.info{
text-align:center;
}
.places-container.viewer-heading{
font-family:'Amatic SC',cursive;
font-size:2.5em;
font-weight:normal;
color:black;
}
.places-container.btn-search{
font-size:16px;
padding:10px25px;
cursor:pointer;
text-decoration:none;
color:white;
border-radius:4px;
background-color:#7c7ce0;
}
.places-container.list{
margin-top:20px;
}
.places-container.item{
min-height:100px;
}
.places-container.itemp,
span{
font-size:12px;
margin:2px;
}
.places-container.itemspan{
color:gray;
}
.places-container.itemimg{
float:right;
width:80px;
height:80px;
border-radius:5px;
object-fit:cover;
}
.places-container.itema{
color:#7c7ce0;
}

<title>Nearby places viewer</title>
<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/static/places.js"></script>
<link rel="stylesheet" href="//tools-static.wmflabs.org/cdnjs/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//tools-static.wmflabs.org/fontcdn/css?family=Amatic+SC:700">
<link rel="stylesheet" href="/static/style.css">
<div class="container places-container col-lg-4 col-xs-12">
 <div class="col-xs-12 no-padding info">
 <h1 class="viewer-heading">Nearby places viewer</h1>
 <button class="btn-search">Click here to search</button>
 </div>
 <div class="col-xs-12 no-padding list" id="places-list">
 </div>
</div>