Sindbad~EG File Manager

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

<!DOCTYPE html>
<html lang="es">
<head>
	
	<title>ADMME</title>
	<link rel="icon" type="image/x-icon" href="mundo.ico">

	<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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>    
	<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
<!-- leaflet-mapwithlabels -->
	<link rel="stylesheet" href="dist/leaflet-mapwithlabels.css" />
	<script src="dist/leaflet-mapwithlabels.js"></script>
<!-- leaflet-search -->
	<link rel="stylesheet" href="dist/leaflet-search.css" />
	<script src="dist/leaflet-search.js"></script>
<!-- leaflet-print -->
	<script src="dist/bundle.js"></script>
<!-- leafletStyleEditor -->
	<link rel="stylesheet" href="dist/Leaflet.StyleEditor.min.css" />
    	<script src="dist/Leaflet.StyleEditor.min.js"></script>    
<!-- leafletDraw -->
	<link rel="stylesheet" href="dist/leaflet.draw.css" />
    	<script src="dist/leaflet.draw1.js"></script>
	<link rel="stylesheet" href="dist/MakiMarker.css" />    
    	<script src="dist/MakiMarker.js"></script>    
<!-- Leaflet BetterFileLayer -->
	<link rel="stylesheet" href="dist/leaflet.betterfilelayer.css"/>
    	<script src="dist/leaflet.betterfilelayer.min.js"></script>    	
	
<style>
		body {
    			padding: 0;
    			margin: 0;
		}
		html, body, #map {
    			height: 100%;
    			width: 100vw;
		}

.leaflet-popup-content-wrapper, 
.leaflet-popup-tip {
  background-color: #e6e6fa  
}

</style>

</head>
<body>

<div id='map'></div>

<script>

var free = L.tileLayer('https://maps-for-free.com/layer/relief/z{z}/row{y}/{z}_{x}-{y}.jpg', {
	opacity: 0.8,
	maxZoom: 10,
	minZoom: 2.5,
	attribution: 'Tiles &copy; maps-for-free' + '  &copy;Luis UPUA'
});

var orto = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	maxZoom: 10,
	minZoom: 2.5,
	opacity: 0.6,
	attribution: 'Tiles &copy; Esri &mdash' + '  &copy;Luis UPUA'});
	
	
var Esri_OB = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash' + '  &copy;Luis UPUA',
	maxZoom: 10,
	minZoom: 2.5,
	opacity: 0.8,
});

	var inicio = [30, 5];

var NW = L.latLng(90, -180),
SE = L.latLng(-90, 180);
var bounds = L.latLngBounds(NW, SE);	

		var map = L.mapWithLabels('map', {		
		layers:[free,orto],
		maxBounds: bounds,
		zoomSnap: 0,
		zoomDelta: 0.5,
  		maxBoundsViscosity: 0.5,			
		}).setView(inicio,3);

	var baseLayers = {
		"<span style='color: red'>Mapa Imagen</span>": orto,		
		"<span style='color: blue'>Mapa Físico</span>": Esri_OB,		
	};	

var layerswitcher =L.control.layers(baseLayers).addTo(map);

var mapa = L.geoJson();
var texto = L.geoJson();
var mar = L.geoJson();
var isla = L.geoJson();

var style = { 
  default: {
    "color": "#3399ff",
    "weight": 1,
    "opacity": 1,
    "fillColor": 'transparent'
  },
  click: {
    "color": "#990000",
    "weight": 3,
    "opacity": 0.5,
    "fill": 'true',
    "fillColor": '#00ff00',
    "bringToFront" : 'true'
  }
}

var cartel = function onEachFeature(feature, layer) {    
        layer.bindPopup('<div style="text-transform: uppercase;color:red;font-size:24px;text-align:center"><b>' + feature.properties.N + '</b></div>' + "<br><center><img src='banderas/"+ feature.properties.B+"'style='width:150px'></center><br>" + "Nombre Oficial : "+'<b>'+    feature.properties.N_O +'</b><br>'+"Capital : "+'<b>'+feature.properties.CAP +'</b><br>'+"Soberanía : "+'<b>'+feature.properties.S +'</b><br>'+"Código ISO : "+'<b>'+feature.properties.ISO +'</b><br>'+"Código M49 : "+'<b>'+feature.properties.M49);
    }

//PAISES
fetch('data/paises.json')
    .then(response => {     
    return response.json();
  })
  .then(data => {
mapa = L.geoJson(data, {
	style: style.default,
	onEachFeature: cartel,			
}).addTo(map);

mapa.on('click', function(e) {
mapa.setStyle(style.default);
	if(e.layer.selected) {	
    	e.layer.setStyle(style.default);
	e.layer.selected = false;
	e.layer.closePopup();
} else {
	e.layer.setStyle(style.click);
	e.layer.selected = true;
map.fitBounds(e.layer.getBounds());
}
});

//BUSCA
var searchControl = new L.Control.Search({
		layer: mapa,
		propertyName: 'N',
		marker: false,
		autoCollapse: true,
		autoCollapseTime: 3000,
		moveToLocation: function(latlng, title, map) {
			map.fitBounds( latlng.layer.getBounds() );			
		}
	});

searchControl.on('search:locationfound', function(e) {	

		e.layer.setStyle(style.click);
		if(e.layer._popup)
			e.layer.openPopup();
			
	/*}).on('search:collapsed', function(e) {
		mapa.eachLayer(function(layer) {
			mapa.resetStyle(layer);
		});*/	
	});
map.addControl( searchControl );  

});

