Git Product home page Git Product logo

Comments (8)

samcfc avatar samcfc commented on June 10, 2024

I dont know if I got your point but the flickering is very disturbing.

What I can point out is that it is not happening on the demo below but on all the others
http://tombatossals.github.io/angular-leaflet-directive/examples/simple-example.html

I just set reset to false by myself on line 248.
I am quite sure that it will have side effects which I am not aware of so I keep it for myself for now.

from angular-leaflet-directive.

timhettler avatar timhettler commented on June 10, 2024

I've also set 'reset' to false on my local build; I haven't encountered any issues.

from angular-leaflet-directive.

grantlucas avatar grantlucas commented on June 10, 2024

👍

Good catch on the reset option being there. Off the top of my head, I can't think of too much that leaving reset at it's default false would affect. But then again I don't know all little details of the directive.

@tombatossals Is there a reason reset was set to true initially? Can we remove this default override?

From my understanding, Leaflet will attempt to animate to the new setView, which is a good thing as it's more fluid. If the new center is too far off screen, the view will reset anyways.

from angular-leaflet-directive.

tombatossals avatar tombatossals commented on June 10, 2024

You're totally right, I added the map reset parameter because one demo example code wasn't re-drawing correctly the map on a center or zoom change, but I have looked at every demo and everything seems to work now, maybe the update to the last version of leaflet has something to do with this.

I have removed this option on the trunk.

from angular-leaflet-directive.

grantlucas avatar grantlucas commented on June 10, 2024

Beautiful. No more flashing 😄

Thanks for the update.

from angular-leaflet-directive.

tombatossals avatar tombatossals commented on June 10, 2024

I have found a case where not using "reset: true" on the setView call implies a problem centering the map. Look at this example code, very simple:

http://tombatossals.github.io/angular-leaflet-directive/examples/center-example.html

Everything is correct on the example, but if the zoom specified is greater than 1 and less than 6 the map shows grey, and I don't know why. It seems something related to leaflet, but it's really curious.

Setting "reset: true" on the setview call solves this problem, but also adds new problems as you have reported here.

Will try to solve the issue.

from angular-leaflet-directive.

grantlucas avatar grantlucas commented on June 10, 2024

I've done some digging around and it seems that it has something to do with map.setView([0, 0], 1); right after the map creation. I'm not sure why any of this makes a difference, but I have a solution to your issue...

Change the initial map.setView to map.setView([0, 0], 10). Pretty much, set the zoom to any value that is > 6. What you set here doesn't make too much of a difference since it's overridden by the center value right away.

It's an odd thing for sure. Don't have a whole lot of time right this moment to delve further in but I wanted to update you with a solution in the mean time.

from angular-leaflet-directive.

tombatossals avatar tombatossals commented on June 10, 2024

Whoa, you're right, your trick works like a charm. I'm going to commit it to the master branch.

Thanks again!

from angular-leaflet-directive.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.