I am running into an issue with adding A LOT of markers to the leaflet map. After a few thousand markers are added, they don't even show up anymore. Where can I find known limitations for leaflet?
The question Maximum number of SVG elements for the browser in a map has some good answers. Basically, the number of markers you can display depends on the user's computer and browser and, if the data is coming from a server, the server's processing power. I'm not sure if there is a place that documents known limitations.
Usually if you have over 1000 points to show, you simplify things by using a plugin called Marker Clusterer which groups the elements. Or you can use Heatcanvas or Heatmap.
Or if you really need to show all the points, one of the answers to the above question mentions pre-processing things and generating your own tiles. Then you serve those as an overlay on the Leaflet map.
Related
I am using leafletjs on a custom map (a game world map). It's an 10240px image and I got it properly setup, but I am noticing a bit of laggy behavior when zooming and navigating. My tiles are properly cut by an automated Photoshop script, and the tile file sizes are also optimized.
Currently my tilesize is the default in leafletjs (256px). But I am wondering if using 64px tiles, would make the performance better or worse? When should 64px tiles be used, and when 256px or 512px tiles should be used?
I couldn't find an particular answer which would satisfy my curiosity on this topic. And I hope someone could clear this up a bit for me. Blessings!
Welcome to SO!
That is a performance optimisation topic that has no fit-for-all answer unfortunately. It is similar to the question of bundling assets (CSS, JS) or even inlining them in the HTML web page.
The base idea is to decrease the time it takes to display meaningful information to the visitor (some refer to as "first paint", although in case of interactive mapping, as you realised this also includes when navigating).
Smaller (but more) files helps avoid loading unnecessary data. For mapping, smaller tiles means less extra data (part of tiles outside viewport), and also in case of Leaflet, faster display of whole tiles (since Leaflet does not display partial tiles, but waits for a tile to be fully loaded to display it).
Bigger (and lesser) files help decrease the number of network requests (usually browsers limit simultaneous requests to 2 per domain by default) and the associated overhead (both in terms of data and time).
When it comes to only map tiles, a rough and simple rule could be: the more detailed and heavy your tiles, the smaller they should be. But as always, experimenting different settings is still necessary.
As for the number of simultaneous requests limit, the "easy" trick, if you can implement it server-side, is to use multiple sub-domains (which can still point to you exact same server files).
For my non-commercial, low-traffic web site, I successfully use Leaflet with standard raster tile layers from well-known sources.
I'd like to add additional layers containing very localized high-resolution maps. I've succeeded in making a usable raster tile-set from such a map, hosting the tiles on my own server, and adding that as an additional layer. But this creates a huge file count. My cheap shared-hosting account promises unlimited storage but limits file (actually, inode) counts. If I add one more such tile-set, I risk getting thrown off my server.
Clearly I can look for a hosting account with higher limits, and I'm exploring Cloud alternatives, too. (Comments welcome!)
Any other ideas? Are there free or very low-cost alternatives for non-commercial ventures to use for low-traffic tile storage?
Or: As I look at the localized, high-resolution maps – I see I could fairly easily trace them to create vector artwork without much loss of data -- and some gains in clarity. I use Adobe Illustrator. Is there a reasonably painless way to get from an .ai file (or some similar vector format) to a Leaflet layer? With a substantially lower file count compared to the raster alternative?
Apologies if I've misused terminology --please correct me-- or if I've cluelessly missed some incredibly obvious way of solving this problem.
TIA
This sounds like a good use case for Leaflet.TileLayer.MBTiles plugin: (demo)
A LeafletJS plugin to load tilesets in .mbtiles format.
The idea is to write your Tiles into a single .mbtiles file (actually an SQLite database), so that you just need to host that single file on your server, instead of your thousands of individual tiles.
The drawback is that visitors now need to download the entire file before the map can actually display your tiles. But then navigation is extremely smooth, since tiles no longer need to be fetched from the network, but are all locally available to the browser.
As for generating the .mbtiles file, there are many implementations that can do the job.
For my Windows Phone Mango app, I want to make overlay a heatmap on Bing Maps, and a tile overlay seems the best way to do it. I've been having trouble finding any good documentation or code samples to work from. It seems like most people are pointing the tile source to a web service. I'd rather render the heatmap on the phone itself - is that possible?
One of the main reasons to use tilelayers to represent data on a map is that the computation and rendering involved in creating the layer is performed in advance, generally as a one-off or infrequent task. Then, at runtime, the only work the client needs to do is to retrieve the pre-rendered tile images from the server and display them straight on the map, which is a simple, low-resource activity.
Rendering tiles can be a resource-intensive task, both in terms of processing and memory usage - for example, I can only render about 3 tiles per second on a quadcore desktop machine with 8Gb RAM. Even if it's technically possible to create the tiles dynamically on a handheld device, the performance is almost certainly going to be unacceptable for any user. You've also got the question of how you're going to store the data from which the layer is created. Since you're talking about plotting a heatmap, I'm guessing you have a reasonably large dataset of points - did you envisage these stored locally on the device, or retrieved over the network? (either will create different problems).
Basically, while it may be theoretically possible to create tile layers dynamically on the client, doing so would negate almost any benefit of using tilelayers in the first place, which is why you probably won't find any code samples explaining how to do so. Perhaps you could explain your comment why you'd rather create the heatmap on the phone?
It's pretty easy to create a server-side tile renderer using .NET or PHP that renders and server tile images to a Bing Maps client, or you can use an existing map rendering library such as mapnik.org or geoserver.org.
I have designed and developed couple of navigation apps using google API and osmdroid API for android powered devices. Now I am looking to create an Indoor navigation system using osmdroid API. But, in order to do so I need to create tiles similar to regular map tiles from an simple PNG file with naming convention similar to OpenStreetMap.
Please suggest me how to do this?
Cheers,
Susheel
You could design your indoor map using JOSM. Save it to a .osm file. Don't upload the data to OpenStreetMap unless it is a appropriate to do so (OpenStreetMap has some basic some indoor features, e.g. a highway=footway running through a shopping mall, but generally a lot of very detailed indoor stuff will be inappropriate for OSM) But...
With a .osm file you could then use one of the OpenStreetMap rendering tools to create a raster map, and chop it into tiles. For quick satisfaction I'd recommend Maperative, although I'm not sure how easy the last tile chopping step is. I've never done this with Maperative. Mapnik has a nice generate_tiles.py output, which will give you the tileset you want, but it's a bit tricky to set up in the first place.
Actually the last step is the main thing you're asking about. You can chop up any image into tiles. It may or may not be important to you that the tiles are geo-positioned in some meaningful way. For an old project I did a quick fudge solution using google tile cutter script, which is actually a wrapper around GDAL tools.
Have a look at the gdal library, and in particular gdal2tiles. This is a library designed to create maps from raster images, and serves exactly your purpose.
You can decide on a projection and what the bounds of your source image(s) are. The library allows you to reproject your image to the correct coordinate space.
It can also generate tiles at various zoom levels using gdal2tiles, either with or without reprojection.
Now you can check indoor rendering by drag and dropping OSM geojson data into https://app.openindoor.io web page.
I'm currently trying to decide wether to accept a client's proposal or not. Basically, I'm asked to create a MapView that displays markers at several locations on a map, with the additional requirement that the client's own map tiles are used instead of Google Maps'.
I do not know yet how the client stores their own map tiles, but I was assured that I'd be able to convert them into any format I'd need.
Is it possible to use different map tiles in MapKit's MapView?
Do you have good online literature about this? Links please?
If this is possible, I'd propably have to create a server that sends the files to the device.
How hard is it to create such a server? Is it just "setup apache, done." or is there more to it?
How hard, or time-consuming would both these things be, in relation to just setting up a normal MapView?
Thanks for your answers.
You can't use custom tiles with MapKit. You're limited to using the ones provided by Google.
It could be easier to create a "Google Maps-ish" web app that uses the custom titles and can be viewed on the iPhone through UIWebView?
Have you looked at alternate map frameworks on the iPhone? I know there is at least one open source map engine, also with tiles (that are not as good as the Google tiles, but hey).
A decent set of them is here:
Creating an IPhone Map application
The "easiest" way to do this within the Google Map framework is simply to map the client's map as a texture on top of the "ground." You can create textures at different resolutions, for different zoom factors. Then you won't need to do any special coding at all --- everything will just work.
The way you do this is with a KML region that maps to ground level.
See: http://earth.google.com/outreach/tutorial_region.html