added OSRM layers control;
refactored checkboxes in mapping block
This commit is contained in:
DennisSchiefer
parent
794140711d
commit
ab99ffc241
@ -1,205 +0,0 @@
|
||||
|
||||
L.Control.Layers = L.Control.extend({
|
||||
options: {
|
||||
collapsed: true,
|
||||
position: 'topright',
|
||||
autoZIndex: true
|
||||
},
|
||||
|
||||
initialize: function (baseLayers, overlays, options) {
|
||||
L.Util.setOptions(this, options);
|
||||
|
||||
this._layers = {};
|
||||
this._lastZIndex = 0;
|
||||
|
||||
for (var i in baseLayers) {
|
||||
if (baseLayers.hasOwnProperty(i)) {
|
||||
this._addLayer(baseLayers[i], i);
|
||||
}
|
||||
}
|
||||
|
||||
for (i in overlays) {
|
||||
if (overlays.hasOwnProperty(i)) {
|
||||
this._addLayer(overlays[i], i, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
this._initLayout();
|
||||
this._update();
|
||||
|
||||
return this._container;
|
||||
},
|
||||
|
||||
addBaseLayer: function (layer, name) {
|
||||
this._addLayer(layer, name);
|
||||
this._update();
|
||||
return this;
|
||||
},
|
||||
|
||||
addOverlay: function (layer, name) {
|
||||
this._addLayer(layer, name, true);
|
||||
this._update();
|
||||
return this;
|
||||
},
|
||||
|
||||
removeLayer: function (layer) {
|
||||
var id = L.Util.stamp(layer);
|
||||
delete this._layers[id];
|
||||
this._update();
|
||||
return this;
|
||||
},
|
||||
|
||||
_initLayout: function () {
|
||||
var className = 'leaflet-control-layers',
|
||||
container = this._container = L.DomUtil.create('div', className);
|
||||
|
||||
if (!L.Browser.touch) {
|
||||
L.DomEvent.disableClickPropagation(container);
|
||||
} else {
|
||||
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
|
||||
}
|
||||
|
||||
var form = this._form = L.DomUtil.create('form', className + '-list');
|
||||
|
||||
if (this.options.collapsed) {
|
||||
L.DomEvent
|
||||
.on(container, 'mouseover', this._expand, this)
|
||||
.on(container, 'mouseout', this._collapse, this);
|
||||
|
||||
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
|
||||
link.href = '#';
|
||||
link.title = 'Layers';
|
||||
|
||||
if (L.Browser.touch) {
|
||||
L.DomEvent
|
||||
.on(link, 'click', L.DomEvent.stopPropagation)
|
||||
.on(link, 'click', L.DomEvent.preventDefault)
|
||||
.on(link, 'click', this._expand, this);
|
||||
}
|
||||
else {
|
||||
L.DomEvent.on(link, 'focus', this._expand, this);
|
||||
}
|
||||
|
||||
this._map.on('movestart', this._collapse, this);
|
||||
// TODO keyboard accessibility
|
||||
} else {
|
||||
this._expand();
|
||||
}
|
||||
|
||||
this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
|
||||
this._separator = L.DomUtil.create('div', className + '-separator', form);
|
||||
this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
|
||||
|
||||
container.appendChild(form);
|
||||
},
|
||||
|
||||
_addLayer: function (layer, name, overlay) {
|
||||
var id = L.Util.stamp(layer);
|
||||
|
||||
this._layers[id] = {
|
||||
layer: layer,
|
||||
name: name,
|
||||
overlay: overlay
|
||||
};
|
||||
|
||||
if (this.options.autoZIndex && layer.setZIndex) {
|
||||
this._lastZIndex++;
|
||||
layer.setZIndex(this._lastZIndex);
|
||||
}
|
||||
},
|
||||
|
||||
_update: function () {
|
||||
if (!this._container) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._baseLayersList.innerHTML = '';
|
||||
this._overlaysList.innerHTML = '';
|
||||
|
||||
var baseLayersPresent = false,
|
||||
overlaysPresent = false;
|
||||
|
||||
for (var i in this._layers) {
|
||||
if (this._layers.hasOwnProperty(i)) {
|
||||
var obj = this._layers[i];
|
||||
this._addItem(obj);
|
||||
overlaysPresent = overlaysPresent || obj.overlay;
|
||||
baseLayersPresent = baseLayersPresent || !obj.overlay;
|
||||
}
|
||||
}
|
||||
|
||||
this._separator.style.display = (overlaysPresent && baseLayersPresent ? '' : 'none');
|
||||
},
|
||||
|
||||
// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
|
||||
_createRadioElement: function (name, checked) {
|
||||
|
||||
var radioHtml = '<input type="radio" name="' + name + '"';
|
||||
if (checked) {
|
||||
radioHtml += ' checked="checked"';
|
||||
}
|
||||
radioHtml += '/>';
|
||||
|
||||
var radioFragment = document.createElement('div');
|
||||
radioFragment.innerHTML = radioHtml;
|
||||
|
||||
return radioFragment.firstChild;
|
||||
},
|
||||
|
||||
_addItem: function (obj) {
|
||||
var label = document.createElement('label'),
|
||||
input,
|
||||
checked = this._map.hasLayer(obj.layer);
|
||||
|
||||
if (obj.overlay) {
|
||||
input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
input.defaultChecked = checked;
|
||||
} else {
|
||||
input = this._createRadioElement('leaflet-base-layers', checked);
|
||||
}
|
||||
|
||||
input.layerId = L.Util.stamp(obj.layer);
|
||||
|
||||
L.DomEvent.on(input, 'click', this._onInputClick, this);
|
||||
|
||||
var name = document.createTextNode(' ' + obj.name);
|
||||
|
||||
label.appendChild(input);
|
||||
label.appendChild(name);
|
||||
|
||||
var container = obj.overlay ? this._overlaysList : this._baseLayersList;
|
||||
container.appendChild(label);
|
||||
},
|
||||
|
||||
_onInputClick: function () {
|
||||
var i, input, obj,
|
||||
inputs = this._form.getElementsByTagName('input'),
|
||||
inputsLen = inputs.length;
|
||||
|
||||
for (i = 0; i < inputsLen; i++) {
|
||||
input = inputs[i];
|
||||
obj = this._layers[input.layerId];
|
||||
|
||||
if (input.checked) {
|
||||
this._map.addLayer(obj.layer, !obj.overlay);
|
||||
} else {
|
||||
this._map.removeLayer(obj.layer);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_expand: function () {
|
||||
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
|
||||
},
|
||||
|
||||
_collapse: function () {
|
||||
this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
|
||||
}
|
||||
});
|
||||
|
||||
L.control.layers = function (baseLayers, overlays, options) {
|
||||
return new L.Control.Layers(baseLayers, overlays, options);
|
||||
};
|
||||
@ -19,90 +19,50 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
// [extension of Layers.Control with OSRM styling and additional query methods]
|
||||
OSRM.Control.Layers = L.Control.Layers.extend({
|
||||
|
||||
// query functionality
|
||||
getActiveLayerName: function () {
|
||||
var i, input, obj,
|
||||
inputs = this._form.getElementsByTagName('input'),
|
||||
inputsLen = inputs.length;
|
||||
|
||||
for (i = 0; i < inputsLen; i++) {
|
||||
input = inputs[i];
|
||||
obj = this._layers[input.layerId];
|
||||
if (input.checked && !obj.overlay) {
|
||||
return obj.name;
|
||||
// query functionality
|
||||
getActiveLayerName: function () {
|
||||
var i, input, obj,
|
||||
inputs = this._form.getElementsByTagName('input'),
|
||||
inputsLen = inputs.length;
|
||||
|
||||
for (i = 0; i < inputsLen; i++) {
|
||||
input = inputs[i];
|
||||
obj = this._layers[input.layerId];
|
||||
if (input.checked && !obj.overlay) {
|
||||
return obj.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getActiveLayer: function () {
|
||||
var i, input, obj,
|
||||
inputs = this._form.getElementsByTagName('input'),
|
||||
inputsLen = inputs.length;
|
||||
|
||||
for (i = 0; i < inputsLen; i++) {
|
||||
input = inputs[i];
|
||||
obj = this._layers[input.layerId];
|
||||
if (input.checked && !obj.overlay) {
|
||||
return obj.layer;
|
||||
},
|
||||
getActiveLayer: function () {
|
||||
var i, input, obj,
|
||||
inputs = this._form.getElementsByTagName('input'),
|
||||
inputsLen = inputs.length;
|
||||
|
||||
for (i = 0; i < inputsLen; i++) {
|
||||
input = inputs[i];
|
||||
obj = this._layers[input.layerId];
|
||||
if (input.checked && !obj.overlay) {
|
||||
return obj.layer;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// overwrite Control.Layers methods to get OSRM styling
|
||||
_initLayout: function () {
|
||||
L.Control.Layers.prototype._initLayout.apply(this);
|
||||
this._container.className = "box-wrapper gui-control-wrapper";
|
||||
this._layersLink.className = "box-content gui-control gui-layers";
|
||||
this._form.className = "box-content gui-control gui-layers-list medium-font";
|
||||
|
||||
this._baseLayersList.className = "gui-layers-base";
|
||||
this._separator.className = "gui-layers-separator";
|
||||
this._overlaysList.className = "gui-layers-overlays";
|
||||
},
|
||||
_expand: function () {
|
||||
L.DomUtil.addClass(this._container, 'gui-layers-expanded');
|
||||
},
|
||||
_collapse: function () {
|
||||
this._container.className = this._container.className.replace(' gui-layers-expanded', '');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// overwrite Control.Layers methods to get OSRM styling
|
||||
onAdd: function (map) {
|
||||
this._initLayout(map);
|
||||
this._update();
|
||||
|
||||
return this._container;
|
||||
},
|
||||
_initLayout: function (map) {
|
||||
var className = 'leaflet-control-layers',
|
||||
container = this._container = L.DomUtil.create('div', className);
|
||||
|
||||
if (!L.Browser.touch) {
|
||||
L.DomEvent.disableClickPropagation(container);
|
||||
} else {
|
||||
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
|
||||
}
|
||||
|
||||
var form = this._form = L.DomUtil.create('form', className + '-list');
|
||||
|
||||
if (this.options.collapsed) {
|
||||
L.DomEvent
|
||||
.on(container, 'mouseover', this._expand, this)
|
||||
.on(container, 'mouseout', this._collapse, this);
|
||||
|
||||
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
|
||||
link.href = '#';
|
||||
link.title = 'Layers';
|
||||
|
||||
if (L.Browser.touch) {
|
||||
L.DomEvent
|
||||
.on(link, 'click', L.DomEvent.stopPropagation)
|
||||
.on(link, 'click', L.DomEvent.preventDefault)
|
||||
.on(link, 'click', this._expand, this);
|
||||
}
|
||||
else {
|
||||
L.DomEvent.on(link, 'focus', this._expand, this);
|
||||
}
|
||||
|
||||
this._map.on('movestart', this._collapse, this);
|
||||
// TODO keyboard accessibility
|
||||
} else {
|
||||
this._expand();
|
||||
}
|
||||
|
||||
this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
|
||||
this._separator = L.DomUtil.create('div', className + '-separator', form);
|
||||
this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
|
||||
|
||||
container.appendChild(form);
|
||||
},
|
||||
_expand: function () {
|
||||
L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
|
||||
},
|
||||
_collapse: function () {
|
||||
this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -51,8 +51,8 @@ setLabels: function() {
|
||||
document.getElementById("open-osmbugs").innerHTML = OSRM.loc("OPEN_OSMBUGS");
|
||||
document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
|
||||
document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE");
|
||||
document.getElementById("gui-option-highlight-nonames-label").innerHTML = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
|
||||
document.getElementById("gui-option-show-previous-routes-label").innerHTML = OSRM.loc("GUI_SHOW_PREVIOUS_ROUTES");
|
||||
document.getElementById("gui-option-highlight-nonames-label").text = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
|
||||
document.getElementById("gui-option-show-previous-routes-label").text = OSRM.loc("GUI_SHOW_PREVIOUS_ROUTES");
|
||||
document.getElementById("gui-search-source").innerHTML = OSRM.loc("GUI_SEARCH");
|
||||
document.getElementById("gui-search-target").innerHTML = OSRM.loc("GUI_SEARCH");
|
||||
document.getElementById("gui-search-source-label").innerHTML = OSRM.loc("GUI_START")+":";
|
||||
|
||||
@ -20,13 +20,15 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
/* fullscreen map */
|
||||
html, body {
|
||||
html, body
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
#map {
|
||||
#map
|
||||
{
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
@ -34,34 +36,6 @@ html, body {
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
/* changes/additions to leaflet styles */
|
||||
.leaflet-control-layers {
|
||||
box-shadow: none;
|
||||
border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
-webkit-border-radius:10px;
|
||||
background-color:rgba(0, 0, 0, 0.25);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000);
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
background-color:rgba(255, 255, 255, 1);
|
||||
}
|
||||
.leaflet-control-layers a {
|
||||
background-color: #FFFFFF;
|
||||
background-color: rgba(255,255,255,1);
|
||||
border-radius:8px;
|
||||
-moz-border-radius:8px;
|
||||
-webkit-border-radius:8px;
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
|
||||
/* counter for leaflet markers*/
|
||||
.via-counter
|
||||
{
|
||||
position:absolute;
|
||||
@ -300,23 +274,28 @@ html, body {
|
||||
|
||||
|
||||
/* styles for main-output information-box -> workaround for invisible scrollbars in Chrome */
|
||||
#information-box::-webkit-scrollbar {
|
||||
#information-box::-webkit-scrollbar
|
||||
{
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
#information-box::-webkit-scrollbar-track {
|
||||
#information-box::-webkit-scrollbar-track
|
||||
{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
#information-box::-webkit-scrollbar-thumb {
|
||||
#information-box::-webkit-scrollbar-thumb
|
||||
{
|
||||
min-height: 30px;
|
||||
background: #EEEEEE;
|
||||
border: 1px solid #999999;
|
||||
-webkit-border-radius: 5ex;
|
||||
}
|
||||
#information-box::-webkit-scrollbar-thumb:hover {
|
||||
#information-box::-webkit-scrollbar-thumb:hover
|
||||
{
|
||||
background: #F9F9F9;
|
||||
}
|
||||
#information-box::-webkit-scrollbar-thumb:active {
|
||||
#information-box::-webkit-scrollbar-thumb:active
|
||||
{
|
||||
background: #F4F4F4;
|
||||
}
|
||||
|
||||
@ -520,10 +499,22 @@ html, body {
|
||||
right: 5px; /* equal to box-content padding */
|
||||
bottom: 5px;
|
||||
}
|
||||
.mapping-checkbox
|
||||
#mapping-checkboxes
|
||||
{
|
||||
margin: 0px 5px 3px 5px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
#mapping-checkboxes input
|
||||
{
|
||||
cursor:pointer;
|
||||
position: relative;
|
||||
margin: 0px 5px 5px 5px;
|
||||
padding: 0px;
|
||||
top: 3px;
|
||||
}
|
||||
#mapping-checkboxes label
|
||||
{
|
||||
display: block;
|
||||
vertical-align:middle;
|
||||
}
|
||||
.mapping-button
|
||||
{
|
||||
@ -537,10 +528,12 @@ html, body {
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
/* map buttons */
|
||||
.gui-control-wrapper {
|
||||
.gui-control-wrapper
|
||||
{
|
||||
position:relative;
|
||||
}
|
||||
.gui-control {
|
||||
.gui-control
|
||||
{
|
||||
cursor:pointer;
|
||||
position:relative;
|
||||
background-position: 50% 50%;
|
||||
@ -551,12 +544,14 @@ html, body {
|
||||
|
||||
/* zoom buttons */
|
||||
.gui-zoom-in,
|
||||
.gui-zoom-out {
|
||||
.gui-zoom-out
|
||||
{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.leaflet-touch .gui-zoom-in,
|
||||
.leaflet-touch .gui-zoom-out {
|
||||
.leaflet-touch .gui-zoom-out
|
||||
{
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
@ -566,7 +561,8 @@ html, body {
|
||||
.gui-locations-user,
|
||||
.gui-locations-route,
|
||||
.gui-locations-user-inactive,
|
||||
.gui-locations-route-inactive {
|
||||
.gui-locations-route-inactive
|
||||
{
|
||||
float:left;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
@ -574,11 +570,57 @@ html, body {
|
||||
.leaflet-touch .gui-locations-user,
|
||||
.leaflet-touch .gui-locations-route,
|
||||
.leaflet-touch .gui-locations-user-inactive,
|
||||
.leaflet-touch .gui-locations-route-inactive {
|
||||
.leaflet-touch .gui-locations-route-inactive
|
||||
{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* layer selection */
|
||||
.gui-layers
|
||||
{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.leaflet-touch .gui-layers
|
||||
{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.gui-layers-expanded .gui-layers
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gui-layers-list
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.gui-layers-expanded .gui-layers-list
|
||||
{
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.gui-layers-list input
|
||||
{
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.gui-layers-list label
|
||||
{
|
||||
display: block;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.gui-layers-separator
|
||||
{
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
/* buttons */
|
||||
@ -676,17 +718,6 @@ html, body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* checkboxes */
|
||||
input[type=checkbox],
|
||||
{
|
||||
cursor:pointer;
|
||||
}
|
||||
.checkbox-label
|
||||
{
|
||||
vertical-align:2px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
/* utility styles */
|
||||
@ -738,88 +769,27 @@ input[type=checkbox],
|
||||
/* ------------------------------------------------------------------------ */
|
||||
|
||||
/* fonts */
|
||||
.base-font {
|
||||
.base-font
|
||||
{
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.big-font {
|
||||
.big-font
|
||||
{
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medium-font {
|
||||
.medium-font
|
||||
{
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 10.5px;
|
||||
font-weight: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
.small-font {
|
||||
.small-font
|
||||
{
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* .leaflet-control-layers {
|
||||
box-shadow: 0 1px 7px #999;
|
||||
background: #f8f8f9;
|
||||
-moz-border-radius: 8px;
|
||||
-webkit-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers {
|
||||
box-shadow: none;
|
||||
border: 5px solid #bbb;
|
||||
}
|
||||
|
||||
|
||||
.leaflet-control-layers a {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers a {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
.leaflet-control-layers input {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
} */
|
||||
@ -158,17 +158,21 @@ or see http://www.gnu.org/licenses/agpl.txt.
|
||||
<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
|
||||
<div id="gui-mapping-label" class="box-label">Mapping Tools</div>
|
||||
|
||||
<!-- header -->
|
||||
<div class="full">
|
||||
<div class="row">
|
||||
<div class="left"><input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" class="mapping-checkbox"/></div>
|
||||
<div class="left stretch"><span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="left"><input type="checkbox" id="option-show-previous-routes" value="show-previous-routes" class="mapping-checkbox"/></div>
|
||||
<div class="left stretch"><span id="gui-option-show-previous-routes-label" class="checkbox-label small-font">Show previous routes</span></div>
|
||||
</div>
|
||||
<!-- mapping options -->
|
||||
<form id="mapping-checkboxes" class="small-font">
|
||||
<div>
|
||||
<label id="gui-option-highlight-nonames-label">
|
||||
<input type="checkbox" id="option-highlight-nonames" value="show-previous-routes"/>
|
||||
Highlight unnamed streets
|
||||
</label>
|
||||
<label id="gui-option-show-previous-routes-label">
|
||||
<input type="checkbox" id="option-show-previous-routes" value="show-previous-routes"/>
|
||||
Show previous routes
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- off-site links -->
|
||||
<a class="button mapping-button" id="open-osmbugs">OSM Bugs</a><span class="quad mapping-button"></span><a class="button mapping-button" id="open-josm">JOSM</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -179,7 +179,7 @@ OSRM.prefetchCSSIcons = function() {
|
||||
{ id:'.gui-locations-route:hover', image_id:'locations_route_hover'},
|
||||
{ id:'.gui-locations-route:active', image_id:'locations_route_active'},
|
||||
|
||||
{ id:'.leaflet-control-layers a', image_id:'layers'},
|
||||
{ id:'.gui-layers', image_id:'layers'},
|
||||
|
||||
{ id:'.cancel-marker', image_id:'cancel'},
|
||||
{ id:'.cancel-marker:hover', image_id:'cancel_hover'},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user