Sindbad~EG File Manager

Current Path : /var/www/web2/visor_mapa_heim/
Upload File :
Current File : //var/www/web2/visor_mapa_heim/alacanti.html

<!DOCTYPE html>
<html lang="es">
<head>
	
	<title>UPUA_Móviles</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	
	<link rel="stylesheet" href="dist/leaflet.css" />	
	<link rel="stylesheet" href="dist/fontawesome/css/all.css" />
	<link rel="stylesheet" href="dist/L.Control.Locate.min.css" />	
	<link rel="stylesheet" href="dist/button/easy-button.css">
	<link rel="stylesheet" href="dist/Control.FullScreen.css" />
	<link rel="stylesheet" href="dist/L.Control.Window.css" />
	<link rel="stylesheet" href="dist/leaflet-search.css" />
	<link rel="stylesheet" href="dist/markers/leaflet.awesome-markers.css">	

	<script src="dist/leaflet.js"></script>
	<script src="dist/L.Control.Locate.js"></script>		
    	<script src="dist/button/easy-button.js"></script>
	<script src="dist/Control.FullScreen.js"></script>
	<script src="dist/leaflet.textpath.js"></script>
	<script src="dist/L.Control.Window.js"></script>
	<script src="dist/leaflet-search.js"></script>
	<script src="dist/panel/jquery-3.4.1.min.js"></script>
	<script src="dist/markers/leaflet.awesome-markers.js"></script>
	<script src="dist/opengpx/togeojson.js"></script>
	<script src="dist/opengpx/leaflet.filelayer.js"></script>	

	<style>
		body {
    			padding: 0;
    			margin: 0;
		}
		html, body, #map {
    			height: 100%;
    			width: 100vw;
		}
	</style>
</head>
<body>

<div id='map'></div>

<script type="text/javascript" src="data/sendas2.json"></script>
<script type="text/javascript" src="data/puntos1.json"></script>
<script type="text/javascript" src="data/puntos2.json"></script>
<script type="text/javascript" src="data/provincia.json"></script>
 <script type="text/javascript" src="data/rutai_l.json"></script>  

<script>	
	
	var orto = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	maxZoom: 19,
	attribution: 'Tiles &copy; Esri &mdash'});
			
	var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		maxZoom: 19,		
		attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> ' +
		'Realización © <a href="http://www.fiomapas.com">FioMapas</a>'});

	var Mapa = L.tileLayer.wms('http://www.ign.es/wms-inspire/mapa-raster', {
	layers: 'mtn_rasterizado',
	format: 'image/png',	
	continuousWorld : true,
	maxZoom: 18,
	attribution: '© <a href="http://www.ign.es/ign/main/index.do" target="_blank">IGN España</a>'});

	var inicio = [40.416, -3,70];
	     alcoy = [38.53313, -0.47241];

		var map = L.map('map', {		
		//maxZoom:19,
		layers:[orto],
		fullscreenControl: true,
			fullscreenControlOptions: { // optional
				position: 'topleft',
				title:"Pantalla completa",
				titleCancel:"Volver a vista inicial"
			}
		}).setView(inicio,5);	

var Senda = new L.geoJson(sendas2);
var Bic = new L.LayerGroup();
var Pozo = new L.LayerGroup();
var Puntos1 = new L.geoJson();
var Puntos2 = new L.geoJson();
var Vistas = L.layerGroup([Puntos1,Puntos2]);
var Ruta_l = new L.geoJson();
var Ruta_p = new L.geoJson();
var Ruta=L.layerGroup([Ruta_l,Ruta_p]);

var LeafIcon = L.Icon.extend({
			options: {
				shadowUrl: 'dist/images/marker-shadow.png',
				iconSize:     [32, 37],
				shadowSize:   [41, 41],
				iconAnchor:   [16, 37],
				shadowAnchor: [9, 41],
				popupAnchor:  [0, -30]
			}
		});

			var tur = new LeafIcon({iconUrl:"dist/images/Heim2.png",iconSize:[48,48],});
			var upua = new LeafIcon({iconUrl:"dist/images/upua.png"});
//Iconos awesome
var cafe = L.AwesomeMarkers.icon({    
    icon: 'coffee',
    prefix: 'fa',
    markerColor: 'red',
    iconColor: '#ffffff'	
  });
