I have a Mapbox map on a page, which loads into a sliding panel which is controlled by jQuery.
If I change the browser window size and toggle the panel, the map often appears only partially filling its container. This is a known issue with the Mapbox GL API.
From their documentation:
If you’re hiding your map initially with something like display:none
and showing it dynamically with JavaScript, it may have some problems
appearing and sizing correctly. The map can’t figure out its own size
when it’s hidden from the page, since it doesn’t have a size in the
browser’s calculation.
With Mapbox GL JS you can call map.resize() to detect and resize the
map
So, I need to call Mapbox's map.resize() function from within my jQuery code, when the sliding panel is opened. Trouble is, I can't seem to get it to work. I've tried the following:
1: $(map).trigger('resize');
2: $(window.map).resize();
3: $(window.map).trigger('resize');
as well as
4: $(window).trigger('resize');
Thing is, I'm not sure about my syntax here and the correct way to call a function residing in another script from within jQuery. I've confirmed that the 'map' object is global, as typing map.resize() directly into my browser's dev tools console works [ie. fixes the map display]. I just can't seem to get jQuery to pass the function.
Also strange is that $(window).trigger('resize') didn't work, as manually resizing the browser window automatically triggers the 'map.resize()' function too [and fixes the map rendering].
EDIT:
Should have mentioned. I've made the map object available globally with: window.map = map; inside the mapbox.js script and made sure that the mapbox.js script loads before the jQuery one, but still no joy.
I managed to solve this in the end. The problem was that the code I was using to trigger the map redraw was as follows:
//inside jQuery map click function
$("#map").slideToggle(200);
$(window.map).resize();
Being a bit of a jQuery newbie, I [idiotically] assumed that those commands would fire sequentially but, of course, the slideToggle() animation is asynchronous. Therefore jQuery was calling the Mapbox resize() function before the sliding panel had reached its final dimensions. Thus causing the map to default to its fallback size of 400x300px
All I needed to do was stick the call to Mapbox resize() into an anonymous function, triggered after the slidetoggle() has completed:
$("#map").slideToggle(200, function()
{
$(window.map).resize();
});
There is still a slight visual glitch in that the map will initially appear at 400x300px, before quickly snapping to fill its container. But since this was a bit of an edge case, dependent on the user having resized their browser window in between toggling the map open and closed, it's good enough for me to deem it solved.
Related
I was having an issue with google maps javascript API returning an empty gray box except for the google logo. I probably would have gotten the UI too, though, if I didn't disable that. I couldn't for the life of me figure out what the issue was, because my test example was working fine, but then I realized it was because I was hiding and showing the div with jquery in my actual project. My fix was to keep it active behind other divs and simply hide those when I'm ready to see the map, but I was wondering if there is a better solution. I'm still not sure why exactly hiding the div and showing it later would cause it to be blank, while leaving it active the whole time works.
try to
setTimeout(function() { map.invalidateSize() }, 900);
try to redraw map after show/hide again using javascript setTimeout function
I have an Ionic Tabs App (I used the Cordova templates on Visual Studio 2015) with a Leaflet map on the second tab. On the first tab I have some search parameters for POIs that I want to show on the map with markers. Everything is working fine, including the map is showing all the tiles, until I start interacting with the controls on the first tab. Specifically, when I enter an input control and the soft keyboard appears, if I then go to the second tab, the map is only showing the first tile. If I zoom in or out, the map refreshes but shows only the first tile. The problem is solved though if I change orientation of the device.
The soft keyboard is not the only thing that causes the problem. On Ripple for example, the soft keyboard does not show (I use the laptop keyboard) but after a while manipulating the search parameters on the first tab, the map stops working properly.
Also, I have tried with the Mapbox API instead of Leaflet and the problem occurs exactly the same way.
The L.Map instance is unable to correctly get/calculate it's dimensions because at initialization the instance's parent container has a style of display: none. You can call invalidateSize on your map instance to make it recalculate it's dimensions when the tab containing your map is shown:
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
http://leafletjs.com/reference.html#map-invalidatesize
I'm by far no ionic expert but according to the docs/reference, ion-tab has a on-select callback where you could do this:
Called when this tab is selected.
http://ionicframework.com/docs/api/directive/ionTab/
<ion-tab on-select="onTabSelected()"></ion-tab>
function onTabSelected () {
//Assuming 'map' holds a reference to your map instance.
map.invalidateSize();
}
As mentioned in the comments below by the question poster, the above works, but so does listening for the $ionicView.enter event and using invalidateSize in it's callback:
$scope.$on('$ionicView.enter', function () {
map.invalidateSize();
});
after searching deeper in many questions and in many examples I couldn't get it working. I've trying anything written in any example.
I want to add an image inside a popup marker without using the amazing Leaflet.photo plugin this time.
My problem is that the image goes away from the popup boundaries the first time I open it out. After closing it and open it again, the image fits perfectly within the boundaries.
The same as it happens in this example example
I also tryed to hack the CSS class in following way instead of write custom options as in the example source code.
.leaflet-popup-content img { max-width:234px !important; height:auto; width:auto !important; }
Nothing changed though, the result is the same as in the example shown.
Any suggestion?
Thanks a lot
What may happen is that the image takes some time to download, hence Leaflet does not know the correct size to give to the popup container.
Then on second opening, the image is fetched from browser cache, and Leaflet can properly compute the popup size.
You can try a delayed myPopup._updateLayout() call to have Leaflet re-evaluate the popup container size once your image is downloaded. E.g. attach an onload listener to your image element, with a callback that calls the _updateLayout() method on the popup.
See also leafletjs adding scrollable pop up?
I'm trying to create a qtip containing a set of icomoon icons. My issue is that the first time the qtip is rendered, it appears displaced from where it's supposed to be.
The content is embedded in my html with display: none and, apparently, the icons are not rendered until after the qtip is created. Therefore, icons are not taken into account for defining the initial width of the qtip and this causes the wrong offset.
When displaying the qtip next times, it doesn't happen anymore as the icons are already rendered and then the width is calculated correctly.
I'm wondering if my approach is simply wrong and there is a more proper solution of defining the content of the tooltip, or hacks are my only option.
Here I have a that depicts my case:
jsFiddle
If you are loading your qTip2 code when the document is ready, try to load with the window, like as follow:
$(window).load(function() {
// Your code here
});
Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/