I'm using this.mapa.map.centerAndZoom(center, zoom); with 2 different zooms, 4 and 5.

        ]).then(([Point]) => {
            switch (evt.target.value) {
                case 'country_cl':
                    center = new Point([-70.71582015815409, -33.47133434146025]);
                    zoom = 4;
                case 'country_co':
                    center = new Point([-73.63857136146157, 4.0920688808058]);
                    zoom = 5;
                case 'country_mx':
                    center = new Point([-99.94867549215655, 20.55088183550196]);
                    zoom = 5;
            this.mapa.map.centerAndZoom(center, zoom);

Chile has zoom 4, Colombia and Mexico has 5.

When I pan from Chile to Colombia or Mexico, the map gets blank, and it get loaded after the pan:

enter image description here

How can I load the map, with the new zoom (4 when comming from 5, and viceversa) before the centerAndZoom?


Edit :

first you zoom to the desired level, setZoom() is a deferred so when the function is done, you move the map to the location with centerAt()

var map = this.mapa.map;

switch (evt.target.value) {

Here is the jsfiddle updated

  • I don't see any change on the behaviour (by commenting my line and uncommenting your block code), mayme it's a local issue in my browser – pmiranda Jun 17 '19 at 17:59
  • Can you post more of your code ? – LMokrane Jun 17 '19 at 19:18
  • By the way, I was talking about the fiddle. Yes I can, but it's an Angular app, with different files, I don't have that code right now, I'll do ASAP. – pmiranda Jun 17 '19 at 19:57
  • I've edited my answer. It first zooms to the desired level, then it pan to the location. – LMokrane Jun 18 '19 at 13:58
  • Much better. Actually I tried to to something like this without success. Thanks. – pmiranda Jun 18 '19 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.