add photo tiles from Bianco Veigel & Rene Hansen
parent
8a7a5a5972
commit
4af74834b4
|
@ -250,6 +250,130 @@
|
|||
cursor: move;
|
||||
}
|
||||
|
||||
.layer-switcher.shown.ol-control {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layer-switcher.shown.ol-control:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.layer-switcher {
|
||||
position: absolute;
|
||||
top: 3.5em;
|
||||
right: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.layer-switcher.shown {
|
||||
bottom: 3em;
|
||||
}
|
||||
|
||||
.layer-switcher .panel {
|
||||
padding: 0 1em 0 0;
|
||||
margin: 0;
|
||||
border: 4px solid #eee;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
display: none;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layer-switcher.shown .panel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layer-switcher button {
|
||||
float: right;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layer-switcher.shown button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layer-switcher button:focus, .layer-switcher button:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layer-switcher ul {
|
||||
padding-left: 2em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.layer-switcher li.group > label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.layer-switcher li.layer {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.layer-switcher li.layer label, .layer-switcher li.layer input {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.layer-switcher label.disabled {
|
||||
opacity:0.4;
|
||||
}
|
||||
|
||||
.layer-switcher input {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.layer-switcher.touch ::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.layer-switcher .group button {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
float: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: center 2px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR4nGNgGAWMyBwXFxcGBgaGeii3EU0tXHzPnj1wQRYsihqQ+I0ExDEMQAYNONgoAN0AmMkNaDSyQSheY8JiaCMOGzE04zIAmyFYNTMw4A+DRhzsUUBtAADw4BCeIZkGdwAAAABJRU5ErkJggg==');
|
||||
-webkit-transition: -webkit-transform .2s ease-in-out;
|
||||
-ms-transition: -ms-transform .2s ease-in-out;
|
||||
transition: transform .2s ease-in-out;
|
||||
}
|
||||
|
||||
.layer-switcher .group.layer-switcher-close button {
|
||||
transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
li.group.layer-switcher-fold {
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
.layer-switcher .group.layer-switcher-fold > ul {
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
.layer-switcher .group.layer-switcher-fold.layer-switcher-close > ul {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
height: 100%; }
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -2369,14 +2369,12 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
@ -2391,20 +2389,17 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
@ -2521,8 +2516,7 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
@ -2534,7 +2528,6 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
@ -2549,7 +2542,6 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
@ -2557,14 +2549,12 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
@ -2583,7 +2573,6 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
@ -2664,8 +2653,7 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
@ -2677,7 +2665,6 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
@ -2799,7 +2786,6 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
@ -4617,6 +4603,11 @@
|
|||
"rbush": "2.0.2"
|
||||
}
|
||||
},
|
||||
"ol-layerswitcher": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ol-layerswitcher/-/ol-layerswitcher-3.3.0.tgz",
|
||||
"integrity": "sha512-/ZFwcsGyjneugZWEItxkwCULix5lpRVJ2d/y+Ydd4r01MTtwMZHPJQMV3Q6ChrKgKtVwjLU7vyBXziLnaIvWsA=="
|
||||
},
|
||||
"on-finished": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"ol": "^5.3.3",
|
||||
"ol-layerswitcher": "^3.3.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^6.0.4",
|
||||
|
|
76
src/app.js
76
src/app.js
|
@ -4,8 +4,11 @@ import WebGLMap from 'ol/WebGLMap.js';
|
|||
import {WEBGL} from 'ol/has.js'
|
||||
import View from 'ol/View.js';
|
||||
import {defaults as defaultControls, Attribution as AttributionControl} from 'ol/control.js';
|
||||
import LayerSwitcher from 'ol-layerswitcher';
|
||||
import {all as allStrategy} from 'ol/loadingstrategy';
|
||||
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
|
||||
import LayerGroup from 'ol/layer/Group';
|
||||
import LayerImage from 'ol/layer/Image';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import OSM from 'ol/source/OSM.js';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
|
@ -127,23 +130,25 @@ var styles = {
|
|||
var vectorSource = new VectorSource({
|
||||
format: new OSMXML(),
|
||||
url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1',
|
||||
strategy: allStrategy
|
||||
})
|
||||
strategy: allStrategy,
|
||||
attributions: '©<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>',
|
||||
});
|
||||
|
||||
var map = new MapClass({
|
||||
target: 'map',
|
||||
controls: defaultControls().extend([
|
||||
]),
|
||||
numZoomLevels: 19,
|
||||
units: 'm',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new OSM()
|
||||
}),
|
||||
new VectorLayer({
|
||||
var tileLayer = new TileLayer({
|
||||
title: 'Photos',
|
||||
type: 'base',
|
||||
source: new XYZ({
|
||||
url: 'https://cdn.eventphone.de/maps/ziegeleipark/{z}/{x}/{y}.jpg',
|
||||
maxZoom: 22,
|
||||
minZoom: 14,
|
||||
attributions: 'Bianco Veigel & Rene Hansen',
|
||||
attributionsCollapsible: false,
|
||||
})
|
||||
});
|
||||
|
||||
var vectorLayer = new VectorLayer({
|
||||
title: 'Milliways Overlay',
|
||||
source: vectorSource,
|
||||
attributions: '©<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>',
|
||||
attributionsCollapsible: false,
|
||||
style: function(feature) {
|
||||
for (var key in styles) {
|
||||
var value = feature.get(key);
|
||||
|
@ -165,12 +170,41 @@ var map = new MapClass({
|
|||
}
|
||||
return null;
|
||||
}
|
||||
})
|
||||
],
|
||||
view: new View({
|
||||
center: coordinate_cccamp19,
|
||||
zoom: 17
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
var osmLayer = new TileLayer({
|
||||
title: 'OSM',
|
||||
type: 'base',
|
||||
source: new OSM()
|
||||
});
|
||||
|
||||
var map = new MapClass({
|
||||
target: 'map',
|
||||
controls: defaultControls().extend([
|
||||
new LayerSwitcher()
|
||||
]),
|
||||
numZoomLevels: 19,
|
||||
units: 'm',
|
||||
layers: [
|
||||
new LayerGroup({
|
||||
title: 'Base Layers',
|
||||
layers: [
|
||||
tileLayer,
|
||||
osmLayer
|
||||
]
|
||||
}),
|
||||
new LayerGroup({
|
||||
title: 'overlays',
|
||||
layers: [
|
||||
vectorLayer
|
||||
]
|
||||
})
|
||||
],
|
||||
view: new View({
|
||||
center: coordinate_cccamp19,
|
||||
zoom: 17
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
@import "~ol/ol.css";
|
||||
@import "~ol-layerswitcher/src/ol-layerswitcher.css";
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
Loading…
Reference in New Issue