(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['753'] = { '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: 'Toscolano - Pulciano', description: ' ', source: new ol.source.Vector({ url: ['/files/gpx/track_H.gpx'], radius: 0, format: new ol.format.GPX() }), style: function (feature) { return style['753'][feature.getGeometry().getType()]; }, }); vectorList_a.push(vectorgpx); var iconLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: iconList, }), }); vectorList_a.push(iconLayer); var vectorList_27 = []; var iconList = []; style['740'] = { '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: '#e7ceb0', width: 3, }), }), 'MultiLineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#e7ceb0', width: 3, }), }), }; // GPX start var t = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([10.618579915812077, 45.64616360829389])), name: 'Delai Palace', description: '

The palace dates back to the 17th Century, flanked by several lemon groves, still visible today, a garden on the lakeshore and has fine frescoes on the external plasters. Here, Scipione Delai hosted Andrea Celesti, who realized numerous canvases fo this palace, today in Brescia.

The property passed to the Maffizzoli and the Oldi' }); t.setStyle( new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: '#e7ceb0' }), 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_27.push(iconLayer); var vectorList_24 = []; var iconList = []; style['711'] = { '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.616715872936, 45.65003075128])), name: 'S. Michele\'s Church', description: '

The old parish church dates back to the 15th Century and it’s right in front of the new parish. Probably built on the ruins of an old fortalice, documented as castellum (castle) in the Middle Ages. San Michele was the main saint for the Longobards. The tower bell looks like a defence tower, at its base there is a “recycled” roman inscription recalling Antoninus Pius and Marcus Aurelius. The portico dates back to the 16th C The church had 3 altars dedicated to San Michele, San Rocco and the Trinity, it was surrounded by a cemetery, a rectory and a rural house. It is now seat of meetings and offices.' }); 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); style['714'] = { '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.618391662415, 45.64467700808])), name: 'Santuario di Santa Maria del Benaco', description: '

The small Church situated at the back of the parish is dedicated to Santa Maria del Benaco and it boasts very ancient origins. The existing plant, which is rectangular with a single nave, dates back to the XV century. If the external appearance is poor and without decorations, the inside is full of beautiful frescoes dating back to the second half of the 15th century and completed in 1514, representing emblems of the important families that contributed to the restoration of the church and were buried here.

The four columns in the middle of the parvis were part of a medieval or romanic ciborium demolished in 1580 by order of Carlo Borromeo, because the main altar had a pagan capitel representing Jupiter Ammon

During the restoration works in 1829 a mosaic floo came to light, probably it belonged to the Roman Villa
' }); 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); style['705'] = { '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.617672904071, 45.644477614539])), name: 'St. Peter and St. Paul\'s Church', description: '

Built in 1584 on the ruins of an old parish church. The austere façade, realized during the XVII Century decorated with two S. Peter statues and two angels, elaborate marble columns, the main two coming from the adjacent Roman Villa. The inside of the church is a proper art gallery with canvases painted by Andrea Celesti between 1688 and the first decade of the 18th Century, depicting S. Peter and Paul’s life. Andrea Celesti relized also the fresco in the apse and in the presbytery, for this reason known as Celest’s Sistine Chapel. There are a lot of tombstones on the floor belonging to the most important families that made the history of Toscolano between the 16th and 17th Century.' }); 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); var vectorList_26 = []; var iconList = []; style['717'] = { '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: '#3aa25f', width: 3, }), }), 'MultiLineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#3aa25f', width: 3, }), }), }; // GPX start var t = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([10.61828302752718, 45.643419392202766])), name: 'The Roman Villa', description: '

One of the most important residential building of the Lake Garda shore built during the roman period. The main part of the complex faced the lake. Due to the plan, the size, the architectural and decorative features, it is part of the lake villas that once existed on the Benacus shore, like the villa in Sirmione and Desenzano del Garda.

The villa probably belonged to the Nonii, one of the mos important brescian families that had a lot of economic business and properties in the lake and country area. Thanks to an inscription the Villa is attributed toMarcus Nonius Macrinus, consul in 154, proconsul of Asia in 170-171, legatus and comes for the Emperor Marcus Aurelius. The sector that is currently visible it’s th southern one, called sector A, that was one of the side wing of the building. Here are several rooms, some of them with mosaic floors and up to 1 m high painted walls. 



Opening times: May - September on saturday and sunday (10-12, 3pm-6pm). Free entry

Info 0365-546023' }); t.setStyle( new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: '#3aa25f' }), 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_26.push(iconLayer); var vectorList_23 = []; var iconList = []; style['710'] = { '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.61918884246249, 45.64606058703979])), name: 'The Toscolano Harbor', description: '

Charming and quiet, the small harbour is surrounded by ancient buildings once inhabited by noble families, such as the Delai Palace on the left of the square, that dates back to the XVII Century and preserves beautiful frescoes. Between the 15th and the 17th century it was a busy distribution centre of goods and iron, where the boats came from and went to Venice.

From the harbour of Toscolano you can admire what remains of one of the many lemon gardens which dotted the territory of Toscolano until the beginning of the XX century and represented a major source of local income. Citrus fruits grown, especially lemons, were exported across Europe. The cultivation was probably introduced by Franciscan friars in the thirteenth century and abandoned in the early twentieth century because it was no longer competitive.
' }); 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['703'] = { '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.616500971707813, 45.6408105071995])), name: 'The Toscolano Papermill', description: '

The papermill of Toscolano was built thanks to Andrea Maffizzoli and the Maffizzoli Brothers Company who were already the owners of some papermills in the Valley and they wanted to build a new papermill on the lakeshore, in Capra, equipped with the most modern machinery for paper production. The construction begun in 1906 and the papermill officially opened on March 19th 1910. In 1927 the 5 Maffizzoli’s papermills had 1100 workers. In 1945 the building in Toscolano was bombed and semi destroyed by the Allied.

From 1989 has been part of the Marchi Group and from 2007 of the Burgo Group. The papermill hires now 370 workers' }); 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); // 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: 'Toscolano - Pulciano', fold: 'open', // Adding a 'fold' property set to either 'open' or 'close' makes the group layer collapsible layers: [ new ol.layer.Group({ title: '
•
Altro', layers: vectorList_a }), new ol.layer.Group({ title: '
•
VILLAS AND PALACES', layers: vectorList_27 }), new ol.layer.Group({ title: '
•
CHURCHES', layers: vectorList_24 }), new ol.layer.Group({ title: '
•
MUSEUMS AND PARKS', layers: vectorList_26 }), new ol.layer.Group({ title: '
•
CULTURAL SITE', layers: vectorList_23 }), ] }), ], 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); })();