Sindbad~EG File Manager
<!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/markers/leaflet.awesome-markers.css">
<link rel="stylesheet" href="dist/leaflet-ruler.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/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>
<script src="dist/leaflet-ruler.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>
var orto = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 18,
attribution: 'Tiles © Esri &mdash'});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <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,
attribution: '© <a href="http://www.ign.es/ign/main/index.do" target="_blank">IGN España</a>'});
var inicio = [40.416, -3,70];
var map = L.map('map', {
maxZoom:18,
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 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': '#ffff00',
'stroke-width': '1',
'fill': '#ff00ff'
}});
}
Senda = L.geoJson(sendas2, {
style: style,
onEachFeature: onEachFeature
});
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
};
var layerswitcher =L.control.layers(baseLayers,overlays).addTo(map);
//LOCATION and SAVE Position
var savedLatLng;
var easyButton = L.easyButton('<span class= "fas fa-save", style= "color: #0000ff", title="GUARDAR Posición"</span>', function(btn, map) {
saveAsLocalFile(JSON.stringify(savedLatLng), 'posicion.txt', 'text/plain;charset=utf-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);
//var layerswitcher = L.control.layers().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: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);
var options = {
position: 'topleft',
};
L.control.ruler(options).addTo(map);
var win = L.control.window(map,{title:'FioMap UPUA 2020<br>Localiza y Guarda tu Posición',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/icon.png , width=20, style="vertical-align:middle" /> para medir distancias.<br>Pulse en <img src= dist/images1/capa.jpg , width=24, style="vertical-align:middle" /> para cambiar el Mapa Base y activar <br> ó 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. '}).show()
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists