From 2c5c71c58747171eb74e1e2c27e3bf0aba795ac3 Mon Sep 17 00:00:00 2001 From: luca Date: Sat, 30 May 2020 16:21:35 +0200 Subject: [PATCH] clean && add Timeout for load correctly map on Add Marker Metabox --- js/soundmap.add.js | 34 +++++++++++++--------------------- js/soundmap.config.js | 27 +++++---------------------- 2 files changed, 18 insertions(+), 43 deletions(-) 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); }