(function () {
var container = document.getElementById('popup2');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
// PUNTI start ************************************************************************************
var style = [];
var vectorList_a = [];
var iconList = [];
style['830'] = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3,
}),
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3,
}),
}),
};
// GPX start
var vectorgpx = new ol.layer.Vector({
name: 'Trail Terrerosse 3',
description: '
',
source: new ol.source.Vector({
url: ['/files/gpx/2022-07-06_832947563_116_-_Trail_Terrerosse_3.gpx'],
radius: 0,
format: new ol.format.GPX()
}),
style: function (feature) {
return style['830'][feature.getGeometry().getType()];
},
});
vectorList_a.push(vectorgpx);
var iconLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: iconList,
}),
});
vectorList_a.push(iconLayer);
// PUNTI end ************************************************************************************
var view = new ol.View({
center: ol.proj.transform([10.600677, 45.648558], 'EPSG:4326', 'EPSG:3857'),
//maxZoom: 18,
zoom: 14
})
var map = new ol.Map({
//controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
target: 'map',
overlays: [overlay],
layers: [
// LAYOUT DELLA CARTINA
new ol.layer.Group({
title: 'Show', // A layer must have a title to appear in the layerswitcher
layers: [
new ol.layer.Group({
title: 'Terrain', // A layer must have a title to appear in the layerswitcher
type: 'base', // Setting the layers type to 'base' results in it having a radio button and only one base layer being visibile at a time
combine: true, // Setting combine to true causes sub-layers to be hidden in the layerswitcher, only the parent is shown
visible: false,
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain'
})
})
]
}),
new ol.layer.Tile({
title: 'Elevation contour lines',
type: 'base',
source: new ol.source.XYZ({
attributions: 'Tiles © ArcGIS',
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
}),
}),
new ol.layer.Tile({
title: 'Satellite',
type: 'base',
source: new ol.source.XYZ({
attributions: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg',
maxZoom: 19,
}),
}),
new ol.layer.Tile({
title: 'Map', // A layer must have a title to appear in the layerswitcher
type: 'base', // Again set this layer as a base layer
visible: true,
source: new ol.source.OSM()
}),
]
}),
new ol.layer.Group({
title: '116 - Trail Terrerosse 3',
fold: 'open', // Adding a 'fold' property set to either 'open' or 'close' makes the group layer collapsible
layers: [
new ol.layer.Group({
title: '
' + feature.get('description') + '
' + hdms + '
';
overlay.setPosition(coordinate);
}
});
// POPOUP end ************************************************************************************
// Get out-of-the-map div element with the ID "layers" and renders layers to it.
// NOTE: If the layers are changed outside of the layer switcher then you
// will need to call ol.control.LayerSwitcher.renderPanel again to refesh
// the layer tree. Style the tree via CSS.
var sidebar = new ol.control.Sidebar({
element: 'sidebar',
position: 'left'
});
var toc = document.getElementById('layers');
ol.control.LayerSwitcher.renderPanel(map, toc, { reverse: true });
map.addControl(sidebar);
})();