To make things easier, here is a JSFiddle of what I have.
TRY
In FireFox (version 35.0.1) pan the map. Click and hold anywhere on the map, and move it about quickly left and right. Panning movement should be quick and smooth.
Now try the same in Chrome and you'll see that it is not as smooth! It is a bit jerky/laggy. I find it laggy in the latest version of IE and Opera too.
By the way, if you comment out this style block, then behaviour all of a sudden smooths out and stops being laggy! You won't get a nice map of course.
#map path {
fill: #C9DCC9;
stroke: #066860;
}
SO WHAT?
First of all I would appreciate it if someone can confirm this behaviour on their PCs. I am on Windows 8.1 with all latest updates.
And then, why isn't this behaviour happening on other maps done with D3? This one for example behaves smoothly! Is it to do with the complexity of the polygons?
To fix this, I simplifed the paths of the map. I used the -simplification function on TopoJson.
After the simplification of the paths, the map panning and zooming was super smooth in Chrome, Firefox, Opera and IE 11.
TopoJson is a node package, so you would need to install node and a lot of other dependencies for TopoJson to get it working on windows. If you're lucky it'll work for you on Windows.
I was unlucky so I went and created a Virtual Machine running Ubuntu and in there, the node setup was soo much easier, I managed to do what I wanted in 5 minutes. Compared to days attempting to get this working on Windows.
Anyways, hope this helps. :)
Related
I am trying to build a map-based web app using mapbox and leaflet.js.
I am loading around 300 markers into a featureLayer from a geoJSON file. This seems to work beautifully in every browser except internet explorer, which freezes for a good 10 seconds or so every time markers are loaded or filtered using featureLayer.setFilter. I have uploaded a demo of this here.
Locking at the IE performance analysis the culprit seems to be the 'addDoubleTapListener'. This seems to be a known issue (https://github.com/Leaflet/Leaflet/issues/4357), and the solutions suggest rolling back to leaflet 0.7.5, or using the 0.7.7.1 branch (which has a fix that reverts touch detection). I have tried both, and neither seem to have any effect on the issue. Upgrading to the leaflet 1.0.0-beta is also suggested, but this doesn't seem to be compatible with the current mapbox...
Any help with overcoming this issue would be much appreciated.
Ok the solution I found was to remove the following lines from leaflet-src.js 0.7.7.1:
if (L.Browser.touch && (type === 'dblclick') && this.addDoubleTapListener) {
this.addDoubleTapListener(obj, handler, id);
}
IE now loads the markers lightning fast and all of the functions appear to still be working in all the devices I tried. Not an ideal solution, but will serve as a stop-gap solution until Mapbox supports Leaflet 1.0.0.
While using mapbox maps, When we move the map, zoom-in and zoom-out to locations, after a certain point of time, the new images of map stop loading.
When i checked on console, the new tiles server requests stay in pending state.
This also happens with the map in the sample map at https://www.mapbox.com/mapbox.js/example/v1.0.0/
Just keep using it for a while and make rapid zoom-in and zoom-outs in the map.
Note that this is not an internet bandwidth issue, and i am also using the paid version of mapbox.
My configuration is:
Browser: Chrome Version 45.0.2454.85 m
OS: Windows 8 Pro
Mapbox version: 2.2.2
I could not reproduce this, however I had a similar issues with the tiles not loading. It turned out to be due to a div I had covering part of the map area. It seems like mapbox can detect if there is an object over the map area and will not load the tiles.
Just an idea, hope it helps.
Just diagnosed this in our office. Updating Chrome to the most recent version (48) OR disabling Tampermonkey solved the problem. As per https://github.com/Leaflet/Leaflet/issues/3198, other extensions may also trigger the same Chrome bug.
I implemented LeafletJS 0.8 in my application. This because of the many bugfixes I needed. However It seems that zooming is not working as expected in IE11
The leaflet is zooming out of its bounds, only in IE11
For a demo see here: http://robballou.com/j/leaflet.php?leaflet=8
Does anyone has an idea what could be happening here?
You do not have to provide valid code, just a point in the right direction would already be very helpful.
Edit: I just tested this on a Windows 7 machine and there are no problems there. It just happens on Windows 8 apparently
Unfortunately, this looks like an IE bug introduced when we added additional hardware accelerated composition in IE for Windows 8 and above. Sorry about that! I've filed a bug for us to investigate: https://connect.microsoft.com/IE/feedbackdetail/view/1085713/transformed-elements-appear-outside-map-extents-in-leafletjs-win8-only
If during our investigation we find an easy workaround for you, I'll come back and post it here.
http://jsfiddle.net/MP4Yg/5/embedded/result/
Heres a plugin I've been working on to create Hub-Spoke diagrams. I've avoided asking any questions pertaining to this so far (gonna go ahead and pat myself on the back for that one) but, I've now hit a roadblock...
My functions are working great but for some reason only in chrome (and partially in opera). I'm using <canvas> to draw lines between circles, none of which render outside of chrome. I want this to work in at least IE 8+, and it should work in updated FF and Safari, etc.
I'm also self taught on all of this so any suggestions and feedback on my code would be appreciated, although I'm not sure this is the place for that.
I coded some d3.j code that is svg visualization library and in my Mint installation firefox is really bad for rendering it. Is it about my installation or is it the general case?
Here is a example link for d3.js example
Almost 2 years later, and the animation in FF is still a problem with FF29. It's a shame.
I had the same problem. Transitions are very slow in FF 15 compared to Chrome and Safari. But you should try FF beta or Aurora. They come with significant performance improvements for SVG transitions and d3.js. My transitions are now running smoothly.