Skip to content

Commit fc0ed28

Browse files
author
Peter
committed
added context menu instead of click (ugly on touch devices)
1 parent de96fe9 commit fc0ed28

File tree

4 files changed

+113
-39
lines changed

4 files changed

+113
-39
lines changed

‎web/src/main/webapp/css/leaflet.contextmenu.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.leaflet-contextmenu {
2+
display: none;
3+
box-shadow: 0 1px 7px rgba(0,0,0,0.4);
4+
-webkit-border-radius: 4px;
5+
border-radius: 4px;
6+
padding: 4px 0;
7+
background-color: #fff;
8+
cursor: default;
9+
-webkit-user-select: none;
10+
-moz-user-select: none;
11+
user-select: none;
12+
}
13+
14+
.leaflet-contextmenu a.leaflet-contextmenu-item {
15+
display: block;
16+
color: #222;
17+
font-size: 12px;
18+
line-height: 20px;
19+
text-decoration: none;
20+
padding: 0 12px;
21+
border-top: 1px solid transparent;
22+
border-bottom: 1px solid transparent;
23+
cursor: default;
24+
outline: none;
25+
}
26+
27+
.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {
28+
opacity: 0.5;
29+
}
30+
31+
.leaflet-contextmenu a.leaflet-contextmenu-item.over {
32+
background-color: #f4f4f4;
33+
border-top: 1px solid #f0f0f0;
34+
border-bottom: 1px solid #f0f0f0;
35+
}
36+
37+
.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {
38+
background-color: inherit;
39+
border-top: 1px solid transparent;
40+
border-bottom: 1px solid transparent;
41+
}
42+
43+
.leaflet-contextmenu-icon {
44+
margin: 2px 8px 0 0;
45+
width: 16px;
46+
height: 16px;
47+
float: left;
48+
border: 0;
49+
}
50+
51+
.leaflet-contextmenu-separator {
52+
border-bottom: 1px solid #ccc;
53+
margin: 5px 0;
54+
}

‎web/src/main/webapp/index.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,18 @@
1414
<script type="text/javascript" src="js/d3.min.js"></script>
1515
<script type="text/javascript" src="js/Leaflet.Elevation-0.0.2.min.js"></script>
1616

17+
<link rel="stylesheet" href="css/leaflet.contextmenu.css" />
18+
<script async="yes" type="text/javascript" src="js/leaflet.contextmenu.js"></script>
19+
1720
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
1821
<!--
1922
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
2023
-->
2124
<script type="text/javascript" src="js/jquery.history.js"></script>
2225
<!-- <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>-->
23-
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
24-
<script type="text/javascript" src="js/ghrequest.js?v=0.4.1"></script>
25-
<script type="text/javascript" src="js/main.js?v=0.4.1"></script>
26+
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
27+
<script type="text/javascript" src="js/ghrequest.js?v=0.4.1"></script>
28+
<script type="text/javascript" src="js/main.js?v=0.4.1"></script>
2629
<link rel="stylesheet" type="text/css" href="css/style.css" />
2730
</head>
2831
<body>

