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.
Related
I need to build a widget which loads an image (floor plan) with pins on it, with set coordinates, but at the sametime the image needs to be zoomable and can be moved, while the pins keep their size and correct location.
You can see bellow an image about what I mean by image with pins.
I have looked into some packages which load images, but they don't seem to have to a builder where I can add a stack and the pins.
I am trying to work with InteractiveViewer, but so far I encountered the following issues:
cannot manage to keep the size of the pins, constant (to not change size while zooming);
Anyone has any suggestions or recommendations?
InteractiveViewer takes in different callback functions that allow you to keep track of the current scale (onInteractionUpdate being the main one you'll use here).
Use this to keep track of the current scale of the interactive viewer in the state of your widget (using the scale property on ScaleUpdateDetails).
Then, wrap each marker in a Transform.scale (with the origin set to the bottom of the pin) and do some calculation (e.g 1 / currentScale) to determine which scale would directly counteract that of the interactive viewer.
I want to edit the camera center directly in Mapbox GL JS. I know about the existence of the map.easeTo and map.flyTo methods but I do not want to use them because I have to do multiple requests to them (around 60 per second), which in turn results in decreased performance because transitions are stacking upon each other (only an assumption from my side).
Essentially, instead of doing map.flyTo or map.easeTo, I want to do change the camera center directly and instantly. Alternatively, I would like to know if it is possible to remove all the previous transitions before calling map.flyTo or map.easeTo.
To update the camera without an animation use Map#jumpTo.
If you're trying to do your own smooth camera animation you might want to also use requestAnimationFrame like in https://docs.mapbox.com/mapbox-gl-js/example/animate-camera-around-point/
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.
When zooming into the map, do the tiles ever get unloaded? Or do they just stack on top of each other? For example - if I zoom in from zoom level 4 to zoom level 6, do the new set of tiles replace the old ones? Or do they simply cover them?
The reason I am asking is that I am loading a 3D terrain mesh on top of each tile that loads, but I have found that I am getting multiple terrains stacking on top of each other (refer to my aforementioned zoom level example).
Ideally I would like to simply unload the terrain cover whenever the corresponding tile unloads, but the mapbox-gl library does not seem to expose that event...
Any info on this subject would help me figure out a working solution. Thanks!
I try to repeat a marker at the same coordinates when I am moving the map to infinity, in the same way that layers.
example : https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/
Has anyone found how to do that please?
If it's not possible, conversely is it possible to not repeat layers when you moving the map ?
Thank you
The Link example you provided is not using Markers to render the shaded area. It is using a feature, in this case a polygon, included in a layer (a layer can have many features).
In MapBox the rendered map is made up of any number of layers (including the tile data) which is rendered whenever you scroll or drag to a particular area of the map. For example as you keep dragging to the right in the map it will just keep rendering in the relevant layers and tiles.
The Marker functionality has a different purpose which is as a one off selected point which is useful for a user click or hover interaction.