var casa = L.AwesomeMarkers.icon({
    icon: 'building',
    prefix: 'fa',
    markerColor: 'darkpurple'
 });
var museo = L.AwesomeMarkers.icon({
    icon: 'university',
    prefix: 'fa',
    markerColor: 'darkred'
 });
var parque = L.AwesomeMarkers.icon({
    icon: 'tree',
    prefix: 'fa',
    markerColor: 'darkgreen'
 });
var foto = L.AwesomeMarkers.icon({
    icon: 'camera',
    prefix: 'fa',
    markerColor: 'cadetblue'
 });
var monu = L.AwesomeMarkers.icon({
    icon: 'monument',
    prefix: 'fa',
    markerColor: 'orange'
 });
var paso = L.AwesomeMarkers.icon({
    icon: 'shoe-prints',
    prefix: 'fa',
    markerColor: 'darkblue'
 });
var CAST = L.AwesomeMarkers.icon({
    icon: 'chess-rook',
    prefix: 'fa',
    markerColor: 'orange'
 });
var IGLE = L.AwesomeMarkers.icon({
    icon: 'church',
    prefix: 'fa',
    markerColor: 'orange'
 });
var OTRO = L.AwesomeMarkers.icon({
    icon: 'monument',
    prefix: 'fa',
    markerColor: 'orange'
 });
var vista = L.AwesomeMarkers.icon({
    icon: 'eye',
    prefix: 'fa',
    markerColor: 'blue'
 });

//Sendas
		function style (feature) {	
		var tipo = feature.properties.T
		
				if (tipo == 1) {
				return {
				color: " #ff0000",
				weight: 4,
				opacity:1
				}
			}
				if (tipo == 2) {
				return {
				color: " #00e500",
				weight: 3,
				opacity:1
				}
			}

				if (tipo == 3) {
				return {
				color: " #ffff00",
				weight: 3,
				opacity:1
				}
			}

				if (tipo == 4 ) {
				return {
				color: " #00e5e5",
				weight: 3,
				//dashArray: '4, 4',												
				opacity:1
				}

			};
		}  	

	function onEachFeature(feature, layer) {
	layer.setText(feature.properties.N, {center: true, orientation: 'auto', allowCrop: false, offset: -5, attributes: {
		'font-size': '10pt',
		'font-weight': 'bold',
		'stroke': '#fdfe02',
		'stroke-width': '1',
		'fill': '#fe00f6'
	 }});	
	}
	Senda = L.geoJson(sendas2, {
		style: style,
		onEachFeature: onEachFeature
    });

//HEIM
	Ruta_l= L.geoJson(rutai_l, {
          		style: function (feature) {
		var tipo = feature.properties.a
				if (tipo == 0) {
				return {
				color: " #ff0000 ",
				weight: 5,
				opacity:1
				}
			}
				if (tipo == 1) {
				return {
				color: " #088da5 ",
				weight: 5,
				opacity:1
				}
			}
				if (tipo == 3) {
				return {
				color: " #FFA500 ",
				weight: 5,
				opacity:1
				}
			}
				if (tipo == 4) {
				return {
				color: " #a05858",
				weight: 3,
				opacity:1,
				dashArray: "3, 7"
				}
			}
				if (tipo == 7) {
				return {
				color: " #ff0000",
				weight: 5,
				opacity:1,
				dashArray: "6, 7, 1, 7"
				}
			}
				if (tipo == 5) {
				return {
				color: " #00B200 ",
				weight: 5,
				opacity:1
				}
				};
		   },
       	onEachFeature: function (feature, layer) {
        	layer.bindPopup( layer.feature.properties.TV + '<br> <div style="font-size:larger"><strong>' + layer.feature.properties.N + '</div>')
         	str=feature.properties.L;
         	//str1= feature.properties.N;
   
       	layer.bindTooltip ("Dist.: " + str)
	.addTo(Ruta);
	
    }
             }); 

L.marker([38.69445, -0.47471], {icon: tur}).addTo(Ruta).bindTooltip('<b>ALCOY:</b> Naturaleza, Indústria y Joya del Modernismo<br><b>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;Pulse</b> en el icono HEIM para comenzar la Ruta', {permanent: true, interactive: true, direction: 'bottom', offset: [5, 15], opacity: 0.8}).bindPopup("<b>ALCOY</b><br>Naturaleza, Indústria y Joya del Modernismo" + "<br> <center><img src='fotos/presentacion.png" + "' 	              style='width:200px'></center><br>"+ '<audio controls autoplay><source src="media/alcoy.mp3"></audio> ').openPopup();

