Mapbox GL JS canvas not displaying properly in Bootstrap modal - javascript

According to the Mapbox GL JS Quickstart guide, it should be straightforward to implement a map on a website using the Mapbox CDN. Unfortunately, that is not the case if the map is located inside a Bootstrap modal, which does not have a predefined width, a property that is set only after the modal is opened.
The result is a Mapbox canvas loaded with a default width of 400px, which may differ from the modal width and create a terrible user experience.
Also, if one opens the modal and then resizes the browser window, the map automatically fits the whole horizontal space as expected, which seems to be a JavaScript response to a resize event.
Here follows the related code.
HTML file
<div id='map'></div>
CSS file
#map {
height: 300px;
}
JS file
mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
container: 'map',
center: [..., ...],
zoom: 10,
style: 'mapbox://styles/mapbox/streets-v11'
});
I've tried to load Mapbox inside a Bootstrap 3.4.0 modal, as I was previously able to do when using Google Maps or Bing Maps, but in both cases embedded inside an iframe. Therefore, I was expecting to see Mapbox filling the whole modal as Google Maps and Bing Maps did.
Instead, the Mapbox interface (bottom left logo and bottom right info button) was correctly positioned inside the modal, at its borders, but the canvas containing the map was incorrectly positioned.
Finally, setting a predefined width to the #map CSS property is not a solution. If the width is set to a fixed width in pixels, it may not display properly on all window sizes, while adding a fixed percentage width, say 100%, did not do the trick.

A similar issue has already been solved for the Leaflet JavaScript library here and here.
As it turns out, the lack of a predefined width for the modal leaves Mapbox with no option but to initially load a default width (400px in this case). Because opening the modal does not trigger any event that Mapbox may be listening to, such as the window resizing, Mapbox keeps its default width no matter the size set for the modal once it is displayed.
Therefore, to make the Mapbox canvas to fill the entire width of the modal, one must link the opening of the modal, which will finally set a width to it, to the Mapbox resize method.
The Bootstrap event of interest here is the "shown.bs.modal", which is triggered once the modal has been displayed to the user and the CSS transitions have completed. This guarantees that a width has already been set to the modal.
The solution is to add the following code after the 'map' variable definition in the JS file:
$('#modalID').on('shown.bs.modal', function() {
map.resize();
});
Make sure to change 'modalID' to the same 'id' used to identify the respective modal.

Related

Mapbox control customize button

Currently I'm using drawing functionality of mapbox, but the button of start drawing is like other controls (like gps) are mapbox built in control buttons on the corner of the map.
Is there anyway that I can put the functionality to my cusomized button outside of the map component?
inspect the button and check the class name of them.
then put your map box in a div with {position: relative}, with your desired width and height
then give absolute position to your buttons..

Google Maps causes horizontal scroll on mobile

I'm using Google Maps JavaScript API (v3) to display two maps on my website. When viewing the this page on mobile (Asus Zenfone 2 with Chrome), I see a blank page that is caused by an unwanted huge horizontal scroll - and it's the map's fault. When I remove the map from the code, there is no horizontal scroll. When I use overflow: hidden on the map's container, or even the <body> - the scroll is still there. Even when I use display: none on the map's container, I still have this annoying scroll.
Any suggestions on how I keep this map in mobile view, and get rid of this scroll?
Place the map inside of a div that sizes itself responsively, then call google.maps.event.trigger(map, 'resize')
You can also prevent this from happening my making sure that the div is built before the map is rendered, for example by adding a 'show map' button or an event listener after the user scrolls past a certain point.
Turns out the map generates a span at the end of the <body>. The fix was simple:
body > span {
display: none;
}

Set height of Google Map InfoWindow

I'm trying to create an InfoWindow on a Google Map using the V3 Javascript API, the window needs a fixed size, and no scrollbars. The window I'm getting automatically gets a height that I cannot seem to override.
There are numerous posts here on SO with answers suggesting setting the height of
.gm-style-iw{
height:something!important;
}
or passing the height in as a constructor argument
new google.maps.InfoWindow({
content: '<my custom markup>',
height : 500
});
or setting the height of my custom content to which the window wrapper will automatically adjust, but these aren't working : the gm-style-iw element and my own content get their proper height, but the window wrapper ignores the size of its content and makes its content scrollable. Suppressing scrollbars is not viable, I need the window to be large enough for scrollbars to be unnecessary.
After examining the infowindow structure, it seems to consist of an outer border that's painted onto the canvas, some inner wrappers with overflow:auto; that prevent spillover, and then the custom content we can inject into the window. The outer content is controlled by some Google script, live. I can see changes I make in-browser being undone, and the tricks like forcing an InfoWindow redraw always leads back to the same incorrect size.
How can I accurately adjust the size of the wrapping window?
Have you tried making your map itself bigger?
There are also some great questions on here that have similar questions to yours you may want to look at the related sidebar ->
Here's one that seems like it may work for you:
How to set a specific height for Google Maps infowindow?
Hope this helps! Best of luck!

How to customize Gmap?

I am using Gmap on my website and I notice that i sets position:relative on the #map. How do I change this? I don't want any positioning on the #map div. I looked over the gmaps.js and couldn't find it.
Another problem is how to make the gmap load in satellite mode by default instead of map?
Also can I get rid of all the other things I get by default - zoomer, arrows, text at the bottom right etc. I just want a clean map in satellite mode.

Bing Map CSS position:fixed InfoBox issues

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.

Categories

Resources