forked from CitadelOnTheMove/treefinder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
199 lines (174 loc) · 10.1 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<?php include_once 'Config.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Tree Finder</title>
<!--------------- Metatags ------------------->
<meta charset="utf-8" />
<!-- Not allowing the user to zoom -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"/>
<!-- iphone-related meta tags to allow the page to be bookmarked -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--------------- CSS files ------------------->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<!--------------- Javascript dependencies ------------------->
<!-- Google Maps JavaScript API v3 -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<!-- Google Maps Utility Library - Infobubble -->
<script type="text/javascript"
src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js">
</script>
<!-- Overlapping markers Library: Deals with overlapping markers in Google Maps -->
<script src="http://jawj.github.com/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<!-- jQuery Library -->
<script src="js/jquery-1.8.2.min.js"></script>
<!-- jQuery Mobile Library -->
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<!-- Page params Library: Used to pass query params to embedded/internal pages of jQuery Mobile -->
<script src="js/jqm.page.params.js"></script>
<!-- Template specific functions and handlers -->
<script src="js/pois-lib.js"></script>
</head>
<body>
<!-- Home Page: Contains the Map -->
<div data-role="page" id="page1" class="page">
<header data-role="header" data-posistion="fixed" data-id="constantNav" data-fullscreen="true">
<span class="ui-title">Tree Finder</span>
<a href="" id="filter" data-icon="gear" data-iconpos="notext" data-theme="a" title="Settings" class="ui-btn-left"> </a>
<a href="#info" data-rel="dialog" data-icon="info" data-iconpos="notext" data-theme="a" title="Info" class="ui-btn-right"> </a>
<div data-role="navbar" class="navbar">
<ul>
<li><a href="#" class="pois-nearme" data-theme="a">Near me</a></li>
<li><a href="#" class="pois-showall ui-btn-active" data-theme="a">Show all</a></li>
<li><a href="#page2" class="pois-list" data-theme="a">List</a></li>
</ul>
</div><!-- /navbar -->
</header>
<div data-role="content" id="map-filter">
<div class="filters-list" id="mapFilterList">
<fieldset data-role="controlgroup" data-mini="true" data-theme="a">
<!-- dynamically filled with data -->
</fieldset>
</div>
<footer data-role="footer" data-posistion="fixed" data-fullscreen="true" class="filter-footer">
<a href="" id="apply" data-icon="gear" data-theme="a" title="Apply" class="ui-btn-right">Apply</a>
</footer>
</div><!--map-filter-->
<div data-role="content" id="map-container">
<div id="map_canvas" class="map_canvas"></div>
</div>
</div>
<!-- List Page: Contains a list with the results -->
<div data-role="page" id="page2" class="page">
<header data-role="header" data-posistion="fixed" data-id="constantNav">
<span class="ui-title">Tree Finder</span>
<fieldset data-role="controlgroup" class="favourites-button">
<input type="checkbox" name="favourites" id="favourites" class="custom" />
<label for="favourites">Favourites</label>
</fieldset>
<a href="" data-icon="back" data-iconpos="notext" data-theme="a" title="Back" data-rel="back" class="ui-btn-right"> </a>
<div data-role="navbar" class="navbar">
<ul>
<li><a href="#" class="pois-nearme" data-theme="a">Near me</a></li>
<li><a href="#" class="pois-showall" data-theme="a">Show all</a></li>
<li><a href="#page2" class="pois-list ui-btn-active" data-theme="a">List</a></li>
</ul>
</div><!-- /navbar -->
</header>
<div class="list-container">
<div class="list-scroll-container">
<div data-role="content" id="list" class="poi">
<ul data-role='listview' data-filter='true' data-theme='b'>
<!-- dynamically filled with data -->
</ul>
</div><!--list-->
<div class="list-pagination-container">
<a id="list-pagination-previous" class="ui-icon ui-icon-arrow-l ui-icon-shadow"> </a>
<span id="list-pagination-text"><!-- dynamically filled with data --></span>
<a id="list-pagination-next" class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </a>
</div>
</div><!--list-scroll-container-->
</div><!--list-container-->
</div><!-- /page -->
<!-- Details Page: Contains the details of a selected element -->
<div data-role="page" id="page3" data-title="Event fullstory page title" class="page">
<header data-role="header" data-posistion="fixed" data-fullscreen="true">
<span class="ui-title">Tree Finder</span>
<a href="" data-icon="back" data-iconpos="notext" data-theme="a" title="Back" data-rel="back" class="ui-btn-right"> </a>
<div data-role="navbar" class="navbar">
<ul>
<li><a href="#" class="pois-nearme" data-theme="a">Near me</a></li>
<li><a href="#" class="pois-showall" data-theme="a">Show all</a></li>
<li><a href="#page2" class="pois-list" data-theme="a">List</a></li>
</ul>
</div><!-- /navbar -->
</header>
<div class="list-container">
<div class="list-scroll-container">
<div data-role="content" id="item">
<!-- dynamically filled with data -->
</div><!--item-->
</div><!--list-scroll-container-->
</div><!--list-container-->
<footer data-role="footer" data-posistion="fixed" data-fullscreen="true">
<a href="" id="addFav" data-icon="star" data-theme="a" title="Add to favourites" data-rel="star" class="ui-btn-center">Add to favourites</a>
<a href="" id="removeFav" data-icon="star" data-theme="a" title="Remove from favourites" data-rel="star" class="ui-btn-center">Remove from favourites</a>
</footer>
</div><!-- /page -->
<!-- Info Page: Contains info of the currently used dataset -->
<div data-role="dialog" id="info">
<header data-role="header">
<span class="ui-title">Dataset Metadata</span>
</header>
<article data-role="content">
<ul data-role="listview">
<!-- dynamically filled with data -->
</ul>
</article>
</div>
<script type="text/javascript">
/****************** Global js vars ************************/
/* GLobal map object */
var map;
/* List of pois read from json object */
var pois = {};
/* List of dataset metadata read from json object */
var meta = {};
/* Holds all markers */
var markersArray = [];
/* Define filters - get them from db */
var filters = <?php include_once CLASSES.'filters.php'; printFilters(); ?>;
/* Remember if a page has been opened at least once */
var lastLoaded = '';
/* Remember if 'near me' marker is loaded */
var isNearMeMarkerLoaded = false;
/*
* Remember if map was initialy loaded. If not
* it means we loaded list page
*/
var isMapLoaded = false;
/*
* Keeps page id to emulate full url using querystring
*/
var pageId = 0;
/* Set infoBubble global variable */
var infoBubble;
/* The coordinates of the center of the map */
//Issy
var mapLat = <?php echo MAP_CENTER_LATITUDE; ?>;
var mapLon = <?php echo MAP_CENTER_LONGITUDE; ?>;
var mapZoom = <?php echo MAP_ZOOM; ?>;
/* The url of the dataset */
var datasetUrl = "<?php echo DATASET_URL; ?>";
/* Just call the initialization function when the page loads */
$(window).load(function() {
globalInit();
});
</script>
</body>
</html>