diff --git a/js/soundmap.add.js b/js/soundmap.add.js
index 31fee11..9fc994b 100644
--- a/js/soundmap.add.js
+++ b/js/soundmap.add.js
@@ -21,22 +21,15 @@
initMap: function(){
- //this.layers.push(new L.Google());
- //this.layers.push(new L.Google('TERRAIN'));
- //this.map.addLayer(this.layers[0]);
- /* L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w}', {
- attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
- 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]});
+ 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('map_canvas',{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
}, {}
@@ -44,14 +37,15 @@
);
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())];
this.marker = L.marker(_latlng,{draggable: true}).addTo(this.map);
this.map.panTo(_latlng);
this.marker.addEventListener('dragend', this.markerDrag, this);
}
- //_.bindAll(this);
+
//init elements
this.file_frame = wp.media({
multiple: false,
@@ -59,11 +53,9 @@
type: 'audio'
}
});
- console.log(this.file_frame)
- console.log('iniciando file_frame')
this.initEvents();
-;
+
},
@@ -72,6 +64,7 @@
$('#add_files').bind('click', this.openMediaManager);
wp.media.frames.file_frame.on('select',this.mediaSelected, this);
$('.delete-att-item').live('click', this.removeMedia);
+ setTimeout(() => { this.map.invalidateSize(); }, 0);
},
removeMedia: function(event){
@@ -120,10 +113,9 @@
});
-
-
-
+
$(document).ready(function(){
+ console.log($('#map_canvas').width());
soundmap.initMap();
});
diff --git a/js/soundmap.config.js b/js/soundmap.config.js
index 9568966..2086f62 100644
--- a/js/soundmap.config.js
+++ b/js/soundmap.config.js
@@ -8,26 +8,10 @@
layers:{},
initMap: function(){
- /*
- this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom});
- 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.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'});
+
+ 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'});
this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [grayscale,streets]});
this.map.addControl(
new L.Control.Layers(
@@ -43,7 +27,6 @@
this.map.addEventListener('zoomend', this.mapZoom, this);
this.map.addEventListener('baselayerchange', this.layerChange, this);
- _.bindAll(this);
this.initEvents();
},
@@ -61,7 +44,7 @@
$('#soundmap_op_origin_zoom').val(this.map.getZoom());
},
initEvents: function(){
-
+ setTimeout( () => { this.map.invalidateSize(); }, 0);
}