soundmap/js/soundmap.front.js

(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));