We Keep Coding

Overlaying a text box on a leaflet.js map

This might seem a very simple question, but I've searched elsewhere for the answer with no luck!
How do I overlay a simple text box on to a Leaflet map that loads when the map loads (not fixed to any point on a map) - for example, to give a title and more information within the actual map object. Nothing fancy.

I know this is old, but here's some sample code, CSS as necessary:
L.Control.textbox = L.Control.extend({
onAdd: function(map) {
var text = L.DomUtil.create('div');
text.id = "info_text";
text.innerHTML = "<strong>text here</strong>"
return text;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.textbox = function(opts) { return new L.Control.textbox(opts);}
L.control.textbox({ position: 'bottomleft' }).addTo(map);

You have two simple options, extend a new L.Control and place it in one of the four corners of the map window with content created inside the onAdd method, or place a L.DivIcon anywhere on the map alongside a L.Marker, by either geographical coordinates or coordinates based upon the dimensions of the container.Making it "box" like would just include a small bit of CSS as you see fit, like some padding,background-color, etc.

Google map hide hand icon

I am using google maps api V3, I am currently showing custom markers as dots of 6x6px and whenmousehover them I am showing infowindow.
I have set cursor to default on the map and on the markers aswell, now when I mousehover on the marker and then I move mouse towards infowindow for a fraction of second it shows hand cursor, which looks quite ugly when I have quite a few markers on the map, I need to avoid this, please let me know how I can avoid this.
Here is my jsfiddle Here hover on bluedots which are markers from bottom to top and you will see little flicker, I don't want to show handicons at all ... I just want default cursors
This is how I have create infowindow
var infowindow = new google.maps.InfoWindow({
content: "infowindow",
cursor: 'default',
});

This CSS has solved my problem...
#map div {
cursor:default !important;
}

I believe this may be a "bug"/"characteristic" of Google Maps API. What is happening is that when moving the cursor upward vertically, it moves off the Marker and onto the transparent bounding box of the InfoBox. However, your MouseOut handler for the Market then removes the InfoBox off of the map.
So the Google Maps API has to then decide what to do when the cursor is over an element that is removed. It SHOULD pick the cursor that you defined as the default in the MapOptions; but it does not. I used both FireFox's and Chrome's Element Inspectors, and saw repeatedly that when the InfoBox got removed, Google Maps API explicitly set the active cursor to the "Hand" instead of leaving it as the "default" in a primary child 'div' of the map.
I added a document.body.style.cursor definition to your initialization code in the JSFiddle just to make sure the Browser itself was not confused about the cursor:
$(document).ready(function () {
mapObjects.domReady = true;
document.body.style.cursor = "default";
});
Even with that added, using the Element Inspector say in Chrome, you will see that the 'div' immediately below the 'div class="gm-style" ...' gets its cursor style explicitly changed to a 'url' of the hand when the InfoBox gets removed. Move the cursor just one pixel more, and the cursor style of that 'div' gets reset back to "default" by the Google Maps API.
So the problem is not with Browser inheritance of the cursor style. The Google Maps API is itself overriding the cursor style for that child 'div', and all its child 'divs', of which the map images are a part (and which the cursor is resting over when the InfoBox gets removed).
You should of-course file a bug report with Google. Maybe they'll fix this in V4 of the Google Maps API.
One possible work-around:
You might try re-positioning the InfoBoxs so they are three, five, or more pixels away from the Marker, and off-center say to the right or left of the Marker. Then when the cursor moves off the Marker (and triggers the MouseOut and the InfoBox removal) its not on top of the hidden portion of the InfoBox, but rather over a Map image tile. Thus it will behave just like moving off the Marker to the right, left, or bottom does now, and won't get overriden by the InfoBox removal. However, if the end-user is moving the cursor fast, or in the direction of the now off-center InfoBox, you'll still get the hand cursor appearing.
Another not really recommended possible work-around:
a. Do the first recommendation (the gap between Marker and InfoBox).
b. Get a handle to that particular 'div' by stepping through the immediate children of the "gm-style" div.
c. In the MouseOut handler, use a SetTimeout with a very short millisecond interval to re-override that 'div's' cursor style back to "default".
This would get rid of the hand cursor even during a fast cursor move over the off-center InfoBox. You'll still get a slight flicker, but it won't stay a hand cursor that way if the end-user stops moving the cursor. But that is monkeying deep into Google's map 'div' structure, and this work-around is not going to be reliable long-term.

Your solution is correct and the issue is with the marker icon being an image. Try changing that using google.maps.symbols
I have created a custom SVG path for your marker on your fiddle and it worked but the infoWindow is still flickering though.
Here is the icon symbol object
icon: {
path: 'M0,0 10,0 10,10 0,10 Z',
scale: 1,
fillColor: '#076EB5',
strokeColor: '#076EB5',
fillOpacity: 1,
}
Nice documentation on the symbols here

Center Google Maps (V3) on browser print

I have a map set to 100% of the page width. The map has one marker and is centered on that marker. When I print the browser, I want the map to stay centered on the marker. This is the code I wrote to do so:
var lastPos = map.getCenter();
google.maps.event.addListener(map, "idle", function() {
lastPos = map.getCenter();
console.log(lastPos.toString());
});
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.setCenter(lastPos);
console.log("Re-center on " + lastPos.toString());
});
This works when I re-size my browser, but does not work when the browser re-sizes itself before printing. If my browser is above a certain width then the marker is shifted entirely off the page (to the right) when the map is printed.
Here is my test case: http://www-sf.talispoint.com/testmapprint.html

