clean && add Timeout for load correctly map on Add Marker Metabox
This commit is contained in:
parent
5bbfeca36e
commit
2c5c71c587
@ -21,22 +21,15 @@
|
|||||||
|
|
||||||
|
|
||||||
initMap: function(){
|
initMap: function(){
|
||||||
//this.layers.push(new L.Google());
|
mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
|
||||||
//this.layers.push(new L.Google('TERRAIN'));
|
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10'}),
|
||||||
//this.map.addLayer(this.layers[0]);
|
streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11'}),
|
||||||
/* L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w}', {
|
osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
|
||||||
attribution: 'Map data © <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>',
|
this.map = L.map('map_canvas',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom, layers: [osm,grayscale,streets]});
|
||||||
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
|
||||||
}, {}
|
}, {}
|
||||||
@ -44,6 +37,7 @@
|
|||||||
);
|
);
|
||||||
|
|
||||||
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())];
|
||||||
@ -51,7 +45,7 @@
|
|||||||
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,
|
||||||
@ -59,11 +53,9 @@
|
|||||||
type: 'audio'
|
type: 'audio'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log(this.file_frame)
|
|
||||||
console.log('iniciando file_frame')
|
|
||||||
|
|
||||||
this.initEvents();
|
this.initEvents();
|
||||||
;
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -72,6 +64,7 @@
|
|||||||
$('#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){
|
||||||
@ -121,9 +114,8 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
|
console.log($('#map_canvas').width());
|
||||||
soundmap.initMap();
|
soundmap.initMap();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -8,26 +8,10 @@
|
|||||||
layers:{},
|
layers:{},
|
||||||
|
|
||||||
initMap: function(){
|
initMap: function(){
|
||||||
/*
|
|
||||||
this.map = L.map('map_canvas_options',{center: [this.origin.lat, this.origin.lng], zoom: this.origin.zoom});
|
mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w';
|
||||||
this.layers.SATELLITE = new L.Google();
|
var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10'}),
|
||||||
this.layers.TERRAIN = new L.Google('TERRAIN');
|
streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11'});
|
||||||
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(
|
||||||
@ -43,7 +27,6 @@
|
|||||||
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();
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -61,7 +44,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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user