correcion bug en crear areas

api.php

@@ -1,6 +1,6 @@
 <?php
-session_start();
-ini_set('display_errors', 'On');
+//session_start();
+//ini_set('display_errors', 'On');
 
 require ('xajax/xajax.inc.php');
 $xajax = new xajax();
@@ -21,11 +21,11 @@ require ("funciones/conex.php");
 if($datos['proyecto']==""){
 	$proyecto= remplacetas('form_id','id',$datos['id'],'id_empresa',"") ;
 	$datos['proyecto']= $proyecto[0] ;
-	
+
 	}
 @$datos['formato']=$_REQUEST['formato'];
 if(isset($_REQUEST['debug'])) {ini_set('display_errors', 'On');
-} 
+}
 
 if(isset($_REQUEST['formato'])){
 //	if($_REQUEST['formato']=='li'){
@@ -33,17 +33,19 @@ if(isset($_REQUEST['formato'])){
 		//print_r($array);//echo "hola li";
 		$json=  json($datos);
 		$array = json_decode($json);
-		
+
 		echo array_linea($array,$_REQUEST['formato'],$_REQUEST['id'])." ";
 		//echo "".build_list($array,$_REQUEST['formato'],$_REQUEST['id']);
 		//echo $json;
 		//echo planilla($datos['id'],$datos['registros'],"dinamico");
 //		}
-		
-	
+
+
 	}else{
 header('Content-Type: application/json');
 //echo "hola  /// $_REQUEST[id] // " ;
+
+//echo " <pre>".print_r($datos)."</pre>";
 echo json($datos);
 }
 ?>

css/mapero.css

@@ -0,0 +1,83 @@
+body { margin:0; padding:0; overflow:hidden; touch-action:none; }
+#map { position:absolute; top:0; bottom:0; width:100%; overflow:hidden; }
+p {font-size: 14px;}
+
+#sidebar { 
+    z-index: 10;  position: absolute;  right: 10px;  top: 10px; width: 320px;
+    background-color:rgba(255,255,255,.9); padding: 20px; border-radius: 3px; }
+#title h1 { color: #390; }
+#introduction p { margin-bottom: 10px; line-height: 1.5em }
+
+#taxas>div { display: inline-block; }
+#taxas p { text-align: center; }
+.button { 
+    background-color: #fff; background-size:cover; 
+    border-radius: 5px; border: #390 1px solid; height:48px; width: 48px; 
+    margin: 4px; margin-left: 8px;
+}
+.button.active { border:color:#390; }
+.button:hover { border-color: #390; }
+
+.button#Plantae { background-image: url('img/icon0_plantae.png') }
+.button#Aves { background-image: url('img/icon0_aves.png') }
+.button#Insecta { background-image: url('img/icon0_insecta.png') }
+.button#Fungi { background-image: url('img/icon0_fungi.png') }
+
+.button#Plantae.active { background-image: url('img/icon1_plantae.png') }
+.button#Aves.active { background-image: url('img/icon1_aves.png') }
+.button#Insecta.active { background-image: url('img/icon1_insecta.png') }
+.button#Fungi.active { background-image: url('img/icon1_fungi.png') }
+
+.button#Plantae:hover { background-image: url('img/icon1_plantae.png') }
+.button#Aves:hover { background-image: url('img/icon1_aves.png') }
+.button#Insecta:hover { background-image: url('img/icon1_insecta.png') }
+.button#Fungi:hover { background-image: url('img/icon1_fungi.png') }
+
+.marker { 
+    border: #fff 1.4px solid; border-radius: 50%; cursor: pointer; box-shadow: 1px 1px 1px;
+    height: 48px; width: 48px;  margin: -24px 0 0 -24px;
+    background-size: cover; }
+.marker:hover {  z-index: 1; border-color: #390; }
+.marker.sm { 
+    background-color: none; border-width: 0; box-shadow: 0 0 0;
+    height: 32px; width: 32px; margin-left: -16px; margin-top:-16px;}
+.marker.sm:hover { border: #fff 1px solid; }
+
+#me { height: 16px; width: 16px; background-size: 100% 100%; }
+
+.mapboxgl-ctrl-geocoder { z-index: 0; }
+
+.mapboxgl-popup { width: 280px; }
+.mapboxgl-popup-close-button { background-color: rgba(255,255,255,.9); height: 30px; width: 30px; font-size: 18px; padding:2px; border-radius: 1px;}
+.mapboxgl-popup p { font-size: 12px; line-height: 16px; margin-top:6px;}
+.img-md { height: 260px; width:260px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
+
+.loading { display:none; }
+
+@media only screen and (max-width: 479px) {
+
+   .mobile-hide{ display: none; }
+   .mobile-show{ display: inline-block !important; }
+
+    #sidebar { 
+        z-index: 2; border-radius: 0; padding:2vh 4vw 2vh 4vw;
+        position: absolute; width:100%; height:150px;
+        bottom: 30px; left:0; right:0; top:inherit;
+    }
+    #sidebar p { margin-bottom: 2vh; font-size: 1em; }
+
+    #title { margin-bottom: 2vh; }
+    #title h1 { font-size: 20px; line-height: 26px; display: inline-block; }
+    #info { 
+        height:18px; width:18px; display: inline-block; margin-left:3px;
+        background-image: url('img/arrow_down.svg'); background-size:cover; }
+
+    .button { width:15vw; margin: .5vh 1vw .5vh 10vw; height:15vw;} 
+    .button:first-of-type { margin-left:5vw; }
+    .button img { height:100%; width: 100%; }
+    #taxas p { text-align: center; margin-left: 5vw;  }
+
+    .mapboxgl-popup-content { padding: 1vw; padding-bottom: 2vw; }
+    .mapboxgl-popup { width: 52vw; }
+    .img-md { height: 50vw; width: 50vw;}
+}

css/milfs.css

@@ -14,10 +14,35 @@ el otro archivo css style.css que está en la carpeta milfs
 	display: block;
 }
 
+#canvas-holder_$tipo_$id_campo{
+ max-width:100%;
+}
+
 @media (max-width: 768px) {
 #panel_administrador{
 	padding: 0px !important;
 }
+
+}
+@media (max-width: 480px) {
+#modificarcampo_succesalert{
+	position: relative;
+	display: block;
+	border-collapse: separate;
+	padding-top: 13px;
+}
+
+#modificarcampo_succesalert>.input-group-addon{
+	border: 1px solid #ccc !important;
+  border-radius: 0px;
+}
+
+#nuevocampo_success{
+	padding-bottom: 60px !important;
+}
+#nuevocampo_success>.btn{
+	display: block;
+}
 }
 
 

css/style.css

@@ -261,10 +261,7 @@ border-color: transparent;
 /*Panel Editor*/
 
 .thumbnail {
-  height: 100% !important;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: none;
+
 }
 
 .box-secciones {
@@ -679,8 +676,8 @@ Help-tip Style
 /* CSS animation */
 
 @-webkit-keyframes fadeIn {
-    0% { 
-        opacity:0; 
+    0% {
+        opacity:0;
         transform: scale(0.6);
     }
 
@@ -695,8 +692,8 @@ Help-tip Style
     100% { opacity:100%; }
 }
 .blink{
-		
+
 		color: rgb (0, 137, 226);
-		
+
 		animation: blink 1s infinite;
 	 }

funciones/conex.php

@@ -1,7 +1,12 @@
 <?php
 function Conectarse(){
+
+	    if(!isset($_SESSION))
+	    {
+	        session_start();
+	    }
 	if ( !isset ( $link ) ) {
-		
+
 	@include("includes/datos.php");
    		if(!isset($db)) {
   	 @include("milfs/includes/datos.php");
@@ -16,7 +21,7 @@ function Conectarse(){
 
    if (!($link=mysqli_connect($servidor,$usuario,$password,$db)))
    {
-      echo " Error conectando a la base de datos.  ";
+      echo " Error conectando a la base de datos. ($servidor) ";
       exit();
    }
  /*  if (!mysqli_select_db($db,$link))
@@ -40,19 +45,19 @@ function Conectarse(){
 }
 function Conectarse_recursivo(){
 	if ( !isset ( $link ) ) {
-		
+
 	@include("milfs/includes/datos.php");
    		if(!isset($db)) {
    @include("../milfs/includes/datos.php");
      	    		if(!isset($db)) {
    		 include("../includes/datos.php");
-   		
+
    		}
    		}
 
    if (!($link=mysqli_connect($servidor,$usuario,$password,$db)))
    {
-      echo "Error conectando a la base de datos. $servidor,$usuario,$password,$db  ";
+      echo "Error conectando a la base de datos.  ";
       exit();
    }
  /*  if (!mysqli_select_db($db,$link))

geojson.js

@@ -7,11 +7,11 @@ require ('funciones/convert.php');
 
 require ("funciones/conex.php");
 
-	
 
-$geojson = imprime_geojson("$_REQUEST[id]","","mapa","$_REQUEST[buscar]");
+
+$geojson = imprime_geojson("$_REQUEST[id]","","mapa","$_REQUEST[buscar]","");
 //header('Content-Type: application/json');
 var geojsonSample =
 echo $geojson;
 ;
-?>
+?>

geojson.js.php

@@ -8,11 +8,13 @@ include ('librerias/parsedown/Parsedown.php');
 
 require ("funciones/conex.php");
 
-	
-
-$geojson = imprime_geojson("$_REQUEST[id]","","mapa","$_REQUEST[buscar]","$_REQUEST[item]");
+if(isset($_REQUEST['buscar'])){$buscar=$_REQUEST['buscar'];}else{$buscar="";}
+if(isset($_REQUEST['item'])){$item=$_REQUEST['item'];}else{$item="";}
+if(isset($_REQUEST['id'])){$id=$_REQUEST['id'];}else{$id="";}
+//echo print_r($_SERVER);
+$geojson = imprime_geojson("$id","","mapa","$buscar","$item","");
 //header('Content-Type: application/json');
-echo "var geojsonSample = ";
+echo "let geojsonSample = [";
 echo $geojson;
-echo ";"
+echo "];"
 ?>

geojson.php

@@ -4,18 +4,22 @@ require ('xajax/xajax.inc.php');
 $xajax = new xajax();
 require ('funciones/funciones.php');
 require ('funciones/convert.php');
+include ('librerias/parsedown/Parsedown.php');
 
 require ("funciones/conex.php");
+if(isset($_REQUEST['buscar'])){$buscar=$_REQUEST['buscar'];}else{$buscar="";}
+if(isset($_REQUEST['item'])){$item=$_REQUEST['item'];}else{$item="";}
+if(isset($_REQUEST['id'])){$id=$_REQUEST['id'];}else{$id="";}
 
 if(!isset($_REQUEST['plantilla'])) {
-$geojson = imprime_geojson("$_REQUEST[id]","","mapa","$_REQUEST[buscar]");
+$geojson = imprime_geojson("$id","","mapa","$buscar","$item");
 
 }else{
-$geojson = imprime_geojson("$_REQUEST[id]","","$_REQUEST[plantilla]","$_REQUEST[buscar]");
+$geojson = imprime_geojson("$id","","$_REQUEST[plantilla]","$buscar","$item");
 }
 
 
 //header('Content-Type: application/json');
 echo $geojson;
 
-?>
+?>

images/secure/index.php

@@ -2,13 +2,13 @@
 session_start();
 // Comprobamos si existe la variable
 /*if ( !isset ( $_SESSION['id'] ) ) {
- // Si no existe 
+ // Si no existe
  header("Location: ../nodisponible.jpg");
 // echo "hola mundo2";
 }*/
 if(!isset($_GET['file']) ){
 	 header("Location: ../sinimagen.jpg");
-	 
+
 	}
 	include("../../includes/datos.php");
 $dir="$path_images_secure/";
@@ -21,25 +21,32 @@ if ((!$file=realpath($dir.$_GET['file']))
 $ref=@$_SERVER['HTTP_REFERER'];
 if (strpos($ref,'https://')===0 || strpos($ref,'https')!==0){
   $mime=array(
+    'PEG'=>'image/jpeg',
+    'JPEG'=>'image/jpeg',
+    'JPG'=>'image/jpeg',
     'jpg'=>'image/jpeg',
+    'peg'=>'image/jpeg',
+    'jpeg'=>'image/jpeg',
     'png'=>'image/png',
+    'PNG'=>'image/png',
     'mid'=>'audio/x-midi',
     'wav'=>'audio/x-wav'
   );
 
   if(@$mime[substr($file,-3)] =='') {
     header('Location: ../pixel.png');
-   
+
   exit();
   }
   $stat=stat($file);
   header('Content-Type: '.$mime[substr($file,-3)]);
-  header('Content-Length: '.$stat[7]);
+//  header('Content-Length: '.$stat[7]);
   header('Last-Modified: '.gmdate('D, d M Y H:i:s',$stat[9]).' GMT');
-  readfile($file);
+  @readfile($file);
+
   exit();
 }
 header('Pragma: no-cache');
 header('Cache-Control: no-cache, no-store, must-revalidate');
-include($file.'.php');
+//include($file.'.php');
 ?>

includes/upload_generico.php

@@ -7,14 +7,14 @@ $campo= "$_REQUEST[campo]-$_REQUEST[item]";
 $tipo = $_FILES["$campo"]['type'];
 //$nombrecillo = $_FILES['myfile']['nombrecillo'];
 
-if($tipo=="image/png") {$ext = ".png"; $imagen=1;	} 
+if($tipo=="image/png") {$ext = ".png"; $imagen=1;	}
 elseif($tipo=="image/jpeg") {$ext = ".jpg"; $imagen=1;	}
 elseif($tipo=="image/gif") {$ext = ".gif"; $imagen=1;	}
 else {
 	$ext = explode(".", $_FILES["$campo"]['name']);
$ext = ".".strtolower($ext[count($ext) - 1]);
-	
+
 //	$ext = "novalida";
-	 $imagen=0;} 
+	 $imagen=0;}
 	 $nombrecillo= $_REQUEST['nombrecillo'];
 $name = "$nombrecillo";
 $dir_subida = '/home/images_secure/';
@@ -32,7 +32,9 @@ if (move_uploaded_file($_FILES["$campo"]['tmp_name'], $fichero_subido)) {
 }
 
 function miniaturizar($file,$width,$directorio) {
//$archivo = $file;
-$archivo = "$directorio"."full/".$file;

$file_info = getimagesize($archivo);
$ratio = $file_info[0] / $file_info[1];
$newwidth = $width;
$newheight = round($newwidth / $ratio);
$ext = explode(".", $file);
$ext = strtolower($ext[count($ext) - 1]);
if ($ext == "jpeg") $ext = "jpg";
switch ($ext) {
        case "jpg":
                $img = imagecreatefromjpeg($archivo);
             //   $img = imagecreatefromstring($archivo);
        break;
        case "png":
                $img = imagecreatefrompng($archivo);
        break;
        case "gif":
                $img = imagecreatefromgif($archivo);
        break;
}
$thumb = imagecreatetruecolor($newwidth, $newheight);
+$archivo = "$directorio"."full/".$file;

$file_info = getimagesize($archivo);
$ratio = $file_info[0] / $file_info[1];
$newwidth = $width;
$newheight = round($newwidth / $ratio);
$ext = explode(".", $file);
+$ext = strtolower($ext[count($ext) - 1]);
+
if ($ext == "jpeg") $ext = "jpg";switch ($ext) {
        case "jpg":
                $img = imagecreatefromjpeg($archivo);
             //   $img = imagecreatefromstring($archivo);
        break;
        case "png":
                $img = imagecreatefrompng($archivo);
        break;
        case "gif":
                $img = imagecreatefromgif($archivo);
        break;
}
$thumb = imagecreatetruecolor($newwidth, $newheight);
 imagealphablending( $thumb, false );
 imagesavealpha( $thumb, true );
imagecopyresampled($thumb, $img, 0, 0, 0, 0, $newwidth, $newheight, $file_info[0], $file_info[1]);
 if($ext=="jpg") {
imagejpeg($thumb,$directorio.$width."/$file", 80);
@@ -42,5 +44,3 @@ imagepng($thumb,$directorio.$width."/$file", 9);
 }
 
 ?>
-
-

index.php

@@ -20,7 +20,7 @@ require ("funciones/conex.php");
 $xajax->processRequests();
 
 $embebido =0;
-if (isset($_REQUEST['form'])) {	
+if (isset($_REQUEST['form'])) {
 	$form = $_REQUEST['form'];
 	$opciones["formato"]= $_REQUEST['formato'];
 	} else {$form = "";}
@@ -43,6 +43,30 @@ if (isset($_REQUEST['t'])) {$t = $_REQUEST['t'];} else {$t = "";}
 
      <?php
      $xajax->printJavascript("xajax/");
+      if(!isset($_REQUEST['experimental'])){
+
+	 $bootstrap= "
+
+	 <script
+  src='https://code.jquery.com/jquery-3.3.1.min.js'
+  integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8='
+  crossorigin='anonymous'></script>
+    <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
+	<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
+	<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
+<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
+<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
+
+	 ";
+
+	 }else{
+	$bootstrap="
+	<script src='../librerias/jquery/jquery-2.1.4.min.js'></script>
+	<script src='../librerias/bootstrap/js/bootstrap.min.js'></script>
+	<link href='../librerias/bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
+	";
+
+		 }
      //	$xajax->debugOn();
 		//$xajax->statusMessagesOn();
       ?>
@@ -187,7 +211,7 @@ legend.legend-area {
 
 </style>
 </head>
-<body onload="revisarSession()";  >
+<body  >
 <?php if($embebido ==1) {
 if($form!=''){	 echo formulario_embebido($form,$opciones);}
 elseif($identificador !='') { echo mostrar_identificador($identificador,$id);}
@@ -232,13 +256,14 @@ else{}
 			<div class='row'>
 				 <div id='' class='col-sm-6'>
 
-					 <?php if(isset($_SESSION['id'])){ echo "
-					 <form id='manejo_sesion' name='form_session' class='navbar-form navbar-left'>
+					 <?php /* $sesion = "<pre>".print_r($_SESSION,true)."</pre>"; if(isset($_SESSION['id'])){ echo "
+					 $sesion <form id='manejo_sesion' name='form_session' class='navbar-form navbar-left'>
 								<div class='input-group'>
 									<input type='text' name='tiempo_session' size='18' class='form-control input-sm' readonly>
 									<span class='input-group-addon'><a href='#' onclick=\"location.reload();\" title='Renovar'><span class='glyphicon glyphicon-refresh' aria-hidden='true'></span></a></span>
 								</div>
-							</form> ";  } ?>
+							</form> ";  }else{ echo "/ $sesion /<input type='text' name='tiempo_session' size='18' class='form-control input-sm' readonly>";}
+							*/ ?>
 
 		<?php
 		///echo adjuntar_basico('33');

js/mapero.js

@@ -0,0 +1,214 @@
+mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
+//var sfmapbox = [-122.413692, 37.775712];
+var sfmapbox = [-72, 4];
+// sfmapbox = [-122,37];
+var mylocation = sfmapbox;
+var taxon_active = 'Plantae';
+var markers = {};
+var marker_me;
+
+// Create a new dark theme map
+var map = new mapboxgl.Map({
+    container: 'map', // container id
+    style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
+    center: sfmapbox, // Center of USA
+    zoom: 12, // starting zoom
+    // minZoom: 11,
+
+});
+
+map.on('load', function() {
+
+    // Disable scroll in posts
+    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();
+
+    //Add controls for navigation, geocoding and geolocation
+    var geocoder = new mapboxgl.Geocoder();
+    map.addControl(geocoder);
+    map.addControl ( new mapboxgl.Navigation({ position: 'top-left' }) );
+    var geolocator = new mapboxgl.Geolocate({ position: 'top-left' });
+    map.addControl(geolocator);
+
+    //go to SF and retrieve data
+    mapMe(mylocation);
+    getObservation(mylocation, taxon_active);
+
+    //Toggle icons in the event of zoom change
+    map.on('zoom', function() {
+        var zoom = map.getZoom();
+        $('.marker').each(function() {
+            checkZoom(this, zoom);
+        });
+    });
+
+    //Interact with taxas buttons
+    $('.button').on('click', function() {
+        $('.button').removeClass('active');
+        $(this).addClass('active');
+        taxon_active = $(this).attr('id');
+        getObservation(mylocation, taxon_active);
+        $('.mapboxgl-popup') ? $('.mapboxgl-popup').remove() : null;
+    });
+
+    //Redo quest on location change
+    geocoder.on('result', function(e) {
+        // window.alert('new location: ' + e.result.center);
+        mylocation = e.result.center;
+        getObservation(mylocation, taxon_active);
+        mapMe(mylocation);
+        $('.mapboxgl-popup') ? $('.mapboxgl-popup').remove() : null;
+    });
+
+    //Redo quest on geolocation
+    geolocator.on('geolocate', function(position) {
+        mylocation = [position.coords.longitude, position.coords.latitude];
+        map.zoomTo(12);
+        mapMe(mylocation);
+        getObservation(mylocation, taxon_active);
+    });
+
+    //Mobile friendly
+    $('#info').on('click', function() {
+        if ( $('#introduction').is(':visible') ) {
+            $('#introduction').hide();
+            $('#info').css('background-image', 'url(img/arrow_down.svg)');
+            $('#sidebar').css('height', '150px');
+        } else {
+            $('#introduction').show();
+            $('#info').css("background-image", 'url(img/arrow_up.svg)');
+            $('#sidebar').css('height', '240px');
+        }
+    })
+});
+
+// Map the user location using a marker called me
+function mapMe(location) {
+    if (!document.getElementById('me')) {
+        var me = document.createElement('div');
+        me.id = "me";
+        me.style.backgroundImage = 'url(img/icon_me.png)';
+        marker_me = new mapboxgl.Marker(me)
+            .setLngLat(location)
+            .addTo(map);
+    } else {
+        marker_me.setLngLat(location);
+    }
+
+    map.flyTo({ 'center': location, 'zoom': 12 });
+}
+
+// Retrieve from API, map the markers to the map, and save relevant data in html. Pop-ups for marker on click.
+function getObservation(location, taxon) {
+
+    $('.loading').show();
+
+    // clean up previous markers
+    for (marker in markers) {
+        markers[marker].remove();
+    }
+    markers = {};
+
+    //create url
+    var iNat_url = createURL(location, taxon);
+
+    // get results from url
+    try {
+        iNat_results = $.getJSON(iNat_url, function() {
+            // console.log("API results: ", iNat_results.responseJSON.results);
+
+            // Update count in html description
+            $('#count').html(iNat_results.responseJSON.features.length);
+
+            // Used for marker change on zoom level
+            var zoom = map.getZoom();
+
+            // Iterate through all API results
+            iNat_results.responseJSON.features.forEach(function(marker) {
+                // create an img element for the marker
+                var el = document.createElement('div');
+                el.className = 'marker';
+                //img_url = marker.photos[0].url;
+                img_url = marker.properties.imagen;
+
+                // text description for popup
+                var species = marker.species_guess ? marker.species_guess : 'Unknown';
+                //var user = marker.user.name ? marker.user.name : 'Anonymous';
+                var user = marker.properties.title ? marker.properties.title : 'Anonymous';
+                text = species + ' observed on ' + marker.properties.time + ' by ' + user + ' - ';
+                text = text.charAt(0).toUpperCase() + text.substr(1);
+
+                // img_url = img_url.replace("http", "https");
+                //$(el).attr('data-img', img_url);
+                $(el).attr('data-img', img_url);
+              //  $(el).attr('data-taxon', taxon);
+                //$(el).attr('data-text', text);
+                $(el).attr('data-text', marker.properties.title);
+                $(el).attr('html', marker.properties.description);
+                //$(el).html(marker.properties.description);
+                $(el).attr('data-link', marker.properties.uri);
+                $(el).attr('data-link', marker.properties.imagen);
+                //$(el).attr('data-latlon', marker.geojson.coordinates);
+                $(el).attr('data-latlon', marker.geometry.coordinates);
+
+                // Map to the map with markers for the current zoomlevel
+                checkZoom(el, zoom);
+
+                // add marker to map
+              //  markers[marker.id] = new mapboxgl.Marker(el)
+                markers[marker.control] = new mapboxgl.Marker(el)
+                  //  .setLngLat(marker.geojson.coordinates)
+                    .setLngLat(marker.geometry.coordinates)
+                    .addTo(map);
+            });
+
+            $('.loading').hide();
+
+            // markers on click
+            $('.marker').click(function(e) {
+
+                e.stopPropagation();
+
+                var latlon = $(this).attr('data-latlon').split(",");
+                latlon = [Number(latlon[0]), Number(latlon[1])];
+
+
+                var descripcion = $(this).attr('html');//.replace('square', 'medium');
+
+                $('.mapboxgl-popup') ? $('.mapboxgl-popup').remove() : null;
+
+                var popup = new mapboxgl.Popup()
+                    .setLngLat(latlon)
+                    .setHTML(descripcion)
+                    .addTo(map);
+
+                            });
+                        });
+                    } catch (e) {
+                        window.alert("API not working properly :(")
+                    }
+}
+
+// Create the url for API request
+function createURL(location, taxon) {
+    //url = ['https://api.inaturalist.org/v1/observations?geo=true&native=true&photos=true&lat=',location[1], '&lng=', location[0], '&radius=5&iconic_taxa=', taxon, '&order=desc&order_by=created_at'].join('');
+    url = ['http://localhost/tupali/archivos/74.geojson'].join('');
+    console.log("API url: ", url);
+    return url;
+}
+
+// Check what zoom level for what markers, then map to map
+function checkZoom(marker, zoom) {
+    var img;
+    if (zoom < 12) {
+        $(marker).addClass('sm');
+      //  img = 'url(img/marker_' + $(marker).attr('data-taxon').toLowerCase() + '.png)';
+      //  img = 'url(img/marker_' + $(marker).attr('data-taxon').toLowerCase() + '.png)';
+        img = 'url(https://tupale.co/milfs/images/secure/?file=150/da6d16547658ebc06c5378b30d1ee4bf.png)';
+        $(marker).css("background-image", img);
+    } else {
+        $(marker).removeClass('sm');
+        img = 'url(' + $(marker).attr('data-img') + ')';
+      //  img = 'url(https://tupale.co/milfs/images/secure/?file=150/da6d16547658ebc06c5378b30d1ee4bf.png)';
+        $(marker).css("background-image", img);
+    };
+}

js/scripts.js

@@ -9,24 +9,30 @@ function delayTimer() {
     var delayFunction = delayTimer();
 
 
- 
- function revisarSession(){
+    function setCookie(cname, cvalue, exdays) {
+      var d = new Date();
+      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+      var expires = "expires=" + d.toUTCString();
+      document.cookie = cname + "=" + cvalue + "; " + expires;
+    }
+ function revisarSession(sesion){
 	tiempo = "30";
 	gavela="19";
-	timestamp = Math.round(Date.now() /1000)
-	inicio = leerCookie("timestamp");
+	timestamp = Math.round(Date.now() /1000);
+	inicio = sesion;//leerCookie("timestamp");
 	transcurrido = (timestamp - inicio);
 	transcurrido_minutos = Math.round(transcurrido/60);
 	restante = (tiempo - transcurrido_minutos);
 	prefin = (tiempo*60)-transcurrido;
+  //sesion = "hola";
 
-  	document.form_session.tiempo_session.value = "Cierra en: "+restante+" minutos ";
+  	document.form_session.tiempo_session.value = "Cierra en: "+restante+" minutos ("+transcurrido+" "+sesion+") ";
 
   	if(restante == 1 ){
 	//alert(transcurrido);
 	location.href="../../salir.php";
 }else{
-    setTimeout("revisarSession()",2000) ;
+    setTimeout("revisarSession("+sesion+")",2000) ;
 }
 }
 
@@ -57,8 +63,8 @@ function loadArticle(pageNumber,id,plantilla,registros,scroll,formato) {
 			//	$('#scroll-contentx').append(html);
 			var contenido = html;
 			newDiv.innerHTML = contenido;
-			
- 
+
+
         $('.lazy').lazy({
         // your configuration goes here
         //combined: true,
@@ -622,6 +628,3 @@ else if (document.all) document.all[''+id+''].style.visibility = "hidden"
 else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
 }
 }
-
-
-

mapa.php

@@ -8,7 +8,7 @@
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
 
- 
+
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
@@ -16,7 +16,7 @@
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>
    -->
-   
+   <script src="js/scripts.js"></script>
     <link rel="stylesheet" href="librerias/leaflet/leaflet.css"/>
 <script src="librerias/leaflet/leaflet.js"></script>
 <style>
@@ -29,20 +29,37 @@
 
 
 <div id='map'></div>
-<?php 
+
+<?php
+sleep(2);
+$ubicacion = $_COOKIE['ubicacion'];
+$coordenadas = explode("|",$ubicacion);
+if($coordenadas[0] !="" AND $coordenadas[1] !="" ){
+$lon = $coordenadas[0];
+$lat = $coordenadas[1];
+$zoom = "20";
+
+}else{
 	if ($_REQUEST['lat'] !='') {$lat=$_REQUEST['lat'];}else {$lat= "-72";}
 	if ($_REQUEST['lon'] !='') {$lon=$_REQUEST['lon'];}else {$lon= "4";}
 	if ($_REQUEST['zoom'] !='') {$zoom=$_REQUEST['zoom'];}else {$zoom= "20";}
-	
+}
+
  ?>
+
 <script>
+
+
+//var e.latlng= localizacion;
+//alert(localizacion);
+
 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);
 
-<?php 
+<?php
 if(!isset($_REQUEST['exif'])) { ?>
-	
+
 function onLocationFound(e) {
 			//var radius = e.accuracy / 2;
 			var marker = L.marker(e.latlng,{draggable: true}).addTo(map);
@@ -53,14 +70,14 @@ function onLocationFound(e) {
 			map.setZoom(<?php echo $zoom; ?>);
 			var m = marker.getLatLng();
 			mapa.value= m.lng+' '+m.lat+' <?php echo $zoom; ?>';
-			
+
 	function ondragend() {
     			var m = marker.getLatLng();
     			var z = map.getZoom();
 
-    
+
      map.setZoom(z);
-      
+
       mapa.value= m.lng+' '+m.lat+' '+z;
 }
 
@@ -81,7 +98,7 @@ function ondragend() {
 		map.on('locationfound', onLocationFound);
 		map.locate({setView: true, maxZoom: 20});
 <?php }else{ ?>
-	
+
 	var marker = L.marker([<?php echo $lon ?>,<?php echo $lat ?>],{draggable: true}).addTo(map);
 	var mapa = window.parent.document.getElementById('<?php echo $_REQUEST[id]?>');
 			marker.on('dragend', ondragend);
@@ -91,7 +108,7 @@ function ondragend() {
     			var z = map.getZoom();
     mapa.value= m.lng+' '+m.lat+' '+z;
  }
-	
+
 <?php	} ?>