Skip to content

Instantly share code, notes, and snippets.

@albacoretuna

albacoretuna/index.html

Last active August 29, 2015 14:11
Show Gist options
  • Save albacoretuna/a8abbe4f1077db140b42 to your computer and use it in GitHub Desktop.
Save albacoretuna/a8abbe4f1077db140b42 to your computer and use it in GitHub Desktop.
Download ZIP
Sekender A HTML5 app to find the nearest second hand store.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- I have used jQuery Mobile for the UI, Google api for the map. So here comes all the js libraries, jquery, jquery mobile, google maps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<!-- The map api is in the script.js -->
<script src="script.js"></script>
</head>
<body>
<!-- Start of the home page -->
<!-- jQuery Mobile can turn divs into pages, in other wrods for each page in my app, I only have to define a div, with the data role property of page. Navigation between the pages is done by linkinig to the #IdOfThePage-->
<div data-role="page" id="my-page">
<!-- Inside each div can come a header, content and footer div. Here comes the header -->
<div data-role="header" data-theme="b">
<h1>Sekender</h1>
</div>
<!-- Here comes the content div -->
<div data-role="content" class="ui-content">
<ul data-role="listview" id="my-listview">
<li data-icon="location"><a href="#findclosest">Find The Closest Shop</a></li>
<li data-icon="bars"><a href="#pageallshops">All Shops</a></li>
<li data-icon="heart"><a href="#pagewhybuy" data-rel="dialog">Why Buy Used Stuff?</a></li>
<li data-icon="info"><a href="#popup" data-rel="dialog">Help</a></li>
</ul>
</div>
<!-- And the footer -->
<div data-role="footer">
<div data-role="header" data-theme="b">
<div data-role="navbar" data-theme="b">
<ul>
<li><a href="#pagewhybuy" data-rel="dialog">Why Used Stuff</a></li>
<li><a href="#my-page">Home</a></li>
<li><a href="#popup" data-rel="dialog">Help</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Start of the second page, all shops -->
<!-- Just like the last page, comes the header, contetn and footer -->
<div data-role="page" id="pageallshops">
<div data-role="header" data-theme="b">
<h1>Sekender</h1>
</div>
<div data-role="content" class="ui-content">
<ul data-role="listview">
<li> Sinikallinontie 1, Espoo </li>
<li> Asemakuja 3, Espoo</li>
<li> Merituulentie 30, Espoo</li>
<li> Ylkartanonkuja 1, Espoo</li>
<li> Sinikallinontie 1, Espoo </li>
<li> Asemakuja 3, Espoo</li>
<li> Merituulentie 30, Espoo</li>
<li> Ylkartanonkuja 1, Espoo</li>
</ul>
</div>
<div data-role="footer">
<div data-role="header" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#pagewhybuy" data-rel="dialog">Why Used Stuff</a></li>
<li><a href="#my-page">Home</a></li>
<li><a href="#popup" data-rel="dialog">Help</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Start of the third page, why buy used stuff? -->
<!-- This page is turned into a dialog box, it's completely like the other pages, but it's called with a data-role="dialog" -->
<div data-role="page" id="pagewhybuy">
<div data-role="header" data-theme="b">
<h1>Why Buy Used Stuff?</h1>
</div>
<div data-role="content" class="ui-content">
<H4>To Save the Nature!</H4>
<p>We all have to use the resources wisely.</p>
</div>
<div data-role="footer" data-theme="b">
<h4></h4>
</div>
</div>
</div>
<!-- Start of the forth page, it's a jquery mobile popup -->
<!-- This page is turned into a dialog box, it's completely like the other pages, but it's called with a data-role="dialog" -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="b">
<h1>Sekender</h1>
</div>
<div data-role="content" class="ui-content">
<H4> An App To Promote Shopping In Second Hand Stores</H4>
<p>Version: -2 </p>
<p>Contact Omid if you have any questions.</p>
</div>
<div data-role="footer" data-theme="b">
<h4></h4>
</div>
</div>
<!-- Start of the map page, find the closest shop -->
<div data-role="page" id="findclosest" data-url="findclosest">
<div data-role="header" data-theme="b">
<h1>Sekender</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
<div data-role="footer">
<div data-role="header" data-theme="b">
<div data-role="navbar">
<ul>
<li><a href="#pagewhybuy" data-rel="dialog">Why Used Stuff</a></li>
<li><a href="#my-page">Home</a></li>
<li><a href="#popup" data-rel="dialog">Help</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
/*
* This Code is basically from google api samples, I just added some markers.
* I hope I can do some real calculations for finding the nearest shop in near future.
* The code samples were available for that as well, but I didn't understand those so I didn't
* use them.
*/
$( document ).on( "pageinit", "#findclosest", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); // Default to Hollywood, CA when no geolocation support
if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
drawMap(defaultLatLng); // Failed to find location, show default map
}
//
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Adding You are Here Marker
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "You are here"
});
// Adding a sample second hand store
var kirppis1 = new google.maps.Marker({
position: new google.maps.LatLng(60.1420658,24.6669204),
map: map,
title: "Fida, Suokka, Espoo",
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
// Adding a sample second hand store
var kirppis2 = new google.maps.Marker({
position: new google.maps.LatLng(60.2047459,24.6592818),
map: map,
title: "Fida, Espoonkeskus, Espoo",
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
// Adding a sample second hand store
var kirppis3 = new google.maps.Marker({
position: new google.maps.LatLng(60.8780374,21.697345),
map: map,
title: "Leppis, Leppävaara, Laitila",
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
}
});
Raw
styles.css
/*
* Only used for the google map size, and the whole background.
*/
.ui-page {
background:#2b2e31;
}
#findclosest, #map-canvas { width: 100%; height: 90%; padding: 0; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment