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