forked from graphhopper/directions-api-js-client
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (199 loc) · 10.3 KB
/
index.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
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript examples for the GraphHopper Directions API </title>
<link type="image/png" rel="icon" href="https://www.graphhopper.com/favicon.ico"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="css/leaflet.css?v=1.3.1" />
<script type="text/javascript" src="js/leaflet.js?v=1.3.1"></script>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/bouncemarker.js"></script>
<script type="text/javascript" src="dist/graphhopper-client.js?v=0.9.0-4"></script>
<!-- map matching currently needs togeojson.js -->
<script type="text/javascript" src="js/togeojson.js"></script>
<script type="text/javascript" src="js/demo.js?v=0.9.0-4"></script>
</head>
<body>
<div id="main">
<div id="logo" class="left">
<a href="https://graphhopper.com">
<img src="https://graphhopper.com/dashboard/img/header.png" alt="GraphHopper Logo"/>
</a>
</div>
<div id="enter_key">
<div>
<img id="custom_key_enabled" class="hide" src="img/included.png" alt="using custom API key"/>
<input id="custom_key_input" placeholder="Enter your API key"/>
<button id="custom_key_button">Set</button>
</div>
<ul id="custom_key_desc" class="small right">
<li><a
href="https://graphhopper.com/#directions-api"><b>Free Sign Up</b></a></li>
<li><a href="https://github.com/graphhopper/directions-api-js-client">Fork this at Github</a></li>
<li><a href="https://graphhopper.com/api/1/docs">Directions API Documentation</a></li>
</ul>
</div>
<h2 class="left">Directions API Live Examples</h2>
<div class="clear"></div>
<div class="horizontal">
<ul id="mynavigation" class="tabs-menu">
<li class="current"><a href="#routing">Routing API</a></li>
<li><a href="#optimization">Route Optimization API</a></li>
<li><a href="#geocoding">Geocoding API</a></li>
<li><a href="#map-matching">Map Matching API</a></li>
<li><a href="#isochrone">Isochrone API</a></li>
<li><a href="#matrix">Matrix API</a></li>
</ul>
</div>
<div id="routing" class="tab-content">
<div style="padding-bottom: 10px;">
The Routing API calculates the best path between two or more locations.
Calculate your own route via clicking on the map and try
<a href="https://graphhopper.com/maps">GraphHopper Maps</a> for a more advanced
routing demo.
</div>
<br/>
<div id="routing-response" style="float: right; padding-left: 20px;">
</div>
<div id="routing-error" style="float: right; padding-left: 20px;">
</div>
<div id="routing-map" style="cursor: default; height:600px; width: 1000px;"></div>
<div id="instructions-header">
Click to see instructions for route
<div id="instructions" class="hide"></div>
</div>
</div>
<div id="optimization" class="tab-content">
<div>
The Route Optimization API gets several locations and vehicles as input and calculates the best
route for every of the vehicles, where several constraints like capacity or time windows can be added.
Click on the map to add locations and then click 'optimize' or just on one of the examples.
Or use our more advanced <a href="https://graphhopper.com/dashboard/#/editor">route editor</a> in the dashboard.
</div>
<div id="button-list" class="right">
vehicles:
<input id="optimize_vehicles" style="max-width: 60px" type="number" min="1" max="4" value="2"/>
<button id="optimize_button">Optimize</button>
<button id="vrp_clear_button">Clear</button>
</div>
<div class="clear"></div>
<div id="vrp-map-wrapper">
<div id="vrp-map" style="cursor: default; height:550px; width: 800px;"></div>
<div id="example-list">
<div>
<button id="set_example_vrp">Set Vehicle Routing</button>
</div>
<div>
<button id="set_example_tsp">Set Salesman</button>
</div>
<div>
<button id="set_example_tsp2">Set Open Salesman</button>
</div>
<!--
<div>
<button id="set_example_us_tour">Set Beauty US Tour</button>
</div>
<div>
<button id="set_example_uk_tour">Set Election Campaign UK</button>
</div>
-->
</div>
</div>
<div class="clear"></div>
<div id="vrp-error" style="float: right; padding-left: 20px;">
</div>
<div id="vrp-response" style="float: right; padding-left: 20px;">
</div>
</div>
<div id="geocoding" class="tab-content">
<div>
The Geocoding API converts address text into coordinates shown on the map or try "reverse geocoding" via clicking on the map.
</div>
<br/>
<input id="geocoding_text_field" type="text" placeholder="Your address"/>
<input id="geocoding_search_button" type="button" value="Search"/>
<div id="geocoding-error">
</div>
<div id="geocoding-response">
</div>
<div id="geocoding-map" style="cursor: default; height:550px; width: 1000px;"></div>
</div>
<div id="map-matching" class="tab-content">
<div>
The Map Matching API snaps measured GPS tracks to the digital road network using
a certain vehicle. Click on the examples and zoom to see the detailed GPX track (black line)
and what the Map Matching API calculated from it (green line).
</div>
<br/>
<button id="bike_example1">Bike Example</button>
<button id="car_example1">Car Example</button>
<br/>
<br/>
<div id="map-matching-response">
</div>
<div id="map-matching-error">
</div>
<div id="map-matching-map" style="cursor: default; height:600px; width: 1000px;"></div>
</div>
<div id="matrix" class="tab-content">
<div>
The Matrix API calculates distances or times between many locations E.g. 1 to 5 or 4 to 4 like in the following example.
Click on the produced links to see the actual route on GraphHopper Maps.
</div>
<br/>
<form>
<div>
<input class="point" type="text" value="52.651395,13.15567">
</div>
<div>
<input class="point" type="text" value="52.432572,13.143539">
</div>
<div>
<input class="point" type="text" value="52.43299,13.461571">
</div>
<div>
<input class="point" type="text" value="52.622226,13.381233">
</div>
<input id="matrix_search_button" type="button" value="Search">
</form>
<div id="matrix-response">
</div>
<div id="matrix-error">
</div>
</div>
<div id="isochrone" class="tab-content">
<div style="padding-bottom: 10px;">
The Isochrone API calculates the reach of a location.
Calculate it by clicking on the map.
The inner area is reachable within 5 minutes (green) and
the outer area is reachable within 10 minutes (blue).
</div>
<br/>
<div id="isochrone-response" style="float: right; padding-left: 20px;">
</div>
<div id="isochrone-error" style="float: right; padding-left: 20px;">
</div>
<div id="isochrone-map" style="cursor: default; height:600px; width: 1000px;"></div>
</div>
</div>
<!-- Matomo -->
<script type="text/javascript">
PIWIK = false;
if (PIWIK) {
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//matomo.graphhopper.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
}
</script>
<noscript><p><img src="https://matomo.graphhopper.com/matomo.php?idsite=1&rec=1" style="border:0;" alt=""/></p></noscript>
<!-- End Matomo Code -->
</body>
</html>