File: /home/asjudine/public_html/principal/mapa.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/all.min.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/leaflet.css">
<style>
.leaflet-popup {
margin-right: 17px;
}
.scroll-bar-wrap:hover .cover-bar {
opacity: 0;
-webkit-transition: all .5s;
}
.leaflet-popup-content {
max-width: 300px;
height: 100px;
margin-right: 17px;
overflow: auto;
}
#map {
position: absolute;
top:0px; bottom:0; right:0; left:0;
}
#info-pane {
position: absolute;
height: 550px;
top: 0px;
right: 10px;
z-index: 400;
padding: 1em;
background: white;
text-align: right;
}
#sidebar {
position: absolute;
height: 650px;
top: 10px;
right: 10px;
z-index: 1000;
padding: 1em;
background: white;
}
.sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
z-index: 2000; }
.sidebar.collapsed {
width: 40px; }
@media (max-width: 767px) {
.sidebar {
width: 250px; } }
@media (min-width: 768px) {
.sidebar {
top: 10px;
bottom: 10px;
transition: width 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar {
width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar {
width: 350px; } }
@media (min-width: 1200px) {
.sidebar {
width: 300px; } }
.sidebar-left {
left: 0; }
@media (min-width: 768px) {
.sidebar-left {
left: 10px; } }
.sidebar-right {
right: 0; }
@media (min-width: 768px) {
.sidebar-right {
right: 10px; } }
.sidebar-tabs {
top: 0;
bottom: 0;
height: 100%;
background-color: #fff; }
.sidebar-left .sidebar-tabs {
left: 0; }
.sidebar-right .sidebar-tabs {
right: 0; }
.sidebar-tabs, .sidebar-tabs > ul {
position: absolute;
width: 40px;
margin: 0;
padding: 0; }
.sidebar-tabs > li, .sidebar-tabs > ul > li {
width: 100%;
height: 40px;
color: #47a23d;
font-size: 12pt;
overflow: hidden;
transition: all 80ms; }
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
color: #000;
background-color: #eee; }
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
color: #fff;
background-color: #47a23d; }
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
color: rgba(51, 51, 51, 0.4); }
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
background: transparent; }
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
cursor: default; }
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
color: inherit;
text-decoration: none;
text-align: center; }
.sidebar-tabs > ul + ul {
bottom: 0; }
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
overflow-x: hidden;
overflow-y: auto; }
.sidebar-left .sidebar-content {
left: 40px;
right: 0; }
.sidebar-right .sidebar-content {
left: 0;
right: 40px; }
.sidebar.collapsed > .sidebar-content {
overflow-y: hidden; }
.sidebar-pane {
display: none;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px 20px; }
.sidebar-pane.active {
display: block; }
@media (max-width: 767px){
.sidebar-pane {
min-width: 385px; }
}
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-pane {
min-width: 305px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-pane {
min-width: 350px; } }
@media (min-width: 1200px) {
.sidebar-pane {
min-width: 340px; } }
.sidebar-header {
margin: -10px -20px 0;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14.4pt;
color: #fff;
background-color: #47a23d; }
.sidebar-right .sidebar-header {
padding-left: 40px; }
@media (max-width: 767px){
.sidebar-header {
font-size: 12pt;
}
}
.sidebar-close {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
cursor: pointer; }
.sidebar-left .sidebar-close {
right: 0; }
.sidebar-right .sidebar-close {
left: 0; }
.sidebar-left ~ .sidebar-map {
margin-left: 40px; }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map {
margin-left: 0; } }
.sidebar-right ~ .sidebar-map {
margin-right: 40px; }
@media (max-width: 767px) {
.sidebar-right ~ .sidebar-map {
margin-right: 0; }
}
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map {
margin-right: 0; } }
.sidebar {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
.sidebar.leaflet-touch {
box-shadow: none;
border-right: 2px solid rgba(0, 0, 0, 0.2); }
@media (min-width: 768px) {
.sidebar {
border-radius: 4px; }
.sidebar.leaflet-touch {
border: 2px solid rgba(0, 0, 0, 0.2); } }
@media (min-width: 768px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
transition: left 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 400px; } }
@media (min-width: 1200px) {
.sidebar-left ~ .sidebar-map .leaflet-left {
left: 470px; } }
@media (min-width: 768px) {
.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
left: 50px; } }
@media (min-width: 768px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
transition: right 500ms; } }
@media (min-width: 768px) and (max-width: 991px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 315px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 400px; } }
@media (min-width: 1200px) {
.sidebar-right ~ .sidebar-map .leaflet-right {
right: 315px; } }
@media (min-width: 768px) {
.sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
right: 50px; } }
</style>
</head>
<body>
<div id="page-content">
<section class="main-content">
<div class="container-wide">
<div style="height: 575px;">
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-pencil"></i></a></li>
<!--<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>-->
</ul>
<ul role="tablist">
<!-- <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li> -->
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
Sidebar
<span class="sidebar-close"><i class="fa fa-caret-right"></i></span>
</h1>
<p id="sidebar-text"></p>
</div>
</div> <!--end div classs="sidebar-content"-->
</div>
<div id='map' class="sidebar-map"></div>
</div>
</div>
</section>
</div>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery_3.3.1.js"></script>
<script src="../js/leaflet.js"></script>
<script>
var results = [];
//open sidebar and more content when clicking button in popup
var thisResult;
function openSidebar(ID) {
if ($('#sidebar-text').text().length > 0) {
$("#sidebar-text").removeText();
}
for (var i = 0, len = results.length; i < len; i++) {
if (results[i].OBJECTID === parseInt(ID)) {
thisResult = (results[i]);
}
}
sidebar.open('home');
var divToAddContent = document.getElementById('home');
divToAddContent.innerHTML = "Name:</br>" + thisResult.Name + "</br>Address:</br>" + thisResult.Address + "</br>Category:</br>" + thisResult.Category;
}
// create gray basemap
var Stamen_Terrain = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
});
/*var map = L.map('map', {
center: [2.0000000, -72.0000000],
zoom: 6,
layers: [Stamen_Terrain]
});*/
var zoom = 6;
var map = L.map('map',{
center: [2.0000000, -72.0000000],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
for (var i = 0; i < markers.length; i++)
{
marker = new L.marker([markers[i][1],markers[i][2]])
.bindPopup(markers[i][0])
.addTo(map);
}
$.getJSON("../js/suc.js", function (data) {
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJSON(data, {
pointToLayer: function (feature, latlng) {
var marker = L.circleMarker(latlng, geojsonMarkerOptions);
marker.bindPopup(feature.properties.Name +
'<br/><button type="button" class="btn btn-primary sidebar-open-button" data = "' + feature.properties.OBJECTID + '" ' + '>Click for more</button>');
results.push(feature.properties);
return marker;
}
}).addTo(map);
});
$("div").on("click", '.sidebar-open-button', function () {
var ID = $(this).attr("data");
openSidebar(ID);
});
//add sidebar panel to map
var sidebar = L.control.sidebar('sidebar', { position: 'right' });
map.addControl(sidebar);
</script>
</body>
</html>