sometimes, normally with a drop in connection but not always, not all tiles load with mapbox via leafletjs
Is there a way to handle this? I am trying to sort this out with
tile_layer.on("load",callbackToNativeForMapStartedSuccess());
tile_layer.on("tileload",callbackToNativeForMapFinishedLoadSuccess());
tile_layer.on("tileerror",function(error, tile) {
callbackToNativeForMapFinishedLoadError(error.message)});
where I use callbackToNativeForMapFinishedLoadError to reload. But this doesn't always get called when some tiles are not loaded.
The callback to native is simply because I am executing this from within a WKWebView on iOS but that should make no difference
I guess error.message is incorrect. Look at the following snippet from https://github.com/Leaflet/Leaflet/blob/v0.7.3/src/layer/tile/TileLayer.js#L581
layer.fire('tileerror', {
tile: this,
url: this.src
});
The first argument is the tile itself and the 2nd is the url of the tile.
Related
After changing one of the data sources for a Mapbox component, I get these styleimagemissing console warnings alerting that some icons for points of interest are not available. For my purposes it's OK that those icons aren't shown, so I'm wondering if there's a way to avoid getting these warnings from the frontend code, without changing the data sources. Perhaps ignoring points of interest or images/icons?
I've already tried writing some function that's triggered when an image is missing instead of the warning:
map.on('styleimagemissing', () => {
// do something
});
But this seems to happen after the warning has already been triggered.
As a workaround, you could simply load a transparent icon for every icon that is in the style (assuming you can determine such a list).
There seem to be no straightforward way of detecting a change in the zoom level when using MapBox in Flutter. Various references exist for implementations outside Flutter or on for native SDK's, but their counterparts for Flutter are not easy to find.
Kindly point me to documentation or a code example to detect a change in zoom level.
first set trackCameraPosition to true on your map, then in your styleloaded callback:
controller.addListener(() {
print(controller.cameraPosition.zoom);
});
you can user MapboxMapController to detect zoom.. first you have to create _onMapCreated function which updates the controller and then you can add listener to controller like
controller.addListener(() {
print(controller.cameraPosition.zoom);
});
I'd like to generate a link to a Mapbox map, centered on a particular latitude and longitude, that also contains a marker on that spot. This is trivial when generating a static map:
https://api.mapbox.com/v4/mapbox.streets/pin-m(<lat>,<lon>)/<lat>,<lon>,<zoom>/320x160.png?access_token=<access token>
with the pin-m() segment specifying the marker. When generating a link to a full, interactive (zoomable/pannable) map, however, specifying a marker doesn't seem to be an option. This URL goes to the map I want:
https://api.mapbox.com/v4/mapbox.streets/zoompan.html?access_token=<access token>#<zoom>/<lat>/<lon>
but there's no marker. I looked through all the documentation and couldn't find any reference to a way to do this. From the docs it looks like the only way to add a marker to the map is to host a page and generate the map via JS in a script. I can do this, but I'd much prefer to be able to just add a parameter to a URL instead of adding a whole new route/controller/view/associated specs for our Rails app for what seems to me to be a very minor addition.
Does anybody know of an undocumented way to do this? Or a documented way that I've just overlooked?
You aren't able to add a marker through a url parameter like the static API allows. You could add a marker by following this example for Mapbox JS or you could use the newer Mapbox GL JS to center the map around a marker like in this example.
I Hope this helps
I am working with leaflet api.I can draw rectangles and polygons.I have bound the popup with every rectangle and polygon.When i click on drawn shape, popup opens(leaflet functionality).Popup contains some html(image).
As i am working on a demo application, i am wiling to try the fancebox plugin.
Means, when i click on drawn shape, instead of popup, i want to open up that image using fancybox.
Can i do that using simple method like using another function instead of .bindpopup.
Working Script (image loaded using fance box when we click on popup)
e.layer.bindPopup("<a class='fancybox' rel='group' href=''><img /></a>");
I can understand there must be some other javascript function to do it.
If there is some way to do it please let me know, as i am new to leaflet didn't have enough mental power to understand it yet but i hope i will....
Thanks for your time :)
I would just do e.layer.on('click', function() { //do fancybox init, perhaps like $(body).append("<a class='fancybox' rel='group' href=''><img /></a>")})
Although it makes a lot more performance sense to bind that event on the L.FeatureGroup holding all the shapes instead of one by one.
I'm trying to show/hide some GeoJSON data on an overlay layer.
I've the data as an object, but not at some server.
If I use the overlay type 'geoJSON', I'm getting a Eror:
A base layer must have an url
How do I show/hide my data using the overlay show/hide?
The mixed-layers-overlays-geojson-example is not working for me because it uses remote (xyz-json) data.
Additional information: I've the data in some object that I'm intending to modify/update based on user interaction.
PS: it's probably very simple problem
Edit: I made a plunker of the situation. It shows the dynamic adding and removing of a path object and some empty functions for the geoJSON objects.
I (my collegue) found some ugly answer: accessing the leaflet layers directly.
I forked the plunker from the description and added some functions. See my functions transformGeoObjToPath and geoToLeafletLayer. In our application we use layers of type 'featureGroup' for additional stuff like selecting, but this is not in the 'solution' example
But the solution is not 'beautiful', because it accesses the leaflet directly.