Sindbad~EG File Manager

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

<!DOCTYPE html>
<html lang="es">
<head>
	
	<title>DIGI_Rutas</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	
<!-- leaflet -->	
<link rel="stylesheet" href="dist/leaflet.css" />    
<script src="dist/leaflet.js"></script>

<!-- Draw & Snap plugins & Edit -->
<link rel="stylesheet" href="dist/leaflet.draw-src.css" />
<script src="dist/leaflet.draw-src.js"></script>
<script src="dist/leaflet.geometryutil.js"></script>
<script src="dist/leaflet.snap.js"></script>
<script src="dist/Control.Draw.Plus.js"></script>

<!-- Import GPX files -->
<script src="dist/togeojson.js"></script>
<script src="dist/leaflet.filelayer.js"></script>

<!-- Boton -->
<link rel="stylesheet" href="dist/button/easy-button.css">
<script src="dist/button/easy-button.js"></script>
<script src="dist/togpx.js"></script>
<script src="dist/FileSaver.js"></script>
	
	<style>
		body {
    			padding: 0;
    			margin: 0;
		}
		html, body, #map {
    			height: 100%;
    			width: 100vw;
		}
	</style>
</head>
<body>

<div id='map'></div>
<textarea id="edit-json" name ="geom" style="display:none" rows="10" cols="120"></textarea>
<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 osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		maxZoom: 19,		
		attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> ' + '  &copy;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>' + '  &copy;Luis UPUA',
	   minZoom: 4,
	   bounds: [[22.173559281306314, -47.0716243806546], [66.88067635831743, 40.8749629405498]]});

	
	upua = [38.3713, -0.513560];
	
		var map = L.map('map', {		
		layers:[orto],			
		}).setView(upua,13);

	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 layerswitcher =L.control.layers(baseLayers).addTo(map);


var gpxLayer = new L.FeatureGroup().addTo(map);

var editor = new L.Control.Draw.Plus({
	draw: {
		marker: true,
		polyline: true,
		polygon: false,
		circlemarker: false		
	},
	edit: {
		remove: true
	},
	entry: 'edit-json',
	//jsonOptions: {},
	changed: 'edit-changed'

}).addTo(map);

var easyButton1 = L.easyButton('<span style="font-size:20px; margin-left: -5px;">&#128190;</span>', 
function(btn, map) {

var geojson = document.getElementById('edit-json').value;
var gpx = togpx(JSON.parse(geojson));

var nameruta = window.prompt("Cambie / Edite el Nombre del Archivo", '' + 
                'ruta');
	if (nameruta != null) {
  	var blob = new Blob([gpx], {
    	type: "text/plain;charset=utf-8"
  });
  	saveAs(blob, nameruta + ".gpx");
}
}).addTo(map);

// File loader

L.Control.FileLayerLoad.LABEL = '<span style="font-size:22px;">&#128194;</span>';
var fl = new L.Control.FileLayerLoad().addTo(map);
fl.loader.on('data:loaded', function(e) {
	e.layer.addTo(editor);
}, fl);

</script>

</body>
</html>

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