Develop Reference

The Leaflet map floats above all components

I don't know much about the front-end components of the web. Please point out if there are any deficiencies in the problem description.
I am currently working on an offline map-related business.
I use tile layers combined with Leaflet.
The entire page has many other components besides the map layer.
The ideal situation is that the map is at the bottom of the page, with only a part of the center Can operate the map.
As shown below
picsimple demo
The problem I'm having now is that the map floats on top of all components,
Neither setting z-index nor using pane has any effect.
as shown in the picture
picinitial position
Drag freely on top of all components
GIF
I hope someone can provide me with a solution, or an example, to help me solve this problem, thanks for the guidance.
My brief implementation idea is like this
initOffMap(){
var that = this
var latlng = L.latLng(30.584355, 114.298572);
that.offMap = L.map('mapContainer', {
center: [30.584355, 114.298572],
zoom: that.zoom,
minZoom: 8,
maxZoom: 11,
maxBounds: L.latLngBounds(L.latLng(34.298747907678184,108.30837249755861), L.latLng(28.31487093107572, 116.70742034912111)),
});
that.offMap.createPane('labels');
that.offMap.getPane('labels').style.zIndex = -50;
var layer = L.tileLayer('http://localhost:8082/hb/{z}/{x}/{y}.png',
{
maxZoom: 11,
minZoom: 8,
autoZIndex: false,
pane: 'labels'
// zIndex: 111,
});
layer.addTo(that.offMap);
},
<div class="mapContainer" id="mapContainer">
<div class="head"></div>
<div class="leftProgressbar"></div>
<div class="leftcirle"></div>
</div>
example
https://plnkr.co/edit/2k8mdrGDLhOQc93L?preview
You can check the above example, I set the background of the header to red, and when you drag the map down, you can clearly see that the map layer floats on the surface and covers the header

You have tagged react-leaflet however that implementation is a regular leaflet implementation. If you do in fact use react you should consider using the react-leaflet package https://react-leaflet.js.org/
It will probably solve your issue.
The examples in the documentation just show the core implementations, but you will be able to find alot of code here on stackoverflow for whatever you will need.
If you in fact do not use react, update your tags and let me know and I will remove this answer.

Half grey google map while dynamically creating it for more then once with javascript live function

Our code starts with live function and whole page content is created by js live function,below code used for creating google maps within javascript code, for the first creation everything is fine (map seems correctly on screen) but after that time when google map is created again at the same page half of the map comes up and half is grey, that is our problem.
JQuery version 1.8.0
Bootstrap version 2.2.2
var idz = 'mapg';
tr.append($('<td>').append($('<div>', {
'id': idz,
'style': 'width: 100%; height: 300px'
})));
var latlng = new google.maps.LatLng(40.988921, 29.021326);
var options = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
rootMap = new google.maps.Map(document.getElementById(idz), options);
I would appreciate any help with this issue, thanks in advance.

I too had the same problem, I solved it by triggering the resize of Google maps.
Here is the below code:
google.maps.event.trigger(rootMap , 'resize'); //For v3
Add this after initializing the Google maps.
You can take a look at this SO Question.

Google Maps Custom Style won't work

I'm currently trying to customize Google Maps.
I styled my Map via the API (http://www.achimsagner.de/test/klysz/) but since I used the InfoBox my styles won't load. (http://www.achimsagner.de/test/gmaps_test.html)
I just can't find my mistake, maybe someone could help me.

Add the styles to your myMapOptions
var myMapOptions = {
zoom: 16,
center: secheltLoc,
styles : styles,
disableDefaultUI: true,
scrollwheel: false
}

The page that applies the style contains these lines that aren't present on the page that doesn't:
//Associate the styled map with the MapTypeId and set it to display.
theMap.mapTypes.set('map_style', styledMap);
theMap.setMapTypeId('map_style');
working example

Google map API with jQuery

I want to design a html business card with a map icon (the icon will show a red pin of the address that's in the card). The map window will be very small (100 X 100 px), but upon click it will open google map with the address pinned. Is there a jQuery plugin that can easily achieve this, or would someone pls point me to the right direction?

There is no need to use jQuery to solve this.
I believe the easiest way to achieve this would be to open up a new window, and send the user to Google Maps. The address can be passed as a GET-parameter.
For the small map, you can use the standard Google Maps JavaScript-API, to put the marker on the map.

I don't know if there is any jquery plugin for this. But what you describe should not be too difficult to achieve. I would do the following for this task.
$('#my_pin').click(function(){
1. create a div for map, set the height and width for this div.
var div = document.createElement('div');
you may want to add some event hanlder to this div so that it can be closed
2. create a google map options similar to
var opts = {
center: new google.maps.LatLng(100,100),
zoom: 5,
mapTypeId: google.maps.mapTypeId.ROADMAP
}
3. create your map object base on the newly created div and options
var map = new google.maps.Map(div,opts )
4. attach the new div to your body or whatever parent element
$(div).appendTo($('body').get(0));
});

Can ScrollWheel be disabled in a custom street view?

I am building a site and I have a page which takes an address and uses it to generate a 2D roadmap style google-map and then next to it, the street view for that address.
My problem is that these two maps span almost the entire width of the site and the user is likely to have their mouse go over it when scrolling down the page and get confused by their inability to scroll down further (while zooming into a map).
Disabling this for the 2D map was pretty strait forward
//works to disable scroll wheel in 2D map
var mapOptions = {
zoom: 12,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );
//not working to disable scroll wheel in panorama
var panoramaOptions = {
position: results[0].geometry.location,
scrollwheel: false
};
panorama = new google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );
but the street view does not seem to allow me to disable the scroll wheel using these options and I am not able to find this issue addressed in the google-docs. Anyone know if this CAN be done or suggestions on how to approach it?

There was a feature request with Gmaps API v3 issues to add scrollwheel: false to streetview http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. This is now fixed, just use scrollwheel: false within your StreetViewPanorama options.

I am having the same problem, when the user scrolls down using the mouse wheel, the cursor gets caught in the Google street view and starts zooming instead of scrolling down the page.
In Google Maps they provide the scrollwheel property which can disable this, but unfortunately this does not seem to be implemented in Street view.
The only workaround I found as of now is as #bennedich said in the previous answer, I placed an empty/transparent div exactly over the street view div.
I am enabling the controls when the user clicks anywhere over the street view area by using jQuery to hide this empty div (using css visibility property) on mousedown event and when the user moves his mouse out I am placing this empty div back over. Which basically means everytime the user wants to interact with the street view control he has to click it once. It's not the best solution but it's better than getting your mouse caught up when scrolling

Don't know about the javascript way, but with html and css you can place an invisible div with higher z-index over the map/streetview.

There is a patch coming up from Google to address this issue.
The fix that works for now is to set the version number explicitly to 3.25 for scrollwheel: false to work.
Example:
https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25

My solution was the following. As soon as the mouse is scrolled on the street view using the "wheel" event, then do the scroll artificially and bring an overlay to the front.
$('.streetViewOverlay').click(function(e) {
$(this).addClass('streetViewOverlayClicked');
});
document.querySelector('#street-view').addEventListener("wheel", function(evt) {
$(document).scrollTop($(document).scrollTop() + evt.deltaY);
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
$('#street-view').mouseleave(function() {
$('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById('street-view'),
{
position: {lat: 37.869260, lng: -122.254811},
pov: {heading: 165, pitch: 0},
zoom: 1,
gestureHandling: 'cooperative',
scrollwheel: false
});
}
.streetViewOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.streetViewOverlayClicked {
z-index: 1;
}