Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="es">
<head>
<title>Fio_UPUA</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<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.min1.css" />
<link rel="stylesheet" href="dist/button/easy-button.css">
<link rel="stylesheet" href="dist/opengpx/leaflet-distance-marker.css" />
<script src="dist/leaflet.js"></script>
<script src="dist/L.Control.Locate.min1.js"></script>
<script src="dist/button/easy-button.js"></script>
<script src="dist/opengpx/togeojson.js"></script>
<script src="dist/opengpx/leaflet.filelayer.js"></script>
<script src="dist/opengpx/leaflet.geometryutil.js"></script>
<script src="dist/opengpx/leaflet-distance-marker.js"></script>
<script src="dist/leaflet-pip.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 400px;
width: 600px;
max-width: 100%;
max-height: 100%;
}
</style>
<style>body { padding: 0; margin: 0; } #map { height: 100%; width: 100vw; }
.info { padding: 6px 8px; font: 13px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,120,0.7); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; }
</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('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.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:[osm],
}).setView(upua,13);
var Bic = L.geoJson();
var Geoid = L.geoJson();
var kk = L.geoJson();
var kkk = L.geoJson();
var Vertices1 = L.geoJson();
var Vertices2 = L.geoJson();
var Puntos = L.layerGroup([Vertices1,Vertices2]);
var Pozos = L.geoJson();
var gpx = L.geoJson();
L.LocShare = {}
var LS = L.LocShare
LS.Send = {}
LS.Send.Marker = {}
LS.Send.Popup = L.popup().setContent('<div><input id="sendText" type="text" style="border-color:#a7a7a7;border:solid;border-width:2px;border-radius:5px;height:30px;" size="30" onkeyup="L.LocShare.Send.UpdateMessage( this )" placeholder="escribe un mensaje"/></div><div style="height:35px;"><button style="border-style:solid;border-radius:5px;border-color:#8ac926;float:right;color:white;background-color:#3d94f6;height:35px;font-size:15px;line-height:3px;margin:5px;" onclick="copyPrompt()">get url</button><button style="border-style:solid;border-radius:5px;border-color:#ef233c;float:left;color:white;background-color:#3d94f6;height:35px;font-size:15px;line-height:3px;margin:5px;" onclick= "borra()";>borrar</button></div></div>')
LS.Receive = {}
LS.Receive.Marker = {}
LS.Receive.Popup = L.popup()
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'dist/images/marker-shadow.png',
//iconSize: [32, 37],
shadowSize: [41, 41],
iconAnchor: [16, 37],
shadowAnchor: [14, 46],
popupAnchor: [0, -30]
}
});
var verti1 = new LeafIcon({iconUrl:'dist/images/verti1.png', iconAnchor:[20,40]});
var verti2 = new LeafIcon({iconUrl:'dist/images/verti2.png', iconAnchor:[20,40]});
var iglesia1 = new LeafIcon({iconUrl:'dist/images/iglesia1.png', iconAnchor:[20,40]});
var monu1 = new LeafIcon({iconUrl:'dist/images/monu1.png', iconAnchor:[20,40]});
var torre1 = new LeafIcon({iconUrl:'dist/images/torre1.png', iconAnchor:[20,40]});
var sendIcon = L.icon({
iconUrl: "dist/images/IconMapSend.png",
iconSize: [50, 50], // size of the icon
iconAnchor: [25, 50], // point of the icon which will correspond to marker's location
popupAnchor: [0, -30] // point from which the popup should open relative to the iconAnchor
})
var receiveIcon = L.divIcon ({
className: 'custom-div-icon',
html: '<span style="font-size:28px;">🧍</span>',
iconAnchor: [16, 38],
popupAnchor: [0, -38]
})
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 = {
"VÉRTICES": Puntos,
"BIC": Bic,
"Pozos de Nieve": Pozos
};
var layerswitcher =L.control.layers(baseLayers, overlays).addTo(map);
//DIA-HORA (para nombrar los ficheros)
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;
}
//GEOIDE
fetch('data/geoid1.json')
.then(response => {
return response.json();
})
.then(data => {
Geoid=L.geoJson(data, {
style: function (feature) {
return {
color: "blue",
weight: 1,
opacity: 0.01,
stroke:true,
fill: true,
fillOpacity:0.01,
clickable: true
};
},
}).addTo(map);
});
var LatLng;
var longitud;
var latitud;
var altitud;
var alto;
var currentPos;
var distancia;
var LatLng1;
var QP;
var HG;
//LOCATION and SAVE Position
//🧭📍🧭
var easyButton1 = L.easyButton('<span style="font-size:24px; margin-left: -5px;">📍</span>',
function(btn, map) {
var namepoint = window.prompt("Cambie / Edite el Nombre del Archivo", '' +
getFormattedTime());
if (namepoint != null) {
saveAsLocalFile(JSON.stringify(
{"type":"Feature", "properties":{"name": namepoint,"desc": "PDI"}, "geometry":{"type":"Point","coordinates":[longitud, latitud, alto.toFixed(2)] }}),
namepoint + '.json', 'text/plain;charset=utf-8');
markerp= new L.marker (LatLng).addTo(map)
.bindTooltip('<b>Punto:</b> ' + namepoint,{permanent:true, opacity: 0.8});
layerswitcher.addOverlay(markerp,namepoint);
markerp.on('click', function(rec) {
window.open ("https://www.proyectosupua.es/visor_mapa_heim/grabar2.html", "_blank");
})
}
});
// DISTANCIA Y RUMBO
var easyButton = L.easyButton({
states: [{
stateName: 'Dist', // name the state
//icon: '<img src="dist/images/compass1.svg" style=" padding: 0px 0px; vertical-align:middle;">', // and define its properties
icon: '<span style="font-size:23px; margin-left: -5px;">🧭</span>',
title: 'Dist', // like its title
onClick: function(b, position) {
QP= function inClick(p) {
LatLng1 = p.latlng;
map.removeLayer(kk);
map.removeLayer(kkk);
var lng2= LatLng1.lng;
var lat2= LatLng1.lat;
var punto= [LatLng1.lat, LatLng1.lng];
var y =Math.sin(lng2-longitud) * Math.cos(lat2);
var x = Math.cos(latitud)*Math.sin(lat2) -
Math.sin(latitud)*Math.cos(lat2)*Math.cos(lng2-longitud);
var radian = Math.atan2(y, x);
var brng = (radian*180/Math.PI + 360) % 360;
map.on('locationfound', function(pos){
savedLatLng = pos.latlng;
longitud1= savedLatLng.lng;
latitud1= savedLatLng.lat;
var a = new L.LatLng (latitud1,longitud1);
if(LatLng1 != undefined){
if (map.hasLayer(kkk)) {
map.removeLayer(kkk);
map.removeLayer(kk);
b = new L.LatLng(LatLng1.lat, LatLng1.lng);
distancia1 = L.latLng(a).distanceTo(b).toFixed(2)/1000;
var y =Math.sin(lng2-a.lng) * Math.cos(lat2);
var x = Math.cos(a.lat)*Math.sin(lat2) -
Math.sin(a.lat)*Math.cos(lat2)*Math.cos(lng2-a.lng);
var radian = Math.atan2(y, x);
var brng1 = (radian*180/Math.PI + 360) % 360;
kk = new L.circleMarker (b, {
color : '#fe00f6',
fillColor: '#0bff01',
fillOpacity: 0.2,
weight: 3,
radius: 12
}).addTo(map);
kk.bindTooltip("Distan.: "+ distancia1.toLocaleString() + " km."+ "<br>"+ "Rumbo: "+ brng1.toLocaleString() + "°", {permanent:true, keepInView:true}).openTooltip();
kkk = new L.Polyline([a, b], {
color : '#ff00ff',
weight : 4,
opacity: 1,
dashArray : "5, 10"
}).addTo(map);
map.fitBounds(kkk.getBounds());
}}
})
var a = new L.LatLng (latitud,longitud),
b = new L.LatLng(LatLng1.lat, LatLng1.lng);
distancia = L.latLng(a).distanceTo(b).toFixed(2)/1000;
kk = L.circleMarker (b, {
color : ' #fe00f6',
fillColor: '#0bff01',
fillOpacity: 0.2,
weight: 3,
radius: 12
}).addTo(map);
kk.bindTooltip("Distan.: "+ distancia.toLocaleString() + " km."+ "<br>"+ "Rumbo: "+ brng.toLocaleString() + "°", {permanent:true, keepInView:true}).openTooltip();
kkk = L.polyline([a,b], {
color : '#ff00ff',
weight : 4,
opacity: 1,
dashArray : "5, 10"
}).addTo(map);
map.fitBounds(kkk.getBounds());
}
map.on('click', QP);
b.state('para'); // change state on click!
}
}, {
stateName: 'para',
icon: '<img src="dist/images/icon-colored.png">',
title: 'no medir',
onClick: function(b,k) {
map.removeLayer(kk);
map.removeLayer(kkk);
map.off('click',QP);
b.state('Dist');
}
}]
});
L.Control.MyLocate = L.Control.Locate.extend({
stop: function () {
easyButton.remove();
easyButton1.remove();
easyButton3.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);
var info = L.control({position: 'bottomleft'});
map.on('locationfound', function (evt) {
LatLng = evt.latlng;
longitud= LatLng.lng;
latitud= LatLng.lat;
altitud= evt.altitude;
alto= altitud - HG;
currentPos = [latitud, longitud];
//VISOR Coordenadas
info.onAdd = function (win) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (coords) {
this._div.innerHTML = '<b>lng.: </b>'+ longitud.toFixed(6) + '<br>' +'<b>lat.: </b>'+ latitud.toFixed(6) + '<br>' +'<b>alt.: </b>' + alto.toFixed(2);
};
info.addTo(map);
map.on('locatedeactivate', function (close) {
info.remove();
})
var toma = leafletPip.pointInLayer([longitud,latitud], Geoid);
if (toma.length) {
for (var i = 0; i < toma.length; i++) {
HG = toma[i].feature.properties.Q;
}
}
if (!map.hasLayer(easyButton)) {
easyButton.addTo(map);
easyButton1.addTo(map);
easyButton3.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);
}
}
//BIC (puntos)
fetch('data/bic1a.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: torre1});
} else if (tipo == 2) {
marker = new L.Marker(latlng, {icon:iglesia1});
} else if (tipo == 3) {
marker = new L.Marker(latlng, {icon:monu1});
}
return marker;
}
}).addTo(Bic);
});
//POZOS (puntos)
fetch('data/pozos1a.json')
.then(response => {
return response.json();
})
.then(data => {
Pozos = 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.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(Pozos);
});
//VERTICES1
fetch('data/vertices1a.json')
.then(response => {
return response.json();
})
.then(data => {
Vertices1= L.geoJson(data, {
onEachFeature: function (feature, layer) {
var popupContent ="<b>"+feature.properties.N+" (REG) "+" </b><br> "+ "H (orto):"+ feature.properties.Ho+" m." + "<br>" + "H (elip):"+ feature.properties.He+" m.";
layer.bindPopup(popupContent);
},
pointToLayer: function (feature, latlng) {
return new L.marker (latlng,{ icon: verti1});
}
}).addTo(Puntos);
});
//VERTICES2
fetch('data/vertices2a.json')
.then(response => {
return response.json();
})
.then(data => {
Vertices2= L.geoJson(data, {
onEachFeature: function (feature, layer) {
var popupContent ="<b>"+feature.properties.N+" (ROI)" +" </b><br> "+ "H (orto):"+ feature.properties.Ho+" m." + "<br>" + "H (elip):"+ feature.properties.He+" m.";
layer.bindPopup(popupContent);
},
pointToLayer: function (feature, latlng) {
return new L.marker (latlng,{icon: verti2});
}
}).addTo(Puntos);
});
//OPEN GPX, KML
// line style
var style = {color:'red', fillColor: "#ff7800", opacity: 1.0, fillOpacity: 0.6, weight: 3, clickable: true};
// icon style
var myIcon = L.icon({
iconUrl: 'dist/images/wp1.png',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32],
shadowUrl: 'dist/images/marker-shadow.png',
shadowAnchor: [12, 41]
});
L.Control.FileLayerLoad.LABEL = '<img src="dist/images/folder-open.svg"style=" padding: 0px 0px; vertical-align:middle">';
var geoJsonOptions = {
onEachFeature: function (feature, layer) {
layer.bindPopup('<b>' + feature.properties.name + '</b><br>' + 'Desc.: ' + '<b>' + feature.properties.desc + '</b>');},
style: style,
layer: L.geoJson,
distanceMarkers: true,
pointToLayer: function (data, latlng) {
return L.marker(latlng, {icon: myIcon, title: 'Click icon'});
}
}
var control = L.Control.fileLayerLoad({
layerOptions: geoJsonOptions,
}).addTo(map);
control.loader.on('data:loaded', function (event) {
layerswitcher.addOverlay(event.layer, event.filename);
event.layer.eachLayer(function(layer) {
{
if (layer instanceof L.Polyline){
var coords = layer.getLatLngs();
dist = (L.GeometryUtil.length(coords)/1000).toFixed(3) + ' Km.';
var start = coords[0];
L.marker(start).addTo(map)
.bindPopup('<b>'+ event.filename +'</b><br>' + 'Distancia: ' + '<b>' + dist).openPopup();
}
}
})
});
//COMPARTIR POSICION
var easyButton3 = L.easyButton('<span style="font-size:24px; margin-left: -5px;">📡</span>',
function (e) {
L.DomEvent.stopPropagation(e);
L.DomEvent.preventDefault(e);
placeMarker( this._map )
});
const searchParams = new URLSearchParams(window.location.search);
if(searchParams.size > 0 ) {
LS.Receive.lat = searchParams.get('lat')
LS.Receive.lng = searchParams.get('lng')
LS.Receive.message = searchParams.get('M')
LS.Receive.Marker = L.marker([ LS.Receive.lat , LS.Receive.lng] , {icon:receiveIcon})
var pie = L.circleMarker ([ LS.Receive.lat , LS.Receive.lng], {
color : '#ff0054',
fillColor: '#ffea00',
fillOpacity: 0.3,
weight: 3,
radius: 12
});
LS.Receive.Marker.bindPopup(LS.Receive.message)
LS.Receive.Marker.addTo(map)
pie.addTo(map)
LS.Receive.Marker.openPopup()
map.setView([LS.Receive.lat , LS.Receive.lng],16);
}
function copyPrompt() {
window.prompt("Para enviar esta localización : Copiar (Pulsar/Ctrl+C) -> Compartir", '' +
location.origin + location.pathname + '?' +
'lat' + '=' + LS.Send.lat + '&' +
'lng' + '=' + LS.Send.lng + '&' +
'M' + '=' + LS.Send.Message);
}
function borra(){
{LS.Send.Marker.remove();}
}
function placeMarker( selectedMap ){
map.removeLayer(LS.Send.Marker);
LS.Send.Marker = L.marker( currentPos , {draggable: true,icon: sendIcon} );
setSendValues(LS.Send.Marker.getLatLng());
LS.Send.Marker.on('dragend', function(event) {
setSendValues( event.target.getLatLng());
LS.Send.Marker.openPopup();
});
LS.Send.Marker.bindPopup(LS.Send.Popup);
LS.Send.Marker.addTo(selectedMap);
LS.Send.Marker.openPopup();
};
LS.Send.UpdateMessage = function( text ){
var encodedForUrl = encodeURIComponent( text.value );
LS.Send.Message = encodedForUrl
}
function setSendValues( result ){
LS.Send.lat = result.lat;
LS.Send.lng = result.lng;
}
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists