Compare commits
4 Commits
master
...
portalcons
| Author | SHA1 | Date | |
|---|---|---|---|
| ff4243240f | |||
| 3f722390a3 | |||
| 1da7e72b28 | |||
| f7052c4573 |
2
api.php
2
api.php
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
//session_start();
|
||||
//ini_set('display_errors', 'On');
|
||||
ini_set('display_errors', 'On');
|
||||
|
||||
require ('xajax/xajax.inc.php');
|
||||
$xajax = new xajax();
|
||||
|
||||
159
css/carousel.css
159
css/carousel.css
@ -1,27 +1,150 @@
|
||||
/* GLOBAL STYLES
|
||||
/*HOJA DE ESTILOS complementaria para sacar los estilos del archivo PHP y centralizarlos
|
||||
Se propone usar esta hoja de estilos existentes asociado previamente a Portal.php para no crear una hoja
|
||||
de estilos css adicional, pero se propone la posibilidad de crear y migrar a una hoja de estilos ejmplo: <estilos_portalphp.css>
|
||||
*/
|
||||
body {
|
||||
background: url("") no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
color: gray;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #341208;
|
||||
border-color: #341208;
|
||||
background-image: url("");
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
/* background-image: url("milfs/images/secure/?file=full/<?php echo $logo[0];?>"); */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* text-shadow: 1px 1px 1px rgba(255,255,255,0.8) ; */
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.navbar-header>p {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: normal;
|
||||
display: inline
|
||||
}
|
||||
|
||||
.navbar-header>strong {
|
||||
font-size: 20px;
|
||||
color: #802a2a;
|
||||
font-weight: normal;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
;
|
||||
display: inline
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.div_aplicacion {
|
||||
background-color: #f0eee1 !important;
|
||||
}
|
||||
|
||||
.div_aplicacion:hover {
|
||||
-webkit-animation: animatedBackground 1s ease-out 1;
|
||||
-moz-animation: animatedBackground 1s ease-out 1;
|
||||
animation: animatedBackground 1s ease-out 1;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
#muestraInfo>.modal-body {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animatedBackground {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1.1, 1.1);
|
||||
-moz-transform: scale(1.1, 1.1);
|
||||
-ms-transform: scale(1.1, 1.1);
|
||||
-o-transform: scale(1.1, 1.1);
|
||||
transform: scale(1.1, 1.1)
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes animatedBackground {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1.1, 1.1);
|
||||
-moz-transform: scale(1.1, 1.1);
|
||||
-ms-transform: scale(1.1, 1.1);
|
||||
-o-transform: scale(1.1, 1.1);
|
||||
transform: scale(1.1, 1.1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animatedBackground {
|
||||
0% {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1)
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1.1, 1.1);
|
||||
-moz-transform: scale(1.1, 1.1);
|
||||
-ms-transform: scale(1.1, 1.1);
|
||||
-o-transform: scale(1.1, 1.1);
|
||||
transform: scale(1.1, 1.1)
|
||||
}
|
||||
}
|
||||
|
||||
.pie {
|
||||
position: fixed; z-index: 10000;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Set the fixed height of the footer here */
|
||||
height: 50px;
|
||||
background-color: white;
|
||||
background-image: url('milfs/images/menosmicos/background.jpg');
|
||||
|
||||
|
||||
/* GLOBAL STYLES FOR CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
/* Padding below the footer and lighter body text */
|
||||
|
||||
|
||||
/* CUSTOMIZE THE NAVBAR
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Special class on .container surrounding .navbar, used for positioning it into place. */
|
||||
|
||||
|
||||
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
.carousel {
|
||||
height: 500px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
/* Since positioning the image, we need to help out the caption */
|
||||
.carousel-caption {
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
/* Declare heights because of positioning of img element */
|
||||
@ -29,37 +152,36 @@
|
||||
height: 500px;
|
||||
background-color: black;
|
||||
}
|
||||
.carousel-inner > .item > img {
|
||||
|
||||
.carousel-inner>.item>img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-left: auto;
|
||||
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
|
||||
/* MARKETING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Center align the text within the three columns below the carousel */
|
||||
.marketing .col-lg-4 {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.marketing h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.marketing .col-lg-4 p {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Featurettes
|
||||
------------------------- */
|
||||
|
||||
.featurette-divider {
|
||||
margin: 80px 0; /* Space out the Bootstrap <hr> more */
|
||||
margin: 80px 0;
|
||||
/* Space out the Bootstrap <hr> more */
|
||||
}
|
||||
|
||||
/* Thin out the marketing headings */
|
||||
@ -69,19 +191,20 @@
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
|
||||
/* RESPONSIVE CSS
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
/* Navbar positioning foo */
|
||||
.navbar-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.navbar-wrapper .container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-wrapper .navbar {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
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;}
|
||||
}
|
||||
161
css/milfs.css
161
css/milfs.css
@ -14,6 +14,100 @@ el otro archivo css style.css que está en la carpeta milfs
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/* Portal Consulta*/
|
||||
#muestraInfo {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#modal-panel-consulta{
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#contenido-panel-consulta {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#header-panel-consulta{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
background: #e5e5e5;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#panel-buscador {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
#panel-consulta {
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: 30px !important;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.herramientas-buscador {
|
||||
padding-left: 15px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.scroll{
|
||||
overflow-y: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
.acciones-consulta>a {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#div_resultados{
|
||||
height: auto !important;
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
#pie_modal{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
padding: 12px;
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
|
||||
.panel-heading .glyphicon {
|
||||
transition: .3s transform ease-in-out;
|
||||
}
|
||||
.panel-heading .collapsed .glyphicon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/*Fin panel consulta*/
|
||||
|
||||
#canvas-holder_$tipo_$id_campo{
|
||||
max-width:100%;
|
||||
}
|
||||
@ -25,6 +119,15 @@ el otro archivo css style.css que está en la carpeta milfs
|
||||
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
#contenedor_principal{
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
#contenido>legend {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#modificarcampo_succesalert{
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -32,6 +135,64 @@ el otro archivo css style.css que está en la carpeta milfs
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
#botonera-panel-consulta{
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
#div_resultados {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.herramientas-buscador{
|
||||
padding-left: 0px;
|
||||
}
|
||||
#paginador-consultas{
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#panel-aplicacion{
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.encabezado-app{
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.botonera-acciones>li>.btn.btn-default {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.datos-app{
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
.botones-editar {
|
||||
margin-bottom: 3px !important;
|
||||
}
|
||||
.panel-app{
|
||||
padding: 0px !important;
|
||||
}
|
||||
.panel-editar{
|
||||
padding: 0px !important;
|
||||
}
|
||||
.email-grupo{
|
||||
display: block !important;
|
||||
}
|
||||
.opciones-portal{
|
||||
display: table-caption !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.opciones-portal-grupo{
|
||||
padding: 7px 0px !important;
|
||||
background-color:transparent !important;
|
||||
border: none !important;
|
||||
margin: -3px;
|
||||
}
|
||||
|
||||
.panel-api{
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
#modificarcampo_succesalert>.input-group-addon{
|
||||
border: 1px solid #ccc !important;
|
||||
border-radius: 0px;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -11,7 +11,7 @@ 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="";}
|
||||
//echo print_r($_SERVER);
|
||||
|
||||
$geojson = imprime_geojson("$id","","mapa","$buscar","$item","");
|
||||
//header('Content-Type: application/json');
|
||||
echo "let geojsonSample = [";
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
images/iconos/pin.png
Normal file
BIN
images/iconos/pin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 907 B After Width: | Height: | Size: 1.6 KiB |
@ -1,19 +1,19 @@
|
||||
<?php
|
||||
$usuario="root";
|
||||
$password="toor";//
|
||||
$servidor="localhost";
|
||||
$db="galenux_troconis";
|
||||
$usuarios_sesion="GaleNUx_htroconis";
|
||||
$path_instalacion ="/var/www/html/milfs/";
|
||||
$password="toor";
|
||||
$servidor="127.0.0.1";
|
||||
$db="tupale";
|
||||
$usuarios_sesion="Tupale";
|
||||
$path_instalacion ="/home/julih/Documents/www/tupali/milfs";
|
||||
$path_images_secure ="/home/images_secure";
|
||||
$url = "http://localhost/milfs/";
|
||||
$site = "http://localhost/";
|
||||
$url = "http://localhost/tuapli/";
|
||||
$site = "http://localhost/tupali/";
|
||||
/// ESCAPAR LAS COMILLAS CON (\)
|
||||
$codigo_analizador = " ";
|
||||
/// Depende de la variable http://php.net/upload-max-filesize o en el .htaccess
|
||||
$upload_size = "30"; // Tamaño permitido para las imagenes en MB
|
||||
$mapbox_token = "pk.eyJ1IjoiZmNhc3Ryb3QiLCJhIjoiY2lnOWw1bmd1MG93eXVsbTJpcmluYTBxdCJ9.yG7C1rEH6-MpZBEEb68IVg";
|
||||
$tabla_autenticacion="d9_users";
|
||||
$tabla_autenticacion="usuarios";
|
||||
$site='';
|
||||
|
||||
|
||||
|
||||
15
index.php
15
index.php
@ -291,20 +291,17 @@ echo "</div>";
|
||||
<!-- Modal -->
|
||||
|
||||
<div class='modal fade ' id='muestraInfo' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
|
||||
<div class='modal-dialog' >
|
||||
<div class='modal-content'>
|
||||
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'><i class='fa fa-times-circle'></i></button>
|
||||
<div class='modal-header' >
|
||||
|
||||
<h4 class='modal-title' id='myModalLabel_info'><div id='titulo_modal'></div></h4>
|
||||
<div id='modal-panel-consulta' class='modal-dialog' >
|
||||
<div id='contenido-panel-consulta' class='modal-content'>
|
||||
<div id='header-panel-consulta' class='modal-header' >
|
||||
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'><i class='glyphicon glyphicon-remove'></i> </button>
|
||||
<h4 class='modal-title' id='myModalLabel_info'><div id='titulo_modal'></div>Panel Consulta</h4>
|
||||
</div>
|
||||
<div class='modal-body'>
|
||||
<div id='panel-consulta' class='modal-body'>
|
||||
<?php include("psi.php") ;?>
|
||||
<div id='muestra_form'></div>
|
||||
</div>
|
||||
<div class='modal-footer' id='pie_modal'>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
214
js/mapero.js
214
js/mapero.js
@ -1,214 +0,0 @@
|
||||
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);
|
||||
};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user