You would need to add a #media print and give the map the size when printing and then you can do what is explained below.
When a map is printed what happens is that the top left corner is kept and the map is adjusted to fit the #media print size.
If you want the center to stay the same you need to manually change the center of the map.
http://jsbin.com/owiwox/33 is an example on how to work around this.
It uses a listener for the print media being applied event and adjusts the center of the map using a ratio on how the map is changed (made smaller)
One thing that you have to take care of is that you might have to make this browser targeted to make it work on all browsers (This solution works well in Chrome)
A good resource for making it work across browsers is:
http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/
The js code from the sample above listens to print requests and shifts the map so that the top left corner has the same center as the big map.
To cut the whole story short, this is how it works
You need to put in the ratio of the map vs printed map (or get the size by checking it from JS)
You assign it to:
var widthRatio = 2;
var heightRatio = 3;
You listen for print media being applied and shift the center so that it does not change
After you finish print , you revert the change.
Still here you have the problem that a part of the map will be cut, but there is not a good solution here, since the zoom level -1 tiles might not be cached so when you zoom out to fit bounds you might get no tiles.

It seems the problem with your 'printing' or 'printer'.
I did a test:
load the test map and make the browser very wide
print preview and saw the problem you described
But: I can change the printing scale from 'Shrint to fit' (default for IE and FF) to say 30% and was able to print the map as seen on the screen.
Another thought is:
You may try to use another CSS for print to limit the map div width, but I am not sure if that will trigger the resize of the map first (you may refer to this post: Javascript Event Handler for Print)

How to set default view in OpenLayers, WITHOUT restricting bounds?

Based on samples, I can see that you can set a default view in OpenLayers by saying something along the lines of:
var bounds = new OpenLayers.Bounds(-125, 25, -65, 50);
var map = new OpenLayers.Map('map', {restrictedExtent: bounds });
However, this also (as the name implies), restricts me to be able to ONLY navigate within these bounds. I can zoom out and see things outside of these bounds, but I can't then zoom back onto them, or scroll to them.
I've tried not having any restrictedExtent (or making it the entire map), but then I can't get it to focus on the area I want. I tried using:
map.setCenter(new OpenLayers.LonLat(0,0), 3);
console.log(map.getCenter());
To set the zoom and the center...but it doesn't seem to do ANYTHING, other than set the variable "center" which I can then read from map.getCenter() (if I don't set it, it's null, if I do set it, I can see it...but the map itself stays fully extended and it's center doesn't seem to change at all...)
The Map layer I am using is:
OpenLayers.Layer.OSM.Mapnik
with displayOutsideMaxExtent set to true... I'm really at a loss here.
My goal is to have a default region of the world zoomed in to and in view (such as the United States), with the option of viewers being able to go outside the default to view things.

I think I've figured it out. For whatever reason, the zoom was never changing, but the center apparently WAS moving (it was just so zoomed out I couldn't tell). Add to the fact that I needed to transform the center to use the google projection, and it seems to work just fine.
What I ended up doing was:
var lonlat = new OpenLayers.LonLat(20,37).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
map.setCenter(lonlat);
map.zoomTo(4);

Scalable google maps overlay

Is it possible to add an image overlay to a google map that scales as the user zooms?
My current code works like this:
var map = new GMap2(document.getElementById("gMap"));
var customIcon = new GIcon();
customIcon.iconSize = new GSize(100, 100);
customIcon.image = "/images/image.png";
map.addOverlay(new GMarker(new GLatLng(50, 50), { icon:customIcon }));
However, this adds an overlay that maintains the same size as the user zooms in and out (it is acts as a UI element like the sidebar zoom control).

There is a zoomend event, fired when the map reaches a new zoom level. The event handler receives the previous and the new zoom level as arguments.
http://code.google.com/apis/maps/documentation/reference.html#Events_GMap

You might want to check out openlayers
It's a very capable Javascript API - it supports a bunch of back ends, allowing you to transparently switch between, say, Google Map tiles and Yahoo Map tiles.

Well after messing around trying to scale it myself for a little bit I found a helper called EInserts which I'm going to check out.
Addition:
Okay EInserts is about the coolest thing ever.
It even has a method to allow you to drag the image and place it in development mode for easy lining up.