‎web/src/main/webapp/js/leaflet.contextmenu.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/src/main/webapp/js/main.js

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
var tmpArgs = parseUrlWithHisto();
77
var host = tmpArgs["host"];
8-
//var host = "http://graphhopper.com/api/1";
8+
// var host = "http://graphhopper.com/api/1";
99
if (!host) {
1010
if (location.port === '') {
1111
host = location.protocol + '//' + location.hostname;
@@ -24,7 +24,6 @@ var nominatim_reverse = "http://nominatim.openstreetmap.org/reverse";
2424
var routingLayer;
2525
var map;
2626
var browserTitle = "GraphHopper Maps - Driving Directions";
27-
var firstClickToRoute;
2827
var defaultTranslationMap = null;
2928
var enTranslationMap = null;
3029
var routeSegmentPopup = null;
@@ -258,7 +257,29 @@ function initMap() {
258257

259258
// default
260259
map = L.map('map', {
261-
layers: [lyrk]
260+
layers: [lyrk],
261+
contextmenu: true,
262+
contextmenuWidth: 140,
263+
contextmenuItems: [{
264+
text: 'Set as start',
265+
callback: setStartCoord
266+
}, {
267+
text: 'Set as end',
268+
callback: setEndCoord
269+
}, {
270+
separator: true,
271+
index: 1
272+
}, {
273+
text: 'Show coordinates',
274+
callback: function(e) {
275+
alert(e.latlng.lat + "," + e.latlng.lng);
276+
}
277+
}, {
278+
text: 'Center map here',
279+
callback: function(e) {
280+
map.panTo(e.latlng);
281+
}
282+
}]
262283
});
263284

264285
var baseMaps = {
@@ -272,20 +293,15 @@ function initMap() {
272293
"OpenStreetMap": osm,
273294
"OpenStreetMap.de": osmde
274295
};
275-
276-
// var overlays = {
277-
// "MapQuest Hybrid": mapquest
278-
// };
279-
280-
// no layers for small browser windows
281-
if ($(window).width() > 400) {
282-
L.control.layers(baseMaps/*, overlays*/).addTo(map);
283-
}
296+
297+
L.control.layers(baseMaps/*, overlays*/).addTo(map);
284298

285299
L.control.scale().addTo(map);
286300

287301
map.fitBounds(new L.LatLngBounds(new L.LatLng(bounds.minLat, bounds.minLon),
288302
new L.LatLng(bounds.maxLat, bounds.maxLon)));
303+
if(isProduction())
304+
map.setView(new L.LatLng(0, 0), 2);
289305

290306
map.attributionControl.setPrefix('');
291307

@@ -314,28 +330,26 @@ function initMap() {
314330

315331
routingLayer = L.geoJson().addTo(map);
316332
routingLayer.options = {style: {color: "#00cc33", "weight": 5, "opacity": 0.6}};
333+
}
317334

318-
firstClickToRoute = true;
319-
function onMapClick(e) {
320-
var latlng = e.latlng;
321-
latlng.lng = makeValidLng(latlng.lng);
322-
if (firstClickToRoute) {
323-
// set start point
324-
routingLayer.clearLayers();
325-
firstClickToRoute = false;
326-
ghRequest.from.setCoord(latlng.lat, latlng.lng);
327-
resolveFrom();
328-
} else {
329-
// set end point
330-
ghRequest.to.setCoord(latlng.lat, latlng.lng);
331-
resolveTo();
332-
// do not wait for resolving
333-
routeLatLng(ghRequest);
334-
firstClickToRoute = true;
335-
}
336-
}
335+
function setStartCoord(e) {
336+
ghRequest.from.setCoord(e.latlng.lat, e.latlng.lng);
337+
resolveFrom();
338+
routeIfAllResolved();
339+
}
337340

338-
map.on('click', onMapClick);
341+
function setEndCoord(e) {
342+
ghRequest.to.setCoord(e.latlng.lat, e.latlng.lng);
343+
resolveTo();
344+
routeIfAllResolved();
345+
}
346+
347+
function routeIfAllResolved() {
348+
if (ghRequest.from.isResolved() && ghRequest.to.isResolved()) {
349+
routeLatLng(ghRequest);
350+
return true;
351+
}
352+
return false;
339353
}
340354

341355
function makeValidLng(lon) {
@@ -1090,17 +1104,15 @@ function setAutoCompleteList(fromOrTo) {
10901104
req.setCoord(point.lat, point.lng);
10911105

10921106
req.input = suggestion.value;
1093-
if (ghRequest.from.isResolved() && ghRequest.to.isResolved())
1094-
routeLatLng(ghRequest);
1095-
else
1107+
if (!routeIfAllResolved())
10961108
focus(req, 15, isFrom);
10971109

10981110
myAutoDiv.autocomplete().enable();
10991111
}
11001112
};
11011113

11021114
myAutoDiv.autocomplete(options);
1103-
1115+
11041116
// with the following more stable code we cannot click on suggestions anylonger
11051117
// $("#" + fromOrTo + "Input").focusout(function() {
11061118
// myAutoDiv.autocomplete().disable();

0 commit comments

Comments
 (0)