I am building an indoor heatmap with the awesome leafletjs library. On top of that I am using heatmap.js for the heatmap itself.
If I zoom in, the heatmap as well as the basemap (leaflet GeoJSON layer) seem to be rerendered and thus aren't visible during the zoom animation.
I am trying to get a gradient, smooth zoom animation.
Is there any way to let every layer be visible during a zoom animation?
Thanks in advance for any support on this!
Related
On Bing Maps v8 Is it possible to draw a Polygon (preferably rectangle) on Custom Overlay (Microsoft.Maps.CustomOverlay).
I have been able to render Images (as pushpins) on Custom Overlays using Canvas Layer example given in the link
https://bingmapsv8samples.azurewebsites.net/#Canvas%20Layer
I want to draw a rectangle on Top of this Canvas Layer.
Polygon's are rendered within the base map canvas. As such changing the zIndex such that custom overlays are below polygons would result in the overlay being behind the base map and not visible. It is not possible to put custom overlays between the base map and polygons at this time.
That said, if you are using the drawing tools, it uses a separate canvas when drawing/editing which is above custom overlays. If you are simply drawing a polygon/rectangle and then doing a search with it, that would work, but the final polygon would end up behind the overlay as soon as you leave edit mode.
However, polygons should always be rendered behind pushpins This is standard practice in all mapping platforms.
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
I'm using maps.googleapis.com/maps/api/js?v=3.21 and displaying zoom slider using
mapOptions.zoomControl = true;
mapOptions.zoomControlOptions= {
style:google.maps.ZoomControlStyle.LARGE
};
Every thing work as expected. The only thing which does not look so great is the zoom-in and zoom-out using slider . Its not very smooth and it seems that I can zoom-in/zoom-out by discrete zoom levels and not continuous. But I can see that Google maps has a zoom slider which works in very smooth and continuous manner. How can I get the same effect in my application ?
Google maps work only with finite zoom level.
The zoom level is an integer and is directly related to the maps tile showed ..
alias for each zoom level the map tiles retrivied by google maps are determinated by a direct relation for the zoom level and the earth surface mapping.
THe only difference with the slide is the aspect and the fact you can change zoom level directly moving the slider..
I'm trying to create a circular masked overlay using Leaflet 0.8 that is positioned over the users currently location, extending a radius of 1000 meters. Essentially making the map visible around the user (as a circle), and grayed out beyond 1000 meters
Mockup:
As the user zooms in/out on the map, the circle should resize accordingly.
I tried using leaflet-maskcanvas, a plugin for Leaflet that looks like it would do exactly what I need, unfortunately with all refactoring done in Leaflet 0.8-dev, this plugin isn't compatible.
Has anyone been able to achieve this effect successfully with Leaflet 0.8?
I'm thinking of one hacky way of doing this is using Turf.js to take the map's current center point(map.getCenter()), buffer it 1000 meters with Turf, take that result, and then grab the map viewport's current bounds(map.getBounds()), and use turf erase on it. Then draw the resulting polygon on the map(which is the difference), and then update this on any move events.
http://turfjs.org/static/docs/module-turf_buffer.html
http://turfjs.org/static/docs/module-turf_intersect.html
http://turfjs.org/static/docs/module-turf_erase.html
In GoogleMaps when users zooms In/Out using mouse wheel the point under cursor stays the same (its coordinates), but OpenLayers map has different approach - when zooming center of the map is constant. Can one use GoogleMaps zoom style in OpenLayers map?
EDIT:
Actually current behaviour in my OpenLayers is that when I zoom in with some position under the cursor it moves that position to map center on the next zoom level. Probably it is some issue related to my map specific settings (like projection).
I guess you are using OpenLayers.Control.MouseDefaults control for navigation. Well, you shouldn't, because this control is replaced with OpenLayers.Control.Navigation and will be deprecated in OpenLayers 3.0.
A quick look at source code for MouseDefaults shows that it definitely centers map on the cursor position:
defaultWheelDown: function(evt) {
if (this.map.getZoom() > 0) {
this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
this.map.getZoom() - 1);
}
},
While cursor stays at the same position the map will centered to new location every time you zoom in/out, which is confusing.
OpenLayers.Control.Navigation uses the same approach as Google Maps. OpenStreetMap uses it and you can see that it works the same way here
Actually, when looking at the Basic Example at OpenLayers, it seems like the map zooms around the mouse pointer, just as Google Maps does. Or am I missing some detail in your question?