Browse Source

prueba de concepto crear circuitos

master
humano 6 months ago
parent
commit
fb00c8b6d9
7 changed files with 949 additions and 23 deletions
  1. +220
    -0
      circuitos.php
  2. +195
    -0
      librerias/leaflet/css/leaflet-sidebar.css
  3. +1
    -0
      librerias/leaflet/css/leaflet-sidebar.min.css
  4. +529
    -0
      librerias/leaflet/js/leaflet-sidebar.js
  5. +1
    -0
      librerias/leaflet/js/leaflet-sidebar.min.js
  6. +2
    -22
      mapero.php
  7. +1
    -1
      milfs

+ 220
- 0
circuitos.php View File

@@ -0,0 +1,220 @@
<?php session_start();
if(isset($_REQUEST['debug'])) {ini_set('display_errors', 'On');}
require ('milfs/xajax/xajax.inc.php');
$xajax = new xajax();
//require ('json.lab.php');
require ('milfs/funciones/funciones.php');
require ("milfs/funciones/conex.php");
include ('milfs/librerias/parsedown/Parsedown.php');
//require_once ('includes/markdown.php');
//require ('funciones/convert.php');
$xajax->processRequests();
//if($_REQUEST[id2] =='') {$agregar= $_REQUEST[id];}else {$agregar = $_REQUEST[id2];}
if(isset($_REQUEST['categoria']) AND isset($_REQUEST['buscar'])) {
$cadena_busqueda = "$_REQUEST[buscar]";
$_REQUEST['buscar'] = "$_REQUEST[categoria]:$_REQUEST[buscar]";
}
$formulario_nombre = remplacetas('form_id','id',$_REQUEST[id],'nombre',"","") ;
$formulario_descripcion = remplacetas('form_id','id',$_REQUEST[id],'descripcion',"","") ;
$descripcion_meta = preg_replace("[\n|\r|\n\r|\t]",'', strip_tags($formulario_descripcion[0]));
$agregar_nombre = remplacetas('form_id','id',$agregar,'nombre',"","") ;
$id_empresa = remplacetas('form_id','id',$_REQUEST[id],'id_empresa',"","") ;
$twitter = remplacetas('empresa','id',"$id_empresa[0]",'twitter','',"","") ;
if($twitter[0] =="") {$twitter[0] ="@tupaleCo";}
$logo = remplacetas('empresa','id',"$id_empresa[0]",'imagen','',"","") ;
$razon_social = remplacetas('empresa','id',"$id_empresa[0]",'razon_social','',"","") ;
$campos_formulario = input_campos("$_REQUEST[id]","categoria");
$uri = "$_SERVER[SERVER_NAME]/$_SERVER[REQUEST_URI]";
$background_imagen = buscar_imagen("$_REQUEST[id]","","","$id_empresa");
$plantilla ="mapa";
$categorias = lista_categorias($_REQUEST['id'],'','mapa') ;
?>
<!DOCTYPE html>
<html lang="en">
<head >
<title><?php echo "$formulario_nombre[0] / $cadena_busqueda" ?> tupale.co</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1, initial-scale=1"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="description" content="">
<meta NAME="Language" CONTENT="Spanish">
<meta NAME="Revisit" CONTENT="1 days">
<meta NAME="Distribution" CONTENT="Global">
<meta NAME="Robots" CONTENT="All">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="<?php echo $twitter[0]; ?>">
<meta name="twitter:creator" content="@qwerty_co">
<meta name="twitter:url" content="<?php echo $uri ; ?>">
<meta name="twitter:title" content="<?php echo "$formulario_nombre[0] / $cadena_busqueda" ?> tupale.co">
<meta name="twitter:description" content=" <?php echo $descripcion_meta; ?>">
<meta name="twitter:image" content="<?php echo "$_SESSION[url]images/secure/?file=full/$background_imagen"; ?>">
<meta property="og:type" content="article">
<meta property="og:title" content="<?php echo "$formulario_nombre[0] / $cadena_busqueda" ?> tupale.co" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo "$uri"; ?>" />
<meta property="og:image" content="<?php echo "$_SESSION[url]images/secure/?file=full/$background_imagen"; ?>" />
<meta property="og:site_name" content="<?php echo $razon_social[0]; ?>" />
<meta property="og:description" content=" <?php echo $descripcion_meta; ?>" />
<link rel="shortcut icon" href="<?php echo "milfs/images/secure/?file=150/$logo[0]"; ?>">
<?php $xajax->printJavascript("milfs/xajax/"); ?>
<link rel="shortcut icon" href="favicon-152.png">
<link rel="apple-touch-icon-precomposed" href="favicon-152.png">



