Sindbad~EG File Manager

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

<!DOCTYPE html>
<html lang="es">
<head>
	<title>UPUA VISOR ALICANTE</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/L.Control.Locate.min.css" />	
	<link rel="stylesheet" href="dist/leaflet-search.css" />
	<link rel="stylesheet" href="dist/fontawesome/css/all.css" />
	<link rel="stylesheet" href="dist/panel/leaflet-panel-layers.css" />	
	<link rel="stylesheet" href="dist/markers/leaflet.awesome-markers.css">
	<link rel="stylesheet" href="dist/button/easy-button.css">
	<link rel="stylesheet" href="dist/opaco/L.Control.Opacity.css">
	<link rel="stylesheet" href="dist/L.Control.MousePosition.css">
	<link rel="stylesheet" href="dist/Leaflet.PolylineMeasure.css" />
	<link rel="stylesheet" href="dist/L.Control.Window.css" />
	
			
	<script src="dist/leaflet.js"></script>
	<script src="dist/bundle.js"></script>
	<script src="dist/L.Control.Locate.js"></script>
	<script src="dist/leaflet-search.js"></script>	
	<script src="dist/panel/leaflet-panel-layers.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/button/easy-button.js"></script>
	<script src="dist/opaco/L.Control.Opacity.js"></script>
	<script src="dist/L.Control.MousePosition.js"></script>
	<script src="dist/Leaflet.PolylineMeasure.js"></script>
	<script src="dist/L.Control.Window.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/provincia.json"></script> 
  <script type="text/javascript" src="data/vertices1.json"></script>
  <script type="text/javascript" src="data/vertices2.json"></script>   
  <script type="text/javascript" src="data/ruta4_l.json"></script>  
  <script type="text/javascript" src="data/sendas.json"></script>
  <script type="text/javascript" src="data/parques.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/hospi.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' + '  &copy;Luis UPUA'});

var AMS = L.tileLayer.wms('http://www.ign.es/wms/pnoa-historico', {
	layers: 'AMS_1956-1957',
	format: 'image/png',
	transparent: false,
	continuousWorld : true,
	attribution: 'CEGET cedido por © <a href="http://www.ign.es/ign/main/index.do" target="_blank">IGN España</a>'});

var Mapa = L.tileLayer('https://ign.es/wmts/mapa-raster?service=WMTS&request=GetTile&version=1.0.0&Format=image/jpeg&layer=MTN&style=default&style=default&tilematrixset=GoogleMapsCompatible&TileMatrix={z}&TileRow={y}&TileCol={x}', 
	{
	   attribution: '<a href="http://www.ign.es/">Infraestructura de Datos Espaciales de Espa&ntilde;a (IDEE)</a>',
	   minZoom: 4,
	   bounds: [[22.173559281306314, -47.0716243806546], [66.88067635831743, 40.8749629405498]]});

			
var osm =	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		maxZoom: 18,
		transparent: true,
		attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'}); 

var dtm = L.tileLayer('https://wmts-mapa-lidar.idee.es/lidar?service=WMTS&request=GetTile&version=1.0.0&Format=image/png&layer=EL.GridCoverageDSM&style=default&tilematrixset=GoogleMapsCompatible&TileMatrix={z}&TileRow={y}&TileCol={x}', 
	{
	   attribution: '<a href="http://www.ign.es/">Infraestructura de Datos Espaciales de Espa&ntilde;a (IDEE)</a>'});

	var centro = [38.40,-0.4850],
	      alcoy = [38.58467, -0.24857];
	      inicio = [38.38478, -0.51166];	      


 	var map = L.map('map', {
			zoomControl:true, 
			maxZoom:18,
			layers:[orto]
		}).setView(inicio,16);

var Ruta_l = new L.geoJson();
var Ruta_p = new L.geoJson();
var Ruta=L.layerGroup([Ruta_l,Ruta_p]);
var Senda = new L.geoJson(sendas);
var Puntos1 = new L.geoJson();
var Puntos2 = new L.geoJson();
var Vistas = L.layerGroup([Puntos1,Puntos2]);
var TM = new L.geoJson(provincia);
var Vertices1 = new L.geoJson();
var Vertices2 = new L.geoJson();
var Puntos = L.layerGroup([Vertices1,Vertices2]);
var Transporte = new L.geoJson();
var Restaurantes = new L.LayerGroup();
var Hotel = new L.LayerGroup();
var Curvas = new L.geoJson(parques);
var Serv_Med = new L.geoJson(hospi);
var Turismo = new L.LayerGroup();
var Bic = new L.LayerGroup();
var Pozo = new L.LayerGroup();
		
	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 busstop = new LeafIcon({iconUrl:"dist/images/tramway.png",iconSize:[20,24],iconAnchor: 								[10,20],shadowAnchor: [10,40],});
		var monu = new LeafIcon({iconUrl:"dist/images/monument.png"});
		var mora = new LeafIcon({iconUrl:"dist/images/uni.png"});
		var rest = new LeafIcon({iconUrl:"dist/images/restaurant.png"});
		var hotel = new LeafIcon({iconUrl:"dist/images/hotel.png"});
		var tur = new LeafIcon({iconUrl:"dist/images/Heim2.png",iconSize:[48,48],});
		var playa = new LeafIcon({iconUrl:"dist/images/playa.png"});
		var firstaid = new LeafIcon({iconUrl:"dist/images/firstaid.png"});
		var hiking = new LeafIcon({iconUrl:"dist/images/hiking.png"});
  		var photo = new LeafIcon({iconUrl:"dist/images/photo.png"});
		var pico = new LeafIcon({iconUrl:"dist/images/farol.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 vista = L.AwesomeMarkers.icon({
    icon: 'eye',
    prefix: 'fa',
    markerColor: 'blue'
 });
var monu = L.AwesomeMarkers.icon({
    icon: 'monument',
    prefix: 'fa',
    markerColor: 'orange'
 });
var paso = L.AwesomeMarkers.icon({
    icon: 'shoe-prints',
    prefix: 'fa',
    markerColor: 'darkblue'
 });
var park = L.AwesomeMarkers.icon({
    icon: 'parking',
    prefix: 'fa',
    markerColor: 'blue'
 });
var ruina = L.AwesomeMarkers.icon({
    icon: 'landmark',
    prefix: 'fa',
    markerColor: 'lightgray'
 });
var GR = L.AwesomeMarkers.icon({
    icon: 'hiking',
    prefix: 'fa',
    markerColor: 'red'
 });
var PR = L.AwesomeMarkers.icon({
    icon: 'hiking',
    prefix: 'fa',
    markerColor: 'green'
 });
var SL = L.AwesomeMarkers.icon({
    icon: 'hiking',
    prefix: 'fa',
    markerColor: 'beige'
 });
