I have created a map with leaflet which contains multiple overlays which are rather big in file size. I reduced resolution and converted them to webp, nonetheless, the file size is rather big.
The overlays are displayed across the world and are not needed at the same time. In order to reduce bandwidth and initial load time, I was considering if you can lazy load the overlays?
Is there a possibility to only load and display the overlays if there are currently displayed in the map view?
I imagine that reacting to map viewport changes would be possible to hook your dynamic display in.
Related
I would like to use Metal to efficiently render a particular type of time-varying image - namely an image which continuously scrolls vertically. That is, each frame is exactly the same as the previous frame except shifted down by one row. The bottom row scrolls off the screen and is discarded. The top row is new data inputted from some Swift array. My application uses real-time audio data to render a spectrogram - but this "rendering a scrolling image" is a general-purpose need with broad applicability.
The brute-force way to implement this is to store the data in an array and read the entire image array into the rendering screen for each frame - ignoring the fact that 99.9% of the data is already in the video memory buffer and simply needs to be accessed differently.
In the old days, when developers had direct access to the display's VRAM video memory, one could achieve this effect by simply incrementing the VRAM's row-access pointer by one for each frame (and writing in the top row's new data). Today, OS's abstract the screen's buffer memory - but hopefully Metal provided a clever way of cutting through this abstraction to allow this low-level data shifting.
The SO question "Moving an Image using Metal Shader" (here) is helpful, but leaves me wondering what's the right approach. Can someone please point me in the right direction to implement this?
I want to label stations on my map, and I would like to clusterize the stops at different zoom levels to filter them down. So as you zoom out all you get is the start and end, and then finally a single label start->end.
How do I render a text label on a vector tile ?
I could fetch the stations as a geojson and reload on zoom change if there's no easy way to do this with tiles.
Is there a reason you need to encode your data differently per-zoom-level in the tiles or are you mainly concerned with displaying data differently per-zoom-level? If the latter, I would recommend looking for an approach that focuses more on styling the vector tiles you already have rather than trying to generate those tiles in a more complex fashion. You could try using a zoom function to style your data. If you're using Mapbox Studio, you can also set zoom-specific style rules in the Studio UI, which is the route you'll probably want to go if you're using Leaflet (I see the Leaflet tag in your post but it's not entirely clear what your implementation looks like).
If the former, you may need to use a tool like Tippecanoe. This route will likely be a bit more complex, but gives you fine-grained control over how your vector tiles are generated. Keep in mind that once you've created your tiles using Tippecanoe, you'll still need to style them somehow.
I have a layer with 7000+ polygons and am displaying a portion of the polygons in a web app using "setFilter" on map load. (The filter is choosing the polygons to display dynamically based on data from the url of the current page.)
However, I can't figure out how to make the map center on the particular polygons currently showing (the visible part of that layer), which means the user has to hunt around to find it. There can be multiple polygons visible at one time, and they are a range of different sizes. Any ideas?
If you have the feature collection of polygons that are visible on your map, you can use the turf-extent module to get the geographical extent of the visible polygons, and then call map.fitBounds(extent) to make all visible polygons within the viewport.
at present our project is using the leaflet, I take the map parameters to background program (map.getZoom() and map.getbounds()) , then load the returned picture(return from background program) by imageoverlay.
excuse me how to solve continuous drag or continuous scaling, only the implementation of calling a daemon?
If you mean you dynamically load the base map (i.e. the image that is zoomable, draggable and that fills a big pane, not just a small portion that would have needed a single image overlay), you should probably rather do it through a Canvas Tile Layer:
Used to create Canvas-based tile layers where tiles get drawn on the browser side.
With this, you set up a myCanvasTileLayer.drawTile function that is called by Leaflet anytime the map needs more tiles (due to user panning / zooming). Please refer to Leaflet doc for the function arguments.
If you want to stick with your image overlay technique, you might want to listen to drag and zoomend map events to re-trigger your function that loads a new image overlay.
I am overlaying a transparent image on my VEMap control by rendering it as a single VEShape. The shape changes sizes dynamically depeding on the zoom level of my map and can be as large as 4000*4000px. In older browsers such as IE6 and early versions of Firefox 2.x, map control performance degrades rapidly when my shape gets larger than 1500*1500px. The mouse pointer moves slowly and the map responds very slowly to events. I don't see this issue at all in newer browsers (IE7+).
Are there any workarounds to boost performance of rendering a large shape for IE6 users?
The solution you're probably looking for is to actually use "Map Cruncher" to create map tile images from your image. Then these map tile images can be overlaid on the VEMap using a Custom Tile Layer, and will be rendered exactly the same way as the Map Images themselves.
http://www.microsoft.com/maps/product/mapcruncher.aspx