Develop Reference

is it possible to use leaflet version 1 with custom mapbox style?

This generates an error
leaflet.js:5 Uncaught TypeError: Cannot read property 'call' of
undefined
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<!-- Mapbox GL -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.css" rel='stylesheet' />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.3/mapbox-gl.js"></script>
mapboxgl.accessToken = YOUR_KEY;
var map = new mapboxgl.Map({
container: 'map',
style: YOUR_STYLE_URL
center: [0, 0],
zoom: 0
});

As far as i know that impossible, however Mapbox.js (built on Leaflet) supports style url's via L.mapbox.styleLayer since version 2.3.0:
L.mapbox.accessToken = YOUR_ACCESS_TOKEN;
var map = L.mapbox.map('map').setView([38.97416, -95.23252], 15);
// Use styleLayer to add a Mapbox style created in Mapbox Studio
L.mapbox.styleLayer('mapbox://styles/mapbox/emerald-v8').addTo(map);
See: https://www.mapbox.com/mapbox.js/example/v1.0.0/stylelayer/

Your question was about using leaflet 1.0 with mapbox styles, so I'll answer that (though you accepted an answer for using mapbox.js) .
The new mapbox style studio raster tiles are 512x512 pixels. You need to set up both tileSize and zoomOffset to make the tiles work correctly in leaflet.js , otherwise the tiles will look too small.
var myCenter = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: myCenter, zoom: 15});
var positron = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v8/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidHJpbGxpdW10cmFuc2l0IiwiYSI6ImVUQ2x0blUifQ.2-Z9TGHmyjRzy5GC1J9BTw', {
tileSize: 512,
attribution: '© OpenStreetMap contributors, © CartoDB',
zoomOffset: -1
}).addTo(map);
Here you can test it: http://playground-leaflet.rhcloud.com/moy/edit?html,output

How to prevent leaflet from loading tiles outside map area?

I have a map that is 8576x8576, and I keep getting console errors:
Failed to load resource: net::ERR_FILE_NOT_FOUND
Because leaflet are trying to load tiles that doesn't exists.
I have my bounds set and MaxBounds to prevent panning outside map area (to keep map on the center of the screen).
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.MySimple
}).setView([0, 0], 3);
L.tileLayer('assets/map/{z}_{x}_{y}.jpg', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tileSize: 268,
noWrap: true,
reuseTiles: true,
tms: false,
bounds: mybounds,
errorTileUrl: "assets/map/404.jpg",
continuousWorld: true
}).addTo(map);
new L.Control.Zoom({position: 'topright'}).addTo(map);
var sidebar = L.control.sidebar('sidebar').addTo(map);
var mybounds = [[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]];
map.setMaxBounds([[-5600, -5600], [5600, 5600]]);
What I am doing wrong? Why leaflet keeps trying to load those tiles?
I tried to set MaxBounds like this:
map.setMaxBounds([[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]]);
And still get those errors.

You need to define mybounds before creating your tilelayer. If your bounds lie exactly on the edges of your tiles, you may also need to bring the bounds in by a tiny amount to keep the map from trying to load adjoining tiles. Here is an example with OSM tiles:
http://fiddle.jshell.net/nathansnider/2g4h5eu5/

Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.

Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.
My custom-styled map pulls from a KML file with about 20 Placemarks.
For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.
Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).
I think I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.
Thank you in advance!
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Thanks to #SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position,
pixelOffset: new google.maps.Size(300, 0),
})
infowindow.open(map);
}

antyrat posted about this with an infoWindow to the right of the marker here:
Googlemap custom infowindow
See the link in the accepted answer.
EDIT: Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX
var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map});
});
}
Google Maps API says:
Additionally, a click on a KML feature generates a KmlMouseEvent,
which passes the following information:
position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally
the clicked location for polygons, polylines, and GroundOverlays, but
the true origin for markers.
pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically
0,0 but for markers includes the height of the marker.
featureData contains a JSON structure of KmlFeatureData.
See this page for more info: KML Feature Details

LeafletJS: How to remove the zoom control

I'm trying to remove the zoom controls (+/-) on a LeafletJS map.
I'm using the MapBox.js version of Leaflet but most of the operations are the same as Leaflet. I implement my map like this:
var map = L.mapbox.map('map');
var layer = L.mapbox.tileLayer('MAPBOX-ID', {
format: 'jpg70',
minZoom: 13,
maxZoom: 15,
reuseTiles: true,
unloadInvisibleTiles: true
});
map.addLayer(layer);
map.setView([40.73547,-73.987856]);
The documentation says there's a zoomControl option that will remove the zoom control from the map but I've had no luck in getting it to work.
How can I remove the zoom control with this implementation?
Thanks!

This worked for me:
var map = new L.map('map', { zoomControl: false });
With mapbox try:
var map = L.mapbox.map('map', { zoomControl: false });
See map creation and the zoomControl option in the Leaflet documentation.

If you want to dynamically turn on and off zooming you can do something like this:
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
$(".leaflet-control-zoom").css("visibility", "hidden");

Thanks to coordinate's answer I was able to figure out the correct method. The solution is:
// Create the map
var map = L.mapbox.map('map', null, { zoomControl:false });
// Create my custom layer
var layer = L.mapbox.tileLayer('MAPBOX-ID', {
format: 'jpg80',
minZoom: 13,
maxZoom:15,
tileSize: 256,
reuseTiles: true,
unloadInvisibleTiles: true
});
// Add the layer
map.addLayer(layer);

you can remove the control zoomControl in this way:
map.removeControl(map.zoomControl);

You can just use
map.zoomControl.remove();

map.scrollWheelZoom.disable();

To dynamically remove then add back the zoom control:
var map = L.mapbox.map('map');
if( wantToRemove ) {
map.removeControl( map.zoomControl );
} else {
map.addControl( map.zoomControl );
}

Removing all controls from a google map

I am trying to remove all the controls (zoom, map type drop down, and street view) from my map.
There's a method
map.removeControl(GControl)
but I haven't been able to successfully remove any default ones that I hadn't added myself.
Any tips on remove/clearing all controls from the map?

Have you tried this:
http://code.google.com/apis/maps/documentation/javascript/controls.html#DisablingDefaults
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

You may see this: google map api by w3schools
As you see in the link, this disables all controls:
var mapOptions = {disableDefaultUI: true}
and the bellow is the options to make them enabled or disabled.
var mapOptions = {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}

just disableDefaultUI: true
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
disableDefaultUI: true
});
}

I believe you can create a copy of the GMapUIOptions object and then remove the items you don't want to appear.
From http://code.google.com/apis/maps/documentation/javascript/v2/controls.html#MapUIOptions
"Using the GMapUIOptions Object
The GMapUIOptions object contains a set of properties that specify control placement and UI behavior, which you may modify. For a full set of properties, see the GMapUIOptions reference.
Rather than write a GMapUIOptions structure from scratch, you may wish to prepopulate it with the UI behavior available on Google Maps. To do so, use the GMap2.getDefaultUI() method. Once populated, you can modify individual properties to tweak the behavior and initialize the map's UI controls using the GMap2.setUI() method.
The following code retrieves the default UI on a "large" map, removes the GScaleControl and resets the map to use the modified UI.
map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(400,150) } );
map.setCenter(new GLatLng(41.897997,-87.790203), 11);
var customUI = map.getDefaultUI();
customUI.controls.scalecontrol = false;
map.setUI(customUI);
"