How can I detect whether a map is loading properly or not?
What happened was that in my ionic app the map url stopped to work, and the map did not throw an error. It only displayed gray.
Is there a way to check for this event properly and fall back to an alternative map?
A usual but simplistic workaround is to specify a single fallback tile, using the errorTileUrl option of your tileLayer. Typically it shows a light red cross to let the user know the map server does not have any image to provide for that area and that zoom.
Now if you want to be smarter and fallback to a different map (i.e. redirect to a different URL), I am not aware of any out-of-the box solution, but it is very well do-able. The idea is to override the _tileOnError method of the L.TileLayer class, which normally replaces the tile by the one from errorTileUrl when it receives a 404 error (i.e. no tile available on the server). In the given link, it automatically replaces the URL by a new one for a different location (could be a different server), as it expects only a few tiles to be missing.
Now if you assume the whole server would stop responding and you want to switch over to a different tileLayer (so that it stops pinging the faulty server), you could implement for example a simple counter that is incremented by the _tileOnError method, and once a given threshold is reached, switch the layers.
I may be late in answering to this but, here are the layer events which you can make use of. This event is triggered on the layer and not on the map. In this case, if the bingLayer fails to load, tileerror will get triggered.
this.bingLayer.on("tileerror", function (error, tile) {
//do something when the tile fails to load
});
this.bingLayer.on("tileload", function(e){
//do something when the tile loads successfully
})
Experienced same of recent. Found the reason here Tile Usage Policy.
OpenStreetMap data is free for everyone to use. Our tile servers are not.
Below are the minimum requirements that users of tile.openstreetmap.org must >adhere to. These may change in future, depending on available resources. >Should any users or patterns of usage nevertheless cause problems to the >service, access may still be blocked without prior notice. We will try to >contact relevant parties if possible, but cannot guarantee this.
But because OpenStreetMap data is free, many other organisations provide map >tiles made from OSM data. If your project doesn’t meet these requirements, >you can get OSM-derived map tiles elsewhere.
Requirements
Heavy use (e.g. distributing an app that uses tiles from >openstreetmap.org) is forbidden without prior permission from the System >Administrators. See below for alternatives.
Clearly display license attribution.
Do not actively or passively encourage copyright infringement.
Calls to /cgi-bin/export may only be triggered by direct end-user action. >(For example: “click here to export”.) The export call is an expensive >(CPU+RAM) function to run and will frequently reject when server is under >high load.
Highly Recommended: Do not hardcode any URL at tile.openstreetmap.org >into an app.
Recommended: add a link to https://www.openstreetmap.org/fixthemap to >allow your users to report and fix problems in our data.
Use other tile layers that uses osm to render map. Had to use this for map images to show on mobile
{tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
zoomControl: false,
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true
},
scrollWheelZoom: false,
attributionControl: false
}
In a nutshell osm blocked the map tiles.
Related
I am currently using VIP architecture and I was wondering when I should make an API call.
For example, I have two views. A connection view leading to a list view.
The list needs the user to connect to load.
My question is, where should I make my API call to fetch data for the second view ?
Should I make the request as soon as the connection succeeds, and then launch the 2nd view once I get the data of this request.
Or
Should I launch the 2nd view first and then make the request for this view ?
The first solution seems slightly faster, but the second one feels cleaner.
What do you think ?
First of all, VIP/MVC/MVVM architecture has nothing to do with your issue, none of there architectures has rules about when you need to make API calls.
Everything depends on your needs and tech requirements.
As for me there is two most important points:
if your second screen is data sensitive and you need to be sure, that it display latest data - make API call after this screen was displayed and update it UI with latest data.
if you don't care if data that you display is latest/ or you this data would not be updated very often/ or you show static data that would be rarely changed, BUT for you is important that user will see next screen immediately - make API call as soon as it possible(preferably on app launch)
If both previous points is not important for you - make API call after screen will be displayed. It will guaranty that you has latest data.
But you need to remember that there is no rule about it, so make API calls when you really need it.
I would like my app (a static web site) to run offline using a Service Worker. I can't see a way to do this without caching all the images from the srcset attribute. I can see how client hints would solve the problem but that apart is there a solution that would work without involving the server doing anything but serve requested files?
I can see perhaps how a Service Worker could calculate the image to request given the information in the img tag and a naming convention for images...
Has anyone tackled this problem, or thought about it at all?
For full srcset functionality you would have to cache all resolutions indeed.
While the screen density may seem to be a fixed property of a device, it actually is dynamic, e.g. a smartphone can cast/airplay to a TV screen. On desktops with multiple displays (e.g. Retina MacBook with an external display) screen resolution may change when the browser window is moved around. All these changes may happen offline long after you've done caching, so you can't know for sure which resolutions will be picked.
A simple solution is to always use 2x images for everything. Higher DPI makes image distortions less noticeable, so you can compress them more heavily to offset the cost of higher resolution.
Another solution is to catch loading errors on images and replace srcset with image URL that you know is cached. BTW: you may need to add onerror="…" in the markup, because the error may fire before any other scripts had chance to run on the page yet, or before adding error handlers programmatically check all image elements for img.complete && !img.naturalWidth to detect missed error events.
We're using the Bing Maps AJAX API (v7) to work with maps on our site. The map part itself works, but there are times when the connection to the service is slow. I have some code that needs to run only when the map has completely finished loading. Is there any event or param available in the maps API (I have looked, but can't find anything easily) that will tell me when a map object has completely finished loading?
What do you mean by "when the map has completely finished loading"?
If you don't have any other elements on the map, then use the tiledownloadcomplete event.
If you need to restore the map back to a certain state(with a zoom, location etc), use the viewchangeend event.
I don't think there is an event you can use which signifies that the map has completely loaded in the traditional sense. You can probably approximate this behavior by always causing the map's view to change upon initializing, but eventually arrive at your desired state, so you can subscribe to viewchangeend and execute your code in there.
I have an Ext.List in my Sencha app that I would like to render as quickly as possible, then update asynchronously-- in this case, the list contains addresses, and I'd like to reserve some space at the right on each list item for the distance from the user, to be calculated using sencha's location services.
The location calcs could take a few seconds for each address, so I'd like to do that in an asynchronous manner, then update each list entry as the information becomes available. Does anyone have suggestions on how I might go about this? Thanks much.
I don't work with Sencha Touch, but one possible solution that I can think of is to use the afterrender event of Ext.List and trigger ajax requests. So, each request will be asynchronous and will update the distance independently.
But the issue with this is you might have more number of requests to the servers.
I've decided to integrate OpenFeint into my new game to have achievements and leaderboards.
The game is dynamic and I would like user to be rewarded immediately for some successful results, but as it seems for me, OpenFeint's achievements are a bit sluggish and it shows visual notification only when it receives confirmation from the server.
Is it possible to change something in settings or hack it a little bit to show notification immediately as soon as it checks only local database if the achievement has not been unlocked it?
Not sure if this relates to the Android version of the SDK (which seems even slower), but we couldn't figure out how to make it faster. It was so unacceptably slow that we started developing our own framework that fixes most of open feint's shortcomings and then some. Check out Swarm, it might fit your needs better.
There are several things you can do to more tightly control the timing of these notifications. I'll explain one approach and you can use this as a starting point to explore further on your own. These suggestions apply specifically to iOS apps. One caveat is that these suggestions refer to internal APIs in OFSDK 2.8 for iOS and not ordinarily recommended for high level use and subject to change in future versions.
The first thing I recommend is that you build the sample app with your own product key. Use the standard sample app to experiment before applying the result to your own code.
You are going to get the snappiest response by separating the notification pop-up UI from the process of submitting the achievement. This way you don't have to worry about getting wrapped up in the logic for deciding whether the submission is going just to the local db or is doing the full confirmation on an async network transaction.
See the declaration of "showAchievementNotice" in "OFNotification.h". Performing a search in the sample app, you will see that this is the internal API used for displaying the achievement pop-up when an achievement is earned. It does not actually submit the achievement. You can call this method directly as it is called from "OFAchievementService.mm" to directly control when the message appears. You can then use the following article to disable the pop-up from being called when the actual submission occurs:
http://support.openfeint.com/dev/notification-pop-ups-in-ios/
This gives you complete freedom to call the submission at a later time provided you keep track of the need to do so. For example, you could locally serialize a flag to take care of the actual submission either after the level is done or the next time the app starts up. Don't forget that the user could quit out of a game without cleanly finishing a level.