mapa2 - moved from soundwalk
This commit is contained in:
parent
81b2406aa2
commit
f818689684
290
mapa2.php
Executable file
290
mapa2.php
Executable 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>
|
||||
|
||||
15
soundmap.php
15
soundmap.php
@ -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){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user