5 Commits

Author SHA1 Message Date
b8f1c32a22 init.php connection to db with ssh 2026-04-15 14:56:44 +02:00
0aeee9a168 gitignore added 2026-04-15 14:42:07 +02:00
luptmoor
1f8e3935bb hostname as var 2026-04-15 16:23:18 +02:00
luptmoor
7bcb31a8f8 user and pw as env vars 2026-04-15 14:26:27 +02:00
luptmoor
a8ab95ff3a course example 2026-04-15 14:23:12 +02:00
73 changed files with 6480 additions and 57 deletions

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.env

48
delete_data.php Normal file
View File

@@ -0,0 +1,48 @@
<?php
// ToDo's
// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
include 'init.php';
$request = htmlspecialchars($_POST['request'], ENT_QUOTES);
if ($request=='buildings') {
$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
try {
$pdo -> query("DELETE FROM buildings WHERE webgis_id = '$webgis_id'");
} catch (PDOException $e) {
echo "ERROR ".$e->getMessage();
}
}
if ($request == 'pipelines') {
$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
try {
$pdo -> query("DELETE from pipelines where webgis_id= '$webgis_id' ");
} catch(PDOException $e) {
echo "ERROR ".$e->getMessage();
}
}
if ($request == 'valves') {
$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
try {
$pdo -> query("DELETE from valves where webgis_id= '$webgis_id' ");
} catch(PDOException $e) {
echo "ERROR ".$e->getMessage();
}
}
?>

52
find_data.php Normal file
View File

@@ -0,0 +1,52 @@
<?php
// ToDo's
// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
// PostgreSQL-Serververbindung
include 'init.php';
// HTTP-POST-Methode für Formulardaten
$table = htmlspecialchars($_POST['table'], ENT_QUOTES);
$field = htmlspecialchars($_POST['field'], ENT_QUOTES);
$value = htmlspecialchars($_POST['value'], ENT_QUOTES);
try {
// Datenbankabfrage
$result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $field = '$value'");
$features = [];
foreach($result as $row) {
// PHP-Objekt erstellen
$geometry = json_decode($row['geojson']);
// PHP-Objekt bereinigen
unset($row['geom']);
unset($row['geojson']);
// JSON-Feature hinzufügen
$feature = [
"type"=>"Feature",
"geometry"=>$geometry,
"properties"=>$row
];
array_push($features, $feature);
};
// Feature-Collection hinzufügen
$featureCollection = [
"type"=>"FeatureCollection",
"features"=>$features
];
echo json_encode($featureCollection);
// Fehlernachricht ausgeben
} catch(PDOException $e) {
echo "ERROR ".$e->getMessage();
}
?>

1687
index.php

File diff suppressed because it is too large Load Diff

38
init.php Normal file
View File

@@ -0,0 +1,38 @@
<?php
$envFile = __DIR__ . '/.env';
if (file_exists($envFile)) {
$lines = file($envFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
foreach ($lines as $line) {
if (strpos(trim($line), '#') === 0) continue;
list($key, $value) = array_map('trim', explode('=', $line, 2));
putenv("$key=$value");
}
}
$host = getenv('POSTGRES_HOST');
$port = getenv('POSTGRES_PORT');
$db = getenv('POSTGRES_DB');
$user = getenv('POSTGRES_USER');
$pass = getenv('POSTGRES_PASSWORD');
ob_start();
session_start();
try {
$opt = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false
];
$dsn = "pgsql:host=$host;dbname=$db;port=$port";
$pdo = new PDO($dsn, $user, $pass, $opt);
// Error-Message
} catch(PDOException $e) {
echo "Error: ".$e->getMessage();
}
?>

73
insert_data.php Normal file
View File

@@ -0,0 +1,73 @@
<?php
// ToDo's
// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
// PostgreSQL-Serververbindung
include 'init.php';
$request = htmlspecialchars($_POST['request'], ENT_QUOTES);
if ($request == 'valves') {
$valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
$valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
$valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
$valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
$valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
$valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
$valve_geometry = $_POST['valve_geometry'];
$result = $pdo -> query("SELECT * FROM valves WHERE valve_id = '$valve_id'");
if ($result->rowCount()>0) {
echo "ERROR: Valve ID already exists. Please type in another ID!";
} else {
// Datenbankabfrage
$result = $pdo -> query("INSERT INTO valves(valve_id, valve_type, valve_dma_id, valve_diameter, valve_location, valve_visibility, geom) VALUES ('$valve_id', '$valve_type', '$valve_dma_id', '$valve_diameter', '$valve_location', '$valve_visibility', ST_SetSRID(ST_GeomFromGeoJSON('$valve_geometry'), 4326))");
}
}
if ($request == 'pipelines') {
$pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
$pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
$pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
$pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
$pipeline_method = htmlspecialchars($_POST['pipeline_method'], ENT_QUOTES);
$pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
$pipeline_geometry = $_POST['pipeline_geometry'];
$result = $pdo -> query("SELECT * FROM pipelines WHERE pipeline_id = '$pipeline_id'");
if ($result->rowCount()>0) {
echo "ERROR: Pipeline ID already exists. Please type in another ID!";
} else {
// Datenbankabfrage
$result = $pdo -> query("INSERT INTO pipelines(pipeline_id, pipeline_category, pipeline_dma_id, pipeline_diameter, pipeline_method, pipeline_location, geom) VALUES ('$pipeline_id', '$pipeline_category', '$pipeline_dma_id', '$pipeline_diameter', '$pipeline_method', '$pipeline_location', ST_SetSRID(ST_GeomFromGeoJSON('$pipeline_geometry'), 4326))");
}
}
if ($request == 'buildings') {
$account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
$building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
$building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
$building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
$building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
$building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
$building_geometry = $_POST['building_geometry'];
$result = $pdo -> query("SELECT *from buildings where account_no= '$account_no'");
if ($result->rowCount()>0) {
echo "ERROR: Building ID already exists. Please type in another ID!";
} else {
$sql = $pdo -> query("INSERT INTO buildings(account_no, building_category, building_dma_id, building_storey, building_population, building_location, geom) VALUES ('$account_no', '$building_category', '$building_dma_id', '$building_storey', '$building_population', '$building_location', ST_Force3DZ(ST_SetSRID(ST_GeomFromGeoJSON('$building_geometry'), 4326)))");
}
}
?>

63
load_data.php Normal file
View File

@@ -0,0 +1,63 @@
<?php
// ToDo's
// Whitelists oder Prepared Statements gegen SQL-Injection hinzufügen
// PostgreSQL-Serververbindung
include 'init.php';
// HTTP-POST-Methode für Formulardaten
$table = htmlspecialchars($_POST['table'], ENT_QUOTES);
$dma_id = htmlspecialchars($_POST['dma_id'], ENT_QUOTES);
if($table == 'valves') {
$dma_id_field = "valve_dma_id";
}
if($table == 'buildings') {
$dma_id_field = "building_dma_id";
}
if($table == 'pipelines') {
$dma_id_field = "pipeline_dma_id";
}
try {
// Datenbankabfrage
$result = $pdo -> query("SELECT *, ST_AsGeoJSON(geom) as geojson FROM $table WHERE $dma_id_field = '$dma_id'");
$features = [];
foreach($result as $row) {
// PHP-Objekt erstellen
$geometry = json_decode($row['geojson']);
// PHP-Objekt bereinigen
unset($row['geom']);
unset($row['geojson']);
// JSON-Feature hinzufügen
$feature = [
"type"=>"Feature",
"geometry"=>$geometry,
"properties"=>$row
];
array_push($features, $feature);
};
// Feature-Collection hinzufügen
$featureCollection = [
"type"=>"FeatureCollection",
"features"=>$features
];
echo json_encode($featureCollection);
// Fehlernachricht ausgeben
} catch(PDOException $e) {
echo "ERROR ".$e->getMessage();
}
?>

View File

