118 lines
3.9 KiB
JavaScript
118 lines
3.9 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){
|
|
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
|
|
}, {}
|
|
)
|
|
);
|
|
|
|
options = {
|
|
type: 'POST',
|
|
url: this.ajaxurl,
|
|
context: this,
|
|
data: {
|
|
action: 'soundmap-get-markers',
|
|
query: query
|
|
}
|
|
};
|
|
|
|
// 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){
|
|
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){
|
|
var self = this;
|
|
this.markers = L.geoJson(response.data,{
|
|
onEachFeature: function(feature, layer){
|
|
layer.on('click', self.onMarkerClick);
|
|
}
|
|
}).addTo(this.map);
|
|
if (this.markers.getBounds()) this.map.fitBounds(this.markers.getBounds());
|
|
|
|
},
|
|
ajaxFail: function(){
|
|
console.log(this);
|
|
}
|
|
|
|
});
|
|
|
|
$(document).ready(function(){
|
|
//soundmap.initMap();
|
|
if ($('#map_canvas').length) {
|
|
soundmap.init('map_canvas','');
|
|
}
|
|
});
|
|
|
|
|
|
}(jQuery));
|