(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['751'] = { '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: 'Proch', description: ' ', source: new ol.source.Vector({ url: ['/files/gpx/track_A.gpx'], radius: 0, format: new ol.format.GPX() }), style: function (feature) { return style['751'][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_24 = []; var iconList = []; style['731'] = { '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.591159272696974, 45.63441476270746])), name: 'Chiesa dei Santi Faustino e Giovita', description: '

La chiesa dei Santi Faustino e Giovita di Maclino è un edificio di fattura settecentesca ad aula unica. La facciata è suddivisa orizzontalmente da una cornice marcapiano in gesso e scandita verticalmente da lesene binate che inquadrano il fronte e reggono il timpano. All’interno si trovano due cappelle laterali che contengono degli altari lignei rispettivamente dedicati al Sacro Cuore e alla Madonna del Rosario. Quest’ultimo conserva una pala realizzata dal pittore salodiano Andrea Bertanza nel 1626 raffigurante la Vergine con i Santi Macario e Felicita. Nella parete sinistra del presbiterio è collocata una tela dello stesso autore che raffigura la Madonna con il Bambino con San Carlo Borromeo, Sant’Andrea, Sant’Ercolano e un donatore' }); 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_25 = []; var iconList = []; style['769'] = { '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: '#ff0000', width: 3, }), }), 'MultiLineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ff0000', width: 3, }), }), }; // GPX start var t = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([10.586185, 45.626012])), name: 'Ex Villa Bassetti', description: 'Ora condominio posto sul confine con Gardone Riviera: sede dell’ambasciata tedesca. Fu bombardata il 4 dicembre 1944 da aerei alleati.' }); t.setStyle( new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: '#ff0000' }), radius: 8, stroke: new ol.style.Stroke({ color: '#000000', width: 1, }), }), }), ); iconList.push(t); style['742'] = { '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: '#ff0000', width: 3, }), }), 'MultiLineString': new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#ff0000', width: 3, }), }), }; // GPX start var t = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([10.594556697785693, 45.63452885780726])), name: 'Villa Gemma', description: 'Villa situata a Maderno in Via Roma, di proprietà della famiglia Triboldi di Brescia. Qui, nel periodo della RSI, furono ospitati il Ministro dell’Interno Buffarini e quello dell’Educazione Nazionale Biggini.' }); t.setStyle( new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: '#ff0000' }), 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_25.push(iconLayer); var vectorList_27 = []; var iconList = []; style['733'] = { '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.587393054307, 45.626550260983])), name: 'Villa Zanardelli', description: '

Sul confine con Fasano, fu fatta costruire tra il 1888 e il 1892 da Giuseppe Zanardelli, più volte Ministro del Regno d’Italia e Presidente del Consiglio, su progetto dell’architetto Tagliaferri. L’interno fu decorato dall’amico Ximenes. Zanardelli, legatissimo a questa residenza, vi morì nel dicembre del 1903. Attualmente sede dell’A.N.F.F.A.S. e non è visitabile; i giardini sono accessibili soltanto in occasione delle manifestazioni estive.' }); 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); // 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: 'Visualizza', // A layer must have a title to appear in the layerswitcher layers: [ new ol.layer.Group({ title: 'Terreno', // 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: 'Curve di livello', 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: 'Mappa', // 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: 'Proch', 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: '
•
CHIESE', layers: vectorList_24 }), new ol.layer.Group({ title: '
•
RSI', layers: vectorList_25 }), new ol.layer.Group({ title: '
•
VILLE E PALAZZI', layers: vectorList_27 }), ] }), ], 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); })();