Repeated tiles when switching from OpenLayers to Leaflet - leaflet

Question

I am trying to change an OpenLayers 2 call to Leaflet, but when I do the map is displayed fine at zoom level 0, but every time I zoom in, the map doubles from the previous number. Any suggestions as to why? Here is a picture to what its doing.
OpenLayers 2 map options
var options = {
projection: new OpenLayers.Projection("EPSG:3857"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
controls: [
new OpenLayers.Control.Navigation(
{dragPanOptions: {enableKinetic: true}}
)
]
};
OpenLayers 2 code
var bathyEsri = new OpenLayers.Layer.XYZ(
' ESRI Ocean'
,'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg'
,{
sphericalMercator : true
,isBaseLayer : true
,wrapDateLine : true
,opacity : 1
,visibility : true
}
);
Leaflet Options
var options = {
worldCopyJump: true,
maxBounds: L.LatLngBounds([20037508.34,20037508.34],[-20037508.34,-20037508.34]),
crs: L.CRS.EPSG4326,
center: [39.73, -104.99],
zoom: 0
};
Leaflet Code
var bathyEsri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg');

Answer 1

Your problem is basically a typo.
Your analysis is also misleading: it's not that the map is being "duplicated", but rather every tile being requested is the 0/0/0 tile. If you use the network inspection tools of your browser, you'll see that the tile URL is something like https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/$3/$4/$5.jpg , but the tile image corresponds to the /0/0/0.jpg tile.
If you look at those URLs a bit more closely, you'll notice some "extra" $ signs. Why are those there? Well, consider that you wrote your tilelayer URL scheme as
var bathyEsri = L.tileLayer('http://...../tile/${z}/${y}/${x}.jpg');
But keep in mind that the Leaflet documentation clearly states:
var bathyEsri = L.tileLayer('http://...../tile/{z}/{y}/{x}.jpg');
Change this, and everything will magically start working.