Figured this out on my own. Here's how to do it.
Start off as per usual by creating DIV with id="map"
/* Initialize map in mapViewer */
/* Requires a DIV with id="mapViewer" */
var mapViewer = $('#mapViewer'); //Find mapViewer DIV
mapViewer.append('<div id="map"></div>'); //add map DIV within
Now assign map1 as the complete world map and map2 as your own custom map
//openstreetmap
var map1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
//Your map tiles
map2 = L.tileLayer('http://yourMap/Tiles/{z}/{x}/{y}.png');
Set bounds equivalent to the size of your map. Take the latlng of the bottom-left and top-right of your map. Easy way is to use GoogleMaps and click on those points to get latlng.
var southWest = L.latLng(x.xxxxxx, xxx.xxxxxx),
northEast = L.latLng(x.xxxxxx, xxx.xxxxxx),
mapBounds = L.latLngBounds(southWest, northEast);
Set maximum amount the map can zoom and add map1 to #map as your base layer.
var map = L.map('map', {
maxZoom: 18, //Set maximum amount the map can zoom
});
map.attributionControl.setPrefix('');//remove Leaflet attribution
map1.addTo(map);
Now comes the logic to make this work. At the end of every zoom, if you have mapBounds within your current view, add map2 on top of your base layer. Else remove map2 since you are not looking at it.
The additional getZoom if loop
is optional and should only be included if you want your user to use map1 when he/she zooms out too much.
map.on('zoomend', function() { //end of zoom
if(map.getBounds().intersects(mapBounds)){ //if view intersects bounds
map.addLayer(map2); //add map2
if(map.getZoom()<=11){ //if current zoom less than or equals to 11
map.removeLayer(map2); //remove map2
}
}else { //else view does not intersects bounds
map.removeLayer(map2); //remove map2
}
});
Now do the same when user drags the map. This is to ensure that leaflet doesn't load map2 when user drags the map out of view and loads map2 when user drags until his/her view is within your bounds.
Once again, the additional getZoom if loop
is optional and should only be included if you want your user to use map1 when he/she zooms out too much.
map.on('dragend', function() { //end of dragging
if(map.getBounds().intersects(mapBounds)){ //if view intersects bounds
map.addLayer(map2); //add map2
if(map.getZoom()<=11){ //if current zoom less than or equals to 11
map.removeLayer(map2); //remove map2
}
}else { //else view does not intersects bounds
map.removeLayer(map2); //remove map2
}
});