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.
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 initialize 2 google maps inside of different tabs in a bootstrap modal popup.
The maps are initialized on shown event of the tab, and the maps are displayed correctly. There is a polygon of a field displayed correctly in the center of the maps.
After switching tabs multiple times, the map displays with the background blurred, but with the polygon still rendered correctly.
Once the maps have been rendered, I trigger the window resize event using the following code:
window.dispatchEvent(new Event('resize'));
It seems that the map sometimes refreshes correctly when switching back and forth between tabs, but only temporarily.
This functionality has worked for some time without problems, and has recently begun to show these symptoms.
Does anyone know if this is as a result of a google maps update? Or any ideas on how to refresh the map?
Thanks
I have tried delaying this call:
window.dispatchEvent(new Event('resize'));
with a setTimeout, and also tried firing the resize event on the map itself using:
google.maps.event.trigger(map, 'resize'); //I have read that this call is now retired.
I have tried setting the zoom level for the map after a tab is shown.
I am building a codepen at the moment, but am having trouble with google maps there too ;(
I expect to be able to switch tabs as many times as I like without the google map going blurry or getting re-centered or zoomed in/out.
Fixed - the issue was being caused by code that used to correct the problem of the map loosing position when hidden and shown by moving to a different tab:
google.maps.event.trigger(map, 'resize'); //I have read that this call is now retired.
and
window.dispatchEvent(new Event('resize'));
Removing these calls fixed the issue.
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.
I am using Google map API Version 3 with jQuery mobile. I created marker on map then also 1 marker for current position and then I want to print path between two points like current point and some specific spots. For doing this I generated popup with list of fixed spots user can select any and processed after popup application back to map and tries to plot a route on map but in Chrome the map view is destroyed and shown just in corner. Only in Firefox no issue arise.
This usually happens when you load your map inside a hidden element or you change your elements properties after loading a map inside it. If that is the case
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
this might solve your problem.
My Google Map (v3) renders two types of markers:
An area marker ("Your home is in this area"), a semi-transparent graphic with a circle denoting an approximate area on the map.
Many attraction markers (beaches, restaurants, shopping, etc.)
Each attraction marker has a click handler that opens an info window ("Bob's Bugs - the best fried bugs in town!"). Registering the click handler also seems to create hover handlers that change the mouse-pointer to a hand, display a tooltip, etc, which is fine. I am defining no event handlers for the area marker.
However, for the attraction markers that are within span of the area marker, neither the click nor hover handlers fire. I would guess that it is a z-index issue, that somehow the big area marker, is lying on top of the attraction markers, is intercepting the hover/click events, and is not passing them through. In fact, a hover on the area marker results in the its tooltip, suggesting to me that it is definitely picking up the event.
I have set the z-indexes of the various markers - high z-index for the attraction markers, low z-index for the area markers. The visual rendering and examination of the DOM suggests that the z-index values are actually being set as I want.
But somehow the intersecting attraction markers are not receiving their click/hover events. Other attraction markers respond correctly to their hover/click events. In fact, for an attraction marker that only partially intersects with the area marker, the external portion of the marker responds to the hover/click events.
Per this answer, I tried calling:
google.maps.event.clearInstanceListeners(this.areaMarker);
in the hopes that perhaps there were some default handlers getting in the way. No love.
Is there some way to tell the area marker to get the heck out of the way? Any other ideas welcome.
The solution seems to be to use an ImageMapType overlay for the area marker. These overlays will not intercept any of the hover/click events.