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.
Related
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.
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. :)
I'm using Google Maps Javascript API V3.
Everything works fine on chrome.
http://imgur.com/pOn42pR
But we get a fish-eye effect on Firefox.
http://imgur.com/lOi3vY7
It looks like they're using a totally different projection on each browser.
But the weird thing is that it works fine again on Firefox when I'm not using the API but the Google Maps directly.
Could someone deal with this problem?
Thanks! #try-catch-finally
The images are from the gogole maps api. A screenshot of two different browsers. The one of chrome is using sphere 3D effect, but the firefox one looks like a big flat image.
Okay, I think I just find a way to force the API to use the same way on both Chrome and Firefox.
And as #MrUpsidown said, I left my answer there.
But there's some problems need to be solved.
Hope you guys could move to that question and find a way out together.
I'll make this one to be closed someday.
Thanks!
I have used this tutorial: Save Google charts as a image which converts Google Graphs into an image and then saves it for me.
It's working perfectly and it achieves this by creating a canvas element and then drawing the graph onto it.
However and typical with IE its doesnt work with any browser lower than 9. Which is a huge problem as most of our clients are still in the dark ages. sadly.
Can anyone recommend a good solution to this or has any of you got any experience to share on this matter?
You can use ExCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
Reference
#wizkid's answer is a good suggestion in it self - however, the only problem is that exCanvas do not support toDataURL() and won't due to the nature of it using VML. This means you won't be able to use it to save out images.
Update
You can use flash to solve this problem. There are two solutions available:
http://code.google.com/p/fxcanvas/
http://flashcanvas.net/
Both of these should be able to save out bitmap images from the "canvas" as png and jpeg (ref: fxcanvas, flashcanvas). This would of course require the client to have Flash player installed.
The third option is to use a server as a proxy (or as processor) for Google charts.
I've created a map page using OpenLayers. The user can select a specific thematic overlay (noise levels) by period, noise source and year.
I wanted to allow the user to choose a base (or background) layer: one of two (public) OpenStreetMap layers, the Google base layers, or one of Yahoo! Maps’ layers.
I originally wanted to provide Bing maps (Virtual Earth) as well, but since those use a different projection, I can’t use them in combination with my overlays (custom-served tiles).
It all works fine in almost all browsers: Firefox, Chrome, Safari, and Opera (if you don’t click too much). But when using Internet Explorer (versions 7 and 8), selecting one of the Google Maps layers results in a blank background.
I’ve tested with Fiddler, and the tiles aren’t even retrieved.
I’m running into a wall here.
Has anybody run into this problem before (and preferably: solved it)? Or does someone have an idea what could be going wrong?
Edit: The site is located at http://software.dgmr.nl/geluidskaart/.
See #7 of this issue, it seems to fix the problem.
Not sure, if it is directly related to your issue though.
Try removing "blank.gif" from the dark theme image folder.
It also made it work in IE.
I have had an issue before with Google base layers when using an overview window, and a mix of Yahoo and Google layers.
Try removing the Yahoo layers to see if this is the issue (or the overview map).
I believe there could be a clash of variable names with this combination of JavaScript libraries.
There is an error reported in IE in the ymapapi file:
this.MP is null or not an object
Edit: There is a problem with your CSS. The Google layer / images are loading without problems, but you have a "background: url(http://js.mapbox.com/theme/dark/blank.gif);" attribute on your Google layer. I removed this and the Google maps were displayed without problems.
This appears in your OpenLayers.Layer.Google_95_EventPane DIV.