Develop Reference

How move leafle control layers to above map?

I have a leaflet map, I use this Leaflet-Ruler plugin and add ruler control layer to map in this link. I want move ruler control layers to above map as shown as:
How Can I do?

Just need move one DIV element inside another DIV with JQuery $("#source").appendTo("#destination"); for example I move DIV ruler control that class name was leaflet-ruler move to the my special DIV <div id='move-control-layer-ruler-to-here'></div> .
You can move any control layer leaflet to any DIV.
This link is jsfiddle solved my problem.
]

How to stop flickering of Markers on mouseover and onmouseout events in react-google-maps?

I'm using React.js and react-google-maps to implement this. I'm trying to display the InfoWindow on Hovering any Marker and hiding when mouse leaves the Marker.
Here's the link for code. (https://codesandbox.io/s/loving-microservice-88oop)

It's quite simple actually.
Let's go through this together.
You are hovering the element
The element gets visible, you are now with your mouse cursor over the element
Because you are now no longer hovering the marker (you are now actually hovering the popup) the popup get's hidden.
Now that the popup is hidden you are basically starting from 1) again
How to prevent this:
Option 1: Change your hover so that it's also applied to the popup and not just for the marker
Option 2: Change the markers position. You can do this by changing this line (line 36 in your example):
position={{
lat: selectedPark.geometry.coordinates[1] + 0.0500,
lng: selectedPark.geometry.coordinates[0]
}}

I solved this by using pixelOffset option available as props. In the other answer, It was using lat as offset but when we zoom, it no longer persists in that position.

Leaflet map with popup above legend

I have a situation where I have a map with a custom legend formatted as either an SVG or a PNG. The legend is always placed in the bottom left corner but can be quite large (user can turn it off and on).
The map also has many markers. Each marker will have a tooltip, which can also be large-ish. Tooltips show when the mouse is hovering over the marker. The problem arises when a user hovers over a marker close to the legend - the tooltip appears behind the legends. I'd like to make it so the popups appear above the legend. So, from bottom to top: marker, legend, marker popup.
Here is a JSFiddle https://jsfiddle.net/e51mydwa/9/ to describe what I mean. I add the legends in the same way, although the < div id="legend"> tag contains a < img> or < svg> in reality.
<div id="map">
<div id="legend">
I am Legend
</div>
</div>
I've had a look at http://leafletjs.com/examples/choropleth/ , but as you can see by inspecting the DOM, this will suffer the same problem, as the legend is added into the same div as the leaflet controls, which is always above the map layers (as it should be, controls should always be at the top).
I've also tried inserting the legend into a div which is on a sibling layer to the popup containing layer. This fixes the z-index issue, however the parent div of both of these contains a transform which changes as the user drags the map around - meaning the legends change places and aren't static.
Any and all suggestions appreciated.

This requires some heavy hacking, due to the architecture of the Leaflet layers and controls.
One possible approach is to make a custom layer class which stays in a static position, by repositioning its pixel offset at every change of the map's view.
I heartily recommend reading the Leaflet tutorials, in particular the one about map panes and the one about custom layers, to understand how this works.
// Create a 'static' map pane
L.Map.addInitHook(function(){
this.createPane('static');
this.getPane('static').style.zIndex = 675;
});
// Define a custom layer class
L.Layer.StaticOverlay = L.Layer.extend({
onAdd: function(map) {
this._map = map;
var pane = map.getPane('static');
this._container = L.DomUtil.create('div');
pane.appendChild(this._container);
// styling, content, etc
this._container.style.background = 'white';
this._container.style.width = '100px';
this._container.style.height = '50px';
this._container.innerHTML = 'Hi!'
map.on('move zoom viewreset zoomend moveend', this._update, this);
this._update();
},
onRemove: function(map) {
L.DomUtil.remove(this._container);
map.off('move zoom viewreset zoomend moveend', this._update, this);
},
_update: function() {
// Calculate the offset of the top-left corner of the map, relative to
// the [0,0] coordinate of the DOM container for the map's main pane
var offset = map.containerPointToLayerPoint([0, 0]);
// Add some offset so our overlay appears more or less in the middle of the map
offset = offset.add([340, 220]);
L.DomUtil.setPosition(this._container, offset);
}
});
When that's defined, you can simply
var static = new L.Layer.StaticOverlay().addTo(map);
Obviously there are some bits missing, such as how to position the overlay properly (get the map pixel size with getSize(), do the proper arithmetic), and how to set the contents of the overlay with some custom options in the layer constructor.
These are left as an exercise to the reader :-)
See a working example here.

Setting click priority on google maps polygon array

I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!

The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).

Googlemap Marker - Image Fade

I'd like to access the image object of a googlemap marker. Does anyone know where it exists in the marker object?
Regards,
Ash
EDIT: I'm asking for the HTML DOM Image object, not the MarkerImage object.

Don't know how to access the image object directly from the marker object.
What makes it hard to access the image objects is that Google Maps V3 does not assign ids to the divs the enclose the img elements.
However, it is possible to dig through the DOM and find the individual divs that wrap img elements.
A marker can have multiple images associated with a single marker, including: the icon image for the marker, shadow, tooltip.
Each of these are in different divs in the map canvas div, for example the icon image is in a div with z-index = 103.
The problem remains of how to find individual markers. One way (not optimal) is to assign a zindex to the marker when creating the Marker.
If you are using jQuery, you can then select and fade the marker by using fadeOut or setting the opacity, e.g.
$('div[style^="z-index: 103;"] div[style*="z-index: 123"]').css({ opacity: 0.5 });
where 123 is the zindex you set on the marker.

http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
marker.getIcon()