<!DOCTYPE html> <html> <head> <title>QGIS2leaf webmap</title> <meta charset="utf-8" /> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" /> <link rel="stylesheet" type="text/css" href="css/own_style.css"> <link rel="stylesheet" href="css/label.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> <script src="js/leaflet-hash.js"></script> <script src="js/label.js"></script> <script src="js/Autolinker.min.js"></script> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> </head> <body> <div id="map"></div> <script src="data/exp_puntidinteresse.js"></script> <script src="data/exp_itinerari.js"></script> <script src="data/exp_Places.js"></script> <script> var map = L.map('map', { zoomControl:true, maxZoom:19 }).fitBounds([[45.8894743737,9.3713849884],[45.9287009476,9.47643096279]]); var hash = new L.Hash(map); var additional_attrib = 'created w. <a href="https://github.com/geolicious/qgis2leaf" target ="_blank">qgis2leaf</a> by <a href="http://www.geolicious.de" target ="_blank">Geolicious</a> & contributors<br>'; var feature_group = new L.featureGroup([]); var raster_group = new L.LayerGroup([]); var basemap_0 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: additional_attrib + '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' }); basemap_0.addTo(map); var basemap_1 = L.tileLayer('http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', { attribution: additional_attrib + '© <a href="http://www.opencyclemap.org">OpenCycleMap</a>, © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' }); var basemap_2 = L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', { attribution: additional_attrib + '© <a href="http://www.opencyclemap.org">OpenCycleMap</a>, © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' }); var basemap_3 = L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', { attribution: additional_attrib + '© <a href="http://www.opencyclemap.org">OpenCycleMap</a>, © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' }); var layerOrder=new Array(); function pop_Places(feature, layer) { var popupContent = '<table><tr><th scope="row">id</th><td>' + Autolinker.link(String(feature.properties['id'])) + '</td></tr><tr><th scope="row">Name</th><td>' + Autolinker.link(String(feature.properties['Name'])) + '</td></tr></table>'; layer.bindPopup(popupContent); } function doStylePlaces(feature) { return { color: '#ff0000', fillColor: '#ff0000', weight: 2.0, dashArray: '', opacity: 0.3, fillOpacity: 0.3 }; } var exp_PlacesJSON = new L.geoJson(exp_Places,{ onEachFeature: pop_Places, style: doStylePlaces }); layerOrder[layerOrder.length] = exp_PlacesJSON; for (index = 0; index < layerOrder.length; index++) { feature_group.removeLayer(layerOrder[index]);feature_group.addLayer(layerOrder[index]); } //add comment sign to hide this layer on the map in the initial view. feature_group.addLayer(exp_PlacesJSON); function pop_itinerari(feature, layer) { var popupContent = feature.properties.html_exp; layer.bindPopup(popupContent); } function doStyleitinerari(feature) { return { weight: 9.0, color: '#ff0000', dashArray: '', opacity: 0.5, fillOpacity: 0.5 }; } var exp_itinerariJSON = new L.geoJson(exp_itinerari,{ onEachFeature: pop_itinerari, style: doStyleitinerari }); layerOrder[layerOrder.length] = exp_itinerariJSON; for (index = 0; index < layerOrder.length; index++) { feature_group.removeLayer(layerOrder[index]);feature_group.addLayer(layerOrder[index]); } //add comment sign to hide this layer on the map in the initial view. feature_group.addLayer(exp_itinerariJSON); function pop_puntidinteresse(feature, layer) { var popupContent = feature.properties.html_exp; layer.bindPopup(popupContent); } var exp_puntidinteresseJSON = new L.geoJson(exp_puntidinteresse,{ onEachFeature: pop_puntidinteresse, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8.0, fillColor: '#9bfbf2', color: '#000000', weight: 1, opacity: 1.0, fillOpacity: 1.0 }) } }); //add comment sign to hide this layer on the map in the initial view. feature_group.addLayer(exp_puntidinteresseJSON); feature_group.addTo(map); var title = new L.Control(); title.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; title.update = function () { this._div.innerHTML = '<h2>This is the title</h2>This is the subtitle' }; title.addTo(map); var baseMaps = { 'OSM Standard': basemap_0, 'Thunderforest Cycle': basemap_1, 'Thunderforest Landscape': basemap_2, 'Thunderforest Outdoors': basemap_3}; L.control.layers(baseMaps,{"puntidinteresse": exp_puntidinteresseJSON,"itinerari": exp_itinerariJSON,"Places": exp_PlacesJSON},{collapsed:false}).addTo(map); L.control.scale({options: {position: 'bottomleft',maxWidth: 100,metric: true,imperial: false,updateWhenIdle: false}}).addTo(map); </script> </body> </html> |