<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mapero</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<style>
  body { margin:0; padding:0; }
  #map {width: 100%;height: 280px;}
</style>
</head>
<body>



<div id='map'></div>
<?php 
	if ($_REQUEST[lat] !='') {$lat=$_REQUEST[lat];}else {$lat= "-75.5570125579834";}
	if ($_REQUEST[lon] !='') {$lon=$_REQUEST[lon];}else {$lon= "6.2463742841860";}
	if ($_REQUEST[zoom] !='') {$zoom=$_REQUEST[zoom];}else {$zoom= "16";}
	
 ?>
<script>
var map = L.map('map')
    .setView([<?php echo $lon ?>, <?php echo $lat ?>], <?php echo $zoom ?>);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

//var lat = window.parent.document.getElementById('lat');
//var lng = window.parent.document.getElementById('lon');
var mapa = window.parent.document.getElementById('<?php echo $_REQUEST[id]?>');

var marker = L.marker([<?php echo $lon ?>,<?php echo $lat ?>],{draggable: true}).addTo(map);



// every time the marker is dragged, update the coordinates container
marker.on('dragend', ondragend);

// Set the initial marker coordinate on load.
ondragend();


function ondragend() {
    var m = marker.getLatLng();
    var z = map.getZoom();

   // lat.value= m.lat;
   // lng.value= m.lng;
    mapa.value= m.lng+' '+m.lat+' '+z;
}
</script>


</body>
</html>