mapa2 - moved from soundwalk

This commit is contained in:
Luca 2018-01-05 02:18:37 +01:00
parent 81b2406aa2
commit f818689684
2 changed files with 306 additions and 1 deletions

290
mapa2.php Executable file
View File

@ -0,0 +1,290 @@
<?php
// Creación de mapas de los paseos
require_once( dirname(dirname(dirname(dirname( __FILE__ )))) . '/wp-load.php' );
//require_once (dirname( __FILE__ ) . '/libs/classes.php');
$walks = array();
// markers
// Get all markers
//
//
$args = array (
'post_type' => 'marker',
);
$posts = get_posts($args);
// fit to location
$fit = false;
if (isset($_GET['fit'])) {
$fit = true;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mapa de Comunitats</title>
<script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
<!--script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.css' rel='stylesheet' /-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%;min-height:300px;display:block; }
.leaflet-div-icon { border:0; width:40px; height:40px;background:transparent; }
.claseSS {
border-radius:100%;
width:20px !important;
height:20px !important;
}
.iniciativa { background:#a0d3cc; }
.interes { background:#ffd300; }
.agente { background:#00ff33; }
.comunidad_de_memoria { background:#aa0033; }
.info-layer {
display:none;
background:rgba(255,255,255,0.9);
position:fixed;
right:0;
width:25%;
height:100%;
z-index:3000;
padding:20px;
border-left:solid 3px #ccc;
overflow-y:scroll;
}
.info-layer .marker-item { display:none;}
#marker-content,
#marker-sinopsis,
#marker-contacte,
#marker-ubicacio-barri,
#marker-ubicacio-districte,
#marker-forma-organitzativa,
#marker-sinopsis,
#marker-objecte-dinteres-general,
#marker-objecte-dinteres-especific,
#marker-objecte-dinteres,
#marker-agents-impulsors-de-la-iniciativa,
#marker-any-dinici,
#marker-content,
#marker-title
{ display:block;}
.col-50 {
width:46%;
padding:2%;
padding:0px;
float:left;
}
</style>
<script type="text/javascript">
<?php
$marker_color="#000000";
print "walk = {
\"type\": \"FeatureCollection\",
\"features\": [";
$w=0;
foreach ($posts as $post) :
$cat = get_the_category($post->ID);
$slug = $cat[0]->slug;
$finfo = "http://irratia.zintzilik.net";
print "{
\"type\": \"Feature\",
\"geometry\": {
\"type\": \"Point\",
\"coordinates\": [".reset(get_post_meta($post->ID,'soundmap_marker_lng')).", ".reset(get_post_meta($post->ID,'soundmap_marker_lat'))."]
},
\"properties\": {
\"title\": \"$post->post_title\",
\"id\": \"$post->ID\",
\"author\": \"$post->post_autor\",
\"attachment\": \"$finfo\",
\"description\":\"".$post->post_content."\",
\"icon\": {
\"className\": \"claseSS ".str_replace('-','_',$slug)."\",
\"iconSize\": null
}
}";
if ( $i==(count($posts)-1) && $w==(count($posts)-1) ) { print "}";}
else { print "},"; }
$w=$w+1;
endforeach;
print "]}\n";
?>
</script>
</head>
<body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<div class="" id="loading" style="position:fixed;z-index:1000000;font-size:5em;right:50%;top:50%;"><strong>LOADING...</strong></div>
<div class="info-layer">
</div>
<div id='map'></div>
<script type="text/javascript">
/*mapboxgl.accessToken = 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/lrullo/cijlyga9m00jvbgkhu7aclgp8', //stylesheet location
center: [-1.9806718826293945,43.316810229039795], // starting position
zoom: 12 // starting zoom
});*/
//init
var audio;
var id;
var $loading = $('#loading').hide();
$(document)
.ajaxStart(function() { $loading.fadeIn();})
.ajaxStop(function() { $loading.fadeOut(); });
function init() {
//console.log('init');
$('.info-layer').on('click',function(e) {$('.info-layer').hide();});
}
function audioPlay(s) {
audio.stop();
audio = new Audio(s);
audio.play();
}
function audioStop() {
audio.stop();
}
L.mapbox.accessToken = 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var mapCluster = L.mapbox.map('map','lrullo.cih52v78z00v4krkrzge97rgg')
.setView([41.44876553063473,2.04345703125], 15);
//mapCluster.on('click',function(e) {audio.pause();});
var featureLayer = L.mapbox.featureLayer(walk);
var clusterGroup = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return L.divIcon({
iconSize : [30,30],
html:'<div style="border:1px;border-color:#fff;text-align:center;color:#fff;width:100%;height:100%;background-color:#aaa;border-radius:100%;padding:5px;font-weight:bold;">'+cluster.getChildCount()+'</div>'
});
}
});
featureLayer.eachLayer(function(layer) { clusterGroup.addLayer(layer);});
mapCluster.addLayer(clusterGroup);
var me = L.marker([0, 0], {
icon: L.mapbox.marker.icon({
'marker-color': '#000',
'marker-symbol': 'star',
'marker-size': 'small'
})
});
me.addTo(mapCluster);
mapCluster.featureLayer.on('ready', function(e) {
<?php if (!$fit) : ?> mapCluster.fitBounds(featureLayer.getBounds()); <?php endif; ?>
featureLayer.eachLayer(function(e) {
//console.log(e.feature.properties.icon);
//e.setIcon(L.divIcon({className: 'claseSS'}));
e.setIcon(L.divIcon(e.feature.properties.icon));
e.on("click",function(e,a) {
e.target.closePopup();
var id = this.feature.properties.id;
jQuery.get("/index.php/wp-json/wp/v2/marker/"+id, function(data) {
//jQuery.get("/mapas/index.php/wp-json/wp/v2/marker/"+id, function(data) {
//console.log(data);
$('.info-layer').hide();
jQuery('.info-layer').html('');
var a = jQuery('.info-layer').append('<div class="row"></div>')
jQuery.each(data,function(e,p){
console.log(e+": "+p);
if (Array.isArray(p)) { a.append('<div class="col-md-12"><div class="marker-item" id="marker-'+e+'"><label>'+p[1]+':</label><br/>'+p[0]+"</div></div>"); }
else if (e=='title') { a.append('<div class="col-md-12"><div class="marker-title" id="maker-title"><h1>'+p.rendered+'</h1></div></div>'); }
else { a.append('<div class="col-md-12"><div class="marker-item" id="marker-'+e+'">'+p+"</div></div>"); }
});
//jQuery('#marker-title').html(data.title.rendered);
//jQuery('#marker-description').html(data.date);
$('.info-layer').show();
});
//$('#marker-title').html(this.feature.properties.title);
//$('#marker-description').html(this.feature.properties.description);
// if (id==e.feature.properties.id) { audio.pause(); id=""; return;}
// else { id=e.feature.properties.id; }
// if(audio!=undefined) { audio.pause();}
// audio = new Audio(e.feature.properties.attachment);
// audio.play();
});
init();
});
});
<?php if ($fit) : ?>getPosition();<?php endif; ?>
function displayPosition(position) {
//console.log("Display position");
me.setLatLng(L.latLng([position.coords.latitude,position.coords.longitude]));
fg = new L.featureGroup([featureLayer, me]);
<?php if (!$fit) :?> mapCluster.fitBounds(fg.getBounds());
<?php else:?> mapCluster.setView([position.coords.latitude, position.coords.longitude],18); <?php endif; ?>
setTimeout(function() { navigator.geolocation.getCurrentPosition(displayPosition, displayError, {enableHighAccuracy: true, timeout: 5000});},5000);
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
console.log("Error: " + errors[error.code]);
switch(errors) {
case 1:
case 2:
map.setView([43.3072873,-2.0089024], 15);
break;
case 3:
alert("timeout");
break;
}
}
function getPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayPosition, displayError, {enableHighAccuracy: true, timeout:5000});
} else {
alert("I'm sorry, but geolocation services are not supported by your browser.");
}
}
</script>
</body>
</html>

View File

@ -58,6 +58,7 @@ if (!class_exists('Soundmap')){
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_rest' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'marker', 'with_front' => false ),
'capability_type' => 'post',
@ -581,8 +582,22 @@ if (!class_exists('Soundmap')){
die();
}
function soundmap_prepare_marker ($data,$p,$r) {
$_data = $data->data;
$_data['content'] = apply_filters('the_content',get_the_content($p->ID));
$fields = get_fields();
foreach ($fields as $name=>$value) :
$f = get_field_object($name);
$_data[str_replace('_','-',$name)] = array($value,$f['label']);
endforeach;
$data->data = $_data;
return $data;
}
function register_filters(){
//add_filter( 'pre_get_posts', array($this, 'pre_get_posts'));
add_filter('rest_prepare_marker',array($this,'soundmap_prepare_marker'),12,3);
}
function set_query($query){
@ -595,7 +610,7 @@ if (!class_exists('Soundmap')){
$this->config['query'] = $query;
}
}
function getID3($file){
$getID3 = new getID3;
$result = array();