L.marker([38.33781, -0.4858], {icon: tur}).addTo(Ruta).bindTooltip('<b>ALICANTE:</b> Insights into Alicante<br><b>Click</b> on the HEIM icon to start the Route', {permanent: true, interactive: true, direction: 'bottom', offset: [5, 15], opacity: 0.8}).bindPopup("<b>ALICANTE</b><br>Insights into Alicante"+ "<br> <center><img src='fotos/A0.jpg" + "' 	style='width:200px'></center><br>"+ '<audio controls autoplay><source src="media/A0.mp3"></audio> ').openPopup();

$.getJSON('data/rutai_p.geojson', function(json){
geoLayer = L.geoJson(json, {
	
    onEachFeature: function(feature, layer) {
     
var popupContent = "<b>"+ feature.properties.N +"</b><br> <center><img src='fotos/" + feature.properties.F + "' 			              style='width:200px'></center><br>"+ "<audio controls autoplay><source src='media/" + feature.properties.M + "'></audio>";

	layer.bindPopup(popupContent,{keepInView:true, autoPan:true});


	kk=feature.properties.ID;	
        	layer.bindTooltip (kk+"",{ permanent: true, opacity:0.7 })
},
    pointToLayer: function(feature, latlng) {
    var mag = feature.properties.c;
    var marker;
    	if (mag == 4) {
        marker = new L.marker(latlng, {icon: museo}); 
      	} else if (mag == 3) {
        marker = new L.marker(latlng, {icon: cafe });
      	} else if (mag == 2) {
        marker = new L.marker(latlng, {icon: foto });
	} else if (mag == 1) {
        marker = new L.marker(latlng, {icon: parque });
	} else if (mag == 0) {
        marker = new L.marker(latlng, {icon: casa });
	} else if (mag == 5) {
        marker = new L.marker(latlng, {icon: vista });
	} else if (mag == 7) {
        marker = new L.marker(latlng, {icon: paso });
	} else if (mag == 8) {
        marker = new L.marker(latlng, {icon: ruina });
	} else if (mag == 10) {
        marker = new L.marker(latlng, {icon: park });
	} else if (mag == 11) {
        marker = new L.marker(latlng, {icon: IGLE });
	} else if (mag == 12) {
        marker = new L.marker(latlng, {icon: CAST });        
	} else if (mag == 6) {
        marker = new L.marker(latlng, {icon: monu });
      } else {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) });
      }
    return marker;
    }
  })
	.addTo(Ruta);  
map.on ('overlayadd', function (e) { 
if (e.layer === Ruta) {
map.flyTo(alcoy, 11) }});
});
	var baseLayers = {		
		"<span style='color: green'>Imagen</span>": orto,
		"<span style='color: red'>Callejero</span>": osm,
		"<span style='color: brown'>Topográfico</span>": Mapa
	};
	var overlays = {
              "Senderos": Senda	,
	"BIC": Bic,
	"Pozos de Nieve": Pozo,
	"Puntos de Interés": Vistas,
	"Rutas HEIM": Ruta
	};
var layerswitcher =L.control.layers(baseLayers,overlays).addTo(map);

//DIA-HORA

var savedLatLng;
var markerp;
function appendLeadingZeroes(n){
  if(n <= 9){
    return "0" + n;
  }
  return n
}
function getFormattedTime() {
    var today = new Date();
    var y = today.getFullYear();
    // JavaScript months are 0-based.
    var m = today.getMonth() + 1;
    var d = today.getDate();
    var h =appendLeadingZeroes(today.getHours());
    var mi = appendLeadingZeroes(today.getMinutes());
    var s = today.getSeconds();
    return d + "-" + m + "-" + y + "_" + h + mi ; // + "-" + s;
}
//LOCATION and  SAVE Position

