<!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>'
});
basemap_1.addTo(map);
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
}).bindLabel(feature.properties.NOME)
}
});
//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,{"punti d'interesse": 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>
|