//StyleEditor
    var styleEditor = L.control.styleEditor({
        position: "topleft",
        markerType: L.StyleEditor.marker.MakiMarker,
        useGrouping: false,
	colorRamp: ['#d11141','#00b159','#00f0d8','#f37735','#ffc425','#ff71ce','#01cdfe','#05ffa1','#b967ff','#fffb96','#00aba9','#ff0097','#a200ff','#0080ff','#f09609','#009dff','#00c003','#ef0000','#f0ff00','#a56100']
    });
    map.addControl(styleEditor);

//Leaflet.draw

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        draw: {
            position: 'topleft',
            polygon: {
                title: 'Draw a sexy polygon!',
                allowIntersection: false,
                drawError: {
                    color: '#b00b00',
                    timeout: 1000
                },
                shapeOptions: {
                    color: '#bada55'
                },
                showArea: true
            },
            polyline: {
                metric: true
            },
            circle: {
                shapeOptions: {
                    color: '#662d91'
                }
            }
        },
        edit: {
            featureGroup: drawnItems
        }
    });
    map.addControl(drawControl);
    layerswitcher.addOverlay(drawnItems,'Dibujos');

    map.on('draw:created', function(e) {
        var type = e.layerType,
            layer = e.layer;

        if (type === 'marker') {
            layer.bindPopup('A popup!');
        }
	if (type === 'polygon') {    	
    	var seeArea = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);    	
	layer.bindPopup((seeArea/10000).toFixed(2) + ' Has.').openPopup;	
  	}
	if (type === 'polyline') {
	var coords = layer.getLatLngs();
    	var length = 0;
    	for (var i = 0; i < coords.length - 1; i++) {
      	length += coords[i].distanceTo(coords[i + 1]);
    	}
    	layer.bindPopup((length/1000).toFixed(2) + ' Kms.').openPopup;
}
        drawnItems.addLayer(layer);	
    });

//TEXTOS
fetch('data/txt_pais.json')
    .then(response => {     
    return response.json();
  })
  .then(data => {

texto = L.geoJSON(data, {
    		pointToLayer: (gj, ll) => L.circleMarker(ll, {
        		labelStyle: l => (l.feature.properties.T== 0 ?{ textTransform: 'uppercase', fontWeight:'bold', color:'red'}:{color: '#008000', fontWeight:'bold', fontSize:'14px'}),

			labelPos: 'cc', 
        		labelPriority: l => l.feature.properties.N,
        		markerWithLabelOnly: true,
        		label: l => l.feature.properties.N,
        		radius: 1,
    }), 
    			style: f => ({ color: 'red', weight: 1 })
}).addTo(map);
});

//MARES
fetch('data/mares.json')
    .then(response => {     
    return response.json();
  })
  .then(data => {

mar = L.geoJSON(data, {
    		pointToLayer: (gj, ll) => L.circleMarker(ll, {
			labelStyle: l => (l.feature.properties.T=='1'?{ fontWeight:'bold', color:'blue', fontSize:'21px', letterSpacing: '3px', fontStyle: 'italic'} :{color: 'blue', fontWeight:'bold', fontSize:'14px', textAlign: 'center', fontStyle: 'italic'}),
			labelPos: 'cc', 
        		labelPriority: l => l.feature.properties.T,
        		markerWithLabelOnly: true,
        		label: l => l.feature.properties.NAME,
        		radius: 1,
    }), 
    			style: f => ({ color: 'blue', weight: 0.5, opacity:0.1 })
}).addTo(map);
});

//ISLAS
fetch('data/txt_islas.json')
    .then(response => {     
    return response.json();
  })
  .then(data => {

isla = L.geoJSON(data, {
    		pointToLayer: (gj, ll) => L.circleMarker(ll, {
			labelPos: 'r',        		
        		markerWithLabelOnly: true,
        		label: l => l.feature.properties.NAME,
        		radius: 0.5,
	labelStyle: { color: 'blue', fontSize:'12px'},
    }), 
    	style: f => ({ color: 'blue', weight: 0.5, opacity:0.1 })		
}).addTo(map);
});

var printer = L.easyPrint({      		
      		sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
      		filename: 'myMap',
      		exportOnly: false, //si true exporta png
      		hideControlContainer: true
		}).addTo(map);
//BFILELayer
	L.Control.betterFileLayer({
		fileSizeLimit: 3072,
	}).addTo(map);
	map.on('bfl:layerloaded', function (event) { 
        layerswitcher.addOverlay(event.layer, 'Nueva Capa');
});

/*function onMapClick(e) {
    alert("Coordenadas " + e.latlng);
}
map.on('click', onMapClick);*/


</script>
</body>
</html>

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