var SEN = L.AwesomeMarkers.icon({
    icon: 'hiking',
    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 comer = L.AwesomeMarkers.icon({
    icon: 'utensils',
    prefix: 'fa',
    markerColor: 'green'
 });
var vino = L.AwesomeMarkers.icon({
    icon: 'wine-glass-alt',
    prefix: 'fa',
    markerColor: 'darkred'
 });
var dormir = L.AwesomeMarkers.icon({
    icon: 'bed',
    prefix: 'fa',
    markerColor: 'purple'
 });

//Iconos FIcon. Solo icono awesome

var verti_r =  L.divIcon({
	html: '<i class="fas fa-play fa-lg fa-rotate-270" style= "color:red"></i>',
			//iconAnchor: [0,0],
    			className: 'FIcon' });		
var verti_b =  L.divIcon({
	html: '<i class="fas fa-play fa-lg fa-rotate-270" style= "color:#3399ff"></i>',
			//iconSize: [20, 20],
    			className: 'FIcon' });
var punto =  L.divIcon({
	html: '<i class="fas fa-map-pin fa-lg" style= "color:red"></i>',
			className: 'FIcon' });
var tram =  L.divIcon({
	html: '<span class="fa-stack"> <i class="fas fa-map-marker fa-stack-2x"style= "color:#7fffd4"></i> <i class="fas fa-train fa-stack-1x"style= "color:#fa7e1e"></i> </span>',			
			iconAnchor: [15,24],
    			className: 'FIcon' });
var tren =  L.divIcon({
	html: '<span class="fa-stack"> <i class="fas fa-map-marker fa-stack-2x"style= "color:#7fffd4"></i> <i class="fas fa-subway fa-stack-1x"style= "color:#723183"></i> </span>',	
			iconAnchor: [15,24],
    			className: 'FIcon' });
var bus =  L.divIcon({
	html: '<span class="fa-stack"> <i class="fas fa-map-marker fa-stack-2x"style= "color:#7fffd4"></i> <i class="fas fa-bus fa-stack-1x"style= "color:##5490fe"></i> </span>',	
			iconAnchor: [15,24],
    			className: 'FIcon' });		

var monum_1= 'Universidad de Alicante';
var I_monum_1= 'dist/images1/campus1.JPG';
var upua = new L.Marker(new L.LatLng(38.38478, -0.51166),{icon: mora});
map.addLayer(upua);
upua.bindPopup("<img src= "+I_monum_1+" width='300'/><br/>"+'<a href="https://web.ua.es/es/upua/" target="_blank" >'+ "<b>Universidad de Alicante</b>");

	TM= L.geoJson(provincia, {
          		style: function (feature) {
			return {
				color: " #F7347A ",
				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);


Vertices1= L.geoJson(vertices1, {
         pointToLayer: function (feature, latlng) {
			return new L.marker (latlng,{	icon: verti_r});
		              },
       onEachFeature: function (feature, layer) {
 layer.bindPopup("<b>"+feature.properties.N+" (REG) "+" </b><br> "+ "H (orto):"+ feature.properties.Ho+" m." + "<br>" + "H (elip):"+ feature.properties.He+" m.");
        layer.bindTooltip ("<b>"+feature.properties.N+"</b><br>" +feature.properties.Ho+" m." ,{ permanent: false, opacity: 0.7});
    }
             }).addTo(Puntos); 

	

Vertices2= L.geoJson(vertices2, {
         pointToLayer: function (feature, latlng) {
			return new L.marker (latlng,{icon: verti_b});
		              },
       onEachFeature: function (feature, layer) {
 layer.bindPopup("<b>"+feature.properties.N+" (ROI)" +" </b><br> "+ "H (orto):"+ feature.properties.Ho+" m." + "<br>" + "H (elip):"+ feature.properties.He+" m.");
        layer.bindTooltip ("<b>"+feature.properties.N+"</b><br>" +feature.properties.Ho+" m." ,{ opacity: 0.7 });
    }	
             }).addTo(Puntos); 
	

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:250px'></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);


Serv_Med= L.geoJson(hospi, {
         pointToLayer: function (feature, latlng) {
			return new L.marker (latlng,{icon: firstaid});

 },
       onEachFeature: function (feature, layer) {
 layer.bindPopup("<b>"+feature.properties.N+" </b><br> " +feature.properties.D+"<br> " +feature.properties.M+"<br> Teléfono: "+feature.properties.T);
           }
             }).addTo(Serv_Med);

var monum_2= 'Hotel Alahuar';
var I_monum_2= 'dist/images1/alahuar.JPG';

L.marker([38.77539,- 0.12968], {icon: dormir}).addTo(Hotel).bindPopup("<b>HOTEL ALAHUAR</b><br /><img src= "+I_monum_2+" width='250'/><br/>El Tossal, 03791 Benimaurell, Vall de Laguar<br>Tel: 965583397<br>"+ '<a href="https://www.hotelalahuar.es/"target="_blank" >'+"<b>Sitio WEB</b>"+"</a>").openPopup();
             
		

	var parque_1= 'dist/images1/logo_parcs.png';

	Curvas= L.geoJson(parques, { 

		style: function (feature) {
		
	            			return {
	                    		color: "#00FF00",
	                   		weight: 2,
	                    		opacity: 0.5,		 		
				
				};
			     },	
			
	onEachFeature: function (feature, layer) {
       	layer.bindPopup( "<img src= "+parque_1+" width='200'/><br/>" + '<div style="font-size:larger"><strong>' + layer.feature.properties.nombre + '<br/>  <a href="http://www.parquesnaturales.gva.es" target="_blank" >'+ "Parques Naturales de la Comunitat Valenciana"+"</a>", { noHide: false })
         
	str=feature.properties.NAME;
         	str1= feature.properties.nombre;
   
       layer.bindTooltip (str1, {sticky: true});

    }
             }); 	
	
		Ruta_l= L.geoJson(ruta4_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 == 2) {
				return {
				color: " #584a91 ",
				weight: 5,
				opacity:1,
				dashArray: "0, 9"
				}
			}
				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.6989, -0.4718], {icon: tur}).addTo(Ruta).bindTooltip('<b>ALCOY</b> Naturaleza, Indústria y Joya del Modernismo', {permanent: true, interactive: true, direction: 'right', offset: [28, -18], opacity: 0.8}).bindPopup("<b>ALCOY</b><br />Naturaleza, Indústria y <br> Joya del Modernismo</b><br />"+ '<a href='+'PDF/ALCOY.pdf'+' target="_blank" >'+"<b>Presentación de la Ruta</b>"+"</a>").openPopup();

L.marker([38.7842, 0.17406], {icon: tur}).addTo(Ruta).bindTooltip('<b>JÁVEA</b> Piedra seca y Piedra Tosca', {permanent: true, interactive: true, direction: 'right', offset: [28, -18], opacity: 0.8}).bindPopup("<b>JÁVEA</b><br />Piedra seca y <br> Piedra Tosca</b><br />"+ '<a href='+'PDF/javea.pdf'+' target="_blank" >'+"<b>Presentación de la Ruta</b>"+"</a>").openPopup();

L.marker([38.56968, -0.06053], {icon: tur}).addTo(Ruta).bindTooltip("<b>LA SIERRA HELADA</b> y la Villa Romana de l'Albir", {permanent: true, interactive: true, direction: 'right', offset: [28, -18], opacity: 0.8}).bindPopup("<b>LA SIERRA HELADA</b><br />y la Villa Romana<br> de l'Albir</b><br />"+ '<a href='+'PDF/sierra.pdf'+' target="_blank" >'+"<b>Presentación de la Ruta</b>"+"</a>").openPopup();

L.marker([38.33781, -0.4858], {icon: tur}).addTo(Ruta).bindTooltip('<b>ALICANTE</b> Pinceladas de Alicante', {permanent: true, interactive: true, direction: 'right', offset: [28, -18], opacity: 0.8}).bindPopup("<b>ALICANTE</b><br />Pinceladas de<br>Alicante</b><br />"+ '<a href='+'PDF/alicante.pdf'+' target="_blank" >'+"<b>Presentación de la Ruta</b>"+"</a>").openPopup();
	
$.getJSON('data/ruta4_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>"+'<a href= " PDF/' + feature.properties.P + '.pdf" '+ ' target="_blank" ' + '> <b> Información </a>' ;
	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, 10) }}); 
});
  