@@ -0,0 +1,575 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var immediate = require('immediate');
/* istanbul ignore next */
function INTERNAL() {}
var handlers = {};
var REJECTED = ['REJECTED'];
var FULFILLED = ['FULFILLED'];
var PENDING = ['PENDING'];
module.exports = exports = Promise;
function Promise(resolver) {
if (typeof resolver !== 'function') {
throw new TypeError('resolver must be a function');
}
this.state = PENDING;
this.queue = [];
this.outcome = void 0;
if (resolver !== INTERNAL) {
safelyResolveThenable(this, resolver);
}
}
Promise.prototype["catch"] = function (onRejected) {
return this.then(null, onRejected);
};
Promise.prototype.then = function (onFulfilled, onRejected) {
if (typeof onFulfilled !== 'function' && this.state === FULFILLED ||
typeof onRejected !== 'function' && this.state === REJECTED) {
return this;
}
var promise = new this.constructor(INTERNAL);
if (this.state !== PENDING) {
var resolver = this.state === FULFILLED ? onFulfilled : onRejected;
unwrap(promise, resolver, this.outcome);
} else {
this.queue.push(new QueueItem(promise, onFulfilled, onRejected));
}
return promise;
};
function QueueItem(promise, onFulfilled, onRejected) {
this.promise = promise;
if (typeof onFulfilled === 'function') {
this.onFulfilled = onFulfilled;
this.callFulfilled = this.otherCallFulfilled;
}
if (typeof onRejected === 'function') {
this.onRejected = onRejected;
this.callRejected = this.otherCallRejected;
}
}
QueueItem.prototype.callFulfilled = function (value) {
handlers.resolve(this.promise, value);
};
QueueItem.prototype.otherCallFulfilled = function (value) {
unwrap(this.promise, this.onFulfilled, value);
};
QueueItem.prototype.callRejected = function (value) {
handlers.reject(this.promise, value);
};
QueueItem.prototype.otherCallRejected = function (value) {
unwrap(this.promise, this.onRejected, value);
};
function unwrap(promise, func, value) {
immediate(function () {
var returnValue;
try {
returnValue = func(value);
} catch (e) {
return handlers.reject(promise, e);
}
if (returnValue === promise) {
handlers.reject(promise, new TypeError('Cannot resolve promise with itself'));
} else {
handlers.resolve(promise, returnValue);
}
});
}
handlers.resolve = function (self, value) {
var result = tryCatch(getThen, value);
if (result.status === 'error') {
return handlers.reject(self, result.value);
}
var thenable = result.value;
if (thenable) {
safelyResolveThenable(self, thenable);
} else {
self.state = FULFILLED;
self.outcome = value;
var i = -1;
var len = self.queue.length;
while (++i < len) {
self.queue[i].callFulfilled(value);
}
}
return self;
};
handlers.reject = function (self, error) {
self.state = REJECTED;
self.outcome = error;
var i = -1;
var len = self.queue.length;
while (++i < len) {
self.queue[i].callRejected(error);
}
return self;
};
function getThen(obj) {
// Make sure we only access the accessor once as required by the spec
var then = obj && obj.then;
if (obj && typeof obj === 'object' && typeof then === 'function') {
return function appyThen() {
then.apply(obj, arguments);
};
}
}
function safelyResolveThenable(self, thenable) {
// Either fulfill, reject or reject with error
var called = false;
function onError(value) {
if (called) {
return;
}
called = true;
handlers.reject(self, value);
}
function onSuccess(value) {
if (called) {
return;
}
called = true;
handlers.resolve(self, value);
}
function tryToUnwrap() {
thenable(onSuccess, onError);
}
var result = tryCatch(tryToUnwrap);
if (result.status === 'error') {
onError(result.value);
}
}
function tryCatch(func, value) {
var out = {};
try {
out.value = func(value);
out.status = 'success';
} catch (e) {
out.status = 'error';
out.value = e;
}
return out;
}
exports.resolve = resolve;
function resolve(value) {
if (value instanceof this) {
return value;
}
return handlers.resolve(new this(INTERNAL), value);
}
exports.reject = reject;
function reject(reason) {
var promise = new this(INTERNAL);
return handlers.reject(promise, reason);
}
exports.all = all;
function all(iterable) {
var self = this;
if (Object.prototype.toString.call(iterable) !== '[object Array]') {
return this.reject(new TypeError('must be an array'));
}
var len = iterable.length;
var called = false;
if (!len) {
return this.resolve([]);
}
var values = new Array(len);
var resolved = 0;
var i = -1;
var promise = new this(INTERNAL);
while (++i < len) {
allResolver(iterable[i], i);
}
return promise;
function allResolver(value, i) {
self.resolve(value).then(resolveFromAll, function (error) {
if (!called) {
called = true;
handlers.reject(promise, error);
}
});
function resolveFromAll(outValue) {
values[i] = outValue;
if (++resolved === len && !called) {
called = true;
handlers.resolve(promise, values);
}
}
}
}
exports.race = race;
function race(iterable) {
var self = this;
if (Object.prototype.toString.call(iterable) !== '[object Array]') {
return this.reject(new TypeError('must be an array'));
}
var len = iterable.length;
var called = false;
if (!len) {
return this.resolve([]);
}
var i = -1;
var promise = new this(INTERNAL);
while (++i < len) {
resolver(iterable[i]);
}
return promise;
function resolver(value) {
self.resolve(value).then(function (response) {
if (!called) {
called = true;
handlers.resolve(promise, response);
}
}, function (error) {
if (!called) {
called = true;
handlers.reject(promise, error);
}
});
}
}
},{"immediate":2}],2:[function(require,module,exports){
(function (global){
'use strict';
var Mutation = global.MutationObserver || global.WebKitMutationObserver;
var scheduleDrain;
{
if (Mutation) {
var called = 0;
var observer = new Mutation(nextTick);
var element = global.document.createTextNode('');
observer.observe(element, {
characterData: true
});
scheduleDrain = function () {
element.data = (called = ++called % 2);
};
} else if (!global.setImmediate && typeof global.MessageChannel !== 'undefined') {
var channel = new global.MessageChannel();
channel.port1.onmessage = nextTick;
scheduleDrain = function () {
channel.port2.postMessage(0);
};
} else if ('document' in global && 'onreadystatechange' in global.document.createElement('script')) {
scheduleDrain = function () {
// Create a <script> element; its readystatechange event will be fired asynchronously once it is inserted
// into the document. Do so, thus queuing up the task. Remember to clean up once it's been called.
var scriptEl = global.document.createElement('script');
scriptEl.onreadystatechange = function () {
nextTick();
scriptEl.onreadystatechange = null;
scriptEl.parentNode.removeChild(scriptEl);
scriptEl = null;
};
global.document.documentElement.appendChild(scriptEl);
};
} else {
scheduleDrain = function () {
setTimeout(nextTick, 0);
};
}
}
var draining;
var queue = [];
//named nextTick for less confusing stack traces
function nextTick() {
draining = true;
var i, oldQueue;
var len = queue.length;
while (len) {
oldQueue = queue;
queue = [];
i = -1;
while (++i < len) {
oldQueue[i]();
}
len = queue.length;
}
draining = false;
}
module.exports = immediate;
function immediate(task) {
if (queue.push(task) === 1 && !draining) {
scheduleDrain();
}
}
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}],3:[function(require,module,exports){
(function (global){
'use strict';
var jsonp = require('./jsonp');
var Promise = require('lie');
module.exports = function (url, options) {
options = options || {};
if (options.jsonp) {
return jsonp(url, options);
}
var request;
var cancel;
var out = new Promise(function (resolve, reject) {
cancel = reject;
if (global.XMLHttpRequest === undefined) {
reject('XMLHttpRequest is not supported');
}
var response;
request = new global.XMLHttpRequest();
request.open('GET', url);
if (options.headers) {
Object.keys(options.headers).forEach(function (key) {
request.setRequestHeader(key, options.headers[key]);
});
}
request.onreadystatechange = function () {
if (request.readyState === 4) {
if ((request.status < 400 && options.local) || request.status === 200) {
if (global.JSON) {
response = JSON.parse(request.responseText);
} else {
reject(new Error('JSON is not supported'));
}
resolve(response);
} else {
if (!request.status) {
reject('Attempted cross origin request without CORS enabled');
} else {
reject(request.statusText);
}
}
}
};
request.send();
});
out.catch(function (reason) {
request.abort();
return reason;
});
out.abort = cancel;
return out;
};
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./jsonp":5,"lie":1}],4:[function(require,module,exports){
(function (global){
'use strict';
var L = global.L || require('leaflet');
var Promise = require('lie');
var ajax = require('./ajax');
L.GeoJSON.AJAX = L.GeoJSON.extend({
defaultAJAXparams: {
dataType: 'json',
callbackParam: 'callback',
local: false,
middleware: function (f) {
return f;
}
},
initialize: function (url, options) {
this.urls = [];
if (url) {
if (typeof url === 'string') {
this.urls.push(url);
} else if (typeof url.pop === 'function') {
this.urls = this.urls.concat(url);
} else {
options = url;
url = undefined;
}
}
var ajaxParams = L.Util.extend({}, this.defaultAJAXparams);
for (var i in options) {
if (this.defaultAJAXparams.hasOwnProperty(i)) {
ajaxParams[i] = options[i];
}
}
this.ajaxParams = ajaxParams;
this._layers = {};
L.Util.setOptions(this, options);
this.on('data:loaded', function () {
if (this.filter) {
this.refilter(this.filter);
}
}, this);
var self = this;
if (this.urls.length > 0) {
new Promise(function (resolve) {
resolve();
}).then(function () {
self.addUrl();
});
}
},
clearLayers: function () {
this.urls = [];
L.GeoJSON.prototype.clearLayers.call(this);
return this;
},
addUrl: function (url) {
var self = this;
if (url) {
if (typeof url === 'string') {
self.urls.push(url);
} else if (typeof url.pop === 'function') {
self.urls = self.urls.concat(url);
}
}
var loading = self.urls.length;
var done = 0;
self.fire('data:loading');
self.urls.forEach(function (url) {
if (self.ajaxParams.dataType.toLowerCase() === 'json') {
ajax(url, self.ajaxParams).then(function (d) {
var data = self.ajaxParams.middleware(d);
self.addData(data);
self.fire('data:progress', data);
}, function (err) {
self.fire('data:progress', {
error: err
});
});
} else if (self.ajaxParams.dataType.toLowerCase() === 'jsonp') {
L.Util.jsonp(url, self.ajaxParams).then(function (d) {
var data = self.ajaxParams.middleware(d);
self.addData(data);
self.fire('data:progress', data);
}, function (err) {
self.fire('data:progress', {
error: err
});
});
}
});
self.on('data:progress', function () {
if (++done === loading) {
self.fire('data:loaded');
}
});
},
refresh: function (url) {
url = url || this.urls;
this.clearLayers();
this.addUrl(url);
},
refilter: function (func) {
if (typeof func !== 'function') {
this.filter = false;
this.eachLayer(function (a) {
a.setStyle({
stroke: true,
clickable: true
});
});
} else {
this.filter = func;
this.eachLayer(function (a) {
if (func(a.feature)) {
a.setStyle({
stroke: true,
clickable: true
});
} else {
a.setStyle({
stroke: false,
clickable: false
});
}
});
}
}
});
L.Util.Promise = Promise;
L.Util.ajax = ajax;
L.Util.jsonp = require('./jsonp');
L.geoJson.ajax = function (geojson, options) {
return new L.GeoJSON.AJAX(geojson, options);
};
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./ajax":3,"./jsonp":5,"leaflet":undefined,"lie":1}],5:[function(require,module,exports){
(function (global){
'use strict';
var L = global.L || require('leaflet');
var Promise = require('lie');
module.exports = function (url, options) {
options = options || {};
var head = document.getElementsByTagName('head')[0];
var scriptNode = L.DomUtil.create('script', '', head);
var cbName, ourl, cbSuffix, cancel;
var out = new Promise(function (resolve, reject) {
cancel = reject;
var cbParam = options.cbParam || 'callback';
if (options.callbackName) {
cbName = options.callbackName;
} else {
cbSuffix = '_' + ('' + Math.random()).slice(2);
cbName = '_leafletJSONPcallbacks.' + cbSuffix;
}
scriptNode.type = 'text/javascript';
if (cbSuffix) {
if (!global._leafletJSONPcallbacks) {
global._leafletJSONPcallbacks = {
length: 0
};
}
global._leafletJSONPcallbacks.length++;
global._leafletJSONPcallbacks[cbSuffix] = function (data) {
head.removeChild(scriptNode);
delete global._leafletJSONPcallbacks[cbSuffix];
global._leafletJSONPcallbacks.length--;
if (!global._leafletJSONPcallbacks.length) {
delete global._leafletJSONPcallbacks;
}
resolve(data);
};
}
if (url.indexOf('?') === -1) {
ourl = url + '?' + cbParam + '=' + cbName;
} else {
ourl = url + '&' + cbParam + '=' + cbName;
}
scriptNode.src = ourl;
}).then(null, function (reason) {
head.removeChild(scriptNode);
delete L.Util.ajax.cb[cbSuffix];
return reason;
});
out.abort = cancel;
return out;
};
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"leaflet":undefined,"lie":1}]},{},[4]);

View File

@@ -0,0 +1 @@
.leaflet-control-minimap{border:rgba(255,255,255,1) solid;box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:3px;background:#f8f8f9;transition:all .6s}.leaflet-control-minimap a{background-color:rgba(255,255,255,1);background-repeat:no-repeat;z-index:99999;transition:all .6s}.leaflet-control-minimap a.minimized-bottomright{-webkit-transform:rotate(180deg);transform:rotate(180deg);border-radius:0}.leaflet-control-minimap a.minimized-topleft{-webkit-transform:rotate(0deg);transform:rotate(0deg);border-radius:0}.leaflet-control-minimap a.minimized-bottomleft{-webkit-transform:rotate(270deg);transform:rotate(270deg);border-radius:0}.leaflet-control-minimap a.minimized-topright{-webkit-transform:rotate(90deg);transform:rotate(90deg);border-radius:0}.leaflet-control-minimap-toggle-display{background-image:url(images/toggle.svg);background-size:cover;position:absolute;border-radius:3px 0 0}.leaflet-oldie .leaflet-control-minimap-toggle-display{background-image:url(images/toggle.png)}.leaflet-control-minimap-toggle-display-bottomright{bottom:0;right:0}.leaflet-control-minimap-toggle-display-topleft{top:0;left:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.leaflet-control-minimap-toggle-display-bottomleft{bottom:0;left:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.leaflet-control-minimap-toggle-display-topright{top:0;right:0;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.leaflet-oldie .leaflet-control-minimap{border:1px solid #999}.leaflet-oldie .leaflet-control-minimap a{background-color:#fff}.leaflet-oldie .leaflet-control-minimap a.minimized{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)}

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 B

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18"><defs><marker orient="auto" overflow="visible"><path d="M-2.6-2.828L-5.428 0-2.6 2.828.228 0-2.6-2.828z" fill-rule="evenodd" stroke="#000" stroke-width=".4pt"/></marker><marker orient="auto" overflow="visible"><g fill="none" stroke="#000" stroke-width=".8" stroke-linecap="round"><path d="M4.566 4.75L-.652 0"/><path d="M1.544 4.75L-3.674 0"/><path d="M-1.566 4.75L-6.784 0"/><path d="M4.566-5.013L-.652-.263"/><path d="M1.544-5.013l-5.218 4.75"/><path d="M-1.566-5.013l-5.218 4.75"/></g></marker><marker orient="auto" overflow="visible"><path d="M-5.6-5.657L-11.257 0-5.6 5.657.057 0-5.6-5.657z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M4.616 0l-6.92 4v-8l6.92 4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M-10.69-4.437L1.328-.017l-12.018 4.42c1.92-2.61 1.91-6.18 0-8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker><marker orient="auto" overflow="visible"><path d="M-4.616 0l6.92-4v8l-6.92-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10 0l4-4L0 0l14 4-4-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10.69 4.437L-1.328.017l12.018-4.42c-1.92 2.61-1.91 6.18 0 8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker></defs><path d="M13.18 13.146v-5.81l-5.81 5.81h5.81z" stroke="#000" stroke-width="1.643"/><path d="M12.762 12.727l-6.51-6.51" fill="none" stroke="#000" stroke-width="2.482" stroke-linecap="round"/></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -0,0 +1,9 @@
.leaflet-container .leaflet-control-mouseposition {
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 5px #bbb;
padding: 0 5px;
margin:0;
color: #333;
font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

View File

@@ -0,0 +1,48 @@
L.Control.MousePosition = L.Control.extend({
options: {
position: 'bottomleft',
separator: ' : ',
emptyString: 'Unavailable',
lngFirst: false,
numDigits: 5,
lngFormatter: undefined,
latFormatter: undefined,
prefix: ""
},
onAdd: function (map) {
this._container = L.DomUtil.create('div', 'leaflet-control-mouseposition');
L.DomEvent.disableClickPropagation(this._container);
map.on('mousemove', this._onMouseMove, this);
this._container.innerHTML=this.options.emptyString;
return this._container;
},
onRemove: function (map) {
map.off('mousemove', this._onMouseMove)
},
_onMouseMove: function (e) {
var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits);
var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits);
var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng;
var prefixAndValue = this.options.prefix + ' ' + value;
this._container.innerHTML = prefixAndValue;
}
});
L.Map.mergeOptions({
positionControl: false
});
L.Map.addInitHook(function () {
if (this.options.positionControl) {
this.positionControl = new L.Control.MousePosition();
this.addControl(this.positionControl);
}
});
L.control.mousePosition = function (options) {
return new L.Control.MousePosition(options);
};

View File

@@ -0,0 +1 @@
*.min.js

View File

@@ -0,0 +1,19 @@
module.exports = {
extends: 'eslint:recommended',
parserOptions: {
ecmaVersion: 2018,
},
env: {
browser: true,
},
rules: {
'no-unused-vars': ['error', { args: 'none' }]
},
overrides: [{
files: ['gulpfile.js'],
env: {
browser: false,
node: true,
}
}]
};

View File

@@ -0,0 +1,2 @@
github: Turbo87
custom: https://paypal.me/tobiasbieniek

View File

@@ -0,0 +1,21 @@
version: 2
updates:
- package-ecosystem: npm
directory: "/"
schedule:
interval: weekly
time: "04:00"
open-pull-requests-limit: 10
versioning-strategy: increase
ignore:
- dependency-name: eslint
versions:
- 7.18.0
- 7.19.0
- 7.20.0
- 7.21.0
- 7.22.0
- 7.23.0
- 7.24.0
commit-message:
prefix: ""

View File

@@ -0,0 +1,20 @@
lib-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz
pids
logs
results
npm-debug.log
node_modules
dist
build
.eslintcache

View File

@@ -0,0 +1,11 @@
module.exports = {
plugins: [
'stylelint-scss',
],
extends: [
'stylelint-config-recommended-scss',
],
rules: {
'no-descending-specificity': null,
},
};

View File

@@ -0,0 +1,24 @@
language: node_js
node_js: stable
sudo: false
cache:
yarn: true
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash
- export PATH=$HOME/.yarn/bin:$PATH
install:
- yarn install
script:
- yarn lint:css
- yarn lint:js
# build the processed/minified assets
- yarn gulp
# check that they results match the committed state
- git diff --exit-code

View File

@@ -0,0 +1,44 @@
# Changelog
## v0.4.0 (2017-10-25)
- ol3 version without jquery dependency ([#97](https://github.com/Turbo87/sidebar-v2/pull/97))
- Allow non-tab links in the sidebar
- add type definition for leaflet-sidebar ([#112](https://github.com/Turbo87/sidebar-v2/pull/112))
- Remove reference to L.Mixin.Evented ([#124](https://github.com/Turbo87/sidebar-v2/pull/124))
- Fix Chrome 62 list-style-type bug ([#127](https://github.com/Turbo87/sidebar-v2/pull/127))
## v0.3.1 (2016-11-01)
- fix `ol3` example map layer ([#77](https://github.com/Turbo87/sidebar-v2/pull/77))
- leaflet: deprecate `removeFrom()` in favor of `remove()` ([#73](https://github.com/Turbo87/sidebar-v2/pull/73))
- leaflet: allow non-tab links on the sidebar ([#87](https://github.com/Turbo87/sidebar-v2/pull/87))
- leaflet: fix CDN location on example pages ([#94](https://github.com/Turbo87/sidebar-v2/pull/94))
- ol3: move "scale-line" together with the zoom controls ([#93](https://github.com/Turbo87/sidebar-v2/pull/93))
## v0.3.0 (2016-01-19)
- ol2: move scale line control too when sidebar opens/closes
- hide scrollbars when collapsed ([#21](https://github.com/Turbo87/sidebar-v2/issues/21))
- fix tab clicking on devices with touch screen *and* mouse ([#34](https://github.com/Turbo87/sidebar-v2/issues/35))
- new `.sidebar-header` CSS class for styled headings
- new `.sidebar-close` CSS class for close buttons in headings
- fix broken Google Maps code (until Google changes things again...)
- allow `.disabled` on `<li>` elements in `.sidebar-tabs` element
- allow second tabbar at the bottom
- new `position: 'right'` option
## v0.2.1 (2014-09-29)
- ol2, ol3: fixed sidebar content scrolling
## v0.2.0 (2014-09-29)
- jQuery API and events
## v0.1.0 (2014-09-12)
- first beta release

View File

@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2013 Tobias Bieniek
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,42 @@
# sidebar-v2
A responsive sidebar for mapping libraries like [Leaflet](#leaflet) or [OpenLayers](#openlayers-3).
It is more or less a successor of the [leaflet-sidebar](https://github.com/turbo87/leaflet-sidebar/) plugin, thus the `v2` suffix.
<a href="https://flattr.com/submit/auto?user_id=turbo&url=https%3A%2F%2Fgithub.com%2FTurbo87%2Fsidebar-v2" target="_blank"><img src="https://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"></a>
![Demo](doc/sidebar-v2.gif)
## [Leaflet](http://leafletjs.com/)
![Sidebar collapsed](doc/leaflet-1.png) ![Sidebar extended](doc/leaflet-2.png)
Example code at [`examples/index.html`](examples/index.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/index.html))
## [OpenLayers 3](http://openlayers.org/)
![Sidebar collapsed](doc/ol3-1.png) ![Sidebar extended](doc/ol3-2.png)
Example code at [`examples/ol3.html`](examples/ol3.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/ol3.html))
## [OpenLayers 2](http://openlayers.org/two/)
![Sidebar collapsed](doc/ol2-1.png) ![Sidebar extended](doc/ol2-2.png)
Example code at [`examples/ol2.html`](examples/ol2.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/ol2.html))
## [Google Maps](https://developers.google.com/maps/)
![Sidebar collapsed](doc/gmaps-1.png) ![Sidebar extended](doc/gmaps-2.png)
Example code at [`examples/gmaps.html`](examples/gmaps.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/gmaps.html))
## License
sidebar-v2 is free software, and may be redistributed under the [MIT license](LICENSE).

View File

@@ -0,0 +1,30 @@
{
"name": "sidebar-v2",
"version": "0.3.1",
"homepage": "https://github.com/Turbo87/sidebar-v2",
"authors": [
"Tobias Bieniek <tobias.bieniek@qsc.de>"
],
"description": "A responsive sidebar for mapping libraries like Leaflet or OpenLayers",
"main": [
"css/gmaps-sidebar.css",
"css/leaflet-sidebar.css",
"css/ol2-sidebar.css",
"css/ol3-sidebar.css",
"js/jquery-sidebar.js",
"js/leaflet-sidebar.js",
"js/ol3-sidebar.js"
],
"keywords": [
"gis",
"leaflet",
"openlayers",
"map"
],
"license": "MIT",
"ignore": [
"doc",
"examples",
".gitignore"
]
}

View File

@@ -0,0 +1,205 @@
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.sidebar.collapsed {
width: 40px; }
@media (min-width: 768px) {
.sidebar {
top: 10px;
bottom: 10px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar {
width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar {
width: 390px; } }
@media (min-width: 1200px) {
.sidebar {
width: 460px; } }
.sidebar-left {
left: 0; }
@media (min-width: 768px) {
.sidebar-left {
left: 10px; } }
.sidebar-right {
right: 0; }
@media (min-width: 768px) {
.sidebar-right {
right: 10px; } }
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: #fff; }
.sidebar-left .sidebar-tabs {
left: 0; }
.sidebar-right .sidebar-tabs {
right: 0; }
.sidebar-tabs, .sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0;
list-style-type: none; }
.sidebar-tabs > li, .sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #666;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
color: #000;
background-color: #fff9e6; }
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
color: #000;
background-color: #febf00; }
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
color: rgba(102, 102, 102, 0.4); }
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center; }
.sidebar-tabs > ul + ul {
bottom: 0; }
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.sidebar-left .sidebar-content {
left: 40px;
right: 0; }
.sidebar-right .sidebar-content {
left: 0;
right: 40px; }
.sidebar.collapsed > .sidebar-content {
overflow-y: hidden; }
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.sidebar-pane.active {
display: block; }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-pane {
min-width: 265px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.sidebar-pane {
min-width: 420px; } }
.sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #000;
background-color: #febf00; }
.sidebar-right .sidebar-header {
padding-left: 40px; }
.sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.sidebar-left .sidebar-close {
right: 0; }
.sidebar-right .sidebar-close {
left: 0; }
.sidebar-left ~ .sidebar-map {
margin-left: 40px; }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map {
margin-left: 0; } }
.sidebar-right ~ .sidebar-map {
margin-right: 40px; }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map {
margin-right: 0; } }
.sidebar {
border-right: 0;
box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px; }
@media (min-width: 768px) {
.sidebar {
border: 0;
border-radius: 2px; } }
@media (min-width: 768px) {
.sidebar-left {
bottom: 35px; } }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
transition: margin-left 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
margin-left: 325px !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
margin-left: 410px !important; } }
@media (min-width: 1200px) {
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
margin-left: 480px !important; } }
@media (min-width: 768px) {
.sidebar-left.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
margin-left: 60px !important; } }
@media (min-width: 768px) {
.sidebar-right {
bottom: 24px; } }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
transition: margin-right 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
margin-right: 325px !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
margin-right: 410px !important; } }
@media (min-width: 1200px) {
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
margin-right: 480px !important; } }
@media (min-width: 768px) {
.sidebar-right.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
margin-right: 60px !important; } }

View File

@@ -0,0 +1 @@
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000;border-right:0;box-shadow:rgba(0,0,0,.298039) 0 1px 4px -1px}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}.sidebar-right{right:0}@media (min-width:768px){.sidebar{top:10px;bottom:10px;transition:width .5s}.sidebar-left{left:10px}.sidebar-right{right:10px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#666;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#000;background-color:#fff9e6}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#000;background-color:#febf00}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(102,102,102,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#000;background-color:#febf00}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar-left~.sidebar-map{margin-left:40px}.sidebar-right~.sidebar-map{margin-right:40px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:325px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:325px!important}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:410px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:410px!important}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:480px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:480px!important}}@media (min-width:768px){.sidebar-left~.sidebar-map{margin-left:0}.sidebar-right~.sidebar-map{margin-right:0}.sidebar{border:0;border-radius:2px}.sidebar-left{bottom:35px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:60px!important}.sidebar-right{bottom:24px}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:60px!important}}

View File

@@ -0,0 +1,200 @@
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.sidebar.collapsed {
width: 40px; }
@media (min-width: 768px) {
.sidebar {
top: 10px;
bottom: 10px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar {
width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar {
width: 390px; } }
@media (min-width: 1200px) {
.sidebar {
width: 460px; } }
.sidebar-left {
left: 0; }
@media (min-width: 768px) {
.sidebar-left {
left: 10px; } }
.sidebar-right {
right: 0; }
@media (min-width: 768px) {
.sidebar-right {
right: 10px; } }
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: #fff; }
.sidebar-left .sidebar-tabs {
left: 0; }
.sidebar-right .sidebar-tabs {
right: 0; }
.sidebar-tabs, .sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0;
list-style-type: none; }
.sidebar-tabs > li, .sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #333;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
color: #000;
background-color: #eee; }
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
color: #fff;
background-color: #0074d9; }
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
color: rgba(51, 51, 51, 0.4); }
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center; }
.sidebar-tabs > ul + ul {
bottom: 0; }
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.sidebar-left .sidebar-content {
left: 40px;
right: 0; }
.sidebar-right .sidebar-content {
left: 0;
right: 40px; }
.sidebar.collapsed > .sidebar-content {
overflow-y: hidden; }
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.sidebar-pane.active {
display: block; }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-pane {
min-width: 265px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.sidebar-pane {
min-width: 420px; } }
.sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #fff;
background-color: #0074d9; }
.sidebar-right .sidebar-header {
padding-left: 40px; }
.sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.sidebar-left .sidebar-close {
right: 0; }
.sidebar-right .sidebar-close {
left: 0; }
.sidebar-left ~ .sidebar-map {
margin-left: 40px; }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map {
margin-left: 0; } }
.sidebar-right ~ .sidebar-map {
margin-right: 40px; }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map {
margin-right: 0; } }
.sidebar {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
.sidebar.leaflet-touch {
box-shadow: none;
border-right: 2px solid rgba(0, 0, 0, 0.2); }
@media (min-width: 768px) {
.sidebar {
border-radius: 4px; }
.sidebar.leaflet-touch {
border: 2px solid rgba(0, 0, 0, 0.2); } }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
transition: left 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 400px; } }
@media (min-width: 1200px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 470px; } }
@media (min-width: 768px) {
.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
left: 50px; } }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
transition: right 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 400px; } }
@media (min-width: 1200px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 470px; } }
@media (min-width: 768px) {
.sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
right: 50px; } }

View File

@@ -0,0 +1 @@
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000;box-shadow:0 1px 5px rgba(0,0,0,.65)}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}.sidebar-right{right:0}@media (min-width:768px){.sidebar{top:10px;bottom:10px;transition:width .5s}.sidebar-left{left:10px}.sidebar-right{right:10px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#333;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#000;background-color:#eee}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(51,51,51,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar-left~.sidebar-map{margin-left:40px}.sidebar-right~.sidebar-map{margin-right:40px}.sidebar.leaflet-touch{box-shadow:none;border-right:2px solid rgba(0,0,0,.2)}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .leaflet-left{left:315px}.sidebar-right~.sidebar-map .leaflet-right{right:315px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .leaflet-left{left:400px}.sidebar-right~.sidebar-map .leaflet-right{right:400px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .leaflet-left{left:470px}.sidebar-right~.sidebar-map .leaflet-right{right:470px}}@media (min-width:768px){.sidebar-left~.sidebar-map{margin-left:0}.sidebar-right~.sidebar-map{margin-right:0}.sidebar{border-radius:4px}.sidebar.leaflet-touch{border:2px solid rgba(0,0,0,.2)}.sidebar-left~.sidebar-map .leaflet-left{transition:left .5s}.sidebar-left.collapsed~.sidebar-map .leaflet-left{left:50px}.sidebar-right~.sidebar-map .leaflet-right{transition:right .5s}.sidebar-right.collapsed~.sidebar-map .leaflet-right{right:50px}}

View File

@@ -0,0 +1,218 @@
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.sidebar.collapsed {
width: 40px; }
@media (min-width: 768px) {
.sidebar {
top: 8px;
bottom: 8px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar {
width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar {
width: 390px; } }
@media (min-width: 1200px) {
.sidebar {
width: 460px; } }
.sidebar-left {
left: 0; }
@media (min-width: 768px) {
.sidebar-left {
left: 8px; } }
.sidebar-right {
right: 0; }
@media (min-width: 768px) {
.sidebar-right {
right: 8px; } }
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: rgba(0, 60, 136, 0.5); }
.sidebar-left .sidebar-tabs {
left: 0; }
.sidebar-right .sidebar-tabs {
right: 0; }
.sidebar-tabs, .sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0;
list-style-type: none; }
.sidebar-tabs > li, .sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #fff;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
color: #fff;
background-color: rgba(0, 60, 136, 0.6); }
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
color: #fff;
background-color: #0074d9; }
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
color: rgba(255, 255, 255, 0.4); }
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center; }
.sidebar-tabs > ul + ul {
bottom: 0; }
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.sidebar-left .sidebar-content {
left: 40px;
right: 0; }
.sidebar-right .sidebar-content {
left: 0;
right: 40px; }
.sidebar.collapsed > .sidebar-content {
overflow-y: hidden; }
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.sidebar-pane.active {
display: block; }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-pane {
min-width: 265px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.sidebar-pane {
min-width: 420px; } }
.sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #fff;
background-color: #0074d9; }
.sidebar-right .sidebar-header {
padding-left: 40px; }
.sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.sidebar-left .sidebar-close {
right: 0; }
.sidebar-right .sidebar-close {
left: 0; }
.sidebar {
background-color: rgba(255, 255, 255, 0.4); }
@media (min-width: 768px) {
.sidebar {
border: 3px solid transparent;
border-radius: 4px; } }
.sidebar-left {
border-right: 3px solid transparent; }
.sidebar-right {
border-left: 3px solid transparent; }
.sidebar-tabs {
overflow: hidden; }
@media (min-width: 768px) {
.sidebar-tabs {
border-radius: 4px 0 0 4px; }
.collapsed .sidebar-tabs {
border-radius: 4px; } }
@media (min-width: 768px) {
.sidebar-content {
border-radius: 0 4px 4px 0; } }
.sidebar-left ~ .sidebar-map .olControlZoom,
.sidebar-left ~ .sidebar-map .olScaleLine {
margin-left: 46px; }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map .olControlZoom,
.sidebar-left ~ .sidebar-map .olScaleLine {
transition: margin-left 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-left ~ .sidebar-map .olControlZoom,
.sidebar-left ~ .sidebar-map .olScaleLine {
margin-left: 319px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-left ~ .sidebar-map .olControlZoom,
.sidebar-left ~ .sidebar-map .olScaleLine {
margin-left: 404px; } }
@media (min-width: 1200px) {
.sidebar-left ~ .sidebar-map .olControlZoom,
.sidebar-left ~ .sidebar-map .olScaleLine {
margin-left: 474px; } }
@media (min-width: 768px) {
.sidebar-left.collapsed ~ .sidebar-map .olControlZoom,
.sidebar-left.collapsed ~ .sidebar-map .olScaleLine {
margin-left: 54px; } }
.sidebar-right ~ .sidebar-map .olControlAttribution,
.sidebar-right ~ .sidebar-map .olControlPermalink,
.sidebar-right ~ .sidebar-map .olControlMousePosition {
margin-right: 46px; }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map .olControlAttribution,
.sidebar-right ~ .sidebar-map .olControlPermalink,
.sidebar-right ~ .sidebar-map .olControlMousePosition {
transition: margin-right 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-right ~ .sidebar-map .olControlAttribution,
.sidebar-right ~ .sidebar-map .olControlPermalink,
.sidebar-right ~ .sidebar-map .olControlMousePosition {
margin-right: 319px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-right ~ .sidebar-map .olControlAttribution,
.sidebar-right ~ .sidebar-map .olControlPermalink,
.sidebar-right ~ .sidebar-map .olControlMousePosition {
margin-right: 404px; } }
@media (min-width: 1200px) {
.sidebar-right ~ .sidebar-map .olControlAttribution,
.sidebar-right ~ .sidebar-map .olControlPermalink,
.sidebar-right ~ .sidebar-map .olControlMousePosition {
margin-right: 474px; } }
@media (min-width: 768px) {
.sidebar-right.collapsed ~ .sidebar-map .olControlAttribution,
.sidebar-right.collapsed ~ .sidebar-map .olControlPermalink,
.sidebar-right.collapsed ~ .sidebar-map .olControlMousePosition {
margin-right: 54px; } }

View File

@@ -0,0 +1 @@
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0;border-right:3px solid transparent}.sidebar-right{right:0;border-left:3px solid transparent}@media (min-width:768px){.sidebar{top:8px;bottom:8px;transition:width .5s;border:3px solid transparent;border-radius:4px}.sidebar-left{left:8px}.sidebar-right{right:8px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}.sidebar-tabs{overflow:hidden}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:46px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:319px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:319px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:404px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:404px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:474px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:474px}}@media (min-width:768px){.sidebar-tabs{border-radius:4px 0 0 4px}.collapsed .sidebar-tabs{border-radius:4px}.sidebar-content{border-radius:0 4px 4px 0}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .olControlZoom,.sidebar-left.collapsed~.sidebar-map .olScaleLine{margin-left:54px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .olControlAttribution,.sidebar-right.collapsed~.sidebar-map .olControlMousePosition,.sidebar-right.collapsed~.sidebar-map .olControlPermalink{margin-right:54px}}

View File

@@ -0,0 +1,212 @@
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.sidebar.collapsed {
width: 40px; }
@media (min-width: 768px) {
.sidebar {
top: 6px;
bottom: 6px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar {
width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar {
width: 390px; } }
@media (min-width: 1200px) {
.sidebar {
width: 460px; } }
.sidebar-left {
left: 0; }
@media (min-width: 768px) {
.sidebar-left {
left: 6px; } }
.sidebar-right {
right: 0; }
@media (min-width: 768px) {
.sidebar-right {
right: 6px; } }
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: rgba(0, 60, 136, 0.5); }
.sidebar-left .sidebar-tabs {
left: 0; }
.sidebar-right .sidebar-tabs {
right: 0; }
.sidebar-tabs, .sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0;
list-style-type: none; }
.sidebar-tabs > li, .sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #fff;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
color: #fff;
background-color: rgba(0, 60, 136, 0.6); }
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
color: #fff;
background-color: #0074d9; }
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
color: rgba(255, 255, 255, 0.4); }
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center; }
.sidebar-tabs > ul + ul {
bottom: 0; }
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.sidebar-left .sidebar-content {
left: 40px;
right: 0; }
.sidebar-right .sidebar-content {
left: 0;
right: 40px; }
.sidebar.collapsed > .sidebar-content {
overflow-y: hidden; }
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.sidebar-pane.active {
display: block; }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-pane {
min-width: 265px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.sidebar-pane {
min-width: 420px; } }
.sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #fff;
background-color: #0074d9; }
.sidebar-right .sidebar-header {
padding-left: 40px; }
.sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.sidebar-left .sidebar-close {
right: 0; }
.sidebar-right .sidebar-close {
left: 0; }
.sidebar {
background-color: rgba(255, 255, 255, 0.4); }
@media (min-width: 768px) {
.sidebar {
border: 3px solid transparent;
border-radius: 4px; } }
.sidebar-left {
border-right: 3px solid transparent; }
.sidebar-right {
border-left: 3px solid transparent; }
.sidebar-tabs {
overflow: hidden; }
@media (min-width: 768px) {
.sidebar-tabs {
border-radius: 2px 0 0 2px; }
.collapsed .sidebar-tabs {
border-radius: 2px; } }
@media (min-width: 768px) {
.sidebar-content {
border-radius: 0 2px 2px 0; } }
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
margin-left: 46px; }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
transition: margin-left 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
margin-left: 317px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
margin-left: 402px; } }
@media (min-width: 1200px) {
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
margin-left: 472px; } }
@media (min-width: 768px) {
.sidebar-left.collapsed ~ .sidebar-map .ol-zoom, .sidebar-left.collapsed ~ .sidebar-map .ol-scale-line {
margin-left: 52px; } }
.sidebar-right ~ .sidebar-map .ol-rotate,
.sidebar-right ~ .sidebar-map .ol-attribution,
.sidebar-right ~ .sidebar-map .ol-full-screen {
margin-right: 46px; }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map .ol-rotate,
.sidebar-right ~ .sidebar-map .ol-attribution,
.sidebar-right ~ .sidebar-map .ol-full-screen {
transition: margin-right 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-right ~ .sidebar-map .ol-rotate,
.sidebar-right ~ .sidebar-map .ol-attribution,
.sidebar-right ~ .sidebar-map .ol-full-screen {
margin-right: 317px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-right ~ .sidebar-map .ol-rotate,
.sidebar-right ~ .sidebar-map .ol-attribution,
.sidebar-right ~ .sidebar-map .ol-full-screen {
margin-right: 402px; } }
@media (min-width: 1200px) {
.sidebar-right ~ .sidebar-map .ol-rotate,
.sidebar-right ~ .sidebar-map .ol-attribution,
.sidebar-right ~ .sidebar-map .ol-full-screen {
margin-right: 472px; } }
@media (min-width: 768px) {
.sidebar-right.collapsed ~ .sidebar-map .ol-rotate,
.sidebar-right.collapsed ~ .sidebar-map .ol-attribution,
.sidebar-right.collapsed ~ .sidebar-map .ol-full-screen {
margin-right: 52px; } }

View File

@@ -0,0 +1 @@
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0;border-right:3px solid transparent}.sidebar-right{right:0;border-left:3px solid transparent}@media (min-width:768px){.sidebar{top:6px;bottom:6px;transition:width .5s;border:3px solid transparent;border-radius:4px}.sidebar-left{left:6px}.sidebar-right{right:6px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}.sidebar-tabs{overflow:hidden}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:46px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:317px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:317px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:402px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:402px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:472px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:472px}}@media (min-width:768px){.sidebar-tabs{border-radius:2px 0 0 2px}.collapsed .sidebar-tabs{border-radius:2px}.sidebar-content{border-radius:0 2px 2px 0}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .ol-scale-line,.sidebar-left.collapsed~.sidebar-map .ol-zoom{margin-left:52px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .ol-attribution,.sidebar-right.collapsed~.sidebar-map .ol-full-screen,.sidebar-right.collapsed~.sidebar-map .ol-rotate{margin-right:52px}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 559 KiB

View File

@@ -0,0 +1,202 @@
# sidebar-v2 Documentation
## Installation
### NPM
```
npm install sidebar-v2 --save
```
### CDN hosted
OpenLayers 3+
```HTML
<!-- inside the <head> element -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Turbo87/sidebar-v2@v0.4.0/css/ol3-sidebar.css">
<!-- at the end of the <body> element -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Turbo87/sidebar-v2@v0.4.0/js/ol3-sidebar.js"></script>
```
### Self hosted
Download the [latest release](https://github.com/Turbo87/sidebar-v2/releases/latest),
unpack the downloaded file, and load the CSS and JavaScript into your
document, for instance (OpenLayers 3+):
```HTML
<!-- inside the <head> element -->
<link rel="stylesheet" href="sidebar-v2/css/ol3-sidebar.css">
<!-- at the end of the <body> element -->
<script type="text/javascript" src="sidebar-v2/js/ol3-sidebar.js"></script>
```
## Usage
In your HTML ensure that you have loaded the
[OpenLayers](https://openlayers.org/) and `sidebar-v2` CSS. In the example
code below we also use [FontAwesome](https://fontawesome.com/) so that nice
symbols can be used for the sidebar's buttons.
```HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.2/css/ol.css" type="text/css">
<link rel="stylesheet" href="sidebar-v2/css/ol3-sidebar.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```
Then create the `div` element within the HTML `body` for the map similarly
to how one would for plain OpenLayers maps. However note that you need to
use `class="sidebar-map"` instead of `class="map"` and the map `div` needs
to *follow* the `div` for the sidebar:
```HTML
<!-- follows sidebar div -->
<div id="map" class="sidebar-map"></div>
```
Now define the sidebar (by default in a collapsed state) via the `sidebar`
and `collapsed` classes:
```HTML
<div id="sidebar" class="sidebar collapsed">
</div>
```
Each sidebar element consists of a navigation tab connected to a tab pane
containing the content of the sidebar element.
The navigation tabs are a simple unordered list of anchors linking to the
respective tab pane:
```HTML
<!-- navigation tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
</ul>
</div>
```
The content of a given tab is contained in a sidebar tab pane (note the `id`
attribute pointing back to the relevant navigation tab). A pane includes a
header (via the `sidebar-header` class), which contains the `span` element
needed to close the pane, and then simple HTML text, for instance `p`
elements:
```HTML
<!-- tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
Pane header text
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<p>Pane text</p>
</div>
</div>
```
Now that the HTML has been set up, we can add the sidebar to the OpenLayers
map within JavaScript by adding a `script` element at the end of the `body`.
Don't forget to load the OpenLayers and sidebar-v2 JavaScript:
```HTML
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.2/build/ol.js"></script>
<script src="sidebar-v2/js/ol3-sidebar.js"></script>
```
Then set up the OpenLayers map, in this case using an
[OpenStreetMap](https://www.openstreetmap.org/) source:
```HTML
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
```
To add the sidebar, simply create a new `Sidebar` object which links to the
sidebar `div` created above, and then add it as a new control to the map:
```javascript
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
map.addControl(sidebar);
```
Putting it all together we get:
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>sidebar-v2 usage example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<link rel="stylesheet" href="sidebar-v2/css/ol3-sidebar.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
<!-- navigation tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
</ul>
</div>
<!-- tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
Pane header text
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<p>Pane text</p>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<script src="sidebar-v2/js/ol3-sidebar.js" type="text/javascript"></script>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
map.addControl(sidebar);
</script>
</body>
</html>
```
For a more complete examples, have a look at the files in the `examples/`
directory of the distribution.

View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>sidebar-v2 example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/gmaps-sidebar.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.lorem {
font-style: italic;
color: #AAA;
}
</style>
</head>
<body onload="initialize()">
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
sidebar-v2
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script src="../js/jquery-sidebar.js"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(51.2, 7),
zoom: 5,
mapTypeId: google.maps.MapTypeId.TERRAIN,
});
}
var sidebar = $('#sidebar').sidebar();
</script>
</body>
</html>

View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>sidebar-v2 example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/leaflet-sidebar.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.lorem {
font-style: italic;
color: #AAA;
}
</style>
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
sidebar-v2
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="../js/leaflet-sidebar.js"></script>
<script>
var map = L.map('map');
map.setView([51.2, 7], 9);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; OpenStreetMap contributors'
}).addTo(map);
var marker = L.marker([51.2, 7]).addTo(map);
var sidebar = L.control.sidebar('sidebar').addTo(map);
</script>
</body>
</html>

View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>sidebar-v2 example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/ol2-sidebar.css" />
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
html, body, #map {
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.lorem {
font-style: italic;
color: #AAA;
}
</style>
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
sidebar-v2
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 5000" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="../js/jquery-sidebar.js"></script>
<script>
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: 'basic'
});
map.addLayer(wms);
map.setCenter([7, 51.2], 6);
var sidebar = $('#sidebar').sidebar();
</script>
</body>
</html>

View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>sidebar-v2 example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<link rel="stylesheet" href="../css/ol3-sidebar.css" />
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
html, body, #map {
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.lorem {
font-style: italic;
color: #AAA;
}
</style>
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
sidebar-v2
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<script src="../js/ol3-sidebar.js"></script>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
map.addControl(sidebar);
</script>
</body>
</html>

View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>sidebar-v2 example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/leaflet-sidebar.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.lorem {
font-style: italic;
color: #AAA;
}
</style>
</head>
<body>
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
sidebar-v2
<span class="sidebar-close"><i class="fa fa-caret-right"></i></span>
</h1>
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
</div>
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="../js/leaflet-sidebar.js"></script>
<script>
var map = L.map('map');
map.setView([51.2, 7], 9);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; OpenStreetMap contributors'
}).addTo(map);
var marker = L.marker([51.2, 7]).addTo(map);
var sidebar = L.control.sidebar('sidebar', {position: 'right'}).addTo(map);
</script>
</body>
</html>

View File

@@ -0,0 +1,39 @@
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
// SASS compilation
gulp.task('sass', function() {
return gulp.src('scss/*sidebar.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('css'));
});
// Minify JS + CSS
gulp.task('minify:js', function() {
return gulp.src('js/*sidebar.js')
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('js'));
});
gulp.task('minify:css', gulp.series('sass', function() {
return gulp.src('css/*sidebar.css')
.pipe(rename({ suffix: '.min' }))
.pipe(cleanCSS({level: 2}))
.pipe(gulp.dest('css'));
}));
gulp.task('minify', gulp.parallel('minify:js', 'minify:css'));
// Watch JS + CSS Files
gulp.task('watch', gulp.series('minify', function() {
gulp.watch('js/*.js', ['minify:js']);
gulp.watch('scss/*.scss', ['minify:css']);
}));
// Default
gulp.task('default', gulp.series('minify'));

View File

@@ -0,0 +1,84 @@
/* global $ */
/**
* Create a new sidebar on this jQuery object.
*
* @example
* var sidebar = $('#sidebar').sidebar();
*
* @param {Object} [options] - Optional options object
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @returns {jQuery}
*/
$.fn.sidebar = function(options) {
var $sidebar = this;
var $tabs = $sidebar.find('ul.sidebar-tabs, .sidebar-tabs > ul');
var $container = $sidebar.children('.sidebar-content').first();
options = $.extend({
position: 'left'
}, options || {});
$sidebar.addClass('sidebar-' + options.position);
$tabs.children('li').children('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var $tab = $(this).closest('li');
if ($tab.hasClass('active'))
$sidebar.close();
else if (!$tab.hasClass('disabled'))
$sidebar.open(this.hash.slice(1), $tab);
});
$sidebar.find('.sidebar-close').on('click', function() {
$sidebar.close();
});
/**
* Open sidebar (if necessary) and show the specified tab.
*
* @param {string} id - The id of the tab to show (without the # character)
* @param {jQuery} [$tab] - The jQuery object representing the tab node (used internally for efficiency)
*/
$sidebar.open = function(id, $tab) {
if (typeof $tab === 'undefined')
$tab = $tabs.find('li > a[href="#' + id + '"]').parent();
// hide old active contents
$container.children('.sidebar-pane.active').removeClass('active');
// show new content
$container.children('#' + id).addClass('active');
// remove old active highlights
$tabs.children('li.active').removeClass('active');
// set new highlight
$tab.addClass('active');
$sidebar.trigger('content', { 'id': id });
if ($sidebar.hasClass('collapsed')) {
// open sidebar
$sidebar.trigger('opening');
$sidebar.removeClass('collapsed');
}
};
/**
* Close the sidebar (if necessary).
*/
$sidebar.close = function() {
// remove old active highlights
$tabs.children('li.active').removeClass('active');
if (!$sidebar.hasClass('collapsed')) {
// close sidebar
$sidebar.trigger('closing');
$sidebar.addClass('collapsed');
}
};
return $sidebar;
};

View File

@@ -0,0 +1 @@
$.fn.sidebar=function(e){var s=this,i=s.find("ul.sidebar-tabs, .sidebar-tabs > ul"),a=s.children(".sidebar-content").first();return e=$.extend({position:"left"},e||{}),s.addClass("sidebar-"+e.position),i.children("li").children('a[href^="#"]').on("click",function(e){e.preventDefault();var i=$(this).closest("li");i.hasClass("active")?s.close():i.hasClass("disabled")||s.open(this.hash.slice(1),i)}),s.find(".sidebar-close").on("click",function(){s.close()}),s.open=function(e,l){void 0===l&&(l=i.find('li > a[href="#'+e+'"]').parent()),a.children(".sidebar-pane.active").removeClass("active"),a.children("#"+e).addClass("active"),i.children("li.active").removeClass("active"),l.addClass("active"),s.trigger("content",{id:e}),s.hasClass("collapsed")&&(s.trigger("opening"),s.removeClass("collapsed"))},s.close=function(){i.children("li.active").removeClass("active"),s.hasClass("collapsed")||(s.trigger("closing"),s.addClass("collapsed"))},s};

View File

@@ -0,0 +1,216 @@
/* global L */
/**
* @name Sidebar
* @class L.Control.Sidebar
* @extends L.Control
* @param {string} id - The id of the sidebar element (without the # character)
* @param {Object} [options] - Optional options object
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @see L.control.sidebar
*/
L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
includes: (L.Evented.prototype || L.Mixin.Events),
options: {
position: 'left'
},
initialize: function (id, options) {
var i, child;
L.setOptions(this, options);
// Find sidebar HTMLElement
this._sidebar = L.DomUtil.get(id);
// Attach .sidebar-left/right class
L.DomUtil.addClass(this._sidebar, 'sidebar-' + this.options.position);
// Attach touch styling if necessary
if (L.Browser.touch)
L.DomUtil.addClass(this._sidebar, 'leaflet-touch');
// Find sidebar > div.sidebar-content
for (i = this._sidebar.children.length - 1; i >= 0; i--) {
child = this._sidebar.children[i];
if (child.tagName == 'DIV' &&
L.DomUtil.hasClass(child, 'sidebar-content'))
this._container = child;
}
// Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
this._tabitems = this._sidebar.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
for (i = this._tabitems.length - 1; i >= 0; i--) {
this._tabitems[i]._sidebar = this;
}
// Find sidebar > div.sidebar-content > div.sidebar-pane
this._panes = [];
this._closeButtons = [];
for (i = this._container.children.length - 1; i >= 0; i--) {
child = this._container.children[i];
if (child.tagName == 'DIV' &&
L.DomUtil.hasClass(child, 'sidebar-pane')) {
this._panes.push(child);
var closeButtons = child.querySelectorAll('.sidebar-close');
for (var j = 0, len = closeButtons.length; j < len; j++)
this._closeButtons.push(closeButtons[j]);
}
}
},
/**
* Add this sidebar to the specified map.
*
* @param {L.Map} map
* @returns {Sidebar}
*/
addTo: function (map) {
var i, child;
this._map = map;
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
var sub = child.querySelector('a');
if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
L.DomEvent
.on(sub, 'click', L.DomEvent.preventDefault )
.on(sub, 'click', this._onClick, child);
}
}
for (i = this._closeButtons.length - 1; i >= 0; i--) {
child = this._closeButtons[i];
L.DomEvent.on(child, 'click', this._onCloseClick, this);
}
return this;
},
/**
* @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
* Removes this sidebar from the map.
* @param {L.Map} map
* @returns {Sidebar}
*/
removeFrom: function(map) {
console.log('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
this.remove(map);
},
/**
* Remove this sidebar from the map.
*
* @param {L.Map} map
* @returns {Sidebar}
*/
remove: function (map) {
var i, child;
this._map = null;
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
L.DomEvent.off(child.querySelector('a'), 'click', this._onClick);
}
for (i = this._closeButtons.length - 1; i >= 0; i--) {
child = this._closeButtons[i];
L.DomEvent.off(child, 'click', this._onCloseClick, this);
}
return this;
},
/**
* Open sidebar (if necessary) and show the specified tab.
*
* @param {string} id - The id of the tab to show (without the # character)
*/
open: function(id) {
var i, child;
// hide old active contents and show new content
for (i = this._panes.length - 1; i >= 0; i--) {
child = this._panes[i];
if (child.id == id)
L.DomUtil.addClass(child, 'active');
else if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}
// remove old active highlights and set new highlight
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
if (child.querySelector('a').hash == '#' + id)
L.DomUtil.addClass(child, 'active');
else if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}
this.fire('content', { id: id });
// open sidebar (if necessary)
if (L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
this.fire('opening');
L.DomUtil.removeClass(this._sidebar, 'collapsed');
}
return this;
},
/**
* Close the sidebar (if necessary).
*/
close: function() {
// remove old active highlights
for (var i = this._tabitems.length - 1; i >= 0; i--) {
var child = this._tabitems[i];
if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}
// close sidebar
if (!L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
this.fire('closing');
L.DomUtil.addClass(this._sidebar, 'collapsed');
}
return this;
},
/**
* @private
*/
_onClick: function() {
if (L.DomUtil.hasClass(this, 'active'))
this._sidebar.close();
else if (!L.DomUtil.hasClass(this, 'disabled'))
this._sidebar.open(this.querySelector('a').hash.slice(1));
},
/**
* @private
*/
_onCloseClick: function () {
this.close();
}
});
/**
* Creates a new sidebar.
*
* @example
* var sidebar = L.control.sidebar('sidebar').addTo(map);
*
* @param {string} id - The id of the sidebar element (without the # character)
* @param {Object} [options] - Optional options object
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @returns {Sidebar} A new sidebar instance
*/
L.control.sidebar = function (id, options) {
return new L.Control.Sidebar(id, options);
};

View File

@@ -0,0 +1 @@
L.Control.Sidebar=L.Control.extend({includes:L.Evented.prototype||L.Mixin.Events,options:{position:"left"},initialize:function(t,s){var i,e;for(L.setOptions(this,s),this._sidebar=L.DomUtil.get(t),L.DomUtil.addClass(this._sidebar,"sidebar-"+this.options.position),L.Browser.touch&&L.DomUtil.addClass(this._sidebar,"leaflet-touch"),i=this._sidebar.children.length-1;i>=0;i--)"DIV"==(e=this._sidebar.children[i]).tagName&&L.DomUtil.hasClass(e,"sidebar-content")&&(this._container=e);for(this._tabitems=this._sidebar.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),i=this._tabitems.length-1;i>=0;i--)this._tabitems[i]._sidebar=this;for(this._panes=[],this._closeButtons=[],i=this._container.children.length-1;i>=0;i--)if("DIV"==(e=this._container.children[i]).tagName&&L.DomUtil.hasClass(e,"sidebar-pane")){this._panes.push(e);for(var o=e.querySelectorAll(".sidebar-close"),a=0,l=o.length;a<l;a++)this._closeButtons.push(o[a])}},addTo:function(t){var s,i;for(this._map=t,s=this._tabitems.length-1;s>=0;s--){var e=(i=this._tabitems[s]).querySelector("a");e.hasAttribute("href")&&"#"==e.getAttribute("href").slice(0,1)&&L.DomEvent.on(e,"click",L.DomEvent.preventDefault).on(e,"click",this._onClick,i)}for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.on(i,"click",this._onCloseClick,this);return this},removeFrom:function(t){console.log("removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon."),this.remove(t)},remove:function(t){var s,i;for(this._map=null,s=this._tabitems.length-1;s>=0;s--)i=this._tabitems[s],L.DomEvent.off(i.querySelector("a"),"click",this._onClick);for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.off(i,"click",this._onCloseClick,this);return this},open:function(t){var s,i;for(s=this._panes.length-1;s>=0;s--)(i=this._panes[s]).id==t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");for(s=this._tabitems.length-1;s>=0;s--)(i=this._tabitems[s]).querySelector("a").hash=="#"+t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");return this.fire("content",{id:t}),L.DomUtil.hasClass(this._sidebar,"collapsed")&&(this.fire("opening"),L.DomUtil.removeClass(this._sidebar,"collapsed")),this},close:function(){for(var t=this._tabitems.length-1;t>=0;t--){var s=this._tabitems[t];L.DomUtil.hasClass(s,"active")&&L.DomUtil.removeClass(s,"active")}return L.DomUtil.hasClass(this._sidebar,"collapsed")||(this.fire("closing"),L.DomUtil.addClass(this._sidebar,"collapsed")),this},_onClick:function(){L.DomUtil.hasClass(this,"active")?this._sidebar.close():L.DomUtil.hasClass(this,"disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},_onCloseClick:function(){this.close()}}),L.control.sidebar=function(t,s){return new L.Control.Sidebar(t,s)};

View File

@@ -0,0 +1,132 @@
/* global ol */
ol.control.Sidebar = function (settings) {
var defaults = {
element: null,
position: 'left'
}, i, child;
this._options = Object.assign({}, defaults, settings);
ol.control.Control.call(this, {
element: document.getElementById(this._options.element),
target: this._options.target
});
// Attach .sidebar-left/right class
this.element.classList.add('sidebar-' + this._options.position);
// Find sidebar > div.sidebar-content
for (i = this.element.children.length - 1; i >= 0; i--) {
child = this.element.children[i];
if (child.tagName === 'DIV' &&
child.classList.contains('sidebar-content')) {
this._container = child;
}
}
// Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
for (i = this._tabitems.length - 1; i >= 0; i--) {
this._tabitems[i]._sidebar = this;
}
// Find sidebar > div.sidebar-content > div.sidebar-pane
this._panes = [];
this._closeButtons = [];
for (i = this._container.children.length - 1; i >= 0; i--) {
child = this._container.children[i];
if (child.tagName == 'DIV' &&
child.classList.contains('sidebar-pane')) {
this._panes.push(child);
var closeButtons = child.querySelectorAll('.sidebar-close');
for (var j = 0, len = closeButtons.length; j < len; j++) {
this._closeButtons.push(closeButtons[j]);
}
}
}
};
if ('inherits' in ol) {
ol.inherits(ol.control.Sidebar, ol.control.Control);
} else {
ol.control.Sidebar.prototype = Object.create(ol.control.Control.prototype);
ol.control.Sidebar.prototype.constructor = ol.control.Sidebar;
}
ol.control.Sidebar.prototype.setMap = function(map) {
var i, child;
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
var sub = child.querySelector('a');
if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
sub.onclick = this._onClick.bind(child);
}
}
for (i = this._closeButtons.length - 1; i >= 0; i--) {
child = this._closeButtons[i];
child.onclick = this._onCloseClick.bind(this);
}
};
ol.control.Sidebar.prototype.open = function(id) {
var i, child;
// hide old active contents and show new content
for (i = this._panes.length - 1; i >= 0; i--) {
child = this._panes[i];
if (child.id == id)
child.classList.add('active');
else if (child.classList.contains('active'))
child.classList.remove('active');
}
// remove old active highlights and set new highlight
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
if (child.querySelector('a').hash == '#' + id)
child.classList.add('active');
else if (child.classList.contains('active'))
child.classList.remove('active');
}
// open sidebar (if necessary)
if (this.element.classList.contains('collapsed')) {
this.element.classList.remove('collapsed');
}
return this;
};
ol.control.Sidebar.prototype.close = function() {
// remove old active highlights
for (var i = this._tabitems.length - 1; i >= 0; i--) {
var child = this._tabitems[i];
if (child.classList.contains('active'))
child.classList.remove('active');
}
// close sidebar
if (!this.element.classList.contains('collapsed')) {
this.element.classList.add('collapsed');
}
return this;
};
ol.control.Sidebar.prototype._onClick = function(evt) {
evt.preventDefault();
if (this.classList.contains('active')) {
this._sidebar.close();
} else if (!this.classList.contains('disabled')) {
this._sidebar.open(this.querySelector('a').hash.slice(1));
}
};
ol.control.Sidebar.prototype._onCloseClick = function() {
this.close();
};

View File

@@ -0,0 +1 @@
ol.control.Sidebar=function(t){var e,s;for(this._options=Object.assign({},{element:null,position:"left"},t),ol.control.Control.call(this,{element:document.getElementById(this._options.element),target:this._options.target}),this.element.classList.add("sidebar-"+this._options.position),e=this.element.children.length-1;e>=0;e--)"DIV"===(s=this.element.children[e]).tagName&&s.classList.contains("sidebar-content")&&(this._container=s);for(this._tabitems=this.element.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),e=this._tabitems.length-1;e>=0;e--)this._tabitems[e]._sidebar=this;for(this._panes=[],this._closeButtons=[],e=this._container.children.length-1;e>=0;e--)if("DIV"==(s=this._container.children[e]).tagName&&s.classList.contains("sidebar-pane")){this._panes.push(s);for(var i=s.querySelectorAll(".sidebar-close"),o=0,l=i.length;o<l;o++)this._closeButtons.push(i[o])}},"inherits"in ol?ol.inherits(ol.control.Sidebar,ol.control.Control):(ol.control.Sidebar.prototype=Object.create(ol.control.Control.prototype),ol.control.Sidebar.prototype.constructor=ol.control.Sidebar),ol.control.Sidebar.prototype.setMap=function(t){var e,s;for(e=this._tabitems.length-1;e>=0;e--){var i=(s=this._tabitems[e]).querySelector("a");i.hasAttribute("href")&&"#"==i.getAttribute("href").slice(0,1)&&(i.onclick=this._onClick.bind(s))}for(e=this._closeButtons.length-1;e>=0;e--)(s=this._closeButtons[e]).onclick=this._onCloseClick.bind(this)},ol.control.Sidebar.prototype.open=function(t){var e,s;for(e=this._panes.length-1;e>=0;e--)(s=this._panes[e]).id==t?s.classList.add("active"):s.classList.contains("active")&&s.classList.remove("active");for(e=this._tabitems.length-1;e>=0;e--)(s=this._tabitems[e]).querySelector("a").hash=="#"+t?s.classList.add("active"):s.classList.contains("active")&&s.classList.remove("active");return this.element.classList.contains("collapsed")&&this.element.classList.remove("collapsed"),this},ol.control.Sidebar.prototype.close=function(){for(var t=this._tabitems.length-1;t>=0;t--){var e=this._tabitems[t];e.classList.contains("active")&&e.classList.remove("active")}return this.element.classList.contains("collapsed")||this.element.classList.add("collapsed"),this},ol.control.Sidebar.prototype._onClick=function(t){t.preventDefault(),this.classList.contains("active")?this._sidebar.close():this.classList.contains("disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},ol.control.Sidebar.prototype._onCloseClick=function(){this.close()};

View File

@@ -0,0 +1,40 @@
{
"name": "sidebar-v2",
"version": "0.4.0",
"description": "A responsive sidebar for mapping libraries like Leaflet or OpenLayers",
"keywords": [
"gis",
"leaflet",
"map",
"openlayers"
],
"homepage": "https://github.com/turbo87/sidebar-v2",
"bugs": "https://github.com/turbo87/sidebar-v2/issues",
"license": "MIT",
"author": "Tobias Bieniek <tobias.bieniek@gmx.de>",
"files": [
"css",
"js",
"scss"
],
"repository": {
"type": "git",
"url": "https://github.com/turbo87/sidebar-v2.git"
},
"scripts": {
"lint:css": "stylelint **/*.scss",
"lint:js": "eslint . --cache"
},
"devDependencies": {
"eslint": "^6.8.0",
"gulp": "~4.0.0",
"gulp-clean-css": "~4.3.0",
"gulp-concat": "~2.6.1",
"gulp-rename": "~2.0.0",
"gulp-sass": "^4.1.0",
"gulp-uglify": "~3.0.2",
"stylelint": "^13.12.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.19.0"
}
}

View File

@@ -0,0 +1,261 @@
$threshold-lg: 1200px !default;
$threshold-md: 992px !default;
$threshold-sm: 768px !default;
$width-lg: 460px !default;
$width-md: 390px !default;
$width-sm: 305px !default;
$width-xs: 100% !default;
$sidebar-z-index: 2000 !default;
$sidebar-transition: 500ms !default;
$tab-size: 40px !default;
$tab-font-size: 12pt !default;
$tab-bg: null !default;
$tab-transition: 80ms !default;
$header-fg: $tab-active-fg !default;
$header-bg: $tab-active-bg !default;
$content-bg: rgba(255, 255, 255, 0.95) !default;
$content-padding-vertical: 10px !default;
$content-padding-horizontal: 20px !default;
$move-map-in-xs: true !default;
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: $width-xs;
overflow: hidden;
z-index: $sidebar-z-index;
&.collapsed {
width: $tab-size;
}
@media(min-width:$threshold-sm) {
top: $sidebar-margins;
bottom: $sidebar-margins;
transition: width $sidebar-transition;
}
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
width: $width-sm;
}
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
width: $width-md;
}
@media(min-width:$threshold-lg) {
width: $width-lg;
}
}
.sidebar-left {
left: 0;
@media(min-width:$threshold-sm) {
left: $sidebar-margins;
}
}
.sidebar-right {
right: 0;
@media(min-width:$threshold-sm) {
right: $sidebar-margins;
}
}
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
.sidebar-left & {
left: 0;
}
.sidebar-right & {
right: 0;
}
background-color: $tabs-bg;
&, & > ul {
position: absolute;
width: $tab-size;
margin: 0;
padding: 0;
list-style-type: none;
& > li {
width: 100%;
height: $tab-size;
color: $tab-fg;
@if $tab-bg { background: $tab-bg; }
font-size: $tab-font-size;
overflow: hidden;
transition: all $tab-transition;
&:hover {
color: $tab-hover-fg;
background-color: $tab-hover-bg;
}
&.active {
color: $tab-active-fg;
background-color: $tab-active-bg;
}
&.disabled {
color: fade-out($tab-fg, 0.6);
&:hover {
@if $tab-bg {
background: $tab-bg;
} @else {
background: transparent;
}
}
& > a {
cursor: default;
}
}
& > a {
display: block;
width: 100%;
height: 100%;
line-height: $tab-size;
color: inherit;
text-decoration: none;
text-align: center;
}
}
}
& > ul + ul {
bottom: 0;
}
}
.sidebar-content {
position: absolute;
.sidebar-left & {
left: $tab-size;
right: 0;
}
.sidebar-right & {
left: 0;
right: $tab-size;
}
top: 0;
bottom: 0;
background-color: $content-bg;
overflow-x: hidden;
overflow-y: auto;
.sidebar.collapsed > & {
overflow-y: hidden;
}
}
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: $content-padding-vertical $content-padding-horizontal;
&.active {
display: block;
}
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
min-width: $width-sm - $tab-size;
}
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
min-width: $width-md - $tab-size;
}
@media(min-width:$threshold-lg) {
min-width: $width-lg - $tab-size;
}
}
.sidebar-header {
margin: (-$content-padding-vertical) (-$content-padding-horizontal) 0;
height: $tab-size;
padding: 0 $content-padding-horizontal;
line-height: $tab-size;
font-size: $tab-font-size * 1.2;
color: $header-fg;
background-color: $header-bg;
.sidebar-right & {
padding-left: $tab-size;
}
}
.sidebar-close {
position: absolute;
top: 0;
width: $tab-size;
height: $tab-size;
text-align: center;
cursor: pointer;
.sidebar-left & {
right: 0;
}
.sidebar-right & {
left: 0;
}
}
@if $move-map-in-xs {
.sidebar-left ~ .sidebar-map {
margin-left: $tab-size;
@media(min-width:$threshold-sm) {
margin-left: 0;
}
}
.sidebar-right ~ .sidebar-map {
margin-right: $tab-size;
@media(min-width:$threshold-sm) {
margin-right: 0;
}
}
}

View File

@@ -0,0 +1,50 @@
$sidebar-bg: rgba(255, 255, 255, 0.4) !default;
$sidebar-border-width: 3px !default;
$sidebar-border-radius: 4px !default;
$sidebar-border: $sidebar-border-width solid transparent !default;
$tab-fg: #fff !default;
$tabs-bg: rgba(0, 60, 136, 0.5) !default;
$tab-hover-fg: #fff !default;
$tab-hover-bg: rgba(0, 60, 136, 0.6) !default;
$tab-active-fg: #fff !default;
$tab-active-bg: #0074d9 !default;
$move-map-in-xs: false !default;
@import 'base';
.sidebar {
background-color: $sidebar-bg;
@media(min-width:$threshold-sm) {
border: $sidebar-border;
border-radius: $sidebar-border-radius;
}
}
.sidebar-left {
border-right: $sidebar-border;
}
.sidebar-right {
border-left: $sidebar-border;
}
.sidebar-tabs {
overflow: hidden;
@media(min-width:$threshold-sm) {
border-radius: $sidebar-inner-border-radius 0 0 $sidebar-inner-border-radius;
.collapsed & {
border-radius: $sidebar-inner-border-radius;
}
}
}
.sidebar-content {
@media(min-width:$threshold-sm) {
border-radius: 0 $sidebar-inner-border-radius $sidebar-inner-border-radius 0;
}
}

View File

@@ -0,0 +1,86 @@
$sidebar-margins: 10px !default;
$sidebar-left-bottom-margin: $sidebar-margins + 25px !default;
$sidebar-right-bottom-margin: $sidebar-margins + 14px !default;
$sidebar-border: 0 !default;
$sidebar-border-radius: 2px !default;
$sidebar-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px !default;
$tab-fg: #666 !default;
$tabs-bg: #fff !default;
$tab-active-fg: #000 !default;
$tab-active-bg: #febf00 !default;
$tab-hover-fg: #000 !default;
$tab-hover-bg: ($tabs-bg * 9 + $tab-active-bg) / 10 !default;
@import 'base';
.sidebar {
border-right: $sidebar-border;
box-shadow: $sidebar-shadow;
@media(min-width:$threshold-sm) {
border: $sidebar-border;
border-radius: $sidebar-border-radius;
}
}
.sidebar-left {
@media(min-width:$threshold-sm) {
bottom: $sidebar-left-bottom-margin;
}
& ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
@media(min-width:$threshold-sm) {
transition: margin-left $sidebar-transition;
}
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
margin-left: $width-sm + $sidebar-margins * 2 !important;
}
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
margin-left: $width-md + $sidebar-margins * 2 !important;
}
@media(min-width:$threshold-lg) {
margin-left: $width-lg + $sidebar-margins * 2 !important;
}
}
@media(min-width:$threshold-sm) {
&.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
margin-left: $tab-size + $sidebar-margins * 2 !important;
}
}
}
.sidebar-right {
@media(min-width:$threshold-sm) {
bottom: $sidebar-right-bottom-margin;
}
& ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
@media(min-width:$threshold-sm) {
transition: margin-right $sidebar-transition;
}
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
margin-right: $width-sm + $sidebar-margins * 2 !important;
}
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
margin-right: $width-md + $sidebar-margins * 2 !important;
}
@media(min-width:$threshold-lg) {
margin-right: $width-lg + $sidebar-margins * 2 !important;
}
}
@media(min-width:$threshold-sm) {
&.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
margin-right: $tab-size + $sidebar-margins * 2 !important;
}
}
}

View File

@@ -0,0 +1,84 @@
$sidebar-margins: 10px !default;
$sidebar-border-radius: 4px !default;
$sidebar-touch-border: 2px solid rgba(0, 0, 0, 0.2) !default;
$sidebar-shadow: 0 1px 5px rgba(0, 0, 0, 0.65) !default;
$tab-fg: #333 !default;
$tabs-bg: #fff !default;
$tab-hover-fg: #000 !default;
$tab-hover-bg: #eee !default;
$tab-active-fg: #fff !default;
$tab-active-bg: #0074d9 !default;
@import 'base';
.sidebar {
box-shadow: $sidebar-shadow;
&.leaflet-touch {
box-shadow: none;
border-right: $sidebar-touch-border;
}
@media(min-width:$threshold-sm) {
border-radius: $sidebar-border-radius;
&.leaflet-touch {
border: $sidebar-touch-border;
}
}
}
.sidebar-left {
& ~ .sidebar-map .leaflet-left {
@media(min-width:$threshold-sm) {
transition: left $sidebar-transition;
}
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
left: $width-sm + $sidebar-margins;
}
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
left: $width-md + $sidebar-margins;
}
@media(min-width:$threshold-lg) {
left: $width-lg + $sidebar-margins;
}
}
&.collapsed ~ .sidebar-map .leaflet-left {
@media(min-width:$threshold-sm) {
left: $tab-size + $sidebar-margins;
}
}
}
.sidebar-right {
& ~ .sidebar-map .leaflet-right {
@media(min-width:$threshold-sm) {
transition: right $sidebar-transition;
}
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
right: $width-sm + $sidebar-margins;
}
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
right: $width-md + $sidebar-margins;
}
@media(min-width:$threshold-lg) {
right: $width-lg + $sidebar-margins;
}
}
&.collapsed ~ .sidebar-map .leaflet-right {
@media(min-width:$threshold-sm) {
right: $tab-size + $sidebar-margins;
}
}
}

View File

@@ -0,0 +1,80 @@
$sidebar-margins: 8px !default;
$sidebar-inner-border-radius: 4px !default;
@import 'ol-base';
.sidebar-left {
& ~ .sidebar-map {
.olControlZoom,
.olScaleLine {
margin-left: $tab-size + $sidebar-border-width * 2;
@media(min-width: $threshold-sm) {
transition: margin-left $sidebar-transition;
}
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-lg) {
margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
&.collapsed ~ .sidebar-map {
.olControlZoom,
.olScaleLine {
@media(min-width:$threshold-sm) {
margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
}
.sidebar-right {
& ~ .sidebar-map {
.olControlAttribution,
.olControlPermalink,
.olControlMousePosition {
margin-right: $tab-size + $sidebar-border-width * 2;
@media(min-width: $threshold-sm) {
transition: margin-right $sidebar-transition;
}
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-lg) {
margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
&.collapsed ~ .sidebar-map {
.olControlAttribution,
.olControlPermalink,
.olControlMousePosition {
@media(min-width:$threshold-sm) {
margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
}

View File

@@ -0,0 +1,81 @@
$sidebar-margins: 6px !default;
$sidebar-inner-border-radius: 2px !default;
@import 'ol-base';
.sidebar-left {
& ~ .sidebar-map {
.ol-zoom, .ol-scale-line {
margin-left: $tab-size + $sidebar-border-width * 2;
@media(min-width: $threshold-sm) {
transition: margin-left $sidebar-transition;
}
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-lg) {
margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
&.collapsed ~ .sidebar-map {
.ol-zoom, .ol-scale-line {
@media(min-width:$threshold-sm) {
margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
}
.sidebar-right {
& ~ .sidebar-map {
.ol-rotate,
.ol-attribution,
.ol-full-screen {
margin-right: $tab-size + $sidebar-border-width * 2;
@media(min-width: $threshold-sm) {
transition: margin-right $sidebar-transition;
}
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
}
@media(min-width: $threshold-lg) {
margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
&.collapsed ~ .sidebar-map {
.ol-rotate,
.ol-attribution,
.ol-full-screen {
@media(min-width:$threshold-sm) {
margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
}
}
}
}

View File

@@ -0,0 +1,26 @@
/// <reference types="leaflet" />
declare namespace L {
namespace Control {
interface SidebarOptions {
position: string;
}
class Sidebar extends Control {
constructor(id: string, options?: SidebarOptions);
options: Control.ControlOptions;
addTo(map: L.Map): this;
remove(map: L.Map): this;
open(id: string): this;
close(): this;
}
}
namespace control {
function sidebar(id: string, options?: Control.SidebarOptions): L.Control.Sidebar;
}
}

View File

@@ -0,0 +1,102 @@
.leaflet-sidebar {
position: absolute;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
z-index: 2000; }
.leaflet-sidebar.left {
left: -500px;
transition: left 0.5s, width 0.5s;
padding-right: 0; }
.leaflet-sidebar.left.visible {
left: 0; }
.leaflet-sidebar.right {
right: -500px;
transition: right 0.5s, width 0.5s;
padding-left: 0; }
.leaflet-sidebar.right.visible {
right: 0; }
.leaflet-sidebar > .leaflet-control {
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px 24px;
font-size: 1.1em;
background: white;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
-webkit-border-radius: 4px;
border-radius: 4px; }
.leaflet-touch .leaflet-sidebar > .leaflet-control {
box-shadow: none;
border: 2px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box; }
@media (max-width: 767px) {
.leaflet-sidebar {
width: 100%;
padding: 0; }
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 100%; }
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 100%; }
.leaflet-sidebar.left {
left: -100%; }
.leaflet-sidebar.left.visible {
left: 0; }
.leaflet-sidebar.right {
right: -100%; }
.leaflet-sidebar.right.visible {
right: 0; }
.leaflet-sidebar > .leaflet-control {
box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0; }
.leaflet-touch .leaflet-sidebar > .leaflet-control {
border: 0; } }
@media (min-width: 768px) and (max-width: 991px) {
.leaflet-sidebar {
width: 305px; }
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 305px; }
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.leaflet-sidebar {
width: 390px; }
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 390px; }
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 390px; } }
@media (min-width: 1200px) {
.leaflet-sidebar {
width: 460px; }
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 460px; }
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 460px; } }
.leaflet-sidebar .close {
position: absolute;
right: 20px;
top: 20px;
width: 31px;
height: 31px;
color: #333;
font-size: 25px;
line-height: 1em;
text-align: center;
background: white;
-webkit-border-radius: 16px;
border-radius: 16px;
cursor: pointer;
z-index: 1000; }
.leaflet-left {
transition: left 0.5s; }
.leaflet-right {
transition: right 0.5s; }

View File

@@ -0,0 +1,202 @@
L.Control.Sidebar = L.Control.extend({
includes: L.Evented.prototype || L.Mixin.Events,
options: {
closeButton: true,
position: 'left',
autoPan: true,
},
initialize: function (placeholder, options) {
L.setOptions(this, options);
// Find content container
var content = this._contentContainer = L.DomUtil.get(placeholder);
// Remove the content container from its original parent
if(content.parentNode != undefined){
content.parentNode.removeChild(content);
}
var l = 'leaflet-';
// Create sidebar container
var container = this._container =
L.DomUtil.create('div', l + 'sidebar ' + this.options.position);
// Style and attach content container
L.DomUtil.addClass(content, l + 'control');
container.appendChild(content);
// Create close button and attach it if configured
if (this.options.closeButton) {
var close = this._closeButton =
L.DomUtil.create('a', 'close', container);
close.innerHTML = '&times;';
}
},
addTo: function (map) {
var container = this._container;
var content = this._contentContainer;
// Attach event to close button
if (this.options.closeButton) {
var close = this._closeButton;
L.DomEvent.on(close, 'click', this.hide, this);
}
L.DomEvent
.on(container, 'transitionend',
this._handleTransitionEvent, this)
.on(container, 'webkitTransitionEnd',
this._handleTransitionEvent, this);
// Attach sidebar container to controls container
var controlContainer = map._controlContainer;
controlContainer.insertBefore(container, controlContainer.firstChild);
this._map = map;
// Make sure we don't drag the map when we interact with the content
var stop = L.DomEvent.stopPropagation;
var fakeStop = L.DomEvent._fakeStop || stop;
L.DomEvent
.on(content, 'contextmenu', stop)
.on(content, 'click', fakeStop)
.on(content, 'mousedown', stop)
.on(content, 'touchstart', stop)
.on(content, 'dblclick', fakeStop)
.on(content, 'mousewheel', stop)
.on(content, 'wheel', stop)
.on(content, 'scroll', stop)
.on(content, 'MozMousePixelScroll', stop);
return this;
},
removeFrom: function (map) {
//if the control is visible, hide it before removing it.
this.hide();
var container = this._container;
var content = this._contentContainer;
// Remove sidebar container from controls container
var controlContainer = map._controlContainer;
controlContainer.removeChild(container);
//disassociate the map object
this._map = null;
// Unregister events to prevent memory leak
var stop = L.DomEvent.stopPropagation;
var fakeStop = L.DomEvent._fakeStop || stop;
L.DomEvent
.off(content, 'contextmenu', stop)
.off(content, 'click', fakeStop)
.off(content, 'mousedown', stop)
.off(content, 'touchstart', stop)
.off(content, 'dblclick', fakeStop)
.off(content, 'mousewheel', stop)
.off(content, 'wheel', stop)
.off(content, 'scroll', stop)
.off(content, 'MozMousePixelScroll', stop);
L.DomEvent
.off(container, 'transitionend',
this._handleTransitionEvent, this)
.off(container, 'webkitTransitionEnd',
this._handleTransitionEvent, this);
if (this._closeButton && this._close) {
var close = this._closeButton;
L.DomEvent.off(close, 'click', this.hide, this);
}
return this;
},
isVisible: function () {
return L.DomUtil.hasClass(this._container, 'visible');
},
show: function () {
if (!this.isVisible()) {
L.DomUtil.addClass(this._container, 'visible');
if (this.options.autoPan) {
this._map.panBy([-this.getOffset() / 2, 0], {
duration: 0.5
});
}
this.fire('show');
}
},
hide: function (e) {
if (this.isVisible()) {
L.DomUtil.removeClass(this._container, 'visible');
if (this.options.autoPan) {
this._map.panBy([this.getOffset() / 2, 0], {
duration: 0.5
});
}
this.fire('hide');
}
if(e) {
L.DomEvent.stopPropagation(e);
}
},
toggle: function () {
if (this.isVisible()) {
this.hide();
} else {
this.show();
}
},
getContainer: function () {
return this._contentContainer;
},
getCloseButton: function () {
return this._closeButton;
},
setContent: function (content) {
var container = this.getContainer();
if (typeof content === 'string') {
container.innerHTML = content;
} else {
// clean current content
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(content);
}
return this;
},
getOffset: function () {
if (this.options.position === 'right') {
return -this._container.offsetWidth;
} else {
return this._container.offsetWidth;
}
},
_handleTransitionEvent: function (e) {
if (e.propertyName == 'left' || e.propertyName == 'right')
this.fire(this.isVisible() ? 'shown' : 'hidden');
}
});
L.control.sidebar = function (placeholder, options) {
return new L.Control.Sidebar(placeholder, options);
};

View File

@@ -0,0 +1,200 @@
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.sidebar.collapsed {
width: 40px; }
@media (min-width: 768px) {
.sidebar {
top: 10px;
bottom: 10px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar {
width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar {
width: 390px; } }
@media (min-width: 1200px) {
.sidebar {
width: 460px; } }
.sidebar-left {
left: 0; }
@media (min-width: 768px) {
.sidebar-left {
left: 10px; } }
.sidebar-right {
right: 0; }
@media (min-width: 768px) {
.sidebar-right {
right: 10px; } }
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: #fff; }
.sidebar-left .sidebar-tabs {
left: 0; }
.sidebar-right .sidebar-tabs {
right: 0; }
.sidebar-tabs, .sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0;
list-style-type: none; }
.sidebar-tabs > li, .sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #333;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
color: #000;
background-color: #eee; }
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
color: #fff;
background-color: #0074d9; }
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
color: rgba(51, 51, 51, 0.4); }
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center; }
.sidebar-tabs > ul + ul {
bottom: 0; }
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.sidebar-left .sidebar-content {
left: 40px;
right: 0; }
.sidebar-right .sidebar-content {
left: 0;
right: 40px; }
.sidebar.collapsed > .sidebar-content {
overflow-y: hidden; }
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.sidebar-pane.active {
display: block; }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-pane {
min-width: 265px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.sidebar-pane {
min-width: 420px; } }
.sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #fff;
background-color: #0074d9; }
.sidebar-right .sidebar-header {
padding-left: 40px; }
.sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.sidebar-left .sidebar-close {
right: 0; }
.sidebar-right .sidebar-close {
left: 0; }
.sidebar-left ~ .sidebar-map {
margin-left: 40px; }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map {
margin-left: 0; } }
.sidebar-right ~ .sidebar-map {
margin-right: 40px; }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map {
margin-right: 0; } }
.sidebar {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
.sidebar.leaflet-touch {
box-shadow: none;
border-right: 2px solid rgba(0, 0, 0, 0.2); }
@media (min-width: 768px) {
.sidebar {
border-radius: 4px; }
.sidebar.leaflet-touch {
border: 2px solid rgba(0, 0, 0, 0.2); } }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
transition: left 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 400px; } }
@media (min-width: 1200px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 470px; } }
@media (min-width: 768px) {
.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
left: 50px; } }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
transition: right 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 400px; } }
@media (min-width: 1200px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 470px; } }
@media (min-width: 768px) {
.sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
right: 50px; } }

View File

@@ -0,0 +1,216 @@
/* global L */
/**
* @name Sidebar
* @class L.Control.Sidebar
* @extends L.Control
* @param {string} id - The id of the sidebar element (without the # character)
* @param {Object} [options] - Optional options object
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @see L.control.sidebar
*/
L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
includes: (L.Evented.prototype || L.Mixin.Events),
options: {
position: 'left'
},
initialize: function (id, options) {
var i, child;
L.setOptions(this, options);
// Find sidebar HTMLElement
this._sidebar = L.DomUtil.get(id);
// Attach .sidebar-left/right class
L.DomUtil.addClass(this._sidebar, 'sidebar-' + this.options.position);
// Attach touch styling if necessary
if (L.Browser.touch)
L.DomUtil.addClass(this._sidebar, 'leaflet-touch');
// Find sidebar > div.sidebar-content
for (i = this._sidebar.children.length - 1; i >= 0; i--) {
child = this._sidebar.children[i];
if (child.tagName == 'DIV' &&
L.DomUtil.hasClass(child, 'sidebar-content'))
this._container = child;
}
// Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
this._tabitems = this._sidebar.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
for (i = this._tabitems.length - 1; i >= 0; i--) {
this._tabitems[i]._sidebar = this;
}
// Find sidebar > div.sidebar-content > div.sidebar-pane
this._panes = [];
this._closeButtons = [];
for (i = this._container.children.length - 1; i >= 0; i--) {
child = this._container.children[i];
if (child.tagName == 'DIV' &&
L.DomUtil.hasClass(child, 'sidebar-pane')) {
this._panes.push(child);
var closeButtons = child.querySelectorAll('.sidebar-close');
for (var j = 0, len = closeButtons.length; j < len; j++)
this._closeButtons.push(closeButtons[j]);
}
}
},
/**
* Add this sidebar to the specified map.
*
* @param {L.Map} map
* @returns {Sidebar}
*/
addTo: function (map) {
var i, child;
this._map = map;
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
var sub = child.querySelector('a');
if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
L.DomEvent
.on(sub, 'click', L.DomEvent.preventDefault )
.on(sub, 'click', this._onClick, child);
}
}
for (i = this._closeButtons.length - 1; i >= 0; i--) {
child = this._closeButtons[i];
L.DomEvent.on(child, 'click', this._onCloseClick, this);
}
return this;
},
/**
* @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
* Removes this sidebar from the map.
* @param {L.Map} map
* @returns {Sidebar}
*/
removeFrom: function(map) {
console.log('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
this.remove(map);
},
/**
* Remove this sidebar from the map.
*
* @param {L.Map} map
* @returns {Sidebar}
*/
remove: function (map) {
var i, child;
this._map = null;
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
L.DomEvent.off(child.querySelector('a'), 'click', this._onClick);
}
for (i = this._closeButtons.length - 1; i >= 0; i--) {
child = this._closeButtons[i];
L.DomEvent.off(child, 'click', this._onCloseClick, this);
}
return this;
},
/**
* Open sidebar (if necessary) and show the specified tab.
*
* @param {string} id - The id of the tab to show (without the # character)
*/
open: function(id) {
var i, child;
// hide old active contents and show new content
for (i = this._panes.length - 1; i >= 0; i--) {
child = this._panes[i];
if (child.id == id)
L.DomUtil.addClass(child, 'active');
else if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}
// remove old active highlights and set new highlight
for (i = this._tabitems.length - 1; i >= 0; i--) {
child = this._tabitems[i];
if (child.querySelector('a').hash == '#' + id)
L.DomUtil.addClass(child, 'active');
else if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}
this.fire('content', { id: id });
// open sidebar (if necessary)
if (L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
this.fire('opening');
L.DomUtil.removeClass(this._sidebar, 'collapsed');
}
return this;
},
/**
* Close the sidebar (if necessary).
*/
close: function() {
// remove old active highlights
for (var i = this._tabitems.length - 1; i >= 0; i--) {
var child = this._tabitems[i];
if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}
// close sidebar
if (!L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
this.fire('closing');
L.DomUtil.addClass(this._sidebar, 'collapsed');
}
return this;
},
/**
* @private
*/
_onClick: function() {
if (L.DomUtil.hasClass(this, 'active'))
this._sidebar.close();
else if (!L.DomUtil.hasClass(this, 'disabled'))
this._sidebar.open(this.querySelector('a').hash.slice(1));
},
/**
* @private
*/
_onCloseClick: function () {
this.close();
}
});
/**
* Creates a new sidebar.
*
* @example
* var sidebar = L.control.sidebar('sidebar').addTo(map);
*
* @param {string} id - The id of the sidebar element (without the # character)
* @param {Object} [options] - Optional options object
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @returns {Sidebar} A new sidebar instance
*/
L.control.sidebar = function (id, options) {
return new L.Control.Sidebar(id, options);
};

View File

@@ -1 +0,0 @@
obst

7
source/jquery-ui.min.css vendored Normal file

File diff suppressed because one or more lines are too long

6
source/jquery-ui.min.js vendored Normal file

File diff suppressed because one or more lines are too long

41
styles.css Normal file
View File

@@ -0,0 +1,41 @@
#mapdiv {
height: 100vh;
}
.popup-container {
width: 80vw; /* 80% of the viewport width */
max-width: 300px; /* Maximum width */
height: 60vh; /* 60% of the viewport height */
max-height: 350px; /* Maximum height */
padding: 10px; /* Add some padding */
box-sizing: border-box; /* Ensure padding is included in width/height */
}
.popup-form-group {
display: flex; /* popup-label und popup-input nebeneinander statt untereinander */
align-items: center;
margin-bottom: 15px;
}
.popup-label {
flex: 1;
margin-right: 10px;
}
.popup-input {
flex: 2;
}
.popup-button-group {
display: flex;
justify-content: space-between;
}
.popup-button {
flex: 1;
margin-right: 10px;
}
.popup-button:last-child {
margin-right: 0;
}

97
test.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jQuery UI -->
<link rel="stylesheet" href="source/jquery-ui.min.css">
<script src="source/jquery-ui.min.js"></script>
<!-- Bootstrap Stylesheet & Skript -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<!-- Sidebar Plugin -->
<link rel="stylesheet" href="plugins/sidebar/leaflet-sidebar.css">
<script src="plugins/sidebar/leaflet-sidebar.js"></script>
<!-- Button Plugin -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<!-- Font Plugin -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<!-- PolylineMeasure Plugin -->
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css">
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
<!-- MousePosition Plugin -->
<link rel="stylesheet" href="plugins/mouseposition/L.Control.MousePosition.css">
<script src="plugins/mouseposition/L.Control.MousePosition.js"></script>
<!-- Geoman Plugin -->
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css">
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>
<!-- Minimap Plugin -->
<link rel="stylesheet" href="plugins/minimap/Control.MiniMap.min.css">
<script src="plugins/minimap/Control.MiniMap.min.js"></script>
<!-- ajax Plugin -->
<script src="plugins/ajax/leaflet.ajax.js"></script>
</head>
<body>
<div class="popup-container">
<input type="hidden" name="building_database_id" class="updateBuilding" value="something">
<input type="hidden" name="account_no_old" class="updateBuilding" value="something">
<div class="popup-form-group">
<label class="control-label popup-label">Building ID</label>
<input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="account_no">
</div>
<div class="popup-form-group">
<label class="control-label popup-label">Category</label>
<input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_category">
</div>
<div class="popup-form-group">
<label class="control-label popup-label">Storey</label>
<input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_storey">
</div>
<div class="popup-form-group">
<label class="control-label popup-label">Population</label>
<input type="number" class="form-control popup-input text-center updateBuilding" value="something" name="building_population">
</div>
<div class="popup-form-group">
<label class="control-label popup-label">Location</label>
<input type="text" class="form-control popup-input text-center updateBuilding" value="something" name="building_locationn">
</div>
<div class="popup-button-group">
<button type="submit" class="btn btn-success popup-button">Update</button>
<button type="submit" class="btn btn-danger popup-button">Delete</button>
</div>
</div>
</body>
</html>

98
update_data.php Normal file
View File

@@ -0,0 +1,98 @@
<?php
include 'init.php';
$request = htmlspecialchars($_POST['request'], ENT_QUOTES);
if ($request=='buildings') {
$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
$account_no_old = htmlspecialchars($_POST['account_no_old'], ENT_QUOTES);
$account_no = htmlspecialchars($_POST['account_no'], ENT_QUOTES);
$building_category = htmlspecialchars($_POST['building_category'], ENT_QUOTES);
$building_storey = htmlspecialchars($_POST['building_storey'], ENT_QUOTES);
$building_population = htmlspecialchars($_POST['building_population'], ENT_QUOTES);
$building_location = htmlspecialchars($_POST['building_location'], ENT_QUOTES);
$building_dma_id = htmlspecialchars($_POST['building_dma_id'], ENT_QUOTES);
try {
if ($account_no_old != $account_no) {
$result = $pdo -> query("SELECT * FROM buildings WHERE account_no = '$account_no'");
if ($result -> rowCount()>0) {
echo "ERROR: Account Number already exists. Pleas type in another Account Number!";
} else {
$pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
}
} else { $pdo -> query("UPDATE buildings SET account_no = '$account_no', building_category = '$building_category', building_storey = '$building_storey', building_population = '$building_population', building_location = '$building_location', building_dma_id = '$building_dma_id' WHERE webgis_id = '$webgis_id'");
}
} catch (PDOException $e) {
echo "ERROR ".$e->getMessage();
}
}
if ($request == 'pipelines') {
$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
$pipeline_id_old = htmlspecialchars($_POST['pipeline_id_old'], ENT_QUOTES);
$pipeline_id = htmlspecialchars($_POST['pipeline_id'], ENT_QUOTES);
$pipeline_dma_id = htmlspecialchars($_POST['pipeline_dma_id'], ENT_QUOTES);
$pipeline_diameter = htmlspecialchars($_POST['pipeline_diameter'], ENT_QUOTES);
$pipeline_location = htmlspecialchars($_POST['pipeline_location'], ENT_QUOTES);
$pipeline_category = htmlspecialchars($_POST['pipeline_category'], ENT_QUOTES);
$pipeline_length = htmlspecialchars($_POST['pipeline_length'], ENT_QUOTES);
try {
if ($pipeline_id_old != $pipeline_id) {
$result = $pdo -> query("SELECT *from pipelines where pipeline_id = '$pipeline_id' ");
if ($result -> rowCount()>0) {
echo "ERROR: Pipeline ID already exists. Please choose a new ID";
} else {
$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
}
} else {
$pdo -> query("UPDATE pipelines set pipeline_id = '$pipeline_id', pipeline_dma_id = '$pipeline_dma_id', pipeline_diameter = '$pipeline_diameter', pipeline_location = '$pipeline_location', pipeline_category='$pipeline_category', pipeline_length='$pipeline_length' where webgis_id = '$webgis_id'");
}
} catch(PDOException $e) {
echo "ERROR ".$e->getMessage();
}
}
if ($request == 'valves') {
$webgis_id = htmlspecialchars($_POST['webgis_id'], ENT_QUOTES);
$valve_id_old = htmlspecialchars($_POST['valve_id_old'], ENT_QUOTES);
$valve_id = htmlspecialchars($_POST['valve_id'], ENT_QUOTES);
$valve_dma_id = htmlspecialchars($_POST['valve_dma_id'], ENT_QUOTES);
$valve_type = htmlspecialchars($_POST['valve_type'], ENT_QUOTES);
$valve_diameter = htmlspecialchars($_POST['valve_diameter'], ENT_QUOTES);
$valve_location = htmlspecialchars($_POST['valve_location'], ENT_QUOTES);
$valve_visibility = htmlspecialchars($_POST['valve_visibility'], ENT_QUOTES);
try {
if ($valve_id_old != $valve_id) {
$result = $pdo -> query("SELECT *from valves where valve_id = '$valve_id' ");
if ($result -> rowCount()>0) {
echo "ERROR: Valve ID already exists. Please choose a new ID";
} else {
$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
}
} else {
$pdo -> query("UPDATE valves set valve_id = '$valve_id', valve_dma_id = '$valve_dma_id', valve_type = '$valve_type', valve_diameter = '$valve_diameter', valve_location = '$valve_location', valve_visibility = '$valve_visibility' where webgis_id = '$webgis_id' ");
}
} catch(PDOException $e) {
echo "ERROR ".$e->getMessage();
}
}
?>