We Keep Coding

combining overlays in mapbox / leaflet layers control

I'm trying to combine 2 or more overlays into one overlay checkbox. I'm using leaflet layers control with mapbox.js 1.6 to toggle my overlays. It doesn't matter to me if I combine them on mapbox.com into one data layer, or if I combine separate data layers in my JS code into one overlay checkbox, but I can't seem to do either. I'm exporting MBTiles from Tilemill to my Mapbox account.
Note that it's not an option to:
combine them in Tilemill (the single zoom level and square bounding box won't work for me across all layers)
add the various data layers to a single map project on Mapbox.com (I'd like it to be toggleabe by the user)

You can use L.layerGroup to combine layers
var group = L.LayerGroup([layer1, layer2];
// add default layers to map
map.addLayer(layer1);
// switcher
var baseLayers = {
"My Group": group,
// more layers
};
// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);
You may be interested in this thread Leaflet layer control for basemap group layers

You can use the L.control.layers with the L.layerGroup. Here is the JSFiddle I wrote for this. You can add as many base or overlay layers you want.
Once you create the L.layerGroups, define the base and the overlay layers and add them to the control like this:
var controlLayers = L.control.layers(baseLayers, overlayMaps).addTo(map);

Creating a custom control.layers class in leaflet

I have a page that displays maps using leaflet.js with many different base layers and overlays. I'd like to have separate layer controls for selecting the base maps and the overlays, and for the controls to have different icons.
To accomplish that I'm trying to on add a setButtonClass method to leaflet's L.control.layers that I can call after placing my 2nd button on the map, which would change its class and allow me to give it different styling.
So I'd initialize the controls like this:
var baseLayersControl = L.control.layers(baseMaps, null, {position: 'bottomright'});
var overlayControl = L.control.layers(null, overlayMaps, {position: 'bottomright'});
baseLayersControl.addTo(map);
overlayControl.addTo(map);
overlayControl.setButtonClass();
However, I can't get setButtonClass to change the class the way I want. I added this to leaflet-src.js:
setButtonClass: function () {
this.className = 'leaflet-control-layers2';
},
And added styling to leaflet.css for the leaflet-control-layers2 class and related classes with my new icon, but right now I'm just getting two standard layer controls on the map.

Have you checked out Leaflet.groupedlayercontrol? It groups and labels your layer control by base maps and overlays. I'd check there first and then see how you might be able to create two separate icons for base layers and overlays.

Cannot add a standard map marker to a google map with heatmap layer

I have a map with a heatmap utilizing the google visualization heatmap layer
jsfiddle here
If I try and add a normal map marker it fails with an uncaught type error somewhere in the google api.
The marker.setMap(map) line seems to happen, (inspecting the marker, it has a map property) but whatever this triggers on the map itself seems to fall over.
I've tried unsetting the heatmap layer before setting the marker, even tried not initialising the heatmap layer with the same results.
I'm beginning to think that by including the visualisation library I am losing the ability to add a map marker. If this is the case has anyone come across a workaround?

You initially create the marker without a map-property, currently the marker will appear when you click somewhere (not only on the marker), because the lnk-variable will be set to document, not to the link:
var lnk = $(document, '.marker_toggle')
but it should be only:
var lnk = $('.marker_toggle')
Demo: http://jsfiddle.net/doktormolle/Avxap/

html instead of google maps marker image

Is it possible to display HTML instead of an image as a Google Maps Marker ?
What is the best way to do so?
I imagine that something like an invisible marker and a custom info-window might play a role in achieving this

You can use OverlayView class to create custom overlays with html elements - https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
Simple example - http://jsfiddle.net/BCr2B/

You might want to check this out: https://github.com/jonyt/gmaps-div-overlay
DivOverlay is a very simple container for HTML to be shown over a
Google Map at any position. All it does is calculate margins from the
map bounds so its entire contents are within the map. Take a look at
the demo. The constructor takes 3 arguments: the HTML container, the
map to attach to and the position of the overlay. DivOverlay has only
two functions: show() and hide(). Should be self-explanatory.

How to override or remove a control in Google Map API

I was playing with Google maps for last two days and started understanding little bit about its functionality.
I was using Large Map i.e. 700 X 300 resolution map size and i was trying to implement controls used in small maps.
eg.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 18);
map.setMapType(G_HYBRID_MAP);
**map.setUIToDefault();**
map.enableContinuousZoom();
var customUI = map.getDefaultUI();
customUI.controls.smallzoomcontrol3d=true; //1. trying to override largezoomcontrol3d
customUI.controls.menumaptypecontrol=true; //2. trying to override largezoomcontrol3d
map.setUI(customUI);
map.enableRotation(); //3. Enabling rotation
Here in 1(a). Small zoom control is not getting visible until i remove the line map.setUIToDefault() and add one more line customUI.controls.largezoomcontrol3d=false. Although I was expecting that by writing above code those control will get overridden.
1(b). I tried to use map.removeControl(Control:GControl) where i was not able to pass the correct parameter. I wanted to remove largezoomcontrol3d from map but i was not able to make out how to refer to this control in the current map.
Same overriding problem is occuring here also. The only difference here is that both the controls are visible here menumaptypecontrol and maptypecontrol, here menumaptypecontrol is overlapping on maptypecontrol
I am trying to enable rotation on map but it is not working for me.

thinking about map.removeControl you were quite closely to solution (if I got what you need). take a look here:
Controls
so, you need just use map.addControl function to add exactly what you need instead of what you did.
sorry, forgot about map rotation. I think the following simple example of Google Map can help you (I just never played with rotation, but example looks very simple to learnt from it):
Google Map rotation example