Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented core map features and additional features #52

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Implemented core map features and additional features #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 78 additions & 69 deletions Map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,97 @@
<html>
<head>
<title>Map Sample</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLIN-kzHDPqPE5xfNOfy_j50bnuPjaR6M&callback=initMap"></script>
<script src="siteData.js"></script>
<script src="Map.js"></script>
<link href="Map.css" rel="stylesheet">
</head>
<body>
<h1>LLamasoft Map Exercise
</h1>
<div class="container">
<h1>LLamasoft Map Exercise
</h1>

<div id="exercise-description">
<div id="instruction-toggle"><span>Instructions</span> <span id="exercise-toggle">-</span></div>
<div id="exercise-description">
<div id="instruction-toggle"><span>Instructions</span> <span id="exercise-toggle">-</span></div>

<div id="exercise-instructions">
<p>
In helping clients understand their supply chains, maps are an important visualization tool.
In this exercise we would like you to take some steps to help make this map more useful.
This example uses Google Maps and their maps API to show information about airports. While
we do not use Google Maps and the maps API, the types of visualizations and map interactions
you are allowed with Google Maps are common. In order to do this exercise you will need to get
an API key for Google Maps if you do not already have one. Put the API key in the appropriate place
in this file.
</p>

<p>
Currently this page loads a list of airports into a drop down. You can select an airport
and it&quot;s code and city will display in the data table. A marker will be placed on the
map displaying the airport. If you roll your mouse over the marker the airport&quot;s code
will be displayed.
</p>

<p>
The current code is very simple. Many improvements need to be made:
<ul>
<li>Fill in the rest of the data in the table when a user selects an airport.</li>
<li>Allow a user to remove a marker</li>
<li>Sort the list so it is easier to find airports</li>
</ul>
</p>

<p>
Some more things to think about
<ul>
<li>We are constantly struggling with displaying as much data as simply and
streamlined as possible. Is there something you can do with the layout to show
the same information using less screen real estate?</li>

<li>Regarding markers, what happens with the existing code when you select an item multiple times?</li>

<li>If a user selects an airport that is not currently shown on the map, how do they find it?
Can you make this easier?</li>
</ul>
</p>
<div id="exercise-instructions">
<p>
In helping clients understand their supply chains, maps are an important visualization tool.
In this exercise we would like you to take some steps to help make this map more useful.
This example uses Google Maps and their maps API to show information about airports. While
we do not use Google Maps and the maps API, the types of visualizations and map interactions
you are allowed with Google Maps are common. In order to do this exercise you will need to get
an API key for Google Maps if you do not already have one. Put the API key in the appropriate place
in this file.
</p>

<p>
Currently this page loads a list of airports into a drop down. You can select an airport
and it&#39;s code and city will display in the data table. A marker will be placed on the
map displaying the airport. If you roll your mouse over the marker the airport&#39;s code
will be displayed.
</p>

<p>
The current code is very simple. Many improvements need to be made:
<ul>
<li>Fill in the rest of the data in the table when a user selects an airport.</li>
<li>Allow a user to remove a marker</li>
<li>Sort the list so it is easier to find airports</li>
</ul>
</p>

<p>
Some more things to think about
<ul>
<li>We are constantly struggling with displaying as much data as simply and
streamlined as possible. Is there something you can do with the layout to show
the same information using less screen real estate?</li>

<li>Regarding markers, what happens with the existing code when you select an item multiple times?</li>

<li>If a user selects an airport that is not currently shown on the map, how do they find it?
Can you make this easier?</li>
</ul>
</p>
</div>
</div>
</div>

<div id="airport-map">
</div>

<div id="airport-data">
<div id="airport-controls">
Airports: <select id="airport-list">
</select>

<div id="airport-map">
</div>

<div id="airport-settings">
<div id="setting-name">
<div>Code</div>
<div>City</div>
<div>State</div>
<div>Full Name</div>
<div>Latitude</div>
<div>Longitude</div>
<div id="airport-data">
<div>
<span id="airport-controls">
Airports: <select id="airport-list">
</select>
</span>
<span>
<button type="button" id="deleteAirportButton">Delete Current Airport</button>
</span>
</div>
<div id="setting-value">
<div id="setting-code"></div>
<div id="setting-city"></div>
<div id="setting-state"></div>
<div id="setting-name"></div>
<div id="setting-lat"></div>
<div id="setting-long"></div>

<div id="airport-settings">
<div id="setting-name">
<div>Code</div>
<div>City</div>
<div>State</div>
<div>Full Name</div>
<div>Latitude</div>
<div>Longitude</div>
</div>
<div id="setting-value">
<div id="airport-code"></div>
<div id="airport-city"></div>
<div id="airport-state"></div>
<div id="airport-name"></div>
<div id="airport-lat"></div>
<div id="airport-long"></div>
</div>
</div>
</div>
</div>
Expand Down
61 changes: 50 additions & 11 deletions Map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,73 @@ var globalMap;

$(function() {

// Hashtable of all markers, key is airportCode
var globalMarkers = {};

//
var currAirportCode = '';

var MapFcns = {
loadSiteList: function () {
var sortedSites = _.sortBy(sites, function(site) {
return site.Code;
});

var airportList = $('#airport-list');
airportList.html('');
airportList.append('<option value=""></option>');
for (var i in sites) {
var newOption = $('<option value="' + sites[i].Code + '">' + sites[i].Code + '</option>');
for (var i in sortedSites) {
var newOption = $('<option value="' + sortedSites[i].Code + '">' + sortedSites[i].Code + '</option>');
airportList.append(newOption);
}
},

siteListChange: function() {
siteListChange: function() {
var ctl = $(this),
airportCode = ctl.val();
if(airportCode) {
var currAirport = _.findWhere(sites, {Code: airportCode});
$('#setting-code').text(currAirport.Code);
$('#setting-city').text(currAirport.City);

var marker = new google.maps.Marker({

if(airportCode) {
var currAirport = _.findWhere(sites, {Code: airportCode});
currAirportCode = currAirport.Code;

var siteName = currAirport.FullSiteName.split('_')[2];

$('#airport-code').text(currAirport.Code);
$('#airport-city').text(currAirport.City);
$('#airport-state').text(currAirport.State);
$('#airport-name').text(siteName);
$('#airport-lat').text(currAirport.Latitude);
$('#airport-long').text(currAirport.Longitude);

var marker;

// Create marker if it doesn't exist already
if (!globalMarkers.hasOwnProperty(currAirportCode)) {
marker = new google.maps.Marker({
position: {lat: currAirport.Latitude, lng: currAirport.Longitude},
map: globalMap,
title: currAirport.Code
});

globalMarkers[currAirport.Code] = marker;
} else {
marker = globalMarkers[currAirport.Code];
}

// If marker is not within bounds of map, jump to marker
if (!globalMap.getBounds().contains(marker.getPosition())) {
globalMap.setCenter(marker.getPosition());
}
}
}
}

$('#deleteAirportButton').click(function() {
if (globalMarkers.hasOwnProperty(currAirportCode)) {
globalMarkers[currAirportCode].setMap(null);
delete globalMarkers[currAirportCode];
}
});

MapFcns.loadSiteList();
$('#airport-list').change(MapFcns.siteListChange);
Expand All @@ -45,6 +84,7 @@ $('#exercise-toggle').click(function() {
}
});


});


Expand All @@ -61,5 +101,4 @@ function initMap() {
scrollwheel: true,
zoom: 6
});

}
}