125 lines
4.2 KiB
JavaScript
125 lines
4.2 KiB
JavaScript
(function($){
|
|
|
|
var soundmap = window.Soundmap || {}
|
|
|
|
_.extend(soundmap, {
|
|
|
|
map: undefined,
|
|
layers:{},
|
|
markers: undefined,
|
|
infos:[],
|
|
ajaxMarker: undefined,
|
|
callbacks:{
|
|
marker_click: undefined
|
|
},
|
|
|
|
init: function (selector, query){
|
|
console.log(selector+'.... '+query);
|
|
//this.map = L.map(selector,{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, scrollWheelZoom: false});
|
|
L.mapbox.accessToken = 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
|
|
this.map = L.mapbox.map(selector,'lrullo.cih52v78z00v4krkrzge97rgg',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, scrollWheelZoom: false});
|
|
/*this.layers.SATELLITE = new L.Google();
|
|
this.layers.TERRAIN = new L.Google('TERRAIN');
|
|
this.layers.HYBRID = new L.Google('HYBRID');
|
|
this.layers.ROADMAP = new L.Google('ROADMAP');*/
|
|
//this.layers.MAPBOX
|
|
//this.map.addLayer(this.layers[this.mapType]);
|
|
/*this.map.addControl(
|
|
new L.Control.Layers(
|
|
{
|
|
'Google':this.layers.SATELLITE,
|
|
'Google Terrain': this.layers.TERRAIN,
|
|
'Google Hybrid': this.layers.HYBRID,
|
|
'Google Roadmap': this.layers.ROADMAP
|
|
}, {}
|
|
)
|
|
);*/
|
|
//_.bindAll(this);
|
|
|
|
options = {
|
|
type: 'POST',
|
|
url: this.ajaxurl,
|
|
context: this,
|
|
data: {
|
|
action: 'soundmap-get-markers',
|
|
query: query
|
|
}
|
|
};
|
|
|
|
console.log(options);
|
|
// Use with PHP's wp_send_json_success() and wp_send_json_error()
|
|
$.ajax( options ).done(this.ajaxDone).fail(this.ajaxFail);
|
|
console.log(this.infos);
|
|
},
|
|
|
|
addMapCallback: function (event, callback){
|
|
this.callbacks[event] = callback;
|
|
},
|
|
|
|
onMarkerClick: function(event){
|
|
self = window.Soundmap;
|
|
var id = event.target.feature.properties.id;
|
|
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]);
|
|
return;
|
|
}
|
|
|
|
}else{
|
|
options = {
|
|
type: 'POST',
|
|
url: self.ajaxurl,
|
|
context: self,
|
|
data: {
|
|
action: 'soundmap-get-content',
|
|
id: id
|
|
}
|
|
};
|
|
// Use with PHP's wp_send_json_success() and wp_send_json_error()
|
|
$.ajax( options ).done(self.ajaxMarkerClick).fail(self.ajaxFail);
|
|
}
|
|
|
|
},
|
|
|
|
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){
|
|
console.log('done'+response);
|
|
var self = this;
|
|
this.markers = L.geoJson(response.data,{
|
|
onEachFeature: function(feature, layer){
|
|
layer.on('click', self.onMarkerClick);
|
|
}
|
|
}).addTo(this.map);
|
|
},
|
|
ajaxFail: function(){
|
|
console.log(this);
|
|
}
|
|
|
|
});
|
|
|
|
$(document).ready(function(){
|
|
//soundmap.initMap();
|
|
soundmap.init('map-content','');
|
|
console.log('document.ready');
|
|
});
|
|
|
|
|
|
}(jQuery));
|