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)
Related
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 implementing a simple map. The map consists of a viewport, and the map image itself, which is actually a div with a background image.
The viewport is relatively positioned and it's overflow is hidden, and the map image is absolutely positioned within the viewport.
The map can be moved with the mouse within the viewport and the map can also be zoomed (just increasing the size of the image as the image is a .svg)
The map has points on it which the user can hover over to get a description in a tooltip of the point. The points can also be focused by tabbing to them.
Points are children of the map image div and are absolutely positioned by percentage (to retain the correct position when the map is zoomed)
When a point is focused, I want to move the map so that the point is in the middle of the viewport. I have written the code for this and it works fine. However, if a point is outside of the viewport (not visible) then the browser automatically tries to move the map so the point is visible. I don't want it to do this, as it is interfering with the code I have written to animate the map move. This is nothing to do with scrolling.
I am using jQuery and have tried e.preventDefault() and return false; in the focus handler for the map points but neither work.
Is preventing this behaviour even possible?
Thanks in advance
I have found out that the scroll value of the map viewport was being set by the browser in order to bring the map point into view. As I am moving the map by setting it's top and left positions, this is what was causing the issue.
The solution was to add the .scroll() event listener to the viewport and just set the scrollTop and scrollLeft values to 0 when the event is triggered
How can I create this page ?
http://www.kiwicollection.com/search/map
icon loading marker
sidebar
popup dialog
button on map
How can I learn how to do.
This is a simple jquery work.
for popup dialog you can check the custom popup link that work on mouse over on marker.
Button on map is just some images in background and numbers are show on above of that.
check change marker image tutorial
sidebar is just trick that work on mouse over on map and hide the side div and increase the length of map.
Examples are here
similarly i think icon loading marker is also a image the loading is showing on mouseover event.
I have a google map inside of a div which gets changed, its parent div can get an additional class which changes its dimensions. This changes causes the google map not to get updated, it resist in the previous dimensions. How can I refresh the google map?
I tried to recreate the google map again but it seems to keep the other previously created google maps there as well. This causes sometimes strange behavior (the old map is on the top of the new). Can a google map be released?
Thanks for your help!
Check the google.maps.Map class reference, I think you're looking for the resize event:
Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize')
While re-sizing the existing map would be more elegant, as a workaround you can empty the container div before re-creating the map, e.g. while (div.firstChild) div.removeChild(div.firstChild) or $(div).empty().
I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.