forked from llamasoft-dotcom-demo/map-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Map.html
91 lines (81 loc) · 3.88 KB
/
Map.html
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
<!DOCTYPE html>
<html>
<head>
<title>Map Sample</title>
<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 src="siteData.js"></script>
<script src="Map.js"></script>
<link href="Map.css" rel="stylesheet">
</head>
<body>
<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-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"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"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 id="airport-map">
</div>
<div id="airport-data">
<div id="airport-controls">
Airports: <select id="airport-list">
</select>
</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="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>
</div>
</div>
</body>
</html>