Sindbad~EG File Manager
<!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>
<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/ruta_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 © Esri &mdash'});
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.wms('http://www.ign.es/wms-inspire/mapa-raster', {
layers: 'mtn_rasterizado',
format: 'image/png',
transparent: true,
//opacity: 0.5,
continuousWorld : true,
attribution: '© <a href="http://www.ign.es/ign/main/index.do" target="_blank">IGN España</a>'});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
transparent: true,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>' +
'Realización © <a href="http://www.fiomapas.com">FioMapas</a>'});
var dtm = L.tileLayer.wms('http://www.ign.es/wms-inspire/mdt?', {
layers: 'relieve',
format: 'image/png',
transparent: false,
continuousWorld : true,
attribution: '© <a href="http://www.ign.es/ign/main/index.do" target="_blank">IGN España</a>'
});
var centro = [38.40,-0.4850],
alcoy = [38.6981, -0.4730];
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 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(ruta_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.6989, -0.4718], {icon: tur}).addTo(Ruta).bindPopup("<b>ALCOY</b><br />Naturaleza, Indústria y <br> Joya del Modernismo</b><br />"+ '<a href='+'PDF/ALCOY.pdf'+' target="_blank" >'+"<b>Información de la Ruta</b>"+"</a>").openPopup();
$.getJSON('data/ruta_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:250px'></center> <br>"+'<a href= " PDF/' + feature.properties.ID + '.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 == 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, 16) }});
});
//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 (MDT)",
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>Ruta Heim: </b> Alcoy",
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);
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