Skip to content

Commit

Permalink
Recreate map layers each time a new map is mounted
Browse files Browse the repository at this point in the history
  • Loading branch information
@brunobesson
brunobesson committed Apr 16, 2019
1 parent 6b5520a commit 2888b50
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 88 deletions.
12 changes: 6 additions & 6 deletions src/components/map/OlMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
import RespecterCestProtegerService from '@/js/apis/RespecterCestProtegerService';
import photon from '@/js/apis/photon';
import { cartoLayers, dataLayers, swissTopoLayers, protectionAreasLayers } from './map-layers.js';
import { cartoLayers, dataLayers, protectionAreasLayers } from './map-layers.js';
import {
getDocumentPointStyle,
getDocumentLineStyle,
Expand Down Expand Up @@ -204,13 +204,13 @@
},
data() {
let cartoLayers_ = cartoLayers;
let dataLayers_ = dataLayers;
let cartoLayers_ = cartoLayers();
let dataLayers_ = dataLayers();
// swiss topo only for logged users
if (!this.$user.isLogged) {
cartoLayers_ = cartoLayers_.filter(layer => !swissTopoLayers.includes(layer));
dataLayers_ = dataLayers.filter(layer => !swissTopoLayers.includes(layer));
cartoLayers_ = cartoLayers_.filter(layer => !layer.get('restricted'));
dataLayers_ = dataLayers_.filter(layer => !layer.get('restricted'));
}
return {
Expand All @@ -228,7 +228,7 @@
}),
// protection areas layers
protectionAreasLayers,
protectionAreasLayers: protectionAreasLayers(),
// layer for document icons and paths
documentsLayer: new ol.layer.Vector({
Expand Down
172 changes: 90 additions & 82 deletions src/components/map/map-layers.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import config from '@/js/config';
import ol from '@/js/libs/ol.js';

function createSwisstopoLayer(title, layer, format = 'jpeg', time = 'current') {
function createSwisstopoLayer(title, layer, format = 'jpeg', time = 'current', restricted = false) {
return new ol.layer.Tile({
title,
type: 'base',
Expand All @@ -14,7 +14,8 @@ function createSwisstopoLayer(title, layer, format = 'jpeg', time = 'current') {
return `https://wmts${i}.geo.admin.ch/1.0.0/${layer}/default/${time}/3857/{z}/{x}/{y}.${format}`;
}),
maxZoom: 17
})
}),
restricted
});
}

Expand Down Expand Up @@ -58,84 +59,91 @@ function createIgnSource(title, layer, format = 'jpeg') {
});
}

// $gettext('ESRI', 'Map layer')
const esri = new ol.layer.Tile({
title: 'Esri',
type: 'base',
visible: true,
source: new ol.source.XYZ({
url:
'https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/' +
'WMTS?layer=World_Topo_Map&style=default&tilematrixset=GoogleMapsCompatible&' +
'Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&' +
'TileMatrix={z}&TileCol={x}&TileRow={y}',
attributions: [
'<a href="https://www.arcgis.com/home/item.html?id=30e5fe3149c34df1ba922e6f5bbf808f"' +
' target="_blank" rel="noreferer">Esri</a>'
],
maxZoom: 19
})
});

/*
var openStreetMap = new ol.layer.Tile({
title: 'OpenStreetMap',
source: new OSM(),
export const cartoLayers = function() {
// $gettext('ESRI', 'Map layer')
const esri = new ol.layer.Tile({
title: 'Esri',
type: 'base',
visible: true,
source: new ol.source.XYZ({
url:
'https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/' +
'WMTS?layer=World_Topo_Map&style=default&tilematrixset=GoogleMapsCompatible&' +
'Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&' +
'TileMatrix={z}&TileCol={x}&TileRow={y}',
attributions: [
'<a href="https://www.arcgis.com/home/item.html?id=30e5fe3149c34df1ba922e6f5bbf808f"' +
' target="_blank" rel="noreferer">Esri</a>'
],
maxZoom: 19
})
});

/*
var openStreetMap = new ol.layer.Tile({
title: 'OpenStreetMap',
source: new OSM(),
visible: false,
}) */

// $gettext('Bing', 'Map layer')
const bingMap = new ol.layer.Tile({
title: 'Bing',
source: new ol.source.BingMaps({
key: config.bingApiKey,
imagerySet: 'AerialWithLabels'
}),
visible: false
});

// $gettext('OpenTopoMap', 'Map layer')
const openTopoMap = new ol.layer.Tile({
title: 'OpenTopoMap',
type: 'base',
visible: false,
}) */

