2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

all remaining routing interactivity

Browse source
This commit is contained in:
Laura Klünder 2017-12-26 01:30:47 +01:00
parent a3c1e6d227
commit 508aa80576
2 changed files with 67 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/c3nav/site/static/site/css/c3nav.scss
View file

@ -714,6 +714,10 @@ main:not([data-view=route-result]) #route-summary {
text-decoration: none;
}
.leaflet-control-user-location a {
font-size: 20px;
}
#modal {
position: fixed;

72
src/c3nav/site/static/site/js/c3nav.js
View file

@ -706,6 +706,7 @@ c3nav = {
.on('keydown', c3nav._locationinput_keydown);
$('.locationinput .clear').on('click', c3nav._locationinput_clear);
$('.locationinput .locate').on('click', c3nav._locationinput_locate);
$('.leaflet-control-user-location a').on('click', c3nav._goto_user_location_click);
$('#autocomplete').on('mouseover', '.location', c3nav._locationinput_hover_suggestion)
.on('click', '.location', c3nav._locationinput_click_suggestion);
$('html').on('focus', '*', c3nav._locationinput_global_focuschange)
@ -739,9 +740,14 @@ c3nav = {
c3nav.update_state();
$(this).parent().find('input').focus();
},
_locationinput_locate: function () {
_locationinput_locate: function (e) {
e.preventDefault();
if (!window.mobileclient) {
c3nav.open_modal($('#app-ad').html());
return;
}
if (c3nav._current_user_location) {
c3nav._locationinput_set($(this).parent(), c3nav._current_user_location);
}
},
_locationinput_reset_autocomplete: function () {
@ -1037,7 +1043,7 @@ c3nav = {
c3nav._detailLayers = {};
c3nav._routeLayers = {};
c3nav._routeLayerBounds = {};
c3nav._positionLayers = {};
c3nav._userLocationLayers = {};
c3nav._firstRouteLevel = null;
for (i = c3nav.levels.length - 1; i >= 0; i--) {
var level = c3nav.levels[i];
@ -1045,13 +1051,16 @@ c3nav = {
c3nav._detailLayers[level[0]] = L.layerGroup().addTo(layerGroup);
c3nav._locationLayers[level[0]] = L.layerGroup().addTo(layerGroup);
c3nav._routeLayers[level[0]] = L.layerGroup().addTo(layerGroup);
c3nav._positionLayers[level[0]] = L.layerGroup().addTo(layerGroup);
c3nav._userLocationLayers[level[0]] = L.layerGroup().addTo(layerGroup);
}
c3nav._levelControl.finalize();
c3nav._levelControl.setLevel(c3nav.initial_level);
// setup user location control
c3nav._userLocationControl = new UserLocationControl().addTo(c3nav.map);
L.control.zoom({
position:'bottomright'
position: 'bottomright'
}).addTo(c3nav.map);
c3nav.map.on('click', c3nav._click_anywhere);
@ -1259,14 +1268,16 @@ c3nav = {
c3nav._set_user_location(null);
});
},
_current_user_location: null,
_set_user_location: function(location) {
for (var id in c3nav._positionLayers) {
c3nav._positionLayers[id].clearLayers();
c3nav._current_user_location = location;
for (var id in c3nav._userLocationLayers) {
c3nav._userLocationLayers[id].clearLayers();
}
if (location) {
$('.locationinput .locate').text('my_location');
$('.locationinput .locate, .leaflet-control-user-location a').text('my_location');
var latlng = L.GeoJSON.coordsToLatLng(location.geometry.coordinates),
layer = c3nav._positionLayers[location.level];
layer = c3nav._userLocationLayers[location.level];
L.circleMarker(latlng, {
radius: 11,
stroke: 0,
@ -1278,7 +1289,18 @@ c3nav = {
fillOpacity: 1
}).addTo(layer);
} else {
$('.locationinput .locate').text('location_searching');
$('.locationinput .locate, .leaflet-control-user-location a').text('location_searching');
}
},
_goto_user_location_click: function (e) {
e.preventDefault();
if (!window.mobileclient) {
c3nav.open_modal($('#app-ad').html());
return;
}
if (c3nav._current_user_location) {
c3nav._levelControl.setLevel(c3nav._current_user_location.level);
c3nav.map.flyTo(L.GeoJSON.coordsToLatLng(c3nav._current_user_location.geometry.coordinates), 4, { duration: 1 });
}
}
};
@ -1367,3 +1389,35 @@ LevelControl = L.Control.extend({
window.setTimeout(function() { old_tile_layer.remove(); }, 2000);
}
});
UserLocationControl = L.Control.extend({
options: {
position: 'bottomright',
addClasses: ''
},
onAdd: function () {
this._container = L.DomUtil.create('div', 'leaflet-control-user-location leaflet-bar ' + this.options.addClasses);
this._button = L.DomUtil.create('a', 'material-icons', this._container);
this._button.innerHTML = window.mobileclient ? 'location_searching' : 'location_disabled';
this._button.href = '#';
this.currentLevel = null;
return this._container;
},
finalize: function () {
var buttons = $(this._container).find('a');
buttons.addClass('current');
buttons.width(buttons.width());
buttons.removeClass('current');
},
reloadMap: function() {
var old_tile_layer = this._tileLayers[this.currentLevel],
new_tile_layer = this.createTileLayer(this.currentLevel);
this._tileLayers[this.currentLevel] = new_tile_layer;
new_tile_layer.addTo(c3nav.map);
window.setTimeout(function() { old_tile_layer.remove(); }, 2000);
}
});