<link rel="stylesheet" href="librerias/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="librerias/leaflet/leaflet.css" />
<script src="librerias/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="librerias/leaflet/dist/MarkerCluster.css" />
<link rel="stylesheet" href="librerias/leaflet/dist/MarkerCluster.Default.css" />
<script src="librerias/leaflet/dist/leaflet.markercluster-src.js"></script>
<script type="text/javascript" src="milfs/geojson.js.php?id=<?php echo $_REQUEST['id'] ?>&buscar=<?php echo $_REQUEST['buscar'] ?>&item=<?php echo $_REQUEST['item'] ?>"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="librerias/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="librerias/leaflet/css/leaflet-sidebar.css" />
<link rel="stylesheet" href="librerias/bootstrap/css/bootstrap.min.css" >

<style>
body {
padding: 0;
margin: 0;
}

html, body, #map {
height: 100%;

}

</style>
</head>
<body>
<!-- optionally define the sidebar content via HTML markup -->
<div id="sidebar" class="leaflet-sidebar collapsed">

<!-- nav tabs -->
<div class="leaflet-sidebar-tabs">
<!-- top aligned tabs -->
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars active"></i></a></li>
</ul>

<!-- bottom aligned tabs -->

<ul role="tablist">
<li><a href="https://tupale.co"><img title='Powered by Tupale.co' alt='http://tupale.co' class='img img-responsive' src='https://tupale.co/images/icons/icon-152x152.png'></a></li>
</ul>
</div>

<!-- panel content -->
<div class="leaflet-sidebar-content">
<div class="leaflet-sidebar-pane" id="home">
<h1 class="leaflet-sidebar-header">
<span id='formulario_titulo_mapa'><?php echo $formulario_nombre[0] ?></span>
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<h3><span id='formulario_descripcion_mapa'><?php echo $formulario_descripcion[0] ?></span></h3>
<?php echo $categorias; ?>
</div>

</div>
</div>

<div id="map"></div>


<script src="librerias/leaflet/leaflet.js" crossorigin=""></script>
<script src="librerias/leaflet/js/leaflet-sidebar.js"></script>
<link rel="stylesheet" href="librerias/leaflet/dist/MarkerCluster.css" />
<link rel="stylesheet" href="librerias/leaflet/dist/MarkerCluster.Default.css" />
<script src="librerias/leaflet/dist/leaflet.markercluster-src.js"></script>
<script src="librerias/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="milfs/geojson.js.php?id=<?php echo $_REQUEST['id'] ?>&buscar=<?php echo $_REQUEST['buscar'] ?>&item=<?php echo $_REQUEST['item'] ?>"></script>

<script>
// standard leaflet map setup
var map = L.map('map');
// map.setView([51.2, 7], 9);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: "Map data &copy; OpenStreetMap contributors <a href='https://tupale.co'>Powered by Tupale.co</a>"
}).addTo(map);
var geojson = L.geoJson(geojsonSample, {

pointToLayer: function(feature, latlng) {
var smallIcon = new L.Icon({
iconSize: [100, 100],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
autoPanPadding: [30,30],
iconUrl: feature.properties.icon.iconUrl
/* iconUrl: "http://localhost/default/tupali/milfs/images/secure/?file=150/da6d16547658ebc06c5378b30d1ee4bf.png"*/

});
return L.marker(latlng, {icon: smallIcon });
},

onEachFeature: function(feature, layer) {
layer._leaflet_id = feature.properties.control;
var popupText = feature.properties.description
layer.bindPopup(popupText)
layer.bindTooltip(feature.properties.title).openTooltip();
}
}).addTo(map);
var markers = L.markerClusterGroup();
markers.addLayer(geojson).addTo(map);

map.fitBounds(geojson.getBounds().pad(Math.sqrt(2) /4));

// create the sidebar instance and add it to the map
var sidebar = L.control.sidebar({ container: 'sidebar', autopan: true })
.addTo(map)
.open('home');

// add panels dynamically to the sidebar
sidebar

// add a tab with a click callback, initially disabled
/* .addPanel({
id: 'mail',
tab: '<i class="fa fa-envelope"></i>',
title: 'Messages',
button: function() { alert('opened via JS callback') },
disabled: true,
})*/

// be notified when a panel is opened
sidebar.on('content', function (ev) {
switch (ev.id) {
case 'autopan':
sidebar.options.autopan = true;
break;
default:
sidebar.options.autopan = true;
}
});

var userid = 0
function addUser() {
sidebar.addPanel({
id: 'user' + userid++,
tab: '<i class="fa fa-user"></i>',
title: 'User Profile ' + userid,
pane: '<p>user ipsum dolor sit amet</p>',
});
}


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

+ 195
- 0
librerias/leaflet/css/leaflet-sidebar.css View File

@@ -0,0 +1,195 @@
.leaflet-sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.leaflet-sidebar.collapsed {
width: 40px; }
@media (min-width: 768px) {
.leaflet-sidebar {
top: 10px;
bottom: 10px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.leaflet-sidebar {
width: 305px;
max-width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.leaflet-sidebar {
width: 390px;
max-width: 390px; } }
@media (min-width: 1200px) {
.leaflet-sidebar {
width: 460px;
max-width: 460px; } }

.leaflet-sidebar-left {
left: 0; }
@media (min-width: 768px) {
.leaflet-sidebar-left {
left: 10px; } }

.leaflet-sidebar-right {
right: 0; }
@media (min-width: 768px) {
.leaflet-sidebar-right {
right: 10px; } }

.leaflet-sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: #fff; }
.leaflet-sidebar-left .leaflet-sidebar-tabs {
left: 0; }
.leaflet-sidebar-right .leaflet-sidebar-tabs {
right: 0; }
.leaflet-sidebar-tabs, .leaflet-sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0;
list-style-type: none; }
.leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #333;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.leaflet-sidebar-tabs > li:hover, .leaflet-sidebar-tabs > ul > li:hover {
color: #000;
background-color: #eee; }
.leaflet-sidebar-tabs > li.active, .leaflet-sidebar-tabs > ul > li.active {
color: #fff;
background-color: #0074d9; }
.leaflet-sidebar-tabs > li.disabled, .leaflet-sidebar-tabs > ul > li.disabled {
color: rgba(51, 51, 51, 0.4); }
.leaflet-sidebar-tabs > li.disabled:hover, .leaflet-sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.leaflet-sidebar-tabs > li.disabled > a, .leaflet-sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.leaflet-sidebar-tabs > li > a, .leaflet-sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center;
cursor: pointer; }
.leaflet-sidebar-tabs > ul + ul {
bottom: 0; }

.leaflet-sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.leaflet-sidebar-left .leaflet-sidebar-content {
left: 40px;
right: 0; }
.leaflet-sidebar-right .leaflet-sidebar-content {
left: 0;
right: 40px; }
.leaflet-sidebar.collapsed > .leaflet-sidebar-content {
overflow-y: hidden; }

.collapsed > .leaflet-sidebar-content {
overflow-y: hidden; }

.leaflet-sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.leaflet-sidebar-pane.active {
display: block; }
@media (min-width: 768px) and (max-width: 991px) {
.leaflet-sidebar-pane {
min-width: 265px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.leaflet-sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.leaflet-sidebar-pane {
min-width: 420px; } }

.leaflet-sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #fff;
background-color: #0074d9; }
.leaflet-sidebar-right .leaflet-sidebar-header {
padding-left: 40px; }

.leaflet-sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.leaflet-sidebar-left .leaflet-sidebar-close {
right: 0; }
.leaflet-sidebar-right .leaflet-sidebar-close {
left: 0; }

.leaflet-sidebar {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
.leaflet-sidebar.leaflet-touch {
box-shadow: none;
border-right: 2px solid rgba(0, 0, 0, 0.2); }
@media (min-width: 768px) {
.leaflet-sidebar {
border-radius: 4px; }
.leaflet-sidebar.leaflet-touch {
border: 2px solid rgba(0, 0, 0, 0.2); } }

@media (min-width: 768px) {
.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
transition: left 500ms; } }

@media (min-width: 768px) and (max-width: 991px) {
.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
left: 315px; } }

@media (min-width: 992px) and (max-width: 1199px) {
.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
left: 400px; } }

@media (min-width: 1200px) {
.leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
left: 470px; } }

@media (min-width: 768px) {
.leaflet-sidebar-left.collapsed ~ .leaflet-control-container .leaflet-left {
left: 50px; } }

@media (min-width: 768px) {
.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
transition: right 500ms; } }

@media (min-width: 768px) and (max-width: 991px) {
.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
right: 315px; } }

@media (min-width: 992px) and (max-width: 1199px) {
.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
right: 400px; } }

@media (min-width: 1200px) {
.leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
right: 470px; } }

@media (min-width: 768px) {
.leaflet-sidebar-right.collapsed ~ .leaflet-control-container .leaflet-right {
right: 50px; } }

+ 1
- 0
librerias/leaflet/css/leaflet-sidebar.min.css
File diff suppressed because it is too large
View File


+ 529
- 0
librerias/leaflet/js/leaflet-sidebar.js View File

@@ -0,0 +1,529 @@
// @ts-nocheck
/**
* @name Sidebar
* @class L.Control.Sidebar
* @extends L.Control
* @param {string} id - The id of the sidebar element (without the # character)
* @param {Object} [options] - Optional options object
* @param {string} [options.autopan=false] - whether to move the map when opening the sidebar to make maintain the visible center point
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @param {string} [options.id] - ID of a predefined sidebar container that should be used
* @param {boolean} [data.close=true] Whether to add a close button to the pane header
* @see L.control.sidebar
*/
L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,

options: {
autopan: false,
closeButton: true,
container: null,
position: 'left'
},

/**
* Create a new sidebar on this object.
*
* @constructor
* @param {Object} [options] - Optional options object
* @param {string} [options.autopan=false] - whether to move the map when opening the sidebar to make maintain the visible center point
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @param {string} [options.container] - ID of a predefined sidebar container that should be used
* @param {bool} [data.close=true] Whether to add a close button to the pane header
*/
initialize: function(options, deprecatedOptions) {
if (typeof options === 'string') {
console.warn('this syntax is deprecated. please use L.control.sidebar({ container }) now');
options = { container: options };
}

if (typeof options === 'object' && options.id) {
console.warn('this syntax is deprecated. please use L.control.sidebar({ container }) now');
options.container = options.id;
}

this._tabitems = [];
this._panes = [];
this._closeButtons = [];

L.setOptions(this, Object.assign({}, options, deprecatedOptions));
return this;
},

/**
* Add this sidebar to the specified map.
*
* @param {L.Map} map
* @returns {Sidebar}
*/
onAdd: function(map) {
var i, child, tabContainers, newContainer, container;

// use container from previous onAdd()
container = this._container

// use the container given via options.
if (!container) {
container = this._container || typeof this.options.container === 'string'
? L.DomUtil.get(this.options.container)
: this.options.container;
}

// if no container was specified or not found, create it and apply an ID
if (!container) {
container = L.DomUtil.create('div', 'leaflet-sidebar collapsed');
if (typeof this.options.container === 'string')
container.id = this.options.container;
}

// Find paneContainer in DOM & store reference
this._paneContainer = container.querySelector('div.leaflet-sidebar-content');

// If none is found, create it
if (this._paneContainer === null)
this._paneContainer = L.DomUtil.create('div', 'leaflet-sidebar-content', container);

// Find tabContainerTop & tabContainerBottom in DOM & store reference
tabContainers = container.querySelectorAll('ul.leaflet-sidebar-tabs, div.leaflet-sidebar-tabs > ul');
this._tabContainerTop = tabContainers[0] || null;
this._tabContainerBottom = tabContainers[1] || null;

// If no container was found, create it
if (this._tabContainerTop === null) {
newContainer = L.DomUtil.create('div', 'leaflet-sidebar-tabs', container);
newContainer.setAttribute('role', 'tablist');
this._tabContainerTop = L.DomUtil.create('ul', '', newContainer);
}
if (this._tabContainerBottom === null) {
newContainer = this._tabContainerTop.parentNode;
this._tabContainerBottom = L.DomUtil.create('ul', '', newContainer);
}

// Store Tabs in Collection for easier iteration
for (i = 0; i < this._tabContainerTop.children.length; i++) {
child = this._tabContainerTop.children[i];
child._sidebar = this;
child._id = child.querySelector('a').hash.slice(1); // FIXME: this could break for links!
this._tabitems.push(child);
}
for (i = 0; i < this._tabContainerBottom.children.length; i++) {
child = this._tabContainerBottom.children[i];
child._sidebar = this;
child._id = child.querySelector('a').hash.slice(1); // FIXME: this could break for links!
this._tabitems.push(child);
}

// Store Panes in Collection for easier iteration
for (i = 0; i < this._paneContainer.children.length; i++) {
child = this._paneContainer.children[i];
if (child.tagName === 'DIV' &&
L.DomUtil.hasClass(child, 'leaflet-sidebar-pane')) {
this._panes.push(child);

// Save references to close buttons
var closeButtons = child.querySelectorAll('.leaflet-sidebar-close');
if (closeButtons.length) {
this._closeButtons.push(closeButtons[closeButtons.length - 1]);
this._closeClick(closeButtons[closeButtons.length - 1], 'on');
}
}
}

// set click listeners for tab & close buttons
for (i = 0; i < this._tabitems.length; i++) {
this._tabClick(this._tabitems[i], 'on');
}

// leaflet moves the returned container to the right place in the DOM
return container;
},

/**
* Remove this sidebar from the map.
*
* @param {L.Map} map
* @returns {Sidebar}
*/
onRemove: function (map) {
var i;

this._map = null;
this._tabitems = [];
this._panes = [];
this._closeButtons = [];

// Remove click listeners for tab & close buttons
for (i = 0; i < this._tabitems.length; i++)
this._tabClick(this._tabitems[i], 'off');

for (i = 0; i < this._closeButtons.length; i++)
this._closeClick(this._closeButtons[i], 'off');

return this;
},

/**
* @method addTo(map: Map): this
* Adds the control to the given map. Overrides the implementation of L.Control,
* changing the DOM mount target from map._controlContainer.topleft to map._container
*/
addTo: function (map) {
this.onRemove();
this._map = map;

this._container = this.onAdd(map);

L.DomUtil.addClass(this._container, 'leaflet-control');
L.DomUtil.addClass(this._container, 'leaflet-sidebar-' + this.getPosition());
if (L.Browser.touch)
L.DomUtil.addClass(this._container, 'leaflet-touch');

// when adding to the map container, we should stop event propagation
L.DomEvent.disableScrollPropagation(this._container);
L.DomEvent.disableClickPropagation(this._container);
L.DomEvent.on(this._container, 'contextmenu', L.DomEvent.stopPropagation);

// insert as first child of map container (important for css)
map._container.insertBefore(this._container, map._container.firstChild);

return this;
},

/**
* @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
* Removes this sidebar from the map.
* @param {L.Map} map
* @returns {Sidebar}
*/
removeFrom: function(map) {
console.warn('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
this._map._container.removeChild(this._container);
this.onRemove(map);

return this;
},

/**
* Open sidebar (if it's closed) and show the specified tab.
*
* @param {string} id - The ID of the tab to show (without the # character)
* @returns {L.Control.Sidebar}
*/
open: function(id) {
var i, child, tab;

// If panel is disabled, stop right here
tab = this._getTab(id);
if (L.DomUtil.hasClass(tab, 'disabled'))
return this;

// Hide old active contents and show new content
for (i = 0; i < this._panes.length; i++) {
child = this._panes[i];
if (child.id === id)
L.DomUtil.addClass(child, 'active');
else if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}

// Remove old active highlights and set new highlight
for (i = 0; i < this._tabitems.length; i++) {
child = this._tabitems[i];
if (child.querySelector('a').hash === '#' + id)
L.DomUtil.addClass(child, 'active');
else if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}

this.fire('content', { id: id });

// Open sidebar if it's closed
if (L.DomUtil.hasClass(this._container, 'collapsed')) {
this.fire('opening');
L.DomUtil.removeClass(this._container, 'collapsed');
if (this.options.autopan) this._panMap('open');
}

return this;
},

/**
* Close the sidebar (if it's open).
*
* @returns {L.Control.Sidebar}
*/
close: function() {
var i;

// Remove old active highlights
for (i = 0; i < this._tabitems.length; i++) {
var child = this._tabitems[i];
if (L.DomUtil.hasClass(child, 'active'))
L.DomUtil.removeClass(child, 'active');
}

// close sidebar, if it's opened
if (!L.DomUtil.hasClass(this._container, 'collapsed')) {
this.fire('closing');
L.DomUtil.addClass(this._container, 'collapsed');
if (this.options.autopan) this._panMap('close');
}

return this;
},

/**
* Add a panel to the sidebar
*
* @example
* sidebar.addPanel({
* id: 'userinfo',
* tab: '<i class="fa fa-gear"></i>',
* pane: someDomNode.innerHTML,
* position: 'bottom'
* });
*
* @param {Object} [data] contains the data for the new Panel:
* @param {String} [data.id] the ID for the new Panel, must be unique for the whole page
* @param {String} [data.position='top'] where the tab will appear:
* on the top or the bottom of the sidebar. 'top' or 'bottom'
* @param {HTMLString} {DOMnode} [data.tab] content of the tab item, as HTMLstring or DOM node
* @param {HTMLString} {DOMnode} [data.pane] content of the panel, as HTMLstring or DOM node
* @param {String} [data.link] URL to an (external) link that will be opened instead of a panel
* @param {String} [data.title] Title for the pane header
* @param {String} {Function} [data.button] URL to an (external) link or a click listener function that will be opened instead of a panel
* @param {bool} [data.disabled] If the tab should be disabled by default
*
* @returns {L.Control.Sidebar}
*/
addPanel: function(data) {
var pane, tab, tabHref, closeButtons, content;

// Create tab node
tab = L.DomUtil.create('li', data.disabled ? 'disabled' : '');
tabHref = L.DomUtil.create('a', '', tab);
tabHref.href = '#' + data.id;
tabHref.setAttribute('role', 'tab');
tabHref.innerHTML = data.tab;
tab._sidebar = this;
tab._id = data.id;
tab._button = data.button; // to allow links to be disabled, the href cannot be used
if (data.title && data.title[0] !== '<') tab.title = data.title;

// append it to the DOM and store JS references
if (data.position === 'bottom')
this._tabContainerBottom.appendChild(tab);
else
this._tabContainerTop.appendChild(tab);

this._tabitems.push(tab);

// Create pane node
if (data.pane) {
if (typeof data.pane === 'string') {
// pane is given as HTML string
pane = L.DomUtil.create('DIV', 'leaflet-sidebar-pane', this._paneContainer);
content = '';
if (data.title)
content += '<h1 class="leaflet-sidebar-header">' + data.title;
if (this.options.closeButton)
content += '<span class="leaflet-sidebar-close"><i class="fa fa-caret-' + this.options.position + '"></i></span>';
if (data.title)
content += '</h1>';
pane.innerHTML = content + data.pane;
} else {
// pane is given as DOM object
pane = data.pane;
this._paneContainer.appendChild(pane);
}
pane.id = data.id;

this._panes.push(pane);

// Save references to close button & register click listener
closeButtons = pane.querySelectorAll('.leaflet-sidebar-close');
if (closeButtons.length) {
// select last button, because thats rendered on top
this._closeButtons.push(closeButtons[closeButtons.length - 1]);
this._closeClick(closeButtons[closeButtons.length - 1], 'on');
}
}

// Register click listeners, if the sidebar is on the map
this._tabClick(tab, 'on');

return this;
},

/**
* Removes a panel from the sidebar
*
* @example
* sidebar.remove('userinfo');
*
* @param {String} [id] the ID of the panel that is to be removed
* @returns {L.Control.Sidebar}
*/
removePanel: function(id) {
var i, j, tab, pane, closeButtons;

// find the tab & panel by ID, remove them, and clean up
for (i = 0; i < this._tabitems.length; i++) {
if (this._tabitems[i]._id === id) {
tab = this._tabitems[i];

// Remove click listeners
this._tabClick(tab, 'off');

tab.remove();
this._tabitems.splice(i, 1);
break;
}
}

for (i = 0; i < this._panes.length; i++) {
if (this._panes[i].id === id) {
pane = this._panes[i];
closeButtons = pane.querySelectorAll('.leaflet-sidebar-close');
for (j = 0; j < closeButtons.length; j++) {
this._closeClick(closeButtons[j], 'off');
}

pane.remove();
this._panes.splice(i, 1);

break;
}
}

return this;
},

/**
* enables a disabled tab/panel
*
* @param {String} [id] ID of the panel to enable
* @returns {L.Control.Sidebar}
*/
enablePanel: function(id) {
var tab = this._getTab(id);
L.DomUtil.removeClass(tab, 'disabled');

return this;
},

/**
* disables an enabled tab/panel
*
* @param {String} [id] ID of the panel to disable
* @returns {L.Control.Sidebar}
*/
disablePanel: function(id) {
var tab = this._getTab(id);
L.DomUtil.addClass(tab, 'disabled');

return this;
},

/**
* (un)registers the onclick event for the given tab,
* depending on the second argument.
* @private
*
* @param {DOMelement} [tab]
* @param {String} [on] 'on' or 'off'
*/
_tabClick: function(tab, on) {
var link = tab.querySelector('a');
if (!link.hasAttribute('href') || link.getAttribute('href')[0] !== '#')
return;

var onTabClick = function(e) {
// `this` points to the tab DOM element!
if (L.DomUtil.hasClass(this, 'active')) {
this._sidebar.close();
} else if (!L.DomUtil.hasClass(this, 'disabled')) {
if (typeof this._button === 'string') // an url
window.location.href = this._button;
else if (typeof this._button === 'function') // a clickhandler
this._button(e);
else // a normal pane
this._sidebar.open(this.querySelector('a').hash.slice(1));
}
};

if (on === 'on') {
L.DomEvent
.on(tab.querySelector('a'), 'click', L.DomEvent.preventDefault)
.on(tab.querySelector('a'), 'click', onTabClick, tab);
} else {
L.DomEvent.off(tab.querySelector('a'), 'click', onTabClick);
}
},

onCloseClick: function() {
this.close();
},

/**
* (un)registers the onclick event for the given close button
* depending on the second argument
* @private
*
* @param {DOMelement} [closeButton]
* @param {String} [on] 'on' or 'off'
*/
_closeClick: function(closeButton, on) {
if (on === 'on') {
L.DomEvent.on(closeButton, 'click', this.onCloseClick, this);
} else {
L.DomEvent.off(closeButton, 'click', this.onCloseClick);
}
},

/**
* Finds & returns the DOMelement of a tab
*
* @param {String} [id] the id of the tab
* @returns {DOMelement} the tab specified by id, null if not found
*/
_getTab: function(id) {
for (var i = 0; i < this._tabitems.length; i++) {
if (this._tabitems[i]._id === id)
return this._tabitems[i];
}

return null;
},

/**
* Helper for autopan: Pans the map for open/close events
*
* @param {String} [openClose] The behaviour to enact ('open' | 'close')
*/
_panMap: function(openClose) {
var panWidth = Number.parseInt(L.DomUtil.getStyle(this._container, 'max-width')) / 2;
if (
openClose === 'open' && this.options.position === 'left' ||
openClose === 'close' && this.options.position === 'right'
) panWidth *= -1;
this._map.panBy([panWidth, 0], { duration: 0.5 });
}
});

/**
* Create a new sidebar.
*
* @example
* var sidebar = L.control.sidebar({ container: 'sidebar' }).addTo(map);
*
* @param {Object} [options] - Optional options object
* @param {string} [options.autopan=false] - whether to move the map when opening the sidebar to make maintain the visible center point
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
* @param {string} [options.container] - ID of a predefined sidebar container that should be used
* @param {boolean} [data.close=true] Whether to add a close button to the pane header
* @returns {Sidebar} A new sidebar instance
*/
L.control.sidebar = function(options, deprecated) {
return new L.Control.Sidebar(options, deprecated);
};

+ 1
- 0
librerias/leaflet/js/leaflet-sidebar.min.js
File diff suppressed because it is too large
View File


+ 2
- 22
mapero.php View File

@@ -347,7 +347,7 @@ $leyenda ="<div id='div_leyenda'><a class='btn btn-default btn-xs' onclick=xaja
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
maxZoom:19,
attribution: '<a href="https://tupale.co">https://tupale.co</a> &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}),
latlng = L.latLng(4, -74.9005222);
@@ -358,6 +358,7 @@ $leyenda ="<div id='div_leyenda'><a class='btn btn-default btn-xs' onclick=xaja
var geojson = L.geoJson(geojsonSample, {

pointToLayer: function(feature, latlng) {
var smallIcon = new L.Icon({
iconSize: [100, 100],
iconAnchor: [13, 27],
@@ -377,28 +378,7 @@ onEachFeature: function(feature, layer) {
layer.bindPopup(popupText); }
});

/*
var geojsonAux = L.geoJson(geojsonAuxiliar, {

pointToLayer: function(feature, latlng) {
var smallIcon = new L.Icon({
iconSize: [60, 60],
iconAnchor: [13, 27],
popupAnchor: [1, -24],

iconUrl: "http://localhost/default/tupali/milfs/images/secure/?file=150/da6d16547658ebc06c5378b30d1ee4bf.png"

});
return L.marker(latlng, {icon: smallIcon});
},

onEachFeature: function(feature, layer) {
var popupText = feature.properties.description
layer.bindPopup(popupText); }
});
*/
<?php echo $layer; ?>
var markers = L.markerClusterGroup();
markers.addLayer(geojson);

+ 1
- 1
milfs

@@ -1 +1 @@
Subproject commit debb238d179a35513955d1c9fde4f0e3c39d416a
Subproject commit 9a89a921e03bca67d97921b5e36fbac655a3e678

Loading…
Cancel
Save