Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="es">
<head>
<title>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">
<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/leaflet.textpath.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<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' + ' ©Luis UPUA'});
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> ' + ' ©Luis UPUA'});
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/">IDEE</a>' + ' ©Luis UPUA',
minZoom: 4,
bounds: [[22.173559281306314, -47.0716243806546], [66.88067635831743, 40.8749629405498]]});
var inicio = [40.416, -3,70];
upua = [38.3713, -0.513560];
centro = [38.40,-0.4850];
var map = L.map('map', {
layers:[orto],
}).setView(upua,13);
var Sendas = L.geoJson();
var Bic = L.geoJson();
var kk = L.geoJson();
var kkk = L.geoJson();
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": Sendas,
"BIC": Bic
};
var layerswitcher =L.control.layers(baseLayers,overlays).addTo(map);
var cast = L.divIcon({
html: '<span class="fa-stack fa-lg"> <i class="fas fa-map-marker fa-stack-2x"style= "color:#0000ff"></i> <i class="fas fa-chess-rook fa-stack-1x"style= "color:#ffff00"></i> </span>',
iconAnchor: [20,40],
popupAnchor: [0, -30],
className: 'FIcon' });
var igle = L.divIcon({
html: '<span class="fa-stack fa-lg"> <i class="fas fa-map-marker fa-stack-2x"style= "color:#800080"></i> <i class="fas fa-church fa-stack-1x"style= "color:#f5f5f5"></i> </span>',
iconAnchor: [20,40],
popupAnchor: [0, -30],
className: 'FIcon' });
var otro = L.divIcon({
html: '<span class="fa-stack fa-lg"> <i class="fas fa-map-marker fa-stack-2x"style= "color:#ff00ff"></i> <i class="fas fa-landmark fa-stack-1x"style= "color:#00ff00"></i> </span>',
iconAnchor: [20,40],
popupAnchor: [0, -30],
className: 'FIcon' });
//CAPAS DE INFORMACION (Overlays)
//Senderos (linea) plugin: leaflet-textpath
fetch("data/sendas3.json")
.then(response => {
return response.json();
})
.then(data => {
Sendas = L.geoJSON(data, {
style: function (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
}
};
},
onEachFeature: function (feature, layer) {
layer.setText(feature.properties.N, {center: true, orientation: 'auto', allowCrop: false, offset: -5, attributes: {
'font-size': '12pt',
'font-weight': 'bold',
'fill': '#ff00ff'
}});
}
}).addTo(Sendas);
});
//BIC (puntos) plugin: fontawesome
fetch('data/bic.json')
.then(response => {
return response.json();
})
.then(data => {
Bic = L.geoJSON(data, {
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);
});
// HERRAMIENTAS Y UTILES
//DIA-HORA (para nombrar los ficheros)
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;
}
//LOCALIZACION y GUARDAR Posicion plugin: leaflet-control-locate y leaflet-easyButton
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});
});
// DISTANCIA Y RUMBO
var easyButton1 = L.easyButton({
//('<span class= "fas fa-ruler-combined", style= "color: green", title="Rumbo-Distancia"</span>', function(position) {
states: [{
stateName: 'Dist', // name the state
icon: 'fas fa-ruler-combined', // and define its properties
title: 'Dist', // like its title
onClick: function(b, position) {
var lng1= savedLatLng.lng;
var lat1= savedLatLng.lat;
var currentPos = [savedLatLng.lat, savedLatLng.lng];
map.on('click', function(p) {
savedLatLng1 = p.latlng;
map.removeLayer(kk);
map.removeLayer(kkk);
var lng2= savedLatLng1.lng;
var lat2= savedLatLng1.lat;
var punto= [savedLatLng1.lat, savedLatLng1.lng];
var distance = L.latLng(currentPos).distanceTo(punto)/1000;
var y =Math.sin(lng2-lng1) * Math.cos(lat2);
var x = Math.cos(lat1)*Math.sin(lat2) -
Math.sin(lat1)*Math.cos(lat2)*Math.cos(lng2-lng1);
var radian = Math.atan2(y, x);
var brng = (radian*180/Math.PI - 360)*-1 % 360; // en grados
kk = L.circleMarker (punto, {
color : ' #fe00f6',
fillColor: '#0bff01',
fillOpacity: 0.2,
weight: 3,
radius: 12
}).addTo(map);
kk.bindPopup("Distan.: "+ distance.toLocaleString() + " km."+ "<br>"+ "Rumbo: "+ brng.toLocaleString() + "°", {permanent:true}).openPopup();
kkk = L.polyline([currentPos, punto], {
color : '#ff00ff',
weight : 4,
opacity: 1,
dashArray : "5, 10"
}).addTo(map);
})
b.state('para'); // change state on click!
}
}, {
stateName: 'para',
icon: 'fas fa-ruler fa-spin',
title: 'no medir',
onClick: function(b,k) {
map.off('click');
map.removeLayer(kk);
map.removeLayer(kkk);
b.state('Dist');
}
}]
});
L.Control.MyLocate = L.Control.Locate.extend({
stop: function () {
easyButton.remove();
easyButton1.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,
}
}).addTo(map);
map.on('locationfound', function (evt) {
savedLatLng = evt.latlng;
if (!map.hasLayer(easyButton)) {
easyButton.addTo(map);
easyButton1.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);
}
}
//PROVINCIA DE ALICANTE Todo
L.easyButton('<span class= "fas fa-globe", title="TODO" </span>', function(){ map.setView(centro, 10);
}).addTo(map);
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists