ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Prepend language and country code to layer tree, ordering, i18n (#146)

Browse source
This commit is contained in:
Norbert Renner 2019-04-05 19:07:29 +02:00
parent 430ec1cd38
commit 871230bcbe
5 changed files with 189 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

6
css/style.css
View file

@ -423,6 +423,12 @@ table.dataTable.display tbody tr.even:hover {
margin-top: 5px;
}
.tree-code {
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
margin-right: 7px;
color: #666; /* like root nodes, jstree-disabled */
}
/* hide currently unused bottom tabs container because of touch border artefacts */
.leaflet-sidebar-tabs > ul:last-child {

136
js/LayersConfig.js
View file

@ -83,46 +83,103 @@ BR.LayersConfig = L.Class.extend({
BR.layerIndex['HikeBike.HillShading'].properties.overlay = true;
var propertyOverrides = {
'standard': {
'name': i18next.t('map.layer.osm'),
'mapUrl': 'https://www.openstreetmap.org/#map={zoom}/{lat}/{lon}'
},
'osm-mapnik-german_style': {
'name': i18next.t('map.layer.osmde'),
'language_code': 'de',
'mapUrl': 'https://www.openstreetmap.de/karte.html?zoom={zoom}&lat={lat}&lon={lon}&layers=B000TF'
},
'OpenTopoMap': {
'name': i18next.t('map.layer.topo'),
'mapUrl': 'https://opentopomap.org/#map={zoom}/{lat}/{lon}'
},
'Stamen.Terrain': {
'name': i18next.t('map.layer.stamen-terrain'),
'mapUrl': 'http://maps.stamen.com/#terrain/{zoom}/{lat}/{lon}'
},
'opencylemap': {
'name': i18next.t('map.layer.cycle'),
'nameShort': 'OpenCycleMap',
'mapUrl': 'https://www.opencyclemap.org/?zoom={zoom}&lat={lat}&lon={lon}&layers=B0000'
},
'1061': {
'name': i18next.t('map.layer.outdoors'),
'nameShort': 'Outdoors',
'mapUrl': 'https://www.opencyclemap.org/?zoom={zoom}&lat={lat}&lon={lon}&layers=000B0'
},
'Esri.WorldImagery': {
'name': i18next.t('map.layer.esri'),
'nameShort': i18next.t('credits.esri-tiles'),
'mapUrl': 'http://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9'
},
'HikeBike.HillShading': {
'name': i18next.t('map.layer.hikebike-hillshading'),
'nameShort': i18next.t('map.hikebike-hillshading'),
'mapUrl': 'http://hikebikemap.org/?zoom={zoom}&lat={lat}&lon={lon}&layer=HikeBikeMap'
},
'Waymarked_Trails-Cycling': {
'name': i18next.t('map.layer.cycling'),
'nameShort': i18next.t('map.cycling'),
'mapUrl': 'http://cycling.waymarkedtrails.org/#?map={zoom}!{lat}!{lon}'
},
'Waymarked_Trails-Hiking': {
'name': i18next.t('map.layer.hiking'),
'nameShort': i18next.t('map.hiking'),
'mapUrl': 'http://hiking.waymarkedtrails.org/#?map={zoom}!{lat}!{lon}'
},
'OpenStreetMap.CH': {
'country_code': 'CH'
},
'topplus-open': {
'country_code': 'DE'
},
'osm-cambodia_laos_thailand_vietnam-bilingual': {
'country_code': 'TH+'
},
'osmfr': {
'language_code': 'fr'
},
// kosmosnimki.ru
'1023': {
'language_code': 'ru'
},
// sputnik.ru
'1021': {
'language_code': 'ru'
},
// Osmapa.pl - Mapa OpenStreetMap Polska
'1017': {
'language_code': 'pl'
},
'osmfr-basque': {
'language_code': 'eu'
},
'osmfr-breton': {
'language_code': 'br'
},
'osmfr-occitan': {
'language_code': 'oc'
}
};
for (id in propertyOverrides) {
var layer = BR.layerIndex[id];
function setProperty(layerId, key, value) {
var layer = BR.layerIndex[layerId];
if (layer) {
var properties = propertyOverrides[id];
for (key in properties) {
var value = properties[key];
layer.properties[key] = value;
}
} else {
console.error('Layer not found: ' + layerId);
console.error('Layer not found: ' + id);
}
}
function setMapUrl(layerId, url) {
setProperty(layerId, 'mapUrl', url);
}
function setName(layerId, url) {
setProperty(layerId, 'name', url);
}
// Layer attribution here only as short link to original site,
// to keep current position use placeholders: {zoom}/{lat}/{lon}
// Copyright attribution in index.html #credits
setMapUrl('standard', '<a target="_blank" href="https://www.openstreetmap.org/#map={zoom}/{lat}/{lon}">OpenStreetMap</a>');
setMapUrl('osm-mapnik-german_style', '<a target="_blank" href="https://www.openstreetmap.de/karte.html?zoom={zoom}&lat={lat}&lon={lon}&layers=B000TF">OpenStreetMap.de</a>');
setMapUrl('OpenTopoMap', '<a target="_blank" href="https://opentopomap.org/#map={zoom}/{lat}/{lon}">OpenTopoMap</a>');
setMapUrl('Stamen.Terrain', '<a target="_blank" href="http://maps.stamen.com/#terrain/{zoom}/{lat}/{lon}">' + i18next.t('map.layer.stamen-terrain') + '</a>');
setMapUrl('opencylemap', '<a target="_blank" href="https://www.opencyclemap.org/?zoom={zoom}&lat={lat}&lon={lon}&layers=B0000">OpenCycleMap</a>');
setMapUrl('1061', '<a target="_blank" href="https://www.opencyclemap.org/?zoom={zoom}&lat={lat}&lon={lon}&layers=000B0">Outdoors</a>');
setMapUrl('Esri.WorldImagery', '<a target="_blank" href="http://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9">' + i18next.t('credits.esri-tiles') + '</a>');
setMapUrl('HikeBike.HillShading', '<a target="_blank" href="http://hikebikemap.org/?zoom={zoom}&lat={lat}&lon={lon}&layer=HikeBikeMap">' + i18next.t('map.hikebike-hillshading') + '</a>');
setMapUrl('Waymarked_Trails-Cycling', '<a target="_blank" href="http://cycling.waymarkedtrails.org/#?map={zoom}!{lat}!{lon}">' + i18next.t('map.cycling') + '</a>');
setMapUrl('Waymarked_Trails-Hiking', '<a target="_blank" href="http://hiking.waymarkedtrails.org/#?map={zoom}!{lat}!{lon}">' + i18next.t('map.hiking') + '</a>');
setName('standard', i18next.t('map.layer.osm'));
setName('osm-mapnik-german_style', i18next.t('map.layer.osmde'));
setName('OpenTopoMap', i18next.t('map.layer.topo'));
setName('Stamen.Terrain', i18next.t('map.layer.stamen-terrain'));
setName('opencylemap', i18next.t('map.layer.cycle'));
setName('1061', i18next.t('map.layer.outdoors'));
setName('Esri.WorldImagery', i18next.t('map.layer.esri'));
setName('HikeBike.HillShading', i18next.t('map.layer.hikebike-hillshading'));
setName('Waymarked_Trails-Cycling', i18next.t('map.layer.cycling'));
setName('Waymarked_Trails-Hiking', i18next.t('map.layer.hiking'));
},
isDefaultLayer: function(id, overlay) {
@ -212,9 +269,11 @@ BR.LayersConfig = L.Class.extend({
var options = {
maxZoom: this._map.getMaxZoom(),
mapUrl: props.mapUrl
maxZoom: this._map.getMaxZoom()
};
if (props.mapUrl) {
options.mapLink = '<a target="_blank" href="' + props.mapUrl + '">' + (props.nameShort || props.name) + '</a>';
}
var keyObj = this.getKeyName(url);
if (keyObj && BR.keys[keyObj.name]) {
@ -257,8 +316,11 @@ BR.LayersConfig = L.Class.extend({
}
}
// Layer attribution here only as short link to original site,
// to keep current position use placeholders: {zoom}/{lat}/{lon}
// Copyright attribution in index.html #credits
var getAttribution = function () {
return this.options.mapUrl;
return this.options.mapLink;
}
layer.getAttribution = getAttribution;

98
js/control/LayersTab.js
View file

@ -19,8 +19,8 @@ BR.LayersTab = BR.ControlLayers.extend({
this.initButtons();
var structure = {
'Base layers': {
'Worldwide international': [
'base-layers': {
'worldwide-international': [
'standard',
'OpenTopoMap',
'Stamen.Terrain',
@ -34,49 +34,63 @@ BR.LayersTab = BR.ControlLayers.extend({
'1016', // 4UMaps,
'openmapsurfer'
],
'Worldwide monolingual': [
'worldwide-monolingual': [
'osm-mapnik-german_style',
'osmfr',
'1023', // Osmapa.pl - Mapa OpenStreetMap Polska
'1021', // kosmosnimki.ru
'1017' // sputnik.ru
'1017', // Osmapa.pl - Mapa OpenStreetMap Polska
'1023', // kosmosnimki.ru
'1021' // sputnik.ru
],
'Europe': [
'europe': [
'MtbMap',
'1069' // MRI (maps.refuges.info)
],
'Country': [
'topplus-open',
'OpenStreetMap.CH',
'Freemap.sk-Car',
'Freemap.sk-Hiking',
'Freemap.sk-Cyclo',
'OpenStreetMap-turistautak',
'Israel_Hiking',
'Israel_MTB',
'europe-monolingual': [
'osmfr-basque',
'osmfr-breton',
'osmfr-occitan'
],
'country': [
{
'BE': [
'osmbe',
'osmbe-fr',
'osmbe-nl',
'osmfr-basque',
'osmfr-breton',
'osmfr-occitan',
]
},
'OpenStreetMap.CH',
'topplus-open',
'OpenStreetMap-turistautak',
{
'IL': [
'Israel_Hiking',
'Israel_MTB',
]
},
'mtbmap-no',
{
'SK': [
'Freemap.sk-Car',
'Freemap.sk-Hiking',
'Freemap.sk-Cyclo',
]
},
'osm-cambodia_laos_thailand_vietnam-bilingual'
]
},
'Overlays': {
'World-wide': [
'overlays': {
'worldwide': [
'HikeBike.HillShading',
'Waymarked_Trails-Hiking',
'Waymarked_Trails-Cycling',
'Waymarked_Trails-Hiking',
'Waymarked_Trails-MTB',
'mapillary-coverage-raster'
],
'Country': [
'country': [
'historic-place-contours',
'hu-hillshade',
{
'PL - Poland': [
'PL': [
'mapaszlakow-cycle',
'mapaszlakow-bike',
'mapaszlakow-hike',
@ -123,7 +137,7 @@ BR.LayersTab = BR.ControlLayers.extend({
};
var onUncheckNode = function (e, data) {
var obj = this.getLayer(data.node.text);
var obj = this.getLayerById(data.node.id);
if (!obj) return;
this.removeLayer(obj.layer);
@ -195,22 +209,34 @@ BR.LayersTab = BR.ControlLayers.extend({
},
toJsTree: function (layerTree) {
var data = [];
var data = {
children: []
};
var self = this;
function createRootNode(name) {
var children = [];
var rootNode = {
'text': name,
'text': i18next.t('sidebar.layers.category.' + name, name),
'state': {
'disabled': true
},
'children': children
'children': []
};
return rootNode;
}
function createNode(id, layerData) {
function getText(props, parent) {
var text = '';
var code = props.country_code || props.language_code;
if (code && parent.text !== code) {
text += '<span class="tree-code">' + code + '</span>';
}
text += props.name;
return text;
}
function createNode(id, layerData, parent) {
var props = layerData.properties;
var url = props.url;
var keyObj = self.layersConfig.getKeyName(url);
@ -220,7 +246,7 @@ BR.LayersTab = BR.ControlLayers.extend({
if (!keyObj || keyObj && BR.keys[keyObj.name]) {
childNode = {
'id': id,
'text': props.name,
'text': getText(props, parent),
'state': {
'checked': self.layersConfig.isDefaultLayer(id, props.overlay)
}
@ -235,8 +261,8 @@ BR.LayersTab = BR.ControlLayers.extend({
var value = obj[name];
var rootNode = createRootNode(name)
outTree.push(rootNode);
walkTree(value, rootNode.children);
outTree.children.push(rootNode);
walkTree(value, rootNode);
}
}
@ -249,9 +275,9 @@ BR.LayersTab = BR.ControlLayers.extend({
var layer = BR.layerIndex[entry];
if (layer) {
var childNode = createNode(entry, layer);
var childNode = createNode(entry, layer, outTree);
if (childNode) {
outTree.push(childNode);
outTree.children.push(childNode);
}
} else {
console.error('Layer "' + entry + '" not found');
@ -264,7 +290,7 @@ BR.LayersTab = BR.ControlLayers.extend({
}
walkTree(layerTree, data);
return data;
return data.children;
},
storeDefaultLayers: function () {

10
locales/en.json
View file

@ -160,6 +160,16 @@
"title": "Itinerary"
},
"layers": {
"category": {
"base-layers": "Base layers",
"country": "Country",
"europe": "Europe",
"europe-monolingual": "Europe monolingual",
"overlays": "Overlays",
"worldwide": "Worldwide",
"worldwide-international": "Worldwide international",
"worldwide-monolingual": "Worldwide monolingual"
},
"collapse": "Collapse all",
"custom-layers": "Custom layers",
"customize": "Add or remove custom layers",

9
locales/keys.js
View file

@ -19,3 +19,12 @@ i18next.t('navbar.profile.trekking-nosteps');
i18next.t('navbar.profile.trekking-steep');
i18next.t('navbar.profile.vm-forum-liegerad-schnell');
i18next.t('navbar.profile.vm-forum-velomobil-schnell');
i18next.t('sidebar.layers.category.base-layers', 'Base layers');
i18next.t('sidebar.layers.category.worldwide-international', 'Worldwide international');
i18next.t('sidebar.layers.category.worldwide-monolingual', 'Worldwide monolingual');
i18next.t('sidebar.layers.category.europe', 'Europe');
i18next.t('sidebar.layers.category.europe-monolingual', 'Europe monolingual');
i18next.t('sidebar.layers.category.country', 'Country');
i18next.t('sidebar.layers.category.overlays', 'Overlays');
i18next.t('sidebar.layers.category.worldwide', 'Worldwide');