//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 highlightFeature(e) {
    	var layer = e.target;

    	layer.setStyle({
        	weight: 5,
        	color: '#ff00ff',
        	dashArray: '',
        	fillOpacity: 0.7
    });
	}

	function resetHighlight(e) {
		Senda.resetStyle(e.target);
		}
	function zoomToFeature(e) {
		map.fitBounds(e.target.getBounds());
	}

	function onEachFeature(feature, layer) {
	//layer.setText(feature.properties.N, {center: true, orientation: 'auto', offset: -5, attributes: {'font-size': '8pt', fill: 'blue' }});
	layer.bindTooltip(layer.feature.properties.N, {sticky: true})
		layer.on({
			mouseover: highlightFeature,
			mouseout: resetHighlight,
			click: zoomToFeature
			
		});
	}
	Senda = L.geoJson(sendas, {
		style: style,
		onEachFeature: onEachFeature
    });		

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

    onEachFeature: function(feature, layer) {
     
var popupContent = "<p><b>"+ feature.properties.N +"</b><br> "+feature.properties.P +"<br> Distancia: " +feature.properties.D +'</p>' ;
	layer.bindPopup(popupContent);
	
	kk=feature.properties.N;	
        	layer.bindTooltip ("<b>"+kk+"",{ opacity:0.7 })
},
    pointToLayer: function(feature, latlng) {
    var tipo = feature.properties.T;
    var marker;
    	if (tipo == 1) {
        marker = new L.marker(latlng, {icon: GR}); 
      	} else if (tipo == 2) {
        marker = new L.marker(latlng, {icon: PR });
      	} else if (tipo == 3) {
        marker = new L.marker(latlng, {icon: SL });
	} else if (tipo == 4) {
        marker = new L.marker(latlng, {icon: SEN });
	} else {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) });
      }
    return marker;
    }
  })
	.addTo(Senda);          
	
});

