I'm using leaflet.js to track a ton of assets. How can I only render the assets (layers) that are in the visible area (bounds)?
After getting no help here, I begged for help on IRC. Leaflet does this automatically. Leaflet prunes vector layers, mostly. It also only renders vector features when the viewport changes, or when zoom levels change
Related
I'm new to threeBox and I'm developing a mapbox-gl-js map that has a 3D buildings (fill-extrusion) layer from tiles source. I want to add a symbol/icon layer with elevation from tile source useing threeBox (like icon over special buildings etc.).
From what I have seen so far threeBox layers in Mapbox can be added only GeoJson sources, is it possible to add to threeBox layer a tiles source as one adds to MapBox layers?
Thanks.
I guess ThreeBox doesn't support vector tiles.
You may be able to hack something to work by using map.querySourceFeatures() to access all the buildings in the loaded viewport as GeoJSON, then using that. There are lots of caveats that you will discover. :)
I am using Leaflet as my map component. When the map initially loads, I want to preload nearby tiles at the same zoom level. What is the best solution to do this?
Please note that the keepBuffer option of L.GridLayer (and L.TileLayer) affects how tiles are unloaded: A bigger value of keepBuffer means that the user has to pan around further away before tiles are unloaded. It does not affect how soon tiles are loaded.
If you want to preload nearby tiles, I encourage you to look at some of the plugins, and in particular Leaflet.EdgeBuffer.
Use Leaflet Grid/Tile Layer option keepBuffer:
When panning the map, keep this many rows and columns of tiles before unloading them.
I am working on a mobile application with leaflet 1.0. The map contains many differently shaped polygons and I want to give them a texture via PNG-Files.
Leaflet's ImageOverlay does pretty much what I want except that it can't clip the image to the shape of the polygon. ImageOverlays only accept imageUrls so I need to have the clipped image locally saved for every individual polygon. Is there a better approach for my problem?
See the "Leaflet.pattern" plugin in the plugins list.
I want leaflet to just use the tiles zoomed to level 20 and disregard the lower zoom level tiles.
Is there any way to make Leaflet use chosen zoom level no matter how much the map is actually zoomed?
I thought that zIndex option of TileLayer would do it but it doesn't seem to do anything (I'm not sure what it's supposed to do).
To say it another way:
I want to be able to zoom still and force Leaflet to use 4 tiles to form one tile of a lower zoom level.
Is the better solution is to just combine the tiles beforehand and then feed those combined tiles to leaflet?
Seatgeek has a zoomable draggable tiled interface.
An example is here:
http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#
I want to implement a scrollable draggable interface like this but I cannot use Google's code for google maps.
Also I need the tile system like google maps where it pulls tiles from the server for rendering the map.
Need to implement in javascript. What library can I use? How can I do it?
How does seatgeek do it?
I de-compiled their javascript http://pastebin.com/PVjahhnH
Map Client
OpenLayers
OpenLayers Examples
Map Data
OpenStreetMap
This kind of interface seems complex to implement, but it is just some math tricks. If you decide to implement your own algorithm, try this out:
Take the full image and create tiles in different scales and consequently with different depth.
The user start looking at the scene in real scale, composed by 16 tiles created from the original scene.
If the user drags, all tiles moves equaly. If the user zoom in, all tiles are scaled up.
If the user zoom more than X, you change the 16 tiles by their 16 child tiles! Got it? Higher the zoom, higher the detail. To avoid having 36000 tiles at the same time, generate with different depth and switch them on the fly.
You just need to load and move the tiles. Multiply tile x, y, width, height by the zoom. Keep the focus of the scene in the mouse position. Take a look at this example. It does exactly the steps above, but with a lot of microscope images. It is the same idea of google maps.
CloudMade map tile is one of the server based map tile service. Please read this page server http://cloudmade.com/documentation/map-tiles or contact with alex#cloudmade.com for more information.