Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (75 sloc) 3.49 KB
<!doctype html>
<html>
<head>
<title>Geo Search Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="shortcut icon" href="./favicon.ico">
</head>
<body>
<header>
<h1>Airports - Geo Search Demo</h1>
<a href="" class="change_page_state page_mode mode_button active" data-mode="bounding" data-state="rectangle">Bounding box</a>
<a href="" class="change_page_state page_mode mode_button" data-mode="around" data-state="ip">Around a location</a>
<p class="page_mode active" data-mode="bounding">
A bounding box filters the scope of the results to a specified zone.<br>
This zone can be
<a href="" class="change_page_state state_link active" data-mode="bounding" data-state="rectangle">a rectangle</a>, or a
<a href="" class="change_page_state state_link" data-mode="bounding" data-state="polygon">a polygon</a>.
</p>
<p class="page_mode" data-mode="around">
Searching around a location can also rank the results by distance.<br>
It can be done via the
<a href="" class="change_page_state state_link" data-mode="around" data-state="ip">IP address</a>, or by providing the lat/lng of a point:
<a href="" class="change_page_state state_link" data-mode="around" data-state="nyc">NYC</a>,
<a href="" class="change_page_state state_link" data-mode="around" data-state="london">London</a>,
<a href="" class="change_page_state state_link" data-mode="around" data-state="sydney">Sydney</a>...
</p>
</header>
<!-- Hits and Map -->
<section class="map_section">
<div class="left-column">
<input id="search-input" type="text" autocomplete="off" spellcheck="false" autocorrect="off" placeholder="Search by name, city, airport code..."/>
<div id="hits"></div>
</div>
<div class="right-column">
<div id="map"></div>
</div>
<div class="clear-both"></div>
</section>
<!-- /Hits and Map -->
<!-- Footer -->
<footer>
Geo-Search demo -
Read the <a href="https://www.algolia.com/doc/geo-search/geo-search-overview">guide</a> -
Source Code on <a href="https://github.com/algolia/demo-geo-search">GitHub</a> -
Powered by <a href="http://www.algolia.com/">Algolia</a>
</footer>
<!-- /Footer -->
<!-- Hit template -->
<script type="text/template" id="hits-template">
{{#hits}}
<div class="hit">
<h3 class="hit-airport-code">{{{ _highlightResult.iata_code.value }}}</h3>
<h2 class="hit-name">{{{ _highlightResult.name.value }}}{{^ displayCity }} - {{{ _highlightResult.city.value }}}{{/displayCity}}</h2>
<p class="hit-location">{{{ _highlightResult.country.value }}}<span class="hit-distance"> {{ distance }}</span></p>
</div>
{{/hits}}
</script>
<!-- /Hit template -->
<!-- No-Results template -->
<script type="text/template" id="no-results-template">
<div id="no-results-message">
<p>We didn't find any airports in this location.</p>
</div>
</script>
<!-- /No-Results template -->
<!-- Javascript -->
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="//cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
<script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.common.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyANI0b75Bfibd1nV4dbbu8eKEk3GUiVRMA"></script>
<script src="js/app.js"></script>
<!-- /Javascript -->
</body>
</html>