Leaflet load different tiles when out of boundary

Question

I actually own a set of map tiles for a particular country but not for other places.

I would like to ask if it is possible for Leaflet to load a different set of tiles(lets say openstreetmap) if the user moves out of my maptile boundaries?

Lets say user views my country, it would use my maptiles... while lets say user goes to Australia, Leaflet would use openstreetmap tiles instead?

Thanks in advance.

Answer 1

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
    }
});