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.
]

D3.js mouseover not active when markers too close together

I have developed a google map which uses image markers. I want to display an information box when the cursor is over the marker but when markers are close together (not necessarily overlapping) the information box does not display.
What controls the minimum distance between markers required for mouseover to be activated?

Each of your markers is an <image> inside its own <svg>. The images may only be 16px*16px, but the SVGs are 160px*20px, and that entire area is grabbing mouse events. When your markers are close together, that means that an invisible portion of the SVG for one marker is blocking the mouse event from passing through to the visible marker below.
Changing the CSS to ignore mouse events on the <svg>, and only respond on the visible parts of the <image> seems to get things working as expected:
.members svg {
pointer-events: none;
}
.members svg image {
pointer-events: visiblePainted;
}

How to identify google maps marker on the map

I have a list of google maps markers as html links next to a google map. I have the function that is triggered when I click on the link. Marker ID is passed to this function.
My question is - when I have 100 markers, I want somehow IDENTIFY the clicked marker on the map. Some sort of ripple effect that would go away from the marker.
please advice what are my possible options so I could develop appropriate solution
Example: 100 markers already on the map. I also have 100 names on the left. Each name corresponds to each marker. When I click the name, I want the marker that belongs to that name somehow "blink" or identify itself in some other way among other markers.

before the markers was pin on the map
you need to set a global markers variable
var gb.markers = [];
while you create each marker need to push into global marker array
marker = new google.maps.Marker({
// other stuff
'id': marker.id
});
after you done with assign function to marker, push it into global var
gb.markers.push(marker);
make sure when you click on marker will get marker id
and loop the global markers or make marker array with id as index

A ripple effect would be quite complicated, possibly involving positioning of a 'GroundOverlay' object centered around the marker you wish to highlight.
If your goal is just to be able to highlight the marker, perhaps playing a simple animation using 'Marker.setAnimation(animationObject)'. You could perhaps using 'Animation.BOUNCE' to highlight the marker?

Google Maps: Display the current users location with a custom marker

I have the following example that displays the current users location on a Google map: http://dev.driz.co.uk/googlemap/
As you can see I have three pieces (I have borrowed Foursquare icons for the demo):
1.) The marker where the user is located
2.) The avatar of the user (note this may changed dependant if the user is logged in or not and has a custom avatar or just has the mystery man)
3.) The avatar frame that sits on top of BOTH the avatar and the marker.
What I want to do is make it so that the avatar sits nicely inside the frame perhaps as a background image instead if that's possible? Not seen anything in the docs about this, but the frame needs to be above the avatar so it creates the rounded corners mask.
And also I want them to fall down all together as sometimes the frame appears below the marker dot and not always on top as it should be. So they need to act as one piece and drop at the same time.
Can anyone with Google Map knowledge help me out with these two parts? Thanks

There are a couple things worth noting about the entire animation as it stands:
Marker z-index is inconsistent during animation since it is not set until the marker is in its final position, so the only thing you can really do to control that during the drop is to order your calls to each marker's setMap function as best as you can to coax them to stack in order while dropping. That means calling the back-most object's function first, proceeding to closer images in the stacking order. Once the animation is done, however, they will invariably be in the correct order.
In order to control the order of the setMap calls, you're going to have to uniquely name the variables that store your Marker objects.
Markers aren't added to the map and animated until they load, so it would probably be best to create image objects in code and pre-load your images, then set the marker animation as a callback from the onload event once they're all finished.
Even with all this in place, the images are still going to drop individually so it may not have exactly the effect you're looking for, but this is probably the way to get it as close as can be managed.
Setting Z-Index
First, the z-index of your markers can be easily set as one of the MarkerOptions you pass in to the Marker constructor:
var marker1 = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: pos,
map: map,
icon: image1,
zIndex: 1
});
Setting Icon Anchoring
Next, to change the positioning of the image you provide to the marker, the MarkerOptions object can contain MarkerImage as its icon member, so use this object to indicate the anchor of your icon:
var image1 = new google.maps.MarkerImage(
"http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png",
null,
null,
new google.maps.Point(16, 49));
The second and third parameters are optional and will be constructed for you if not specified, so we are really only interested in providing a value for the anchor parameter.
Creating an Image OnLoad Callback
If you're going to pre-load the images, which I highly recommend, do so by creating three image objects, binding an OnLoad handler to each object, and then setting the image's src property—in that order. Your code to create markers and add them to the map should only happen once all three images have loaded.
// Create image objects to force pre-loading
var domImg1 = new Image(),
domImg2 = new Image(),
domImg3 = new Image();
// Instantiate variables for iteration
var images = [domImg1, domImg2, domImg3],
j = 0;
// Bind an OnLoad handler that checks to see if all three images have been pre-loaded
for (i in images) {
images[i].onload = function() {
if (++j == 3) {
// Create markers and add to map here
}
}
}
// Set the src property to start the download and trigger the onload events
domImg1.src = "http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png";
domImg2.src = "http://dl.dropbox.com/u/1597153/pin-white.png";
domImg3.src = "http://dl.dropbox.com/u/1597153/marker.png";
I've provided a working demo of the techniques I've demonstrated here on this Fiddle, so check it out and it will hopefully give you an idea of how it comes together.

setCenter() and then move marker vertically higher on the map canvas

I have a simple question, and hopefully there is a simple answer . . . I just can't find it after a couple of hours of searching.
I've got a standard google map with a bunch of markers. I have a click event on each marker so that when clicked, the map pans the marker to the center and zooms in on it. No issues there.
Now I want to change the event handler so that when a marker is clicked the map recenters so that the marker is centered horizontally, but it is vertically towards the top of the map canvas. Is there a relatively straight forward way of doing this that works across different zoom levels?
Thanks,
Chuck

There may be many ways, e.g.
google.maps.event.addListener(marker, 'click', function() {
this.getMap().setCenter(this.getPosition());
this.getMap().panBy(0,(this.getMap().getDiv().offsetHeight/2)+this.anchorPoint.y);
});
It puts the marker in the center and then pans the map vertically by (mapHeight/2-markerHeight)

You could also muck around with getProjection() and the fromContainerPixelToLatLon and fromLatLonToContainerPixel to set a specific position within the viewable point of the math.
Both of those will give you pixel measurements from the <div> element you're using as the map canvas.
c.f. fromDivPixel and ToDivPixel which will give you the pixel position of the item on the infinite div of the map. Say you've got your map focussed on Africa, right? And you've got a pin in NYC. Using the *DivPixel* variants will keep your pin in NYC, and then you can pan towards it. Using *ContainerPixel* will move your pin into view on the map regardless of whatever Lat/Lon you've set it to.