L.marker([38.75270,-0.482253], {icon: hiking}).addTo(Senda).bindPopup("<b>RUTA</b><img src=fotos/GR330.jpg width='300'/>",{keepInView:true}).openPopup();
L.marker([38.768089,-0.503389], {icon: foto}).addTo(Senda).bindPopup("<b>CAVA ARQUEJADA</b><img src=fotos/cava1.jpg width='300'/>",{keepInView:true}).openPopup();

//Transporte

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

    onEachFeature: function(feature, layer) {
     
var popupContent = "<p>"+ feature.properties.T +" : <b><br> "+feature.properties.N +"</b><br> Linea: " +feature.properties.L +'</p>' ;
	layer.bindPopup(popupContent);
	
	kk=feature.properties.T;	
        	layer.bindTooltip ("<b>"+kk+"",{ opacity:0.7 })
},
    pointToLayer: function(feature, latlng) {
    var tipo = feature.properties.K;
    var marker;
    	if (tipo == 1) {
        marker = new L.marker(latlng, {icon: bus}); 
      	} else if (tipo == 2) {
        marker = new L.marker(latlng, {icon: tram });
      	} else if (tipo == 3) {
        marker = new L.marker(latlng, {icon: tren });
	}  else {
        marker = new L.marker(latlng, {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon',markerColor: 'orange'}) });
      }
    return marker;
    }
  })
	.addTo(Transporte);          
	
});

//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);
	
	kk=feature.properties.N;	
        	layer.bindTooltip ("<b>"+kk+"",{ opacity:0.7 })
},
    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);          
	
});

$.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);
	
	kk=feature.properties.N;	
        	layer.bindTooltip ("<b>"+kk+"",{ opacity:0.7 })
},
    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);          
	
});

L.marker([38.337544,-0.491473], {icon: bus}).addTo(Transporte).bindTooltip('Estación de Autobuses').bindPopup ("Estación de Autobuses<b><br>ALICANTE</b><br>"+ '<a href="https://www.estacionalicante.es/index.php/estacion-autobuses-alicante/destinos" target="_blank" >'+"<b>Lineas: </b>"+"</a>").openPopup();

L.marker([38.709661,-0.468932], {icon: bus}).addTo(Transporte).bindTooltip('Estación de Autobuses').bindPopup ("Estación de Autobuses<b><br>ALCOY / ALCOI </b><br>"+ '<a href="https://alcoi.vectalia.es/" target="_blank" >'+"<b>Lineas: </b>"+"</a>").openPopup();


function iconByName(name) {
	return '<i class="icon icon-'+name+'"></i>';
}
var baseLayers = [
{
	group: "<b>Mapas Base",
		//collapsed: true,
		layers: [			
		{
		name: "Mapa de Imagen",
		icon: '<i class="far fa-image "style="color:#ffa500"></i>',
		layer: orto
	},
		{
		name: "Vuelo 1956-1957 AMS",
		icon: '<i class="fas fa-image "style="color:#c0c0c0"></i>',
		layer: AMS
	},		
		{
		name: "Mapa del Relieve (LIDAR)",
		icon: '<i class="fas fa-mountain"style= "color:#808080"></i>',
		layer: dtm
	}
		
         ]
     }
];             

