I am looking for a way to detect if tiles of google maps v3 are loading or and event which triggers when tiles start loading.
My UI is build as follows:
There is a map on background layer.
On the foreground there is a form in which user enters location.
After he hits enter, map is panning and zooming to specified location.
All I want to do is hide foreground layer AFTER:
1. Map is zoomed
2. Map is panned
3. All tiles are loaded
The problem is that when typed location is very close to starting location, there is no "tilesloaded" event triggered because map panned only few pixels. So I can't depend on "tilesloaded" event.
I can't also depend on "bounds_changed" or "idle" event because they trigger BEFORE all tiles loads.
Do you have any ideas ?
You may:
listen for the tilesloaded-event and hide the form when it fires
to catch the case where tilesloaded didn't fire store the bounds(when opening the form) in a variable. Observe the bounds_changed -event and check if the difference(in screen-pixels) between the northeast/southwest of the stored bounds and the current bounds is less than 256(that's the size of a tile). When it does you may assume that there are no tiles to load, trigger the tilesloaded-event immediately.
Related
With openlayers I would like to make the current location visible and follow it with the view. The problem is that the current location updates from the device come in roughly every second and the resulting experience is not nice as the view jumps. This can be smoothed a little bit with a view animation, but then still the current location marker "jumps" on the map, like in this example.
I created an example where I put the current location in an animation (I used this example as base) and update the view directly in the animation. (btw: how can I avoid adding the helperMarker?)
This works but calling map.getView().setCenter while the animation seems wrong and I think this is the reason that sometimes the animation is not smooth and it slows down and stutters (reproducible in Chrome and Firefox).
I then implemented another way where I move the current location marker outside of the map into a div element and overlay the map at a fixed location and then I only need to animate the view and center it to the location of this div element. This seems to work but feels like a hack as the current location marker is no longer part of openlayers with potential problems regarding synchronization.
So, what is the proper way with Openlayers for a smooth "synchronizated" of the view and a current location marker?
(So probably something like this or this but for openlayers)
If you already have a view animation that follows the path you can simply draw the marker in the view center in a postrender handler.
vectorContext.drawGeometry(new Point(getCenter(map.getView().calculateExtent()))
I updated the example to keep the point in the view center during the animation (checkbox 'Smooth'):
https://codesandbox.io/s/track-position-vfdrx?file=/main.js
A postrender event on the vector layer only fires when at least one feature is drawn.
You can add the postrender event handler to the tile layer to avoid having a helper marker. (See my updated example above)
I have a Leaflet map that I resize to full screen when user clicks on provided icon and compress it to original size on second click.
I am using the invalidateSize() method after the resize is done but I have noticed that marker that I have on the map loses it's position.
The issue was that I was updating marker position on click and I think clicking on resize button caused the marker coordinates to be set to wrong position. So the leaflet works fine. I fixed it by using event.stopPropagation() on the enlargement icon instead of only event.preventDefault().
try set timeOut on that validate
setTimeout(function(){map.invalidateSize()},500)
I am working with Leaflet JS to build a map with clustered markers on a large touch screen.
The problem we are having is that when a user clicks the marker the event does not get fired until all the tiles have loaded.
Is there a way we can still trigger the map click even though all tiles have not yet been loaded.
I have a 'moveend' listener established on an OpenLayers map. I can pan or zoom the map and the listener fires as expected. I also have the need in this app to programmatically change the zoom and the center location, however, when I do the 'moveend' listener fires. Is it possible to distinguish between user-driven view changes and programmatic view changes in OpenLayers?
I am using JavaScript OpenLayers version 2.12.
I don't think there is a way to distingish. But here's what you can do. When you programmatically zoom or change the center location, you can temporarily unregister the moveend event, and then re-register it afterwards:
map.events.unregister( "moveend", map, function );
.
.
programatically zoom
.
.
map.events.register( "moveend", map, function );
Also, when zooming or moving map programmaticaly, you could set some variable to true.
In listener, check that variable. If it's true, map is moved programmaticaly. After checking, set it back to false.
In our project we overlay a ImageMapType (google.maps.ImageMapType) over a base map using map.overlayMapTypes.insertAt method. The ImageType has getTileUrl function to fetch the tile for a particular location from the server.
I want to display a pageMask with a text message while the overlay maptype tiles are loaded and remove it once all tiles have been loaded. Is there a event to detect the load completion of these ImageMapType tiles.
Thanks,
Sivakumar.
This event is fired when all visible tiles have finished loading.
GMap2::tilesloaded()
Details.