audiolab/soundmap
1
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Compare commits

base: audiolab:1fbb3486cf662ea028ad81a597a944d2ed39fa02
Branches Tags
audiolab:master
..
compare: audiolab:5bbfeca36e253f7085a82539c14258d6da9348f6
Branches Tags
audiolab:master

No commits in common. "1fbb3486cf662ea028ad81a597a944d2ed39fa02" and "5bbfeca36e253f7085a82539c14258d6da9348f6" have entirely different histories.
1fbb3486cf ... 5bbfeca36e

5 changed files with 58 additions and 36 deletions
Show Stats Expand all files Collapse all files

10
README.md
View File

@ -1,10 +0,0 @@
# Wordpress Plugin - Soundmap
Es una versión revisada del viejo plugin de Soinumapa desarrollado por Xavier Balderas.
## Configuración
* Descarga el plugin en la carpeta **wp-content/plugins**
* Activa el plugin en la sección **Plugins** de tu instancia de Wordpress
* Configura el area del mapa visualizada en **Ajustes > SoundMap**
* Crear los puntos necesarios en la sección **Markers**

3
css/soundmap.add.css
View File

@ -1,7 +1,6 @@
#map_canvas { #map_canvas {
min-height: 400px; height: 400px;
width: 100%; width: 100%;
background:#ccc;
} }
#soundmap-attachments-list { #soundmap-attachments-list {
margin-top: 10px; margin-top: 10px;

32
js/soundmap.add.js
View File

@ -21,15 +21,22 @@
initMap: function(){ initMap: function(){
mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w'; //this.layers.push(new L.Google());
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10'}), //this.layers.push(new L.Google('TERRAIN'));
streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11'}), //this.map.addLayer(this.layers[0]);
osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); /* L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w}', {
this.map = L.map('map_canvas',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [osm,grayscale,streets]}); attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token'
}).addTo(this.map);*/
mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light'}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox.streets'});
this.map = L.map('map_canvas',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]});
this.map.addControl( this.map.addControl(
new L.Control.Layers( new L.Control.Layers(
{ {
'OSM': osm,
'Grayscale':grayscale, 'Grayscale':grayscale,
'Streets': streets 'Streets': streets
}, {} }, {}
@ -37,15 +44,14 @@
); );
this.map.addEventListener('click', this.mapClick, this); this.map.addEventListener('click', this.mapClick, this);
//this.map.invalidateSize();
if( $('#soundmap-marker-lat').val() ){ if( $('#soundmap-marker-lat').val() ){
var _latlng = [parseFloat($('#soundmap-marker-lat').val()), parseFloat($('#soundmap-marker-lng').val())]; var _latlng = [parseFloat($('#soundmap-marker-lat').val()), parseFloat($('#soundmap-marker-lng').val())];
this.marker = L.marker(_latlng,{draggable: true}).addTo(this.map); this.marker = L.marker(_latlng,{draggable: true}).addTo(this.map);
this.map.panTo(_latlng); this.map.panTo(_latlng);
this.marker.addEventListener('dragend', this.markerDrag, this); this.marker.addEventListener('dragend', this.markerDrag, this);
} }
//_.bindAll(this);
//init elements //init elements
this.file_frame = wp.media({ this.file_frame = wp.media({
multiple: false, multiple: false,
@ -53,9 +59,11 @@
type: 'audio' type: 'audio'
} }
}); });
console.log(this.file_frame)
console.log('iniciando file_frame')
this.initEvents(); this.initEvents();
;
}, },
@ -64,7 +72,6 @@
$('#add_files').bind('click', this.openMediaManager); $('#add_files').bind('click', this.openMediaManager);
wp.media.frames.file_frame.on('select',this.mediaSelected, this); wp.media.frames.file_frame.on('select',this.mediaSelected, this);
$('.delete-att-item').live('click', this.removeMedia); $('.delete-att-item').live('click', this.removeMedia);
setTimeout(() => { this.map.invalidateSize(); }, 0);
}, },
removeMedia: function(event){ removeMedia: function(event){
@ -114,8 +121,9 @@
}); });
$(document).ready(function(){ $(document).ready(function(){
console.log($('#map_canvas').width());
soundmap.initMap(); soundmap.initMap();
}); });

27
js/soundmap.config.js
View File

@ -8,10 +8,26 @@
layers:{}, layers:{},
initMap: function(){ initMap: function(){
/*
mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w'; this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom});
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10'}), this.layers.SATELLITE = new L.Google();
streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11'}); this.layers.TERRAIN = new L.Google('TERRAIN');
this.layers.HYBRID = new L.Google('HYBRID');
this.layers.ROADMAP = new L.Google('ROADMAP');
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
}, {}
)
);*/
mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light'}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox.streets'});
this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]}); this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]});
this.map.addControl( this.map.addControl(
new L.Control.Layers( new L.Control.Layers(
@ -27,6 +43,7 @@
this.map.addEventListener('zoomend', this.mapZoom, this); this.map.addEventListener('zoomend', this.mapZoom, this);
this.map.addEventListener('baselayerchange', this.layerChange, this); this.map.addEventListener('baselayerchange', this.layerChange, this);
_.bindAll(this);
this.initEvents(); this.initEvents();
}, },
@ -44,7 +61,7 @@
$('#soundmap_op_origin_zoom').val(this.map.getZoom()); $('#soundmap_op_origin_zoom').val(this.map.getZoom());
}, },
initEvents: function(){ initEvents: function(){
setTimeout( () => { this.map.invalidateSize(); }, 0);
} }

20
soundmap.php
View File

@ -135,8 +135,7 @@ if (!class_exists('Soundmap')){
echo '<label for="soundmap-marker-lat">' . __('Latitud', 'soundmap') . '</label>'; echo '<label for="soundmap-marker-lat">' . __('Latitud', 'soundmap') . '</label>';
echo '<input type="text" name="soundmap_marker_lat" id="soundmap-marker-lat" value = "' . $soundmap_lat . '">'; echo '<input type="text" name="soundmap_marker_lat" id="soundmap-marker-lat" value = "' . $soundmap_lat . '">';
echo '<label for="soundmap-marker-lng">' . __('Longitud', 'soundmap') . '</label>'; echo '<label for="soundmap-marker-lng">' . __('Longitud', 'soundmap') . '</label>';
echo '<input type="text" name="soundmap_marker_lng" id="soundmap-marker-lng" value = "'. $soundmap_lng . '">'; echo '<input type="text" name="soundmap_marker_lng" id="soundmap-marker-lng" value = "'. $soundmap_lng . '">';
echo '<script></script>';
} }
function load_options(){ function load_options(){
@ -168,8 +167,18 @@ if (!class_exists('Soundmap')){
}// admin_menu }// admin_menu
function enqueue_map_scripts(){ function enqueue_map_scripts(){
wp_enqueue_script('leafletjs','https://unpkg.com/leaflet@1.6.0/dist/leaflet.js',array(),'1.6.0',TRUE); // add Leaflet.js /* Register the basic scripts needed for presenting the maps.
wp_enqueue_style('leafletcss',"https://unpkg.com/leaflet@1.6.0/dist/leaflet.css",array(),'1.6.0','all'); // add CSS Leaflet - Google Maps
- LeafletJS
- Leaflet Google Plugin
- LeafletCSS
*/
//wp_enqueue_script( 'google-maps', 'http://maps.google.com/maps/api/js?v=3.7&amp;sensor=false' ); // Google Maps
//wp_enqueue_script('mapboxjs','https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js',array(),'2.2.4',TRUE); // add Leaflet.js
wp_enqueue_script('leafletjs','https://unpkg.com/leaflet@1.3.4/dist/leaflet.js',array(),'1.3.4',TRUE); // add Leaflet.js
//wp_enqueue_style('mapboxcss','https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.css',array(),'2.2.4','all'); // add CSS Leaflet
wp_enqueue_style('leafletcss',"https://unpkg.com/leaflet@1.3.4/dist/leaflet.css",array(),'1.3.4','all'); // add CSS Leaflet
//wp_enqueue_script('leaflet-plugin-google', plugins_url('js/leaflet/plugins/Google.js', __FILE__), array('leafletjs', 'google-maps'), '0.7.2', TRUE);
} }
function wp_enqueue_scripts(){ function wp_enqueue_scripts(){
@ -196,9 +205,8 @@ if (!class_exists('Soundmap')){
if (($hook == 'post-new.php' || $hook == 'post.php') && $current_screen->post_type == "marker"){ if (($hook == 'post-new.php' || $hook == 'post.php') && $current_screen->post_type == "marker"){
$this->enqueue_map_scripts(); $this->enqueue_map_scripts();
wp_enqueue_script('underscore');
wp_enqueue_style('soundmap-add-css', plugins_url('css/soundmap.add.css', __FILE__), array(), '0.1', 'all');
wp_enqueue_script('soundmap-add', plugins_url('js/soundmap.add.js', __FILE__), array(), '0.1', TRUE); wp_enqueue_script('soundmap-add', plugins_url('js/soundmap.add.js', __FILE__), array(), '0.1', TRUE);
wp_enqueue_style('soundmap-add-css', plugins_url('css/soundmap.add.css', __FILE__), array(), '0.1', 'all');
$params = array(); $params = array();
$params['origin'] = $this->config['origin']; $params['origin'] = $this->config['origin'];