Milliways/cccamp19-map
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add layer management in url

Browse source
This commit is contained in:
TuxCoder 2019-07-22 19:35:01 +02:00
parent 1e7f6df1ec
commit b6b4a309d8
3 changed files with 32099 additions and 33808 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65842
dist/main.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/main.js.map vendored
View file

File diff suppressed because one or more lines are too long

63
src/app.js
View file

@ -134,8 +134,8 @@ var vectorSource = new VectorSource({
attributions: '&#169;<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>', attributions: '&#169;<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>',
}); });
var tileLayer = new TileLayer({ var orthoLayer = new TileLayer({
title: 'Photos', title: 'Ortho Imagery',
type: 'base', type: 'base',
source: new XYZ({ source: new XYZ({
url: 'https://cdn.eventphone.de/maps/ziegeleipark/{z}/{x}/{y}.jpg', url: 'https://cdn.eventphone.de/maps/ziegeleipark/{z}/{x}/{y}.jpg',
@ -190,7 +190,7 @@ var map = new MapClass({
new LayerGroup({ new LayerGroup({
title: 'Base Layers', title: 'Base Layers',
layers: [ layers: [
tileLayer, orthoLayer,
osmLayer osmLayer
] ]
}), }),
@ -221,7 +221,14 @@ function parseURL(url) {
queries = parser.search.replace(/^\?/, '').split('&'); queries = parser.search.replace(/^\?/, '').split('&');
for( i = 0; i < queries.length; i++ ) { for( i = 0; i < queries.length; i++ ) {
split = queries[i].split('='); split = queries[i].split('=');
searchObject[split[0]] = split[1]; if(searchObject[split[0]]) {
if(!Array.isArray(searchObject[split[0]])) {
searchObject[split[0]] = [searchObject[split[0]]];
}
searchObject[split[0]].push(decodeURI(split[1]));
} else {
searchObject[split[0]] = decodeURI(split[1]);
}
} }
return { return {
@ -238,27 +245,46 @@ function generateHash(info) {
var params=[] var params=[]
for( var param in info.searchObject) { for( var param in info.searchObject) {
if(param!='') { if(param!='') {
params.push(`${param}=${info.searchObject[param]}`); if(Array.isArray(info.searchObject[param])){
info.searchObject[param].map(function(value) {
params.push(`${encodeURI(param)}=${encodeURI(value)}`);
});
} else {
params.push(`${encodeURI(param)}=${encodeURI(info.searchObject[param])}`);
}
} }
} }
return `#${info.pathname}?${params.join('&')}`; return `#${info.pathname}?${params.join('&')}`;
} }
var layers = [orthoLayer, osmLayer, vectorLayer];
var hash_info; var hash_info;
var coordinate_parser = /^(\d+)\/(-?\d*\.?\d*)\/(-?\d*\.?\d*)/; var coordinate_parser = /^(\d+)\/(-?\d*\.?\d*)\/(-?\d*\.?\d*)/;
function setCoordinate() { function parseHash() {
hash_info=parseURL(location.hash.substr(1)) hash_info=parseURL(location.hash.substr(1))
if( hash_info.searchObject['map'] && coordinate_parser.test(hash_info.searchObject['map'])){ if( hash_info.searchObject['map'] && coordinate_parser.test(hash_info.searchObject['map'])){
var map_info = coordinate_parser.exec(hash_info.searchObject['map']); var map_info = coordinate_parser.exec(hash_info.searchObject['map']);
map.getView().setCenter(fromLonLat([Number(map_info[3]), Number(map_info[2])])); map.getView().setCenter(fromLonLat([Number(map_info[3]), Number(map_info[2])]));
map.getView().setZoom(map_info[1]); map.getView().setZoom(map_info[1]);
} }
if( hash_info.searchObject['layer']) {
var _layers = hash_info.searchObject['layer'];
if(!Array.isArray(_layers)) {
_layers = [_layers];
}
layers.map(function(layer){
layer.setVisible(
_layers.indexOf(layer.get('title')) >=0
);
});
}
} }
setCoordinate();
parseHash();
window.onhashchange = function() { window.onhashchange = function() {
setCoordinate() parseHash()
}; };
map.on("moveend", function(evt){ map.on("moveend", function(evt){
@ -268,10 +294,23 @@ map.on("moveend", function(evt){
hash_info.searchObject['map'] = `${zoom}/${lat}/${lon}`; hash_info.searchObject['map'] = `${zoom}/${lat}/${lon}`;
location.hash = generateHash(hash_info); location.hash = generateHash(hash_info);
}); });
// map types
layers.map(function(layer){
layer.addEventListener('change:visible',function(e){
hash_info=parseURL(location.hash.substr(1));
var _layers = [];
layers.map(function(layer) {
if(layer.getVisible()){
_layers.push(layer.get('title'));
}
});
hash_info.searchObject['layer'] = _layers;
location.hash = generateHash(hash_info);
});
});
// end coordinate parser ]]] // end coordinate parser ]]]
document.map = map; document.Map = map;
module.export= {
mapa: map
}