Develop Reference

Leafletjs Cursor when hovering over WMS Layer

I am using Leafletjs. Currently its pretty straight forward, I have a streets view from open maps.
var streets = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
});
I also have a WMS layer that is coming from a geoserver. It has the standard getFeatureInfo and everything shows up correctly.
L.tileLayer.wms("GEOSERVERURL", {
layers: 'layers',
format: 'image/png'
,transparent: true
}).addTo(map);
The wms layer is also clickable and I use getFeatureInfo to get the info for that layer. The issue is that the user doesn't know its clickable because the cursor never changes when they hover of the wms layer. My question is how do make the cursor change when hovering over the layer?
Has anyone implemented this feature before or have an idea to implement it? The only research I have stumbled across so far has using mouseover on the map and calling getFeatureInfo to tell if its over a layer. However, that seems like it would cause a lot of chatter just to identify cursor area.
EDIT: To clarify, I want the cursor to only change when its hovered over the wms layer that is populated. Although it technically gets applied to the whole map, it only has content on a part of it. Which kind of raises the question of 'Can I limit the wms layer to only the content area and then show a cursor?' Maybe a bounding area or something along those lines?
EDIT 2: Below is an example of what it looks like. The street map parts I want to keep the normal cursor but I want a pointer when hovering over the colored wms map parts.

Set an ID on the tileLayer's container and then use CSS to change the cursor:
Javascript:
var wms = L.tileLayer.wms("GEOSERVERURL", {
layers: 'layers',
format: 'image/png',
transparent: true
}).addTo(map);
wms.getContainer().setAttribute('id', 'wmsContainer');
Stylesheet:
#wmsContainer {
cursor: grab; /* or any other cursor: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */
}
Note: you need to do this after the layer is added to the map. Before you add it to the map the getContainer method will return undefined.
Edit after question edit and comments:
Unfortunatly that's not possible. At least not as far as i know. Because L.TileLayer.WMS is a layer of images, there is absolutely no way of deducting which tiles have features on them and which are transparent.
What you could do as a workaround is work out the boundaries of your object, use that to create a transparent polygon without stroke and put that over your WMS layer. Polygons are interactive thus you get the cursorchange included, plus as an extra bonus, you can do other fancy stuff like show the outline or something like that on mouseover. I've created a little demo from the WMS example you supplied in the comments.
http://plnkr.co/edit/1HGn6IUzdrn1N5KGazXQ?p=preview
Note that i'm using a GeoJSON layer with one feature instead of a polygon, because it was easier to find the outline of the US in GeoJSON format. But in your case a four point polygon would do the trick just as wel.
Hope that helps, let me know if something isn't clear.

Fit Baidu map to multiple markers like Google Maps fitBounds

Is there an equivalent in Baidu like fitBounds in GoogleMap?
I have multiple markers on a Baidu map and I would like to show all the markers with the proper positioning and zoom level.

Just stumbling upon this thread. The answer to this question is:
var points = [Point_1,...,Point_n];
map.setViewport(points);
points is simply an array containing objects of type BMap.Point that you want within the map viewport.
Docs: http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB

Although this answer worked for me, with the change of direct latlng object instead of BMap.Point object to make it work.

It is possible to show multiple markers on Baidu Map.
Check their example here
I have displayed Baidu Map with an area of 230x125 so I have shown the China on the area like below:
var map = new BMap.Map("id_of_map_loading_area");
var point = new BMap.Point(101.841797,35.433724); //China on the center of the area
map.centerAndZoom(point,3); // Change value 3 to see difference
map.enableScrollWheelZoom(); // Zoom effect to the map using mouse.

google maps v3 zoom to fit all markers(path) function

I've put together a little snippet on js fiddle so you can see what I am working with.
Basically I am trying to hook up a "Zoom" button so that once a path is created you can click the zoom button and the map zooms to fit the path. All of the answers I have found work by having an array of markers which I do not have. Any suggestions would be greatly appreciated.
http://jsfiddle.net/A3NBZ/

Well, in fact you do have an array of markers! It's stored in the Polyline that you're creating when the user is clicking on the map. To retrieve the points on which the user has clicked, simply use Polyline.getPath(). You can then add those points (as geocodezip mentioned) to a LatLngBounds object and use google.maps.Map.fitBounds() to adjust the map view to the given bounds.
Here's a simple implementation of the zoom method, based on the code example you've provided (you can see it working here).
function zoom() {
var bounds = new google.maps.LatLngBounds();
geodesic.getPath().forEach(function(latLng) {
bounds.extend(latLng);
});
map.fitBounds(bounds);
}

Similar to the examples you have seen with markers, add all the google.maps.LatLngs in the path to a google.maps.LatLngBounds object (using bounds.extend()), then call map.fitBounds on the resulting bounds object.
updated jsfiddle

Place the Google Maps pegman underneath markers

I have a Google V3 map which uses steetView and some map markers.
The little yellow streetView pegman sits on the map on top of the markers.
Is there a way to change the z-indexes so that my markers will be above the pegman
(so that they can be easlly clicked on without having to zoom in)?
In case anything is not clear, here is a fiddle....
http://jsfiddle.net/spiderplant0/BRkCA/
After a bit of experimenting I came up with this...
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
$($("#map_canvas img[src*=cb_scout]")[1]).parent("div").parent("div").css({'zIndex': -200});
This forces the pegman to sit beneath the markers but now the pegman is no longer dragable and each time the map is moved etc, the pegman jumps above the markers again.

To keep the pegman under your markers you can watch for the pov_changed event and reset the z-index after a short delay
$google.maps.event.addListener(panorama, 'pov_changed', function() {
var func=function(){
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
}
setTimeout(func,1000);
}
});
You will also need to change the depth of the pegman after the maps moves, which can be accomplished with the following snippet
google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(panorama, 'pov_changed');
})
If you want to be able to drag the pegman, you must first place it above the markers by having a toggle button swap the pegman's depth and add an exception to the pov_changed event handler preventing the pagman from dropping depths when the toggle button is active.

Okay, this may be a bit hacky... (and I hope I understood what you were doing)
1) Disable street view control
2) Make another control with a lower zIndex than the marker you have.
3) Update street view control with the position of the fake street view marker.
http://jsfiddle.net/z7Lp8/

You can set the zIndex of the marker above google.maps.Marker.MAX_ZINDEX in order for the pegman to remain under the marker. MAX_ZINDEX is the maximum default z-index that the API will assign to a marker. Marker z-indexes only work when optimizations are turned off on all markers on the map.
Forked fiddle from question to illustrate: http://jsfiddle.net/brendaz/t4v8nhoq/
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(54.975, -2.020),
map: map,
zIndex: google.maps.Marker.MAX_ZINDEX + 1,
optimized: false
});

Google Map fitBounds makes the map be in the ocean :)

I have this page where I have a listing of items per state. If I try to do
map.fitBounds(bounds);
Then the map suddenly shifts to the ocean. What I wanted it to do was to fit around the area of the markers.
Here is the test page for this:
http://www.comehike.com/outdoors/terrain.php?type=hills&geo=state&state_id=1
Any idea what is going wrong?
Thanks!

When you initialize bounds at the end of initializeTerrain there are no markers on the map. Therefore it defaults to that spot in the Pacific when you later call map.fitBounds(bounds). You need to extend the bounds after each of the markers are added.
var myLatlng = new google.maps.LatLng( 32.533470 , -87.786118 );
bound.extend(myLatlng);
...repeat for each marker.
should do the trick

that location is the center of the map, probably meaning that the location wasn't found. Maybe an incorrect syntax somewhere?