242 lines
6.6 KiB
PHP
242 lines
6.6 KiB
PHP
|
<?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
|
||
|
|
if(!isset($_GET['paseo'])) { $id=0; }
|
||
|
|
else {
|
||
|
|
$id = $_GET['paseo'];
|
||
|
|
$file_helper = new Soundwalk_File_Helper();
|
||
|
|
$db_helper = new Soundwalk_DB_Helper();
|
||
|
|
$walk = $db_helper->get_walk($id, true);
|
||
|
|
$walks[] = $walk;
|
||
|
|
// En el caso del mapa general
|
||
|
|
if ($id==26) {
|
||
|
|
$walks[] = $db_helper->get_walk(27,true);
|
||
|
|
$walks[] = $db_helper->get_walk(28,true);
|
||
|
|
$walks[] = $db_helper->get_walk(29,true);
|
||
|
|
$walks[] = $db_helper->get_walk(30,true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// fit to location
|
||
|
|
$fit = false;
|
||
|
|
if (isset($_GET['fit'])) {
|
||
|
|
$fit = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
?>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8 />
|
||
|
|
<title>Rekording - Audio Map</title>
|
||
|
|
<script src='https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></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; }
|
||
|
|
.my-icon {
|
||
|
|
border-radius: 100%;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 20px;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.Ahotsak {
|
||
|
|
background: #f7b850;
|
||
|
|
}
|
||
|
|
|
||
|
|
.La_Sonidera {
|
||
|
|
background: #56577c;
|
||
|
|
}
|
||
|
|
|
||
|
|
.InkoMartin_AlbertoDeLaHoz {
|
||
|
|
background: #f58d75;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Audiolab {
|
||
|
|
background: #a0d3cc;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
<?php
|
||
|
|
$marker_color="#000000";
|
||
|
|
print "walk = {
|
||
|
|
\"type\": \"FeatureCollection\",
|
||
|
|
\"features\": [";
|
||
|
|
$w=0;
|
||
|
|
foreach ($walks as $walk) :
|
||
|
|
if (isset($walk->points)) :
|
||
|
|
for ($i=0; $i < count($walk->points); $i++) {
|
||
|
|
$p = $walk->points[$i];
|
||
|
|
switch($p->autor) {
|
||
|
|
case "Ahotsak":
|
||
|
|
$marker_color="#f7b850";
|
||
|
|
break;
|
||
|
|
case "Audiolab":
|
||
|
|
$marker_color="#a0d3cc";
|
||
|
|
break;
|
||
|
|
case "La Sonidera":
|
||
|
|
$marker_color="#56577c";
|
||
|
|
break;
|
||
|
|
case "InkoMartin AlbertoDeLaHoz":
|
||
|
|
$marker_color="#f58d75";
|
||
|
|
break;
|
||
|
|
case "Luca":
|
||
|
|
$marker_color="#00ff00";
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
$marker_color="#f76565";
|
||
|
|
}
|
||
|
|
|
||
|
|
$finfo = $p->fileInfo;
|
||
|
|
print "{
|
||
|
|
\"type\": \"Feature\",
|
||
|
|
\"geometry\": {
|
||
|
|
\"type\": \"Point\",
|
||
|
|
\"coordinates\": [$p->lng, $p->lat]
|
||
|
|
},
|
||
|
|
\"properties\": {
|
||
|
|
\"title\": \"$p->title\",
|
||
|
|
\"id\": \"$p->id\",
|
||
|
|
\"author\": \"$p->autor\",
|
||
|
|
\"attachment\": \"$finfo->url\",
|
||
|
|
\"icon\": {
|
||
|
|
\"className\": \"my-icon ".str_replace(' ', '_',($p->autor))."\",
|
||
|
|
\"iconSize\": null
|
||
|
|
}
|
||
|
|
}";
|
||
|
|
if ( $i==(count($walk->points)-1) && $w==(count($walks)-1) ) { print "}";}
|
||
|
|
else { print "},"; }
|
||
|
|
}
|
||
|
|
endif;
|
||
|
|
$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 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
|
||
|
|
});*/
|
||
|
|
|
||
|
|
var audio;
|
||
|
|
var id;
|
||
|
|
|
||
|
|
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([43.3072873,-2.0089024], 13);
|
||
|
|
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) {
|
||
|
|
e.setIcon(L.divIcon(e.feature.properties.icon));
|
||
|
|
e.on("click",function() {
|
||
|
|
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();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
<?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], 13);
|
||
|
|
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>
|
||
|
|
|