|
|
@@ -9,217 +9,39 @@ |
|
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
|
|
<script type="text/javascript" src="map-service.js"></script>
|
|
|
<script type="text/javascript" src="templates.js"></script>
|
|
|
<script type="text/javascript" src="home-control.js"></script>
|
|
|
<script type="text/javascript" src="search-control.js"></script>
|
|
|
<script type="text/javascript" src="location-control.js"></script>
|
|
|
<script type="text/javascript" src="movie-control.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="map-canvas"></div>
|
|
|
<script type="text/javascript">
|
|
|
/*
|
|
|
* NOTE: this (probably) isn't how you should be doing JavaScript!
|
|
|
*/
|
|
|
var map;
|
|
|
/*
|
|
|
* NOTE: this (probably) isn't how you should be doing JavaScript!
|
|
|
*/
|
|
|
var map;
|
|
|
|
|
|
function initialize() {
|
|
|
var mapDiv = document.getElementById('map-canvas');
|
|
|
map = new MapService(window.google, mapDiv);
|
|
|
function initialize() {
|
|
|
var mapDiv = document.getElementById('map-canvas');
|
|
|
map = new MapService(window.google, mapDiv);
|
|
|
|
|
|
var searchControlDiv = document.createElement('div');
|
|
|
searchControlDiv.id = 'top';
|
|
|
searchControlDiv.className = 'top';
|
|
|
var searchControlDiv = document.createElement('div');
|
|
|
searchControlDiv.id = 'top';
|
|
|
searchControlDiv.className = 'top';
|
|
|
|
|
|
new SearchControl(searchControlDiv, map);
|
|
|
map.addView(searchControlDiv, 'TOP_LEFT');
|
|
|
new SearchControl(searchControlDiv, map);
|
|
|
map.addView(searchControlDiv, 'TOP_LEFT');
|
|
|
|
|
|
var homeControlDiv = document.createElement('div');
|
|
|
homeControlDiv.id = 'bottom_panel';
|
|
|
homeControlDiv.className = 'bottom_panel';
|
|
|
var homeControlDiv = document.createElement('div');
|
|
|
homeControlDiv.id = 'bottom_panel';
|
|
|
homeControlDiv.className = 'bottom_panel';
|
|
|
|
|
|
new HomeControl(homeControlDiv, map);
|
|
|
map.addView(homeControlDiv, 'BOTTOM_CENTER');
|
|
|
}
|
|
|
new HomeControl(homeControlDiv, map);
|
|
|
map.addView(homeControlDiv, 'BOTTOM_CENTER');
|
|
|
}
|
|
|
|
|
|
google.maps.event.addDomListener(window, 'load', initialize);
|
|
|
|
|
|
/*
|
|
|
* Search Panel
|
|
|
*/
|
|
|
function SearchControl(controlDiv, map) {
|
|
|
var movieClicked = function(item) {
|
|
|
map.clearMarkers();
|
|
|
map.setOptions({ streetViewControl: false, zoomControl: true });
|
|
|
document.getElementById('films_results').innerHTML = '';
|
|
|
document.getElementById('q').value = item.title;
|
|
|
showMovieDetail(item);
|
|
|
};
|
|
|
|
|
|
var searchInput = document.createElement('input');
|
|
|
searchInput.type = 'search';
|
|
|
searchInput.name = 'q';
|
|
|
searchInput.id = 'q';
|
|
|
searchInput.placeholder = 'Enter film title...';
|
|
|
controlDiv.appendChild(searchInput);
|
|
|
|
|
|
new window.Autocomplete(searchInput, {
|
|
|
url: '/movies/search',
|
|
|
param: 'q',
|
|
|
label: 'title',
|
|
|
value: 'releaseYear',
|
|
|
select: function(item) {
|
|
|
movieClicked(item);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
var resultsUI = document.createElement('div');
|
|
|
resultsUI.id = 'films_results';
|
|
|
controlDiv.appendChild(resultsUI);
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Movie Detail
|
|
|
*/
|
|
|
function showLocation(detail, location) {
|
|
|
return function() {
|
|
|
map.zoomView(location.geo.lat, location.geo.lng);
|
|
|
|
|
|
var locationDiv = document.getElementById('location_detail');
|
|
|
|
|
|
if (!locationDiv) {
|
|
|
locationDiv = document.createElement('div');
|
|
|
document.getElementById('bottom_panel').appendChild(locationDiv);
|
|
|
}
|
|
|
|
|
|
locationDiv.id = 'location_detail';
|
|
|
locationDiv.className = 'location_detail';
|
|
|
locationDiv.style.display = '';
|
|
|
locationDiv.innerHTML = templates.location(location);
|
|
|
|
|
|
var sateliteViewButton = document.createElement('input');
|
|
|
sateliteViewButton.type = 'button';
|
|
|
sateliteViewButton.value = 'Satelite View';
|
|
|
|
|
|
sateliteViewButton.addEventListener('click', function() {
|
|
|
|
|
|
if (this.value === 'Satelite View') {
|
|
|
map.sateliteView(location.geo.lat, location.geo.lng);
|
|
|
this.value = 'Back to Roadmap'
|
|
|
} else {
|
|
|
map.roadmapView(location.geo.lat, location.geo.lng);
|
|
|
this.value = 'Satelite View'
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
locationDiv.appendChild(sateliteViewButton);
|
|
|
|
|
|
var streetViewButton = document.createElement('input');
|
|
|
streetViewButton.type = 'button';
|
|
|
streetViewButton.value = 'Street View';
|
|
|
|
|
|
streetViewButton.addEventListener('click', function() {
|
|
|
map.streetView(location.geo.lat, location.geo.lng);
|
|
|
});
|
|
|
|
|
|
locationDiv.appendChild(streetViewButton);
|
|
|
|
|
|
var backToFilm = document.createElement('input');
|
|
|
backToFilm.type = 'button';
|
|
|
backToFilm.value = 'Back to Film';
|
|
|
|
|
|
backToFilm.addEventListener('click', function() {
|
|
|
map.reset();
|
|
|
var location_detail = document.getElementById('location_detail');
|
|
|
if (location_detail) {
|
|
|
location_detail.style.display = 'none';
|
|
|
}
|
|
|
|
|
|
var film_detail = document.getElementById('film_detail');
|
|
|
if (film_detail) {
|
|
|
film_detail.style.display = '';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
locationDiv.appendChild(backToFilm);
|
|
|
|
|
|
document.getElementById('film_detail').style.display = 'none';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Movie Detail
|
|
|
*/
|
|
|
function showMovieDetail(item) {
|
|
|
displayLoadingPanel(item.title);
|
|
|
getMoveDetail(item.title, item.director);
|
|
|
plotLocations(item);
|
|
|
}
|
|
|
|
|
|
function plotLocations(item) {
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
xhr.onload = function() {
|
|
|
var response = this.response;
|
|
|
for (var i = 0; i < response.locations.length; i++) {
|
|
|
map.plotLocation(
|
|
|
response.locations[i].geo.lat,
|
|
|
response.locations[i].geo.lng,
|
|
|
showLocation(response, response.locations[i]));
|
|
|
};
|
|
|
}
|
|
|
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(item.title) + '&director=' + encodeURIComponent(item.director));
|
|
|
xhr.responseType = "json";
|
|
|
xhr.send();
|
|
|
}
|
|
|
|
|
|
function displayLoadingPanel(response) {
|
|
|
var locationDiv = document.getElementById('location_detail');
|
|
|
if (locationDiv) {
|
|
|
locationDiv.style.display = 'none';
|
|
|
}
|
|
|
|
|
|
var dashboard = document.getElementById('dashboard');
|
|
|
if (dashboard) {
|
|
|
dashboard.style.display = 'none';
|
|
|
}
|
|
|
|
|
|
if (!document.getElementById('film_detail')) {
|
|
|
|
|
|
// Set CSS for the control interior.
|
|
|
var controlText = document.createElement('div');
|
|
|
controlText.id = 'film_detail';
|
|
|
controlText.className = 'film_detail';
|
|
|
controlText.innerHTML = templates.loading(response);
|
|
|
|
|
|
document.getElementById('bottom_panel').appendChild(controlText);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
var controlText = document.getElementById('film_detail');
|
|
|
controlText.innerHTML = templates.loading(response);;
|
|
|
controlText.style.display = '';
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function getMoveDetail(title, director) {
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
xhr.onload = function() {
|
|
|
var detail = this.response;
|
|
|
|
|
|
document.getElementById('film_detail').innerHTML = templates.movie(detail);
|
|
|
}
|
|
|
xhr.open("GET", "/movies/content?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
|
|
|
xhr.responseType = "json";
|
|
|
xhr.send();
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* Homepage Panel
|
|
|
*/
|
|
|
function HomeControl(controlDiv, map) {
|
|
|
var dashBoard = document.createElement('div');
|
|
|
dashBoard.innerHTML = templates.home();
|
|
|
dashBoard.id = 'dashboard';
|
|
|
dashBoard.className = 'dashboard';
|
|
|
controlDiv.appendChild(dashBoard);
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
google.maps.event.addDomListener(window, 'load', initialize);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
0 comments on commit
18c69f4