// $gettext('Bing', 'Map layer')
const bingMap = new ol.layer.Tile({
title: 'Bing',
source: new ol.source.BingMaps({
key: config.bingApiKey,
imagerySet: 'AerialWithLabels'
}),
visible: false
});

// $gettext('OpenTopoMap', 'Map layer')
const openTopoMap = new ol.layer.Tile({
title: 'OpenTopoMap',
type: 'base',
visible: false,
source: new ol.source.XYZ({
url: '//{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
attributions:
'© <a href="//openstreetmap.org/copyright">OpenStreetMap</a> | ' +
'© <a href="//opentopomap.org" target="_blank" rel="noreferer">OpenTopoMap</a>',
maxZoom: 17
})
});

// $gettext('IGN maps', 'Map layer')
const ignMaps = createIgnSource('IGN maps', 'GEOGRAPHICALGRIDSYSTEMS.MAPS');
// $gettext('IGN ortho', 'Map layer')
const ignOrtho = createIgnSource('IGN ortho', 'ORTHOIMAGERY.ORTHOPHOTOS');
// $gettext('SwissTopo', 'Map layer')
const swissTopo = createSwisstopoLayer('SwissTopo', 'ch.swisstopo.pixelkarte-farbe');

// $gettext('IGN', 'Map slopes layer')
const ignSlopes = createIgnSource('IGN', 'GEOGRAPHICALGRIDSYSTEMS.SLOPES.MOUNTAIN', 'png');
ignSlopes.setOpacity(0.4);
// $gettext('SwissTopo', 'Map slopes layer')
const swissSlopes = createSwisstopoLayer('SwissTopo', 'ch.swisstopo.hangneigung-ueber_30', 'png', '20160101');
swissSlopes.setOpacity(0.4);

const swissTranquilityZones = createSwisstopoLayer(
'Swiss tranquility zones',
'ch.bafu.wrz-wildruhezonen_portal',
'png'
);
swissTranquilityZones.setOpacity(0.7);
const swissFaunaProtectionZones = createSwisstopoLayer(
'Swiss fauna protection zones',
'ch.bafu.wrz-jagdbanngebiete_select',
'png'
);
swissFaunaProtectionZones.setOpacity(0.7);

export const cartoLayers = [esri, /* openStreetMap, */ openTopoMap, bingMap, ignMaps, ignOrtho, swissTopo];
export const dataLayers = [ignSlopes, swissSlopes];
export const swissTopoLayers = [swissTopo, swissSlopes];
export const protectionAreasLayers = [swissTranquilityZones, swissFaunaProtectionZones];
source: new ol.source.XYZ({
url: '//{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
attributions:
'© <a href="//openstreetmap.org/copyright">OpenStreetMap</a> | ' +
'© <a href="//opentopomap.org" target="_blank" rel="noreferer">OpenTopoMap</a>',
maxZoom: 17
})
});

// $gettext('IGN maps', 'Map layer')
const ignMaps = createIgnSource('IGN maps', 'GEOGRAPHICALGRIDSYSTEMS.MAPS');
// $gettext('IGN ortho', 'Map layer')
const ignOrtho = createIgnSource('IGN ortho', 'ORTHOIMAGERY.ORTHOPHOTOS');
// $gettext('SwissTopo', 'Map layer')
const swissTopo = createSwisstopoLayer('SwissTopo', 'ch.swisstopo.pixelkarte-farbe', 'jpeg', 'current', true);

return [esri, /* openStreetMap, */ openTopoMap, bingMap, ignMaps, ignOrtho, swissTopo];
};

export const dataLayers = function() {
// $gettext('IGN', 'Map slopes layer')
const ignSlopes = createIgnSource('IGN', 'GEOGRAPHICALGRIDSYSTEMS.SLOPES.MOUNTAIN', 'png');
ignSlopes.setOpacity(0.4);
// $gettext('SwissTopo', 'Map slopes layer')
const swissSlopes = createSwisstopoLayer('SwissTopo', 'ch.swisstopo.hangneigung-ueber_30', 'png', '20160101', true);
swissSlopes.setOpacity(0.4);

return [ignSlopes, swissSlopes];
};

export const protectionAreasLayers = function() {
const swissTranquilityZones = createSwisstopoLayer(
'Swiss tranquility zones',
'ch.bafu.wrz-wildruhezonen_portal',
'png'
);
swissTranquilityZones.setOpacity(0.7);
const swissFaunaProtectionZones = createSwisstopoLayer(
'Swiss fauna protection zones',
'ch.bafu.wrz-jagdbanngebiete_select',
'png'
);
swissFaunaProtectionZones.setOpacity(0.7);

return [swissTranquilityZones, swissFaunaProtectionZones];
};

0 comments on commit 2888b50

Please sign in to comment.