var overLayers = [	
		{
		group: "<b>Mapas de Referencia",
		layers: [
				{				
				name: "Mapa Topográfico (IGN)",
				icon: '<i class="fas fa-stream "style="color:#fd8e00"></i>',
				layer: Mapa
			},
				{
				name: "Mapa Callejero (OSM)",
				icon: '<i class="fas fa-road "style="color:#ff0000"></i>',
				layer: osm
			},
		]
	},
		{
		group: "<b>Lugares y Puntos de Interés",		
		layers: [
				{
				name: "Puntos Característicos (VG)",
				icon: '<i class="fas fa-play fa-rotate-270" style= "color:red"></i>',
				layer: Puntos
			},
				{				
				name: "Parques Naturales",
				icon: '<i class="fas fa-tree"style= "color:#0eb04c"></i>',
				layer: Curvas
			},	
				{				
				name: "Bienes Interés Cultural (BIC)",
				icon: '<i class="fas fa-monument" style= "color:#ffa500"></i>',
				layer: Bic							
			},
				{
				name: "Pozos de Nieve",
				icon: '<i class="fas fa-snowflake" style= "color:#0000ff"></i>',
				layer: Pozo
			},
				{
				name: "Puntos o Lugares de Interés",
				icon: '<i class="fas fa-eye"style= "color:#3399ff"></i>',
				layer: Vistas
			},
		]
	},
	
		{
		group: "<b>Rutas y Senderos",
		//collapsed: true,
		layers: [
				{				
				name: "<b>Rutas Heim</b>",
				icon: '<i class="fas fa-hiking" style= "color:#3cb371"></i>',
				layer: Ruta,											
			},

				{
				name: "Senderos",
				icon: '<i class="fas fa-hiking"></i>',
				layer: Senda
			},
		]
	},	

		{
		group: "<b>Información Complementaria",
		//collapsed: true,
		layers: [			
			
				{
				name: "Transporte",
				icon: '<i class="fas fa-bus-alt"style= "color:#0000ff"></i>',
				layer: Transporte
			},

				

				{
				name: "Restaurantes y Bodegas",
				icon: '<i class="fas fa-utensils"></i>',
				layer: Restaurantes
			},

				{
				name: "Alojamiento",
				icon: '<i class="fas fa-bed"></i>',
				layer: Hotel
			},

				{
				name: "Serv.Médicos",
				icon: '<i class="fas fa-plus-square" style= "color:#25BD16"></i>',
				layer: Serv_Med
			},
		]		
    	
	}		
];
				
var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers, {
	compact: true,
	collapsed: true,
	//collapsibleGroups: true
});
map.addControl(panelLayers);

//AddLayer
const Map_AddLayer = {    
    "Mapa Topográfico (IGN)": Mapa,
    "Mapa Callejero (OSM)": osm,    
};
//OpacityControl
L.control.opacity(
    Map_AddLayer,
    {
    //label: "Layers Opacity",
    collapsed: true,
    position: 'topleft'
    }
).addTo(map);

var printer = L.easyPrint({      		
      		sizeModes: ['A4Landscape', 'A4Portrait'],
      		filename: 'myMap',
		//exportOnly: true,
      		hideControlContainer: true
		}).addTo(map);

lc = L.control.locate({

	locateOptions: {
              enableHighAccuracy: true,
	showCompass: true,		
	maxZoom: 15,
    
	strings: {
        	title: "Donde estoy ??"
    }}
}).addTo(map);

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,		
	}) );

let polylineMeasure = L.control.polylineMeasure ({position:'topleft', unit:'metres', showBearings:true, clearMeasurementsOnStop: false, showClearControl: true, showUnitControl: false})
            polylineMeasure.addTo (map);

L.control.mousePosition().addTo(map);

L.control.scale({
  imperial:false,
  maxWidth:200
}
).addTo(map);

L.easyButton('<span class= "fas fa-globe", title="TODO" </span>', function(){  map.setView(centro, 10);
}).addTo(map);

//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);

L.easyButton('<span class= "fas fa-info", style= "color: red", title="INFO" </span>', function openWin() {
  window.open( href= "PDF/Info.pdf" );
}).addTo(map);

	var win =  L.control.window(map,{title:'¡Bienvenidos al <br> VISOR UPUA Alicante!',content:'Pulse el botón <img src= dist/images1/info.png ,  	width=24, style="vertical-align:middle" /> ( a la izquierda ) para <br><b>INFORMACIÓN Y AYUDA </b> sobre el Visor.'})
           	.show()

	</script>
<script src="data/res.js"></script>
</body>
</html>

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