soundmap/js/soundmap.front.js

118 lines
3.8 KiB
JavaScript
Raw Normal View History

2016-11-29 01:04:30 +01:00
(function($){
var soundmap = window.Soundmap || {}
_.extend(soundmap, {
map: undefined,
layers:{},
markers: undefined,
infos:[],
ajaxMarker: undefined,
callbacks:{
marker_click: undefined
},
init: function (selector, query){
2022-12-14 01:02:15 +01:00
mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10'}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11'}),
osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
this.map = L.map(selector,{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [osm,grayscale,streets]});
this.map.addControl(
new L.Control.Layers(
{
'OSM': osm,
'Grayscale':grayscale,
'Streets': streets
}, {}
)
);
2016-11-29 01:04:30 +01:00
options = {
type: 'POST',
url: this.ajaxurl,
context: this,
data: {
action: 'soundmap-get-markers',
query: query
}
};
2016-11-29 04:26:53 +01:00
2016-11-29 01:04:30 +01:00
// Use with PHP's wp_send_json_success() and wp_send_json_error()
$.ajax( options ).done(this.ajaxDone).fail(this.ajaxFail);
},
addMapCallback: function (event, callback){
this.callbacks[event] = callback;
},
onMarkerClick: function(event){
2022-12-14 01:02:15 +01:00
self = window.Soundmap;
2016-11-29 01:04:30 +01:00
var id = event.target.feature.properties.id;
2016-11-29 04:26:53 +01:00
self.ajaxMarker = event.target;
if(self.infos[id]){
if (!_.isUndefined(self.callbacks.marker_click)){
self.callbacks.marker_click.apply(self, [self.infos[id], self.ajaxMarker]);
2016-11-29 01:04:30 +01:00
return;
}
}else{
options = {
type: 'POST',
2016-11-29 04:26:53 +01:00
url: self.ajaxurl,
context: self,
2016-11-29 01:04:30 +01:00
data: {
action: 'soundmap-get-content',
id: id
}
};
// Use with PHP's wp_send_json_success() and wp_send_json_error()
2016-11-29 04:26:53 +01:00
$.ajax( options ).done(self.ajaxMarkerClick).fail(self.ajaxFail);
2016-11-29 01:04:30 +01:00
}
},
ajaxMarkerClick: function (response){
this.infos[response.data.id] = response.data;
if (!_.isUndefined(this.callbacks.marker_click)){
this.callbacks.marker_click.apply(this, [response.data, this.ajaxMarker]);
return;
}
//No tenemos ningún callback, por lo que abrimos la ventana. En este caso sólo lo haremos con el player y el título.
this.ajaxMarker.addEventListener('popupopen', this.addPlayer, this);
this.ajaxMarker.bindPopup(response.data.html).openPopup();
},
addPlayer: function(response){
$('audio.soundmap-audio-player').mediaelementplayer();
},
ajaxDone: function(response){
var self = this;
this.markers = L.geoJson(response.data,{
onEachFeature: function(feature, layer){
layer.on('click', self.onMarkerClick);
}
}).addTo(this.map);
2022-12-14 01:02:15 +01:00
this.map.fitBounds(this.markers.getBounds());
2016-11-29 01:04:30 +01:00
},
ajaxFail: function(){
console.log(this);
}
});
$(document).ready(function(){
2016-11-29 04:26:53 +01:00
//soundmap.initMap();
2022-12-14 01:02:15 +01:00
if ($('#map_canvas').length) {
soundmap.init('map_canvas','');
}
2016-11-29 01:04:30 +01:00
});
2016-11-29 04:26:53 +01:00
}(jQuery));