(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_38 = [];
var iconList = [];
style['658'] = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 3,
}),
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 3,
}),
}),
};
// GPX start
var vectorgpx = new ol.layer.Vector({
name: 'Bombai - Vigole - Sanico',
description: 'From the Piazza del Ponte of Toscolano take the road to Maclino .
After about 200 mt. take the steep paved road on the right. When you reach the fork, keep climbing and a little beyond the site of the municipal waterworks turn left into a dirt road.
After about a few hundred metres you reach a gate, to the left of which you see the track of your path. Follow it and go into the dale of Bombai. Cross the small bridge over the stream to reach the right-hand side of the dale. Continue uphill and, at the fork, take the left to reach a fine panoramic point, walk back and continue along the path as far as the hamlet of Vigole.
Go past the fountain in the small square and you see the tiny church of Vigole. Climb on along the cobbled lane as far as Rosei and keep the right and reach a votive shrine near the village of Sanico.
Take the downhill paved lane to the right of the shrine and walk all the way back to your starting point. On the way you will see the small church of S. Martino (totally worth a visit)',
source: new ol.source.Vector({
url: ['/files/gpx/track_N.gpx'],
radius: 0,
format: new ol.format.GPX()
}),
style: function (feature) {
return style['658'][feature.getGeometry().getType()];
},
});
vectorList_38.push(vectorgpx);
var iconLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: iconList,
}),
});
vectorList_38.push(iconLayer);
var vectorList_23 = [];
var iconList = [];
style['744'] = {
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.6)',
}),
radius: 10,
stroke: new ol.style.Stroke({
color: '#ff0',
width: 1,
}),
}),
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#385e39',
width: 3,
}),
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#385e39',
width: 3,
}),
}),
};
// GPX start
var t = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([10.608396690330533, 45.64106543677046])),
name: 'Former Town Hall',
description: '.jpg)
It belonged to Ettore Bianchi, who had been manager of the Maffizzoli Papermill for several years, it is now seat of the Library and the Ecomuseum. On the base of the balcony the writing NULLA DIES SINE LINE, \"not a day without tracing a line\" a quote attributed to Apelles.'
});
t.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#385e39'
}),
radius: 8,
stroke: new ol.style.Stroke({
color: '#000000',
width: 1,
}),
}),
}),
);
iconList.push(t);
style['730'] = {
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.6)',
}),
radius: 10,
stroke: new ol.style.Stroke({
color: '#ff0',
width: 1,
}),
}),
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#385e39',
width: 3,
}),
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#385e39',
width: 3,
}),
}),
};
// GPX start
var t = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([10.609055700445758, 45.64140801163121])),
name: 'The old Bridge',
description: 'So called to distinguish it from the new bridge built in 1908, it dates back to the early 16th Century and its construction was ordered in 1497, payed by the Magnifica Patria. They say that up until mid 19th Century on the parapet towards the mount there were two niches, one with a fragment of a sculpture representing a woman with a tiara.
Here there was Contrada Ponte (bridge), the first contrada of Toscolano for those arriving from Maderno and it was crossed by the Strada Regia that continued in via Trento.
Before the contruction of the bridge people crossed the river through fords
'
});
t.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#385e39'
}),
radius: 8,
stroke: new ol.style.Stroke({
color: '#000000',
width: 1,
}),
}),
}),
);
iconList.push(t);
var iconLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: iconList,
}),
});
vectorList_23.push(iconLayer);
var vectorList_24 = [];
var iconList = [];
style['722'] = {
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.6)',
}),
radius: 10,
stroke: new ol.style.Stroke({
color: '#ff0',
width: 1,
}),
}),
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#be6acd',
width: 3,
}),
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#be6acd',
width: 3,
}),
}),
};
// GPX start
var t = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([10.600096564629, 45.64535393265])),
name: 'S. Martino\'s Church',
description: '
Close to the district of Sanico, in Prati di San Martino, the small San Martino di Tours’s church was built on an isolated hill near the ravine of the Toscolano river. It was used as lazaretto since the beginning of the 17th Century. The adjacent cemetery hosted the deceased of Maderno and its districts until the end of the 19th Century. It’s a circular church with a rectangular apse. Next to the church there is a small residential building dating back to the 17th Century (see the engraving on the wall) when a hermit used to live here. The original nucleus is the circular building that is now the aisle, and that was supposed to have a small apse east and a pronaos west.'
});
t.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#be6acd'
}),
radius: 8,
stroke: new ol.style.Stroke({
color: '#000000',
width: 1,
}),
}),
}),
);
iconList.push(t);
var iconLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: iconList,
}),
});
vectorList_24.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: 'Bombai - Vigole - Sanico',
fold: 'open', // Adding a 'fold' property set to either 'open' or 'close' makes the group layer collapsible
layers: [
new ol.layer.Group({
title: '•
GPS TRACK',
layers: vectorList_38
}),
new ol.layer.Group({
title: '•
CULTURAL SITE',
layers: vectorList_23
}),
new ol.layer.Group({
title: '•
CHURCHES',
layers: vectorList_24
}),
]
}),
],
view: view,
});
// GEOLOCALIZZAZIONE start ************************************************************************************
var geolocation = new ol.Geolocation({
// enableHighAccuracy must be set to true to have the heading value.
trackingOptions: {
enableHighAccuracy: true,
},
projection: view.getProjection(),
});
function el(id) {
return document.getElementById(id);
}
el('track').addEventListener('change', function () {
geolocation.setTracking(this.checked);
});
geolocation.on('change', function () {
el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
el('altitude').innerText = geolocation.getAltitude() + ' [m]';
el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
el('heading').innerText = geolocation.getHeading() + ' [rad]';
el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
el('position').innerText = geolocation.getPosition();
});
// handle geolocation error.
geolocation.on('error', function (error) {
var info = document.getElementById('info-track');
info.innerHTML = error.message;
info.style.display = '';
});
var accuracyFeature = new ol.Feature();
geolocation.on('change:accuracyGeometry', function () {
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
map.getView().animate({ center: geolocation.getPosition() }, { duration: 750 });
});
var positionFeature = new ol.Feature();
positionFeature.setStyle(
new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#3399CC',
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
}),
}),
})
);
// geolocation.on('change:position', function () {
geolocation.on('change', function () {
var coordinates = geolocation.getPosition();
positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
});
new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: [accuracyFeature, positionFeature],
}),
});
// GEOLOCALIZZAZIONE end ************************************************************************************
// LINK To POINT start ************************************************************************************
// LINK To POINT end ************************************************************************************
// POPOUP start ************************************************************************************
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, 0],
});
map.addOverlay(popup);
map.on('singleclick', function (evt) {
$(element).popover('dispose');
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature) {
var coordinate = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));
content.innerHTML = '' + feature.get('name') + '
' + 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);
})();