var easyButton = L.easyButton('<span class= "fas fa-save", style= "color: #0000ff", title="GUARDAR Posición"</span>', function(btn, map) {
   saveAsLocalFile(JSON.stringify(
   {"type":"Feature", "properties":{"name": getFormattedTime()},  "geometry":{"type":"Point","coordinates":[savedLatLng.lng, savedLatLng.lat] }}),
   getFormattedTime() + '.json', 'text/plain;charset=utf-8');
   markerp= new L.marker (savedLatLng).addTo(map)
  .bindTooltip('<b>Posición:</b> ' + getFormattedTime() + '<br> Lng: ' + savedLatLng.lng + '  Lat: ' + savedLatLng.lat, {permanent:true, opacity: 0.8});
});

L.Control.MyLocate = L.Control.Locate.extend({
  stop: function () {
    easyButton.remove();
    L.Control.Locate.prototype.stop.call(this);
  }
});
L.control.myLocate = function (options) {
  return new L.Control.MyLocate(options);
};

lc = L.control.myLocate({
	locateOptions: {
              enableHighAccuracy: true,
  	strings: {
    	title: "DÓNDE estoy?"
  }}
}).addTo(map);

map.on('locationfound', function (evt) {
  savedLatLng = evt.latlng;
  if (!map.hasLayer(easyButton)) {
    easyButton.addTo(map);
  }
});

function saveAsLocalFile(data, filename, type) {
  var file = new Blob([data], {type: type});
  if (window.navigator.msSaveOrOpenBlob) // IE10+
    window.navigator.msSaveOrOpenBlob(file, filename);
  else { // Others
    var a = document.createElement("a");
    var url = URL.createObjectURL(file);
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);  
    }, 0); 
  }
} 

//OPEN GPX, KML

var stylex = {
            	color: 'red',
	radius: 8,
            	opacity: 1.0,
            	fillOpacity: 0.6,
	fillColor: 'white',
            	weight: 3,
              clickable: false
        };

L.Control.FileLayerLoad.LABEL = '<i class="fas fa-folder-open" , style= "color: #006600"></i>';

control = L.Control.fileLayerLoad({
	fitBounds: true,
	layerOptions: {
		onEachFeature: function (feature, layer) {
        		if (feature.properties.name) { layer.bindTooltip(feature.properties.name, { permanent: false, sticky: true }) };
		},
		style: stylex,
		pointToLayer: function (data, latlng) {
			return L.circleMarker(latlng, {style: stylex});
		}
	}
});
        	control.addTo(map);	
  
  control.loader.on('data:loaded', function (e) {
    layerswitcher.addOverlay(e.layer, e.filename);
  });
	
//BIC's

$.getJSON('data/bic.geojson', function(json){
geoLayer = L.geoJson(json, {

    onEachFeature: function(feature, layer) {
     
var popupContent = "<p><b>"+ feature.properties.N +" </b><br> "+feature.properties.M +'</p>' ;
	layer.bindPopup(popupContent);	
},
    pointToLayer: function(feature, latlng) {
    var tipo = feature.properties.T;
    var marker;
    	if (tipo == 1) {
        marker = new L.marker(latlng, {icon: CAST }); 
      	} else if (tipo == 2) {
        marker = new L.marker(latlng, {icon: IGLE });
      	} else if (tipo == 3) {
        marker = new L.marker(latlng, {icon: OTRO });
	}  else {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) });
      }
    return marker;
    }
  })
	.addTo(Bic);	
}); 

//POZOS

$.getJSON('data/pozos.geojson', function(json){
geoLayer = L.geoJson(json, {

    onEachFeature: function(feature, layer) {
     
var popupContent = "<p><b>"+ feature.properties.N +" </b><br> "+feature.properties.M +'</p>' ;
	layer.bindPopup(popupContent);	
},
    pointToLayer: function(feature, latlng) {
    var tipo = feature.properties.T;
    var marker;
    	if (tipo == 1) {
        marker = new L.circleMarker(latlng, {
		radius:6,
		opacity: .7,
		color: "#0000ff",
		fillColor:  "#ffa500",
		fillOpacity: 0.8 
       });
      	} else if (tipo == 2) {
        marker = new L.circleMarker(latlng, {
		radius:6,
		opacity: .5,
		color: "#0000ff",
		fillColor: " #e6e6fa",
		fillOpacity: 0.8  
 });
	} else if (tipo == 3) {
        marker = new L.circleMarker(latlng, {
		radius:6,
		opacity: .5,
		color: "#0000ff",
		fillColor: "#c93d31",
		fillOpacity: 0.8  
 });
}     	
    return marker;
    }
  })
	.addTo(Pozo);          
	
});

//POI

Puntos1= L.geoJson(puntos1, {
         pointToLayer: function (feature, latlng) {
			return new L.marker (latlng,{icon: vista});

 },
       onEachFeature: function (feature, layer) {
 layer.bindPopup("<b>"+feature.properties.N+" </b><br> <center><img src='fotos/" + feature.properties.F + "' 			              style='width:200px'></center> <br>"+"Municipio:  " +feature.properties.M+"<br> Acceso: " +'<i class="fas fa-hiking fa-lg"style= "color:green"></i>',{keepInView:true, autoPan:true});
       // layer.bindTooltip (feature.properties.N);
    }
             }).addTo(Vistas); 
Puntos2= L.geoJson(puntos2, {
         pointToLayer: function (feature, latlng) {
			return new L.marker (latlng,{icon: vista});

 },
       onEachFeature: function (feature, layer) {
 layer.bindPopup("<b>"+feature.properties.N+" </b><br> <center><img src='fotos/" + feature.properties.F + "' 			              style='width:250px'></center> <br>"+"Municipio:  " +feature.properties.M+"<br> Acceso: " +'<i class="fas fa-car-side fa-lg"style= "color:red"></i>',{keepInView:true, autoPan:true});
      //  layer.bindTooltip (feature.properties.N);
    }
             }).addTo(Vistas);

L.marker([38.38229, -0.50837], {icon: upua}).addTo(Vistas).bindPopup('<b>Universidad Permanente<br> de la Universidad de Alicante</b><br><iframe width="auto" height="315" src="https://www.youtube.com/embed/YR5ApYxkU-U?"></iframe> ' +'<a href="https://web.ua.es/es/upua/" target="_blank" >'+ "<b>WEB UPUA</b>" );

var win =  L.control.window(map,{title:'UPUA 2020 - FioMap<br><center>En Ruta Por Alicante' ,maxWidth:400,modal: false, closeButton: false})
                .content('Pulse en <img src= dist/images1/comp.jpg ,  	width=24, style="vertical-align:middle" /> para usar la pantalla completa. <br> Pulse en 	<img src= dist/images1/loc1.jpg ,  	width=24, style="vertical-align:middle" /> para iniciar el localizador. <br> Pulse en <img src= 	dist/images1/save.jpg , width=24, style="vertical-align:middle" /> para guardar su posición.<br> Pulse en <img src= dist/images1/abrir.jpg , width=24, 		style="vertical-align:middle" />  para abrir un GPX o KML.<br>  Pulse en <img src= dist/images1/capa.jpg , width=24, style="vertical-align:middle" /> 	para cambiar el Mapa Base y activar <br> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 	&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; ó desactivar capas de información.<br> <br>El Círculo <img src= dist/images1/punto.jpg , width=24, 	style="vertical-align:middle" /> señala nuestra posición, la flecha roja <br>nos indica la dirección en la que nos desplazamos.')
                
.prompt({callback:function(){map.flyToBounds(TM.getBounds(), {'duration':3})}})
                .show()

TM= L.geoJson(provincia, {	
          		style: function (feature) {
			return {
				color: " #fe00f6 ",
				weight: 5,
				opacity:0.6,
				dashArray: "15, 10, 5, 10"
				};
		   },
	onEachFeature: function (feature, layer) {
         	str=feature.properties.NAME;

	layer.bindTooltip ("LÍMITE PROVINCIAL: "+str);
   
       	       }            
	}).addTo(map);
	
	//map.fitBounds(TM.getBounds());
	//var inicio= map.flyToBounds(TM.getBounds(), {'duration':5});

//BUSCAR
map.addControl( new L.Control.Search({
		url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
		jsonpParam: 'json_callback',
		propertyName: 'display_name',
		propertyLoc: ['lat','lon'],
		marker: L.circleMarker([0,0],{radius:30}),
		animate: true,
		autoCollapse: false,
		//autoCollapseTime:5,
		hideMarkerOnCollapse:true,
		autoType: false,
		minLength: 2,		
	}) );

//GRABAR

var grabar = L.easyButton ('<span class= "fas fa-microphone-alt fa-lg", style= "color: red", </span>', function() {
 	window.open ("https://www.proyectosupua.es/visor_mapa_heim/grabar.html", "_blank");	
	
  }).addTo(map);
	
</script>

</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists