Browse Source

Prueba de concepto para agregar geojson a mapero

pull/112/head
fredyrivera 2 years ago
parent
commit
3fbc06fb88
7 changed files with 20630 additions and 117 deletions
  1. +213
    -104
      Mapero.php
  2. +1
    -1
      milfs/includes/upload.php
  3. +12
    -12
      milfs/mapa.php
  4. +31
    -0
      mjson.php
  5. +180
    -0
      tmp/all_day.geojson
  6. +6728
    -0
      tmp/huertasquindio.geojson
  7. +13465
    -0
      tmp/ruta_paz_territorial.geojson

+ 213
- 104
Mapero.php View File

@@ -9,36 +9,63 @@ require ("milfs/funciones/conex.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])) {
$_REQUEST[buscar] = "$_REQUEST[categoria]:$_REQUEST[buscar]";

}
$formulario_nombre = remplacetas('form_id','id',$_REQUEST[id],'nombre') ;
$formulario_descripcion = remplacetas('form_id','id',$_REQUEST[id],'descripcion') ;
$agregar_nombre = remplacetas('form_id','id',$agregar,'nombre') ;
$id_empresa = remplacetas('form_id','id',$_REQUEST[id],'id_empresa') ;
$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");
$plantilla ="mapa";
?>

<!DOCTYPE html>
<html lang="en">
<head >
<title><?php echo $formulario_nombre[0] ?> MILFS</title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1, initial-scale=1">
<!-- <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="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="description" content="">
<?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/leaflet/leaflet.css"/>
<link rel="stylesheet" href="librerias/leaflet/leaflet-search.css"/>
<script src="librerias/leaflet/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="librerias/jquery/jquery-2.1.4.min.js"></script>
<script src="librerias/leaflet/leaflet-providers.js"></script>
<script src="librerias/leaflet/leaflet-search.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="milfs/css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen" href="milfs/css/bootstrap.css">


<link rel="stylesheet" href="librerias/leaflet/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/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'] ?>"></script>
<!-- <script type="text/javascript" src="http://localhost/default/tupali/milfs/geojson.js.php?id=358"></script> -->
<!-- <script type="text/javascript" src="tmp/ruta_paz_territorial.geojson"></script> -->
<?php
$otro_json = remplacetas('form_parametrizacion','campo',$_REQUEST[id],'descripcion'," tabla='form_id' and opcion = 'json'") ;;
//$obj = file_get_contents('https://www.kleper.net/wiki/RutaPazTerritorial.geojson');
$obj=file_get_contents("$otro_json[0]");
echo "<script>var geojsonAuxiliar = $obj ;</script>";
?>
<style type="text/css">
.navbar-default {
background:rgba(255,255,255,1) ;

}
@media (max-width: 800px) {
.panel-map{
max-width: 970px;
@@ -58,28 +85,9 @@ background:rgba(255,255,255,1) ;
#map { position:absolute; top:0; bottom:0; width:100%; }
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
padding: 0; margin: 0;
}



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}

.footer {
position: absolute;
@@ -106,9 +114,7 @@ body > .container {
}

code {
font-size: 80%;
}

.modal-dialog {
width: 70%;
height: 50%;
@@ -118,8 +124,23 @@ code {
.modal-content {
height: 50%;
}

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
</style>
<?php
$categorias = lista_categorias($_REQUEST['id'],'','') ;
$css_adicional = remplacetas('form_parametrizacion','campo',"index",'descripcion'," tabla='css' and opcion = 'adicional' and id_empresa = '$id_empresa[0]'") ;

if($css_adicional[0] !="") {
@@ -134,10 +155,64 @@ code {
echo $css_adicional; ?>
</head>
<body>
<!--nav sidebar -->
<aside>
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="librerias/leaflet/css/sidebar.css" rel="stylesheet">

<div class="nav-side-menu">
<div class="brand"><a href="./"><img style='width: 100%;' src='images/banner.png' class='image-responsive'></a><br> <i class="fa fa-info-circle fa-lg pull-right" style="margin-top: 10px; margin-right: 5px;"></i></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>


<br>
<form action="?id=<?php echo $_REQUEST[id]; ?>" method="get">
<div class='input-group '>
<input type='hidden' id='id' name='id' value="<?php echo $_REQUEST[id]; ?>" >
<?php echo $campos_formulario; ?><div id='div_campos'></div>
<input type='text' id='buscar' name='buscar' class='form-control' placeholder='Buscar' >

<div id="map" style="">

<?php $categorias = lista_categorias($_REQUEST['id'],'','') ;
<input type="submit" class="btn btn-info " value="Buscar">

</div>
</form>
<hr>
<div class="menu-list">
<div style='width: calc(90% - 40px);;' class="container-fluid">
<h1><?php echo $formulario_nombre[0]; ?></h1>
<h2><?php echo $formulario_descripcion[0]; ?></h2>
<hr>
<h3>Categorías</h3>
<div style="height: 300px; overflow: auto;" >
<?php echo $categorias; ?>
</div>
<div class="sidebar-logo">
<a href="e<?php echo $id_empresa[0]; ?>" >
<img style='margin: 0px auto;' class='img img-responsive block-center' src="milfs/images/secure/?file=150/<?php echo $logo[0]; ?>" alt="<?php echo $razon_social[0]; ?>">
<h4><?php echo $razon_social[0]; ?></h4>
</a>
</div>
</div>

</div>
</div>
</nav>
</aside>




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

<?php
if($categorias !="") {
$pie="
<div style='' class='' id='contenedor_pie' >
@@ -154,46 +229,133 @@ $leyenda ="<div id='div_leyenda'><a class='btn btn-default btn-xs' onclick=xaja
}
//echo $pie;
?>
</div>
<script type="text/javascript">

var map = L.map('map');
//var terrainTiles = L.tileLayer.provider('OpenTopoMap');
//terrainTiles.addTo(map);
map.setView([4, -74.9005222], 5);

function addDataToMap(data, map) {
var dataLayer = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
<script type="text/javascript">
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
function htmlbodyHeightUpdate(){
var height3 = $( window ).height()
var height1 = $('.nav').height()+50
height2 = $('.main').height()
if(height2 > height3){
$('html').height(Math.max(height1,height3,height2)+10);
$('body').height(Math.max(height1,height3,height2)+10);
}
else
{
$('html').height(Math.max(height1,height3,height2));
$('body').height(Math.max(height1,height3,height2));
}
}
$(document).ready(function () {
htmlbodyHeightUpdate()
$( window ).resize(function() {
htmlbodyHeightUpdate()
});
$( window ).scroll(function() {
height2 = $('.main').height()
htmlbodyHeightUpdate()
});
});
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}),
latlng = L.latLng(4, -74.9005222);

var map = L.map('map', {center: latlng, zoom: 5, layers: [tiles],zoomControl: false});

var geojson = L.geoJson(geojsonSample, {

pointToLayer: function(feature, latlng) {
var smallIcon = new L.Icon({
iconSize: [60, 60],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
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) {

onEachFeature: function(feature, layer) {
var popupText = feature.properties.description
layer.bindPopup(popupText); }
});
map.fitBounds(dataLayer.getBounds());
dataLayer.addTo(map);
});

}

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

pointToLayer: function(feature, latlng) {
var smallIcon = new L.Icon({
iconSize: [60, 60],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
/* 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) {
var popupText = feature.properties.description
layer.bindPopup(popupText); }
});
var markers = L.markerClusterGroup();
markers.addLayer(geojson);
markers.addLayer(geojsonAux);
map.fitBounds(geojson.getBounds());
var legend = L.control({position: 'bottomright'});
//disable zoomControl when initializing map (which is topleft by default)


//add zoom control with your options
L.control.zoom({
position:'topright'
}).addTo(map);


legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = "<?php echo $leyenda; ?> <a class='btn btn-info btn-xs' onclick=\"xajax_contenido_show('div_leyenda'); \"><span class=''>Leyenda</span></a>";
div.innerHTML = "";
div.id = "info legend"

@@ -202,61 +364,8 @@ var legend = L.control({position: 'bottomright'});
legend.addTo(map);
var defaultLayer = L.tileLayer.provider('OpenTopoMap').addTo(map);

var baseLayers = {
'Topográfico': defaultLayer,
'OpenStretMap': L.tileLayer.provider('OpenStreetMap.Mapnik') ,
'Blanco y Negro': L.tileLayer.provider('OpenStreetMap.BlackAndWhite'),
'Humanitario.': L.tileLayer.provider('OpenStreetMap.HOT'),
'Satelital': L.tileLayer.provider('Esri.WorldImagery')
};

var overlayLayers = {

};

var layerControl = L.control.layers(baseLayers, overlayLayers,{collapsed:false}).addTo(map);




// resize layers control to fit into view.
function resizeLayerControl() {
var layerControlHeight = document.body.clientHeight - (10 + 50);
var layerControl = document.getElementsByClassName('leaflet-control-layers-expanded')[0];

layerControl.style.overflowY = 'auto';
layerControl.style.maxHeight = layerControlHeight + 'px';
}
map.on('resize', resizeLayerControl);
resizeLayerControl();

map.addControl( new L.Control.Search({
url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat','lon'],
markerLocation: true,
autoCollapse: true,
autoType: false,
minLength: 2,
zoom:17
}) );


/* PROVIDERS */

map.addLayer(markers);

/* $.getJSON("http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson", function(data) { addDataToMap(data, map); });*/
$.getJSON("milfs/geojson.php?id=<?php echo $_REQUEST['id'] ?>&buscar=<?php echo $_REQUEST['buscar'] ?>", function(data) { addDataToMap(data, map); });
</script>
</script>
</body>
</html>

+ 1
- 1
milfs/includes/upload.php View File

@@ -112,7 +112,7 @@ if ( !empty($exif['GPSLongitude']) && !empty($exif['GPSLatitude']) ) {
if ( $exif['GPSLatitudeRef'] == 'S')
$gps_latitude = -$gps_latitude;
if($gps_latitude !='') {
$resultado = "../mapa.php?lon=$gps_latitude&lat=$gps_longitude&zoom=18&exif=$file";
$resultado = "../mapa.php?lon=$gps_latitude&lat=$gps_longitude&zoom=18&exif=exif";
}else{$resultado ="";}
//$resultado = "$gps_longitude $gps_latitude";

+ 12
- 12
milfs/mapa.php View File

@@ -29,11 +29,11 @@ var map = L.map('map')
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
<?php
if(!isset($_REQUEST['exif'])) { ?>
function onLocationFound(e) {
function onLocationFound(e) {
var radius = e.accuracy / 2;
var marker = L.marker(e.latlng,{draggable: true}).addTo(map)
L.circle(e.latlng, radius).addTo(map);
var mapa = window.parent.document.getElementById('<?php echo $_REQUEST[id]?>');
L.circle(e.latlng, radius).addTo(map);
var mapa = window.parent.document.getElementById('<?php echo $_REQUEST[id]?>');
marker.on('dragend', ondragend);
ondragend();
@@ -41,16 +41,16 @@ var mapa = window.parent.document.getElementById('<?php echo $_REQUEST[id]?>');
var m = marker.getLatLng();
var z = map.getZoom();
mapa.value= m.lng+' '+m.lat+' '+z;
}
}
}
map.on('locationfound', onLocationFound);
map.on('locationfound', onLocationFound);
<?php } ?>
function onLocationError(e) {
function onLocationError(e) {
//alert(e.message);
var marker = L.marker([<?php echo $lon ?>,<?php echo $lat ?>],{draggable: true}).addTo(map);
var mapa = window.parent.document.getElementById('<?php echo $_REQUEST[id]?>');
@@ -60,7 +60,7 @@ function onLocationError(e) {
var m = marker.getLatLng();
var z = map.getZoom();
mapa.value= m.lng+' '+m.lat+' '+z;
}
}
}
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});

+ 31
- 0
mjson.php View File

@@ -0,0 +1,31 @@
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="librerias/leaflet/leaflet-providers.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 300px;"></div>
<script type="text/javascript">
var map = L.map('map');
var terrainTiles = L.tileLayer.provider('OpenStreetMap.Mapnik');
terrainTiles.addTo(map);
map.setView([4, -72], 3);

function addDataToMap(data, map) {
var dataLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
var popupText = "Titulo: " + feature.properties.name
+ "<br>Location: " + feature.properties.coordinates
+ "<br><a href='" + feature.properties.title + "'>More info</a>";
layer.bindPopup(popupText); }
});
dataLayer.addTo(map);
}


$.getJSON("https://www.kleper.net/wiki/lib/exe/fetch.php/ruta_paz_territorial.geojson", function(data) { addDataToMap(data, map); });
</script>
</body>
</html>

+ 180
- 0
tmp/all_day.geojson
File diff suppressed because it is too large
View File


+ 6728
- 0
tmp/huertasquindio.geojson
File diff suppressed because it is too large
View File


+ 13465
- 0
tmp/ruta_paz_territorial.geojson
File diff suppressed because it is too large
View File


